@roadlittledawn/docs-design-system-react 0.6.1 → 0.7.0

package/dist/components/Collapser.stories.js

@@ -1,6 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Collapser } from './Collapser';
 import { CollapserGroup } from './CollapserGroup';
+// Spoofed icon components for demonstration purposes
+// (replace with your own Icon component when available)
+var IconBook = function () { return (_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("path", { d: "M4 19.5A2.5 2.5 0 0 1 6.5 17H20" }), _jsx("path", { d: "M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" })] })); };
+var IconBolt = function () { return (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("polyline", { points: "13 2 3 14 12 14 11 22 21 10 12 10 13 2" }) })); };
+var IconStar = function () { return (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" }) })); };
+var IconSettings = function () { return (_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("circle", { cx: "12", cy: "12", r: "3" }), _jsx("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" })] })); };
 /**
  * The Collapser component creates expandable/collapsible content sections with smooth animations.
  */
@@ -8,10 +14,48 @@ var meta = {
     title: 'Components/Collapser',
     component: Collapser,
     tags: ['autodocs'],
+    argTypes: {
+        title: {
+            control: 'text',
+            description: 'Title text displayed in the collapsible header.',
+        },
+        id: {
+            control: 'text',
+            description: 'Optional ID for the title element, useful for anchor links.',
+        },
+        defaultOpen: {
+            control: 'boolean',
+            description: 'Whether the collapser should be open by default (uncontrolled mode).',
+            table: { defaultValue: { summary: 'false' } },
+        },
+        align: {
+            control: 'radio',
+            options: ['left', 'right'],
+            description: "Alignment of the title within the header. Use 'right' for right-aligned titles, typically paired with an icon on the left.",
+            table: { defaultValue: { summary: 'left' } },
+        },
+        icon: {
+            control: false,
+            description: 'Optional icon or React element rendered on the left side of the header, before the title text.',
+        },
+        stepNumber: {
+            control: 'number',
+            description: 'Numeric step label shown on the far left. Auto-injected by `CollapserGroup` when `numbered` is true. Colour controlled via `--dds-collapser-step-number-color`.',
+        },
+        children: {
+            control: false,
+            description: 'Content to show/hide when toggling.',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS classes.',
+            table: { defaultValue: { summary: '""' } },
+        },
+    },
     parameters: {
         docs: {
             description: {
-                component: "\nThe Collapser component allows users to show and hide content sections to reduce visual clutter.\n\n## When to Use\n\n- For FAQ sections where answers can be toggled\n- To hide advanced options or detailed information\n- For progressive disclosure of content\n- When you have lengthy content that doesn't need to be visible all the time\n\n## When Not to Use\n\n- For primary navigation (use proper navigation components)\n- For critical information that should always be visible\n- When most users will need to expand all sections (just show the content)\n\n## Accessibility\n\n- Uses proper ARIA attributes (aria-expanded)\n- Keyboard accessible with Enter and Space keys\n- Supports additional keyboard shortcuts: 's' or 'f' to show, 'h' to hide\n- Screen reader friendly\n\n## Keyboard Shortcuts\n\n- **s** or **f**: Show/expand the content\n- **h**: Hide/collapse the content\n- **Enter** or **Space**: Toggle expand/collapse\n        ",
+                component: "\nThe Collapser component allows users to show and hide content sections to reduce visual clutter.\n\n## When to Use\n\n- For FAQ sections where answers can be toggled\n- To hide advanced options or detailed information\n- For progressive disclosure of content\n- When you have lengthy content that doesn't need to be visible all the time\n\n## When Not to Use\n\n- For primary navigation (use proper navigation components)\n- For critical information that should always be visible\n- When most users will need to expand all sections (just show the content)\n\n## Accessibility\n\n- Uses proper ARIA attributes (aria-expanded)\n- Keyboard accessible with Enter and Space keys\n- Supports additional keyboard shortcuts: 's' or 'f' to show, 'h' to hide\n- Screen reader friendly\n- Icons passed via the `icon` prop should be wrapped in a container with `aria-hidden=\"true\"` since the title provides the accessible label\n\n## Keyboard Shortcuts\n\n- **s** or **f**: Show/expand the content\n- **h**: Hide/collapse the content\n- **Enter** or **Space**: Toggle expand/collapse\n\n## Customising Step Numbers\n\nOverride the CSS custom property to change the step number colour:\n\n```css\n.my-steps {\n  --dds-collapser-step-number-color: #7c3aed;\n}\n```\n        ",
             },
         },
     },
@@ -67,6 +111,63 @@ export var WithID = {
         },
     },
 };
+/**
+ * Collapser with an icon rendered on the left side of the header.
+ * The icon prop accepts any React element — use your own icon component or SVG.
+ */
+export var WithIcon = {
+    args: {
+        title: 'Documentation guides',
+        icon: _jsx(IconBook, {}),
+        children: (_jsxs("p", { style: { color: 'var(--dds-collapser-text)' }, children: ["Icons help users quickly identify sections at a glance. Pass any React element to the ", _jsx("code", { children: "icon" }), " prop to display it on the left side of the header."] })),
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Collapser title=\"Documentation guides\" icon={<IconBook />}>\n  <p>\n    Icons help users quickly identify sections at a glance. Pass any React\n    element to the icon prop to display it on the left side of the header.\n  </p>\n</Collapser>",
+            },
+        },
+    },
+};
+/**
+ * Collapser with the title right-aligned within the header.
+ * Use this for design layouts where the title should appear on the right
+ * and content (such as a step number or icon) anchors the left.
+ */
+export var RightAligned = {
+    args: {
+        title: 'Right-aligned title',
+        align: 'right',
+        children: (_jsx("p", { style: { color: 'var(--dds-collapser-text)' }, children: "The title is right-aligned in the header, with the chevron remaining on the far right. Long titles will wrap to a new line on small screens rather than colliding with other elements." })),
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Collapser title=\"Right-aligned title\" align=\"right\">\n  <p>\n    The title is right-aligned in the header, with the chevron remaining on\n    the far right.\n  </p>\n</Collapser>",
+            },
+        },
+    },
+};
+/**
+ * Collapser with both an icon and right-aligned title — matching the
+ * reference screenshot layout where an icon anchors the left and the
+ * title text flows to the right before the chevron.
+ */
+export var WithIconRightAligned = {
+    args: {
+        title: 'Quick start guide',
+        align: 'right',
+        icon: _jsx(IconBolt, {}),
+        children: (_jsxs("p", { style: { color: 'var(--dds-collapser-text)' }, children: ["Combining ", _jsx("code", { children: "icon" }), " and ", _jsx("code", { children: "align=\"right\"" }), " produces a layout where the icon anchors the left edge, the title flows to the right, and the chevron stays at the far right."] })),
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Collapser title=\"Quick start guide\" align=\"right\" icon={<IconBolt />}>\n  <p>\n    Combining icon and align=\"right\" produces a layout where the icon anchors\n    the left edge, the title flows to the right, and the chevron stays at the far right.\n  </p>\n</Collapser>",
+            },
+        },
+    },
+};
 /**
  * Collapser containing complex content.
  */
@@ -83,6 +184,20 @@ export var ComplexContent = {
         },
     },
 };
+/**
+ * Shows all four header layout variants side-by-side for visual comparison:
+ * default left-aligned, left-aligned with icon, right-aligned, and right-aligned with icon.
+ */
+export var AllVariants = {
+    parameters: {
+        docs: {
+            source: {
+                code: "{/* Left-aligned (default) */}\n<Collapser title=\"Left-aligned (default)\">\n  <p>The standard layout \u2014 title on the left, chevron on the right.</p>\n</Collapser>\n\n{/* Left-aligned with icon */}\n<Collapser title=\"Left-aligned with icon\" icon={<IconBook />}>\n  <p>An icon appears to the left of the title.</p>\n</Collapser>\n\n{/* Right-aligned */}\n<Collapser title=\"Right-aligned title\" align=\"right\">\n  <p>Title text flows to the right. Chevron stays at the far right.</p>\n</Collapser>\n\n{/* Right-aligned with icon */}\n<Collapser title=\"Right-aligned with icon\" align=\"right\" icon={<IconBolt />}>\n  <p>Icon anchors the left, title flows right, chevron at the far right.</p>\n</Collapser>",
+            },
+        },
+    },
+    render: function () { return (_jsxs("div", { children: [_jsx(Collapser, { title: "Left-aligned (default)", children: _jsx("p", { style: { color: 'var(--dds-collapser-text)' }, children: "The standard layout \u2014 title on the left, chevron on the right." }) }), _jsx(Collapser, { title: "Left-aligned with icon", icon: _jsx(IconBook, {}), children: _jsx("p", { style: { color: 'var(--dds-collapser-text)' }, children: "An icon appears to the left of the title." }) }), _jsx(Collapser, { title: "Right-aligned title", align: "right", children: _jsx("p", { style: { color: 'var(--dds-collapser-text)' }, children: "Title text flows to the right. Chevron stays at the far right." }) }), _jsx(Collapser, { title: "Right-aligned with icon", align: "right", icon: _jsx(IconBolt, {}), children: _jsx("p", { style: { color: 'var(--dds-collapser-text)' }, children: "Icon anchors the left, title flows right, chevron at the far right." }) })] })); },
+};
 /**
  * Multiple collapsers in a FAQ-style layout using CollapserGroup.
  */
@@ -94,5 +209,34 @@ export var FAQExample = {
             },
         },
     },
-    render: function () { return (_jsxs(CollapserGroup, { children: [_jsx(Collapser, { title: "What is this documentation system?", children: _jsx("p", { children: "This is a comprehensive documentation design system that provides reusable components and guidelines for creating effective technical documentation." }) }), _jsx(Collapser, { title: "How do I get started?", children: _jsx("p", { children: "Start by installing the component package, then explore the components in Storybook to understand their usage and configuration options." }) }), _jsx(Collapser, { title: "Can I customize the components?", children: _jsx("p", { children: "Yes! All components accept a className prop for custom styling, and you can override the default styles using CSS." }) }), _jsx(Collapser, { title: "Is this accessible?", children: _jsx("p", { children: "Accessibility is a core principle. All components follow WAI-ARIA best practices and are keyboard navigable." }) })] })); },
+    render: function () { return (_jsxs(CollapserGroup, { children: [_jsx(Collapser, { title: "What is this documentation system?", children: _jsx("p", { style: { color: 'var(--dds-collapser-text)' }, children: "This is a comprehensive documentation design system that provides reusable components and guidelines for creating effective technical documentation." }) }), _jsx(Collapser, { title: "How do I get started?", children: _jsx("p", { style: { color: 'var(--dds-collapser-text)' }, children: "Start by installing the component package, then explore the components in Storybook to understand their usage and configuration options." }) }), _jsx(Collapser, { title: "Can I customize the components?", children: _jsx("p", { style: { color: 'var(--dds-collapser-text)' }, children: "Yes! All components accept a className prop for custom styling, and you can override the default styles using CSS." }) }), _jsx(Collapser, { title: "Is this accessible?", children: _jsx("p", { style: { color: 'var(--dds-collapser-text)' }, children: "Accessibility is a core principle. All components follow WAI-ARIA best practices and are keyboard navigable." }) })] })); },
+};
+/**
+ * Example matching the reference screenshot: collapsers in a group where each
+ * has a distinct icon on the left and right-aligned title text.
+ */
+export var IconGroupExample = {
+    parameters: {
+        docs: {
+            source: {
+                code: "<CollapserGroup>\n  <Collapser title=\"Getting started\" align=\"right\" icon={<IconBook />}>\n    <p>Learn the basics and set up your environment.</p>\n  </Collapser>\n  <Collapser title=\"Quick actions\" align=\"right\" icon={<IconBolt />}>\n    <p>Discover shortcuts and power-user features.</p>\n  </Collapser>\n  <Collapser title=\"Highlights\" align=\"right\" icon={<IconStar />}>\n    <p>See what makes this system stand out.</p>\n  </Collapser>\n  <Collapser title=\"Configuration\" align=\"right\" icon={<IconSettings />}>\n    <p>Customise the system to fit your workflow.</p>\n  </Collapser>\n</CollapserGroup>",
+            },
+        },
+    },
+    render: function () { return (_jsxs(CollapserGroup, { children: [_jsx(Collapser, { title: "Getting started", align: "right", icon: _jsx(IconBook, {}), children: _jsx("p", { style: { color: 'var(--dds-collapser-text)' }, children: "Learn the basics and set up your environment." }) }), _jsx(Collapser, { title: "Quick actions", align: "right", icon: _jsx(IconBolt, {}), children: _jsx("p", { style: { color: 'var(--dds-collapser-text)' }, children: "Discover shortcuts and power-user features." }) }), _jsx(Collapser, { title: "Highlights", align: "right", icon: _jsx(IconStar, {}), children: _jsx("p", { style: { color: 'var(--dds-collapser-text)' }, children: "See what makes this system stand out." }) }), _jsx(Collapser, { title: "Configuration", align: "right", icon: _jsx(IconSettings, {}), children: _jsx("p", { style: { color: 'var(--dds-collapser-text)' }, children: "Customise the system to fit your workflow." }) })] })); },
+};
+/**
+ * CollapserGroup with `numbered` auto-numbers each entry.
+ * Matches the reference screenshot pattern: step number + icon on the left,
+ * title right-aligned, chevron on the far right.
+ */
+export var NumberedGroup = {
+    parameters: {
+        docs: {
+            source: {
+                code: "{/* numbered=true on CollapserGroup auto-injects stepNumber into each child */}\n<CollapserGroup numbered>\n  <Collapser title=\"Decrease pain\" align=\"right\" icon={<IconBolt />}>\n    <p>Step numbers are injected automatically by CollapserGroup.</p>\n  </Collapser>\n  <Collapser title=\"Align your workflow\" align=\"right\" icon={<IconBook />}>\n    <p>Combine numbered with icons and right-aligned titles.</p>\n  </Collapser>\n  <Collapser title=\"Learn to move\" align=\"right\" icon={<IconStar />}>\n    <p>Each entry gets a sequential step number on the far left.</p>\n  </Collapser>\n  <Collapser title=\"Configuration\" align=\"right\" icon={<IconSettings />}>\n    <p>Customise the system to fit your workflow.</p>\n  </Collapser>\n</CollapserGroup>",
+            },
+        },
+    },
+    render: function () { return (_jsxs(CollapserGroup, { numbered: true, children: [_jsx(Collapser, { title: "Decrease pain", align: "right", icon: _jsx(IconBolt, {}), children: _jsxs("p", { style: { color: 'var(--dds-collapser-text)' }, children: ["Step numbers are injected automatically by CollapserGroup when", ' ', _jsx("code", { children: "numbered" }), " is true."] }) }), _jsx(Collapser, { title: "Align your workflow", align: "right", icon: _jsx(IconBook, {}), children: _jsxs("p", { style: { color: 'var(--dds-collapser-text)' }, children: ["Combine ", _jsx("code", { children: "numbered" }), " with icons and right-aligned titles for a clean annotated-list layout."] }) }), _jsx(Collapser, { title: "Learn to move", align: "right", icon: _jsx(IconStar, {}), children: _jsx("p", { style: { color: 'var(--dds-collapser-text)' }, children: "Each entry gets a sequential step number on the far left." }) }), _jsx(Collapser, { title: "Configuration", align: "right", icon: _jsx(IconSettings, {}), children: _jsx("p", { style: { color: 'var(--dds-collapser-text)' }, children: "Customise the system to fit your workflow." }) })] })); },
 };

package/dist/components/CollapserGroup.d.ts

@@ -11,5 +11,11 @@ export interface CollapserGroupProps {
     onChange?: (openIndexes: number[]) => void;
     /** Additional CSS classes */
     className?: string;
+    /**
+     * Automatically prefix each collapser header with a sequential step number (1, 2, 3…).
+     * The number is injected via the `stepNumber` prop on each `Collapser` child.
+     * @default false
+     */
+    numbered?: boolean;
 }
 export declare const CollapserGroup: React.FC<CollapserGroupProps>;

package/dist/components/CollapserGroup.js

@@ -23,12 +23,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useState, Children, cloneElement, isValidElement } from 'react';
 import { Collapser } from './Collapser';
 export var CollapserGroup = function (_a) {
-    var children = _a.children, _b = _a.spacing, spacing = _b === void 0 ? '0.5rem' : _b, _c = _a.allowMultiple, allowMultiple = _c === void 0 ? true : _c, defaultOpen = _a.defaultOpen, onChange = _a.onChange, _d = _a.className, className = _d === void 0 ? '' : _d;
-    var _e = useState(function () {
+    var children = _a.children, _b = _a.spacing, spacing = _b === void 0 ? '0.5rem' : _b, _c = _a.allowMultiple, allowMultiple = _c === void 0 ? true : _c, defaultOpen = _a.defaultOpen, onChange = _a.onChange, _d = _a.className, className = _d === void 0 ? '' : _d, _e = _a.numbered, numbered = _e === void 0 ? false : _e;
+    var _f = useState(function () {
         if (defaultOpen === undefined)
             return [];
         return Array.isArray(defaultOpen) ? defaultOpen : [defaultOpen];
-    }), openIndexes = _e[0], setOpenIndexes = _e[1];
+    }), openIndexes = _f[0], setOpenIndexes = _f[1];
     var handleToggle = function (index) {
         setOpenIndexes(function (prev) {
             var next;
@@ -49,7 +49,7 @@ export var CollapserGroup = function (_a) {
                 return child;
             // Only inject props if child is a Collapser component
             if (child.type === Collapser) {
-                return cloneElement(child, __assign(__assign({}, child.props), { open: openIndexes.includes(index), onToggle: function () { return handleToggle(index); } }));
+                return cloneElement(child, __assign(__assign(__assign({}, child.props), { open: openIndexes.includes(index), onToggle: function () { return handleToggle(index); } }), (numbered ? { stepNumber: index + 1 } : {})));
             }
             return child;
         }) }));

package/dist/components/CollapserGroup.stories.d.ts

@@ -27,3 +27,10 @@ export declare const DefaultOpen: Story;
  * Multiple collapsers open by default.
  */
 export declare const MultipleDefaultOpen: Story;
+/**
+ * Setting `numbered` on CollapserGroup automatically prefixes each collapser header
+ * with a sequential step number (1., 2., …), closely matching the reference screenshot
+ * with number + icon on the left and right-aligned title text.
+ * Customise the number colour with `--dds-collapser-step-number-color`.
+ */
+export declare const NumberedGroup: Story;

package/dist/components/CollapserGroup.stories.js

@@ -12,6 +12,11 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CollapserGroup } from './CollapserGroup';
 import { Collapser } from './Collapser';
+// Spoofed icons for the NumberedGroup story (replace with your Icon component when available)
+var IconBolt = function () { return (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("polyline", { points: "13 2 3 14 12 14 11 22 21 10 12 10 13 2" }) })); };
+var IconBook = function () { return (_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("path", { d: "M4 19.5A2.5 2.5 0 0 1 6.5 17H20" }), _jsx("path", { d: "M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" })] })); };
+var IconStar = function () { return (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" }) })); };
+var IconSettings = function () { return (_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("circle", { cx: "12", cy: "12", r: "3" }), _jsx("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" })] })); };
 /**
  * CollapserGroup manages multiple Collapser components with consistent spacing
  * and optional accordion behavior.
@@ -20,6 +25,40 @@ var meta = {
     title: 'Components/CollapserGroup',
     component: CollapserGroup,
     tags: ['autodocs'],
+    argTypes: {
+        spacing: {
+            control: 'text',
+            description: 'CSS gap value between collapser items.',
+            table: { defaultValue: { summary: "'0.5rem'" } },
+        },
+        allowMultiple: {
+            control: 'boolean',
+            description: 'When true, multiple collapsers can be open simultaneously. When false, opening one closes the others (accordion mode).',
+            table: { defaultValue: { summary: 'true' } },
+        },
+        defaultOpen: {
+            control: 'text',
+            description: 'Index or array of indexes of collapsers that should be open by default. E.g. `0` or `[0, 2]`.',
+        },
+        onChange: {
+            control: false,
+            description: 'Callback fired when the open state changes. Receives an array of currently open indexes.',
+        },
+        children: {
+            control: false,
+            description: 'Collapser components to render inside the group.',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS classes.',
+            table: { defaultValue: { summary: '""' } },
+        },
+        numbered: {
+            control: 'boolean',
+            description: 'Automatically prefix each collapser header with a sequential step number (1, 2, 3…). Pairs well with `icon` and `align="right"` on child collapsers.',
+            table: { defaultValue: { summary: 'false' } },
+        },
+    },
     parameters: {
         docs: {
             description: {
@@ -110,3 +149,22 @@ export var MultipleDefaultOpen = {
     },
     render: function (args) { return (_jsxs(CollapserGroup, __assign({}, args, { children: [_jsx(Collapser, { title: "Introduction", children: _jsx("p", { children: "This section is open by default." }) }), _jsx(Collapser, { title: "Installation", children: _jsx("p", { children: "This section starts closed." }) }), _jsx(Collapser, { title: "Quick Start", children: _jsx("p", { children: "This section is also open by default." }) })] }))); },
 };
+/**
+ * Setting `numbered` on CollapserGroup automatically prefixes each collapser header
+ * with a sequential step number (1., 2., …), closely matching the reference screenshot
+ * with number + icon on the left and right-aligned title text.
+ * Customise the number colour with `--dds-collapser-step-number-color`.
+ */
+export var NumberedGroup = {
+    args: {
+        numbered: true,
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: "<CollapserGroup numbered>\n  <Collapser title=\"Decrease pain\" align=\"right\" icon={<IconBolt />}>\n    <p>Step numbers are injected automatically \u2014 no extra props needed on each item.</p>\n  </Collapser>\n  <Collapser title=\"Align your workflow\" align=\"right\" icon={<IconBook />}>\n    <p>Combine numbered with icons and right-aligned titles.</p>\n  </Collapser>\n  <Collapser title=\"Learn to move\" align=\"right\" icon={<IconStar />}>\n    <p>Each entry gets a sequential step number on the far left.</p>\n  </Collapser>\n  <Collapser title=\"Build strength\" align=\"right\" icon={<IconSettings />}>\n    <p>Customise the number colour with --dds-collapser-step-number-color.</p>\n  </Collapser>\n</CollapserGroup>",
+            },
+        },
+    },
+    render: function (args) { return (_jsxs(CollapserGroup, __assign({}, args, { children: [_jsx(Collapser, { title: "Decrease pain", align: "right", icon: _jsx(IconBolt, {}), children: _jsx("p", { style: { color: 'var(--dds-collapser-text)' }, children: "Step numbers are injected automatically \u2014 no extra props needed on each item." }) }), _jsx(Collapser, { title: "Align your workflow", align: "right", icon: _jsx(IconBook, {}), children: _jsxs("p", { style: { color: 'var(--dds-collapser-text)' }, children: ["Combine ", _jsx("code", { children: "numbered" }), " with icons and right-aligned titles for a clean annotated-list layout."] }) }), _jsx(Collapser, { title: "Learn to move", align: "right", icon: _jsx(IconStar, {}), children: _jsx("p", { style: { color: 'var(--dds-collapser-text)' }, children: "Each entry gets a sequential step number on the far left." }) }), _jsx(Collapser, { title: "Build strength", align: "right", icon: _jsx(IconSettings, {}), children: _jsxs("p", { style: { color: 'var(--dds-collapser-text)' }, children: ["Customise the number colour with ", _jsx("code", { children: "--dds-collapser-step-number-color" }), "."] }) })] }))); },
+};

package/dist/components/Heading.stories.js

@@ -7,6 +7,26 @@ var meta = {
     title: 'Components/Heading',
     component: Heading,
     tags: ['autodocs'],
+    argTypes: {
+        level: {
+            control: { type: 'select' },
+            options: [1, 2, 3, 4],
+            description: 'Heading level — renders as `<h1>` through `<h4>`.',
+        },
+        id: {
+            control: 'text',
+            description: 'Override the auto-generated `id` attribute. By default the `id` is derived from the heading text.',
+        },
+        children: {
+            control: 'text',
+            description: 'Heading content.',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS classes.',
+            table: { defaultValue: { summary: '""' } },
+        },
+    },
     parameters: {
         docs: {
             description: {

package/dist/components/Link.stories.js

@@ -7,6 +7,21 @@ var meta = {
     title: 'Components/Link',
     component: Link,
     tags: ['autodocs'],
+    argTypes: {
+        href: {
+            control: 'text',
+            description: 'Link destination. URLs starting with `http://` or `https://` are treated as external and open in a new tab.',
+        },
+        children: {
+            control: 'text',
+            description: 'Link content.',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS classes.',
+            table: { defaultValue: { summary: '""' } },
+        },
+    },
     parameters: {
         docs: {
             description: {

package/dist/components/List.stories.d.ts

@@ -4,6 +4,38 @@ declare const meta: {
     component: import("react").FC<import("./List").ListProps> & {
         Item: typeof import("./List").ListItem;
     };
+    argTypes: {
+        ordered: {
+            control: "boolean";
+            description: string;
+            table: {
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        bullet: {
+            control: "text";
+            description: string;
+        };
+        bulletIcon: {
+            control: false;
+            description: string;
+        };
+        children: {
+            control: false;
+            description: string;
+        };
+        className: {
+            control: "text";
+            description: string;
+            table: {
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+    };
     parameters: {
         layout: string;
         docs: {

package/dist/components/List.stories.js

@@ -5,6 +5,30 @@ import { Callout } from "./Callout";
 var meta = {
     title: "Components/List",
     component: List,
+    argTypes: {
+        ordered: {
+            control: 'boolean',
+            description: 'When true renders an ordered (numbered) list. When false renders an unordered (bullet) list.',
+            table: { defaultValue: { summary: 'true' } },
+        },
+        bullet: {
+            control: 'text',
+            description: 'Custom bullet character for unordered lists (e.g. an emoji like `"✅"`). Only applies when `ordered` is false. Ignored when `bulletIcon` is provided.',
+        },
+        bulletIcon: {
+            control: false,
+            description: 'Custom bullet icon as a React node (e.g. an SVG). Takes precedence over `bullet`. Only applies when `ordered` is false.',
+        },
+        children: {
+            control: false,
+            description: '`List.Item` components to render.',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS classes.',
+            table: { defaultValue: { summary: '""' } },
+        },
+    },
     parameters: {
         layout: "padded",
         docs: {

package/dist/components/Popover.stories.js

@@ -15,6 +15,51 @@ var meta = {
     title: "Components/Popover",
     component: Popover,
     tags: ["autodocs"],
+    argTypes: {
+        content: {
+            control: false,
+            description: 'Arbitrary React content rendered inside the popover. Use when the built-in `glossary` or `preview` templates do not fit your use case.',
+        },
+        glossary: {
+            control: false,
+            description: 'Renders a styled glossary definition popover. Accepts `{ term, title, definition }` where `definition` is a `ReactNode`.',
+        },
+        preview: {
+            control: false,
+            description: 'Renders a Wikipedia-style content preview. Accepts `{ title, excerpt?, imageUrl?, href?, linkText? }`.',
+        },
+        placement: {
+            control: { type: 'select' },
+            options: ['auto', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end'],
+            description: 'Preferred placement relative to the trigger. `"auto"` detects available viewport space.',
+            table: { defaultValue: { summary: "'auto'" } },
+        },
+        size: {
+            control: { type: 'select' },
+            options: ['sm', 'md', 'lg'],
+            description: 'Popover width. `sm` = 240px, `md` = 320px, `lg` = 480px.',
+            table: { defaultValue: { summary: "'md'" } },
+        },
+        showDelay: {
+            control: 'number',
+            description: 'Milliseconds to wait before showing the popover on hover.',
+            table: { defaultValue: { summary: '200' } },
+        },
+        hideDelay: {
+            control: 'number',
+            description: 'Milliseconds to wait before hiding the popover on hover-out.',
+            table: { defaultValue: { summary: '150' } },
+        },
+        children: {
+            control: 'text',
+            description: 'The trigger element — the text or content that reveals the popover on hover or tap.',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS classes on the trigger wrapper.',
+            table: { defaultValue: { summary: '""' } },
+        },
+    },
     parameters: {
         layout: "centered",
         docs: {

package/dist/components/Tabs.stories.js

@@ -21,6 +21,29 @@ var meta = {
     title: "Components/Tabs",
     component: Tabs,
     tags: ["autodocs"],
+    argTypes: {
+        defaultActiveTab: {
+            control: 'text',
+            description: 'ID of the tab that is active by default (uncontrolled mode).',
+        },
+        activeTab: {
+            control: 'text',
+            description: 'Controlled active tab ID. Use together with `onTabChange` to manage state externally.',
+        },
+        onTabChange: {
+            control: false,
+            description: 'Callback fired when the active tab changes. Receives the new tab ID.',
+        },
+        children: {
+            control: false,
+            description: 'Tab content — typically `TabList` and `TabPanel` components.',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS classes applied to the outer container.',
+            table: { defaultValue: { summary: '""' } },
+        },
+    },
     parameters: {
         docs: {
             description: {

package/dist/components/Typography.stories.js

@@ -7,6 +7,23 @@ var meta = {
     title: 'Components/Typography',
     component: Typography,
     tags: ['autodocs'],
+    argTypes: {
+        variant: {
+            control: { type: 'select' },
+            options: ['h1', 'h2', 'h3', 'h4', 'p', 'caption'],
+            description: 'Typography style variant. `h1`–`h4` render as heading elements; `p` and `caption` render as `<p>`.',
+            table: { defaultValue: { summary: "'p'" } },
+        },
+        children: {
+            control: 'text',
+            description: 'Text content.',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS classes.',
+            table: { defaultValue: { summary: '""' } },
+        },
+    },
     parameters: {
         docs: {
             description: {

package/dist/styles.css

@@ -207,8 +207,10 @@
   --dds-collapser-button-padding: 0.75rem; /* p-3 */
   --dds-collapser-button-hover-bg: #f9fafb; /* gray-50 */
   --dds-collapser-icon-color: #6b7280; /* gray-500 */
+  --dds-collapser-step-number-color: #6b7280; /* gray-500 — override to customise step numbers */
   --dds-collapser-text: #374151; /* gray-700 */
   --dds-collapser-content-padding: 1rem; /* p-4 */
+  --dds-collapser-header-gap: 0.5rem;
 
   /* Tabs */
   --dds-tabs-margin: 1rem 0;
@@ -342,6 +344,7 @@
   --dds-collapser-border: #4b5563; /* gray-600 */
   --dds-collapser-button-hover-bg: rgba(255, 255, 255, 0.05);
   --dds-collapser-icon-color: #9ca3af; /* gray-400 */
+  --dds-collapser-step-number-color: #9ca3af;
   --dds-collapser-text: #e5e7eb; /* gray-200 */
 
   /* Tabs */
@@ -497,6 +500,7 @@
     --dds-collapser-border: #4b5563;
     --dds-collapser-button-hover-bg: rgba(255, 255, 255, 0.05);
     --dds-collapser-icon-color: #9ca3af;
+    --dds-collapser-step-number-color: #9ca3af;
     --dds-collapser-text: #e5e7eb;
 
     /* Tabs */
@@ -652,6 +656,7 @@
   --dds-collapser-border: #4b5563;
   --dds-collapser-button-hover-bg: rgba(255, 255, 255, 0.05);
   --dds-collapser-icon-color: #9ca3af;
+  --dds-collapser-step-number-color: #9ca3af;
   --dds-collapser-text: #e5e7eb;
 
   /* CodeBlock */
@@ -1080,6 +1085,14 @@ a.no-text-decoration {
     grid-template-columns: repeat(4, 1fr);
   }
 }
+/* Equal height: stretch all cards to the tallest in each row */
+.dds-card-grid-equal-height > * {
+  height: 100%;
+}
+.dds-card-grid-equal-height .dds-card {
+  height: 100%;
+  box-sizing: border-box;
+}
 .dds-collapser {
   display: flex;
   flex-direction: column;
@@ -1093,6 +1106,7 @@ a.no-text-decoration {
   padding: var(--dds-collapser-button-padding);
   display: flex;
   align-items: center;
+  gap: var(--dds-collapser-header-gap);
   transition: var(--dds-transition-colors);
   border: none;
   background: transparent;
@@ -1104,6 +1118,18 @@ a.no-text-decoration {
   background-color: var(--dds-collapser-button-hover-bg);
   outline: none;
 }
+.dds-collapser-step-number {
+  flex-shrink: 0;
+  min-width: 1.5em;
+  font-variant-numeric: tabular-nums;
+  color: var(--dds-collapser-step-number-color);
+}
+.dds-collapser-header-icon {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--dds-collapser-icon-color);
+}
 .dds-collapser-title {
   display: flex;
   align-items: center;
@@ -1112,12 +1138,18 @@ a.no-text-decoration {
   margin: 0;
   font-weight: bold;
   color: var(--dds-heading-color);
+  word-break: break-word;
+  min-width: 0;
+}
+.dds-collapser--align-right .dds-collapser-title {
+  justify-content: flex-end;
+  text-align: right;
 }
 .dds-collapser-icon {
   margin-left: auto;
+  flex-shrink: 0;
   transition: transform 0.3s ease;
   color: var(--dds-collapser-icon-color);
-  flex-shrink: 0;
 }
 .dds-collapser-icon-open {
   transform: rotate(180deg);