@roadlittledawn/docs-design-system-react 0.2.1 → 0.3.0

package/dist/components/CodeBlock.d.ts

@@ -11,6 +11,8 @@ import "prismjs/components/prism-python";
 import "prismjs/components/prism-java";
 import "prismjs/components/prism-sql";
 import "prismjs/components/prism-yaml";
+import "prismjs/components/prism-markup-templating";
+import "prismjs/components/prism-php";
 export interface CodeSnippet {
     /** The code content */
     code: string;
@@ -39,5 +41,18 @@ interface CodeBlockProps {
     /** Additional CSS classes */
     className?: string;
 }
+/**
+ * Register additional Prism languages via dynamic import.
+ * Call this before rendering CodeBlock with unsupported languages.
+ *
+ * @example
+ * ```ts
+ * await registerLanguages(async () => {
+ *   await import('prismjs/components/prism-go');
+ *   await import('prismjs/components/prism-rust');
+ * });
+ * ```
+ */
+export declare function registerLanguages(loader: () => Promise<void>): Promise<void>;
 export declare function CodeBlock({ code, language, filename, highlightLines, snippets, path, className, }: CodeBlockProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/components/CodeBlock.js

@@ -52,6 +52,32 @@ import "prismjs/components/prism-python";
 import "prismjs/components/prism-java";
 import "prismjs/components/prism-sql";
 import "prismjs/components/prism-yaml";
+import "prismjs/components/prism-markup-templating";
+import "prismjs/components/prism-php";
+/**
+ * Register additional Prism languages via dynamic import.
+ * Call this before rendering CodeBlock with unsupported languages.
+ *
+ * @example
+ * ```ts
+ * await registerLanguages(async () => {
+ *   await import('prismjs/components/prism-go');
+ *   await import('prismjs/components/prism-rust');
+ * });
+ * ```
+ */
+export function registerLanguages(loader) {
+    return __awaiter(this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, loader()];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    });
+}
 /**
  * Parses a markdown file content to extract code snippets
  */
@@ -103,6 +129,8 @@ function groupSnippetsByLanguage(snippets) {
     }
     return grouped;
 }
+var ClipboardIcon = function () { return (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }), _jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })] })); };
+var CheckIcon = function () { return (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("polyline", { points: "20 6 9 17 4 12" }) })); };
 export function CodeBlock(_a) {
     var _this = this;
     var code = _a.code, language = _a.language, filename = _a.filename, highlightLines = _a.highlightLines, snippets = _a.snippets, path = _a.path, _b = _a.className, className = _b === void 0 ? "" : _b;
@@ -232,9 +260,12 @@ export function CodeBlock(_a) {
     var hasTabs = activeSnippets.length > 1;
     var hasLanguageDropdown = snippetsByLanguage.size > 1;
     var displayLanguage = currentSnippet.language || "text";
-    return (_jsxs("div", { className: "dds-code-block ".concat(className), children: [_jsxs("div", { className: "dds-code-block-header", children: [_jsx("div", { className: "dds-code-block-header-left", children: hasTabs && (_jsx("div", { className: "dds-code-block-tabs", children: activeSnippets.map(function (snippet, index) { return (_jsx("button", { className: "dds-code-block-tab ".concat(index === activeTabIndex ? "dds-code-block-tab-active" : ""), onClick: function () { return setActiveTabIndex(index); }, type: "button", children: snippet.tabTitle || snippet.filename || "Tab ".concat(index + 1) }, index)); }) })) }), _jsxs("div", { className: "dds-code-block-header-right", children: [hasLanguageDropdown && (_jsx("select", { className: "dds-code-block-language-select", value: activeLanguage || "", onChange: function (e) {
+    var showFilenameLabel = !hasTabs && currentSnippet.filename;
+    return (_jsxs("div", { className: "dds-code-block ".concat(className), children: [_jsxs("div", { className: "dds-code-block-header", children: [_jsxs("div", { className: "dds-code-block-header-left", children: [hasTabs && (_jsx("div", { className: "dds-code-block-tabs", children: activeSnippets.map(function (snippet, index) { return (_jsx("button", { className: "dds-code-block-tab ".concat(index === activeTabIndex ? "dds-code-block-tab-active" : ""), onClick: function () { return setActiveTabIndex(index); }, type: "button", children: snippet.tabTitle || snippet.filename || "Tab ".concat(index + 1) }, index)); }) })), showFilenameLabel && (_jsx("span", { className: "dds-code-block-filename", children: currentSnippet.filename }))] }), _jsxs("div", { className: "dds-code-block-header-right", children: [hasLanguageDropdown && (_jsx("select", { className: "dds-code-block-language-select", value: activeLanguage || "", onChange: function (e) {
                                     setActiveLanguage(e.target.value);
                                     setActiveTabIndex(0);
-                                }, children: Array.from(snippetsByLanguage.keys()).map(function (lang) { return (_jsx("option", { value: lang, children: lang }, lang)); }) })), !hasLanguageDropdown && displayLanguage !== "text" && (_jsx("span", { className: "dds-code-block-language-label", children: displayLanguage })), _jsx("button", { className: "dds-code-block-copy-button", onClick: handleCopy, type: "button", "aria-label": "Copy code", children: copied ? "Copied!" : "Copy" })] })] }), _jsxs("div", { className: "dds-code-block-content", children: [_jsx("pre", { className: "language-".concat(displayLanguage), children: _jsx("code", { className: "language-".concat(displayLanguage), dangerouslySetInnerHTML: { __html: highlightedCode } }) }), currentSnippet.highlightLines &&
+                                }, children: Array.from(snippetsByLanguage.keys()).map(function (lang) { return (_jsx("option", { value: lang, children: lang }, lang)); }) })), !hasLanguageDropdown &&
+                                !showFilenameLabel &&
+                                displayLanguage !== "text" && (_jsx("span", { className: "dds-code-block-language-label", children: displayLanguage })), _jsx("button", { className: "dds-code-block-copy-button", onClick: handleCopy, type: "button", "aria-label": copied ? "Copied" : "Copy code", children: copied ? _jsx(CheckIcon, {}) : _jsx(ClipboardIcon, {}) })] })] }), _jsxs("div", { className: "dds-code-block-content", children: [_jsx("pre", { className: "language-".concat(displayLanguage), children: _jsx("code", { className: "language-".concat(displayLanguage), dangerouslySetInnerHTML: { __html: highlightedCode } }) }), currentSnippet.highlightLines &&
                         currentSnippet.highlightLines.length > 0 && (_jsx("div", { className: "dds-code-block-line-highlights", children: currentSnippet.highlightLines.map(function (lineNum) { return (_jsx("div", { className: "dds-code-block-line-highlight", style: { top: "".concat((lineNum - 1) * 1.5, "em") } }, lineNum)); }) }))] })] }));
 }

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

@@ -43,3 +43,19 @@ export declare const JSONExample: Story;
  * Bash/shell script example.
  */
 export declare const BashExample: Story;
+/**
+ * Multiple TSX files displayed as flat tabs with bottom-border accent.
+ */
+export declare const WithFilenameTabs: Story;
+/**
+ * Single snippet with a filename — displays a flat filename label in the header.
+ */
+export declare const SingleFilename: Story;
+/**
+ * PHP syntax highlighting example.
+ */
+export declare const PHPExample: Story;
+/**
+ * Many tabs to verify horizontal scroll behavior.
+ */
+export declare const ManyTabs: Story;

package/dist/components/CodeBlock.stories.js

@@ -9,7 +9,7 @@ var meta = {
     parameters: {
         docs: {
             description: {
-                component: "\nThe CodeBlock component provides a comprehensive solution for displaying code snippets in documentation.\n\n## Features\n\n- **Syntax Highlighting**: Uses PrismJS for syntax highlighting across many languages\n- **Copy to Clipboard**: One-click copy button for easy code sharing\n- **Line Highlighting**: Highlight specific lines to draw attention\n- **Tabs**: Display multiple code snippets in tabs (typically for different files)\n- **Language Switching**: Dropdown to switch between different language versions\n- **External Snippets**: Load code snippets from markdown files via path prop\n\n## When to Use\n\n- For code examples in documentation\n- When displaying multiple related code snippets\n- For showing code in different languages (TypeScript, JavaScript, etc.)\n- When you need users to easily copy code\n\n## When Not to Use\n\n- For inline code (use `<code>` tags)\n- For code that doesn't need syntax highlighting\n- For executable code editors (use a code editor component)\n\n## Accessibility\n\n- Copy button includes proper ARIA labels\n- Keyboard navigation for tabs and dropdowns\n- High contrast syntax highlighting colors\n        ",
+                component: "\nThe CodeBlock component provides a comprehensive solution for displaying code snippets in documentation.\n\n## Features\n\n- **Syntax Highlighting**: Uses PrismJS for syntax highlighting across many languages\n- **Copy to Clipboard**: One-click copy button for easy code sharing\n- **Line Highlighting**: Highlight specific lines to draw attention\n- **Tabs**: Display multiple code snippets in tabs (typically for different files)\n- **Language Switching**: Dropdown to switch between different language versions\n- **Filename Labels**: Single-file snippets display a flat filename label in the header\n- **External Snippets**: Load code snippets from markdown files via path prop\n\n## Supported Languages\n\nThe following languages are bundled by default: JavaScript, TypeScript, JSX, TSX, CSS, Markdown, JSON, Bash, Ruby, Python, Java, SQL, YAML, and PHP.\n\nTo add additional languages, use the `registerLanguages` utility before rendering:\n\n```ts\nimport { registerLanguages, CodeBlock } from '@roadlittledawn/docs-design-system-react';\n\n// Call once at app startup or before rendering CodeBlock with new languages.\n// Prism is already loaded by the package \u2014 dynamic language imports\n// register themselves against it automatically.\nawait registerLanguages(async () => {\n  await import('prismjs/components/prism-go');\n  await import('prismjs/components/prism-rust');\n});\n```\n\n## When to Use\n\n- For code examples in documentation\n- When displaying multiple related code snippets\n- For showing code in different languages (TypeScript, JavaScript, etc.)\n- When you need users to easily copy code\n\n## When Not to Use\n\n- For inline code (use `<code>` tags)\n- For code that doesn't need syntax highlighting\n- For executable code editors (use a code editor component)\n\n## Accessibility\n\n- Copy button includes proper ARIA labels\n- Keyboard navigation for tabs and dropdowns\n- High contrast syntax highlighting colors\n        ",
             },
         },
     },
@@ -152,3 +152,83 @@ export var BashExample = {
         filename: 'setup.sh',
     },
 };
+/**
+ * Multiple TSX files displayed as flat tabs with bottom-border accent.
+ */
+export var WithFilenameTabs = {
+    args: {
+        snippets: [
+            {
+                code: "import { CodeBlock } from '@docs-design-system/ui';\n\nexport function Example() {\n  return (\n    <CodeBlock\n      code=\"console.log('hello')\"\n      language=\"typescript\"\n    />\n  );\n}",
+                language: 'tsx',
+                filename: 'Example.tsx',
+                tabTitle: 'Example.tsx',
+            },
+            {
+                code: "import { CodeBlock } from '@docs-design-system/ui';\n\nexport function Advanced() {\n  return (\n    <CodeBlock\n      snippets={[\n        { code: 'const a = 1;', language: 'typescript', tabTitle: 'a.ts' },\n        { code: 'const b = 2;', language: 'typescript', tabTitle: 'b.ts' },\n      ]}\n    />\n  );\n}",
+                language: 'tsx',
+                filename: 'Advanced.tsx',
+                tabTitle: 'Advanced.tsx',
+            },
+        ],
+    },
+};
+/**
+ * Single snippet with a filename — displays a flat filename label in the header.
+ */
+export var SingleFilename = {
+    args: {
+        code: "export default function Home() {\n  return <h1>Welcome</h1>;\n}",
+        language: 'tsx',
+        filename: 'page.tsx',
+    },
+};
+/**
+ * PHP syntax highlighting example.
+ */
+export var PHPExample = {
+    args: {
+        code: "<?php\n\nnamespace App\\Http\\Controllers;\n\nuse Illuminate\\Http\\Request;\n\nclass UserController extends Controller\n{\n    public function index()\n    {\n        $users = User::all();\n        return view('users.index', compact('users'));\n    }\n\n    public function show(int $id)\n    {\n        $user = User::findOrFail($id);\n        return response()->json($user);\n    }\n}",
+        language: 'php',
+        filename: 'UserController.php',
+    },
+};
+/**
+ * Many tabs to verify horizontal scroll behavior.
+ */
+export var ManyTabs = {
+    args: {
+        snippets: [
+            {
+                code: "export const App = () => <div>App</div>;",
+                language: 'tsx',
+                tabTitle: 'App.tsx',
+            },
+            {
+                code: "export const Header = () => <header>Header</header>;",
+                language: 'tsx',
+                tabTitle: 'Header.tsx',
+            },
+            {
+                code: "export const Footer = () => <footer>Footer</footer>;",
+                language: 'tsx',
+                tabTitle: 'Footer.tsx',
+            },
+            {
+                code: "export const Sidebar = () => <aside>Sidebar</aside>;",
+                language: 'tsx',
+                tabTitle: 'Sidebar.tsx',
+            },
+            {
+                code: "export const Nav = () => <nav>Nav</nav>;",
+                language: 'tsx',
+                tabTitle: 'Navigation.tsx',
+            },
+            {
+                code: "export const Content = () => <main>Content</main>;",
+                language: 'tsx',
+                tabTitle: 'ContentArea.tsx',
+            },
+        ],
+    },
+};

package/dist/components/Collapser.d.ts

@@ -5,14 +5,22 @@ interface CollapserProps {
     /** Optional ID for the title element */
     id?: string;
     /**
-     * Whether the collapser should be open by default
+     * Whether the collapser should be open by default (uncontrolled)
      * @default false
      */
     defaultOpen?: boolean;
+    /**
+     * Controlled open state (used by CollapserGroup)
+     */
+    open?: boolean;
+    /**
+     * Callback when toggle is clicked (used by CollapserGroup)
+     */
+    onToggle?: () => void;
     /** Content to show/hide when toggling */
     children: ReactNode;
     /** Additional CSS classes */
     className?: string;
 }
-export declare function Collapser({ title, id, defaultOpen, children, className, }: CollapserProps): import("react/jsx-runtime").JSX.Element;
+export declare function Collapser({ title, id, defaultOpen, open: controlledOpen, onToggle, children, className, }: CollapserProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Collapser.js

@@ -2,19 +2,30 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useRef, useEffect } from "react";
 import { useKeyPress } from "../hooks/useKeyPress";
 export function Collapser(_a) {
-    var title = _a.title, id = _a.id, _b = _a.defaultOpen, defaultOpen = _b === void 0 ? false : _b, children = _a.children, _c = _a.className, className = _c === void 0 ? "" : _c;
-    var _d = useState(defaultOpen), isOpen = _d[0], setIsOpen = _d[1];
+    var title = _a.title, id = _a.id, _b = _a.defaultOpen, defaultOpen = _b === void 0 ? false : _b, controlledOpen = _a.open, onToggle = _a.onToggle, children = _a.children, _c = _a.className, className = _c === void 0 ? "" : _c;
+    var _d = useState(defaultOpen), uncontrolledOpen = _d[0], setUncontrolledOpen = _d[1];
+    var isControlled = controlledOpen !== undefined;
+    var isOpen = isControlled ? controlledOpen : uncontrolledOpen;
     var _e = useState(undefined), height = _e[0], setHeight = _e[1];
     var contentRef = useRef(null);
     // Keyboard shortcuts: 's' or 'f' to show, 'h' to hide
-    useKeyPress(['s', 'f', 'h'], function (e) { return setIsOpen(e.key !== 'h'); });
+    useKeyPress(['s', 'f', 'h'], function (e) {
+        if (!isControlled) {
+            setUncontrolledOpen(e.key !== 'h');
+        }
+    });
     useEffect(function () {
         if (contentRef.current) {
             setHeight(contentRef.current.scrollHeight);
         }
     }, [children]);
     var toggleOpen = function () {
-        setIsOpen(!isOpen);
+        if (onToggle) {
+            onToggle();
+        }
+        else {
+            setUncontrolledOpen(!uncontrolledOpen);
+        }
     };
     var collapserClasses = ["dds-collapser", className]
         .filter(Boolean)

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

@@ -23,6 +23,6 @@ export declare const WithID: Story;
  */
 export declare const ComplexContent: Story;
 /**
- * Multiple collapsers in a FAQ-style layout.
+ * Multiple collapsers in a FAQ-style layout using CollapserGroup.
  */
 export declare const FAQExample: Story;

package/dist/components/Collapser.stories.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Collapser } from './Collapser';
+import { CollapserGroup } from './CollapserGroup';
 /**
  * The Collapser component creates expandable/collapsible content sections with smooth animations.
  */
@@ -55,8 +56,8 @@ export var ComplexContent = {
     },
 };
 /**
- * Multiple collapsers in a FAQ-style layout.
+ * Multiple collapsers in a FAQ-style layout using CollapserGroup.
  */
 export var FAQExample = {
-    render: function () { return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '0.5rem' }, 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", { 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." }) })] })); },
 };

package/dist/components/CollapserGroup.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export interface CollapserGroupProps {
+    children: React.ReactNode;
+    /** Spacing between collapsers (CSS gap value) */
+    spacing?: string;
+    /** Allow multiple collapsers to be open simultaneously */
+    allowMultiple?: boolean;
+    /** Index(es) of collapser(s) that should be open by default */
+    defaultOpen?: number | number[];
+    /** Callback when collapser open state changes */
+    onChange?: (openIndexes: number[]) => void;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare const CollapserGroup: React.FC<CollapserGroupProps>;

package/dist/components/CollapserGroup.js

@@ -0,0 +1,56 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+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 () {
+        if (defaultOpen === undefined)
+            return [];
+        return Array.isArray(defaultOpen) ? defaultOpen : [defaultOpen];
+    }), openIndexes = _e[0], setOpenIndexes = _e[1];
+    var handleToggle = function (index) {
+        setOpenIndexes(function (prev) {
+            var next;
+            if (allowMultiple) {
+                next = prev.includes(index)
+                    ? prev.filter(function (i) { return i !== index; })
+                    : __spreadArray(__spreadArray([], prev, true), [index], false);
+            }
+            else {
+                next = prev.includes(index) ? [] : [index];
+            }
+            onChange === null || onChange === void 0 ? void 0 : onChange(next);
+            return next;
+        });
+    };
+    return (_jsx("div", { className: "dds-collapser-group ".concat(className).trim(), style: { gap: spacing }, children: Children.map(children, function (child, index) {
+            if (!isValidElement(child))
+                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 child;
+        }) }));
+};
+CollapserGroup.displayName = 'CollapserGroup';

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

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { CollapserGroup } from './CollapserGroup';
+/**
+ * CollapserGroup manages multiple Collapser components with consistent spacing
+ * and optional accordion behavior.
+ */
+declare const meta: Meta<typeof CollapserGroup>;
+export default meta;
+type Story = StoryObj<typeof CollapserGroup>;
+/**
+ * Basic group with default spacing, allowing multiple collapsers to be open.
+ */
+export declare const Basic: Story;
+/**
+ * Accordion mode - only one collapser can be open at a time.
+ */
+export declare const AccordionMode: Story;
+/**
+ * Custom spacing between collapsers.
+ */
+export declare const CustomSpacing: Story;
+/**
+ * One collapser open by default.
+ */
+export declare const DefaultOpen: Story;
+/**
+ * Multiple collapsers open by default.
+ */
+export declare const MultipleDefaultOpen: Story;

package/dist/components/CollapserGroup.stories.js

@@ -0,0 +1,77 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CollapserGroup } from './CollapserGroup';
+import { Collapser } from './Collapser';
+/**
+ * CollapserGroup manages multiple Collapser components with consistent spacing
+ * and optional accordion behavior.
+ */
+var meta = {
+    title: 'Components/CollapserGroup',
+    component: CollapserGroup,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: "\nCollapserGroup provides a container for multiple Collapser components with built-in spacing and accordion functionality.\n\n## When to Use\n\n- FAQ sections with multiple questions\n- Accordion-style navigation or content sections\n- Any grouped collapsible content that needs consistent spacing\n- When you want only one section open at a time (accordion mode)\n\n## When Not to Use\n\n- For a single Collapser (use Collapser directly)\n- When collapsers need independent styling or spacing\n\n## Accessibility\n\n- Maintains all Collapser accessibility features\n- Keyboard navigation works within the group\n- Accordion mode provides clear single-selection behavior\n        ",
+            },
+        },
+    },
+};
+export default meta;
+/**
+ * Basic group with default spacing, allowing multiple collapsers to be open.
+ */
+export var Basic = {
+    args: {
+        spacing: '0.5rem',
+        allowMultiple: true,
+    },
+    render: function (args) { return (_jsxs(CollapserGroup, __assign({}, args, { 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." }) })] }))); },
+};
+/**
+ * Accordion mode - only one collapser can be open at a time.
+ */
+export var AccordionMode = {
+    args: {
+        allowMultiple: false,
+    },
+    render: function (args) { return (_jsxs(CollapserGroup, __assign({}, args, { children: [_jsxs(Collapser, { title: "Installation", children: [_jsx("p", { children: "Install the package using npm or yarn:" }), _jsx("pre", { children: "npm install @roadlittledawn/docs-design-system" })] }), _jsxs(Collapser, { title: "Configuration", children: [_jsx("p", { children: "Import the CSS and components in your application:" }), _jsx("pre", { children: "import '@roadlittledawn/docs-design-system/dist/styles.css';" })] }), _jsxs(Collapser, { title: "Usage", children: [_jsx("p", { children: "Use the components in your React application:" }), _jsx("pre", { children: '<Button variant="primary">Click me</Button>' })] })] }))); },
+};
+/**
+ * Custom spacing between collapsers.
+ */
+export var CustomSpacing = {
+    args: {
+        spacing: '1.5rem',
+    },
+    render: function (args) { return (_jsxs(CollapserGroup, __assign({}, args, { children: [_jsx(Collapser, { title: "Section 1", children: _jsx("p", { children: "Content with larger spacing between sections." }) }), _jsx(Collapser, { title: "Section 2", children: _jsx("p", { children: "This makes the layout more breathable." }) }), _jsx(Collapser, { title: "Section 3", children: _jsx("p", { children: "Useful for prominent content sections." }) })] }))); },
+};
+/**
+ * One collapser open by default.
+ */
+export var DefaultOpen = {
+    args: {
+        defaultOpen: 0,
+    },
+    render: function (args) { return (_jsxs(CollapserGroup, __assign({}, args, { children: [_jsx(Collapser, { title: "Getting Started", children: _jsx("p", { children: "This section is open by default." }) }), _jsx(Collapser, { title: "Advanced Topics", children: _jsx("p", { children: "This section starts closed." }) }), _jsx(Collapser, { title: "API Reference", children: _jsx("p", { children: "This section also starts closed." }) })] }))); },
+};
+/**
+ * Multiple collapsers open by default.
+ */
+export var MultipleDefaultOpen = {
+    args: {
+        defaultOpen: [0, 2],
+    },
+    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." }) })] }))); },
+};

package/dist/index.d.ts

@@ -3,6 +3,7 @@ export * from './components/Callout';
 export * from './components/Card';
 export * from './components/CardGrid';
 export * from './components/Collapser';
+export * from './components/CollapserGroup';
 export * from './components/CodeBlock';
 export * from './components/Typography';
 export * from './components/Heading';

package/dist/index.js

@@ -4,6 +4,7 @@ export * from './components/Callout';
 export * from './components/Card';
 export * from './components/CardGrid';
 export * from './components/Collapser';
+export * from './components/CollapserGroup';
 export * from './components/CodeBlock';
 export * from './components/Typography';
 export * from './components/Heading';

package/dist/styles.css

@@ -141,20 +141,22 @@
 
   /* CodeBlock */
   --dds-code-block-border: #e5e7eb; /* gray-200 */
-  --dds-code-block-radius: 8px;
-  --dds-code-block-bg: #ffffff;
+  --dds-code-block-radius: 12px;
+  --dds-code-block-bg: #fafafa;
   --dds-code-block-margin: 1rem 0;
-  --dds-code-block-header-bg: #ffffff;
-  --dds-code-block-header-gap: 0.75rem;
-  --dds-code-block-header-padding: 0.75rem 1rem;
-  --dds-code-block-tab-padding: 0.5rem 1rem;
-  --dds-code-block-tab-bg: #f3f4f6; /* gray-100 */
+  --dds-code-block-header-bg: #f5f5f5;
+  --dds-code-block-header-height: 2.25rem;
+  --dds-code-block-header-gap: 0.5rem;
+  --dds-code-block-header-padding: 0 1rem;
+  --dds-code-block-tab-padding: 0 0.75rem;
+  --dds-code-block-tab-bg: transparent;
   --dds-code-block-tab-text: #6b7280; /* gray-500 */
-  --dds-code-block-tab-radius: 6px;
+  --dds-code-block-tab-radius: 0;
   --dds-code-block-tab-text-hover: #374151; /* gray-700 */
-  --dds-code-block-tab-bg-hover: #e5e7eb; /* gray-200 */
+  --dds-code-block-tab-bg-hover: transparent;
   --dds-code-block-tab-text-active: #111827; /* gray-900 */
-  --dds-code-block-tab-bg-active: #ffffff;
+  --dds-code-block-tab-bg-active: transparent;
+  --dds-code-block-tab-border-active: #3b82f6; /* blue-500 */
   --dds-code-block-select-padding: 0.375rem 0.75rem;
   --dds-code-block-select-border: #d1d5db; /* gray-300 */
   --dds-code-block-select-radius: 4px;
@@ -166,17 +168,17 @@
   --dds-code-block-select-focus-ring: rgba(59, 130, 246, 0.1);
   --dds-code-block-label-size: 0.875rem;
   --dds-code-block-label-text: #6b7280; /* gray-500 */
-  --dds-code-block-copy-padding: 0.375rem 0.75rem;
-  --dds-code-block-copy-bg: #ffffff;
-  --dds-code-block-copy-border: #d1d5db; /* gray-300 */
+  --dds-code-block-copy-padding: 0.375rem;
+  --dds-code-block-copy-bg: transparent;
+  --dds-code-block-copy-border: transparent;
   --dds-code-block-copy-radius: 4px;
-  --dds-code-block-copy-text: #374151; /* gray-700 */
+  --dds-code-block-copy-text: #9ca3af; /* gray-400 */
   --dds-code-block-copy-size: 0.875rem;
-  --dds-code-block-copy-bg-hover: #f9fafb; /* gray-50 */
-  --dds-code-block-copy-border-hover: #9ca3af; /* gray-400 */
-  --dds-code-block-copy-bg-active: #f3f4f6; /* gray-100 */
-  --dds-code-block-content-bg: #f9fafb; /* gray-50 */
-  --dds-code-block-pre-padding: 1rem;
+  --dds-code-block-copy-bg-hover: rgba(0, 0, 0, 0.05);
+  --dds-code-block-copy-border-hover: transparent;
+  --dds-code-block-copy-bg-active: rgba(0, 0, 0, 0.08);
+  --dds-code-block-content-bg: #fafafa;
+  --dds-code-block-pre-padding: 1.25rem;
   --dds-code-block-text: #111827; /* gray-900 */
   --dds-code-block-highlight-bg: rgba(59, 130, 246, 0.2);
   --dds-code-block-highlight-border: #3b82f6; /* blue-500 */
@@ -184,6 +186,8 @@
   --dds-code-block-loading-text: #6b7280; /* gray-500 */
   --dds-code-block-error-text: #dc2626; /* red-600 */
   --dds-code-block-message-size: 0.875rem;
+  --dds-code-block-filename-text: #6b7280; /* gray-500 */
+  --dds-code-block-filename-size: 0.8125rem;
 
   /* Prism Syntax Highlighting */
   --dds-prism-comment: #6b7280; /* gray-500 */
@@ -294,15 +298,16 @@
   --dds-collapser-text: #e5e7eb; /* gray-200 */
 
   /* CodeBlock */
-  --dds-code-block-bg: transparent;
-  --dds-code-block-border: #4b5563; /* gray-600 */
-  --dds-code-block-header-bg: transparent;
-  --dds-code-block-tab-bg: rgba(255, 255, 255, 0.05);
+  --dds-code-block-bg: #0a0a0a;
+  --dds-code-block-border: #2e2e2e; /* hsla(0,0%,18%,1) */
+  --dds-code-block-header-bg: #141414;
+  --dds-code-block-tab-bg: transparent;
   --dds-code-block-tab-text: #9ca3af; /* gray-400 */
   --dds-code-block-tab-text-hover: #e5e7eb; /* gray-200 */
-  --dds-code-block-tab-bg-hover: rgba(255, 255, 255, 0.1);
+  --dds-code-block-tab-bg-hover: transparent;
   --dds-code-block-tab-text-active: #f9fafb; /* gray-50 */
   --dds-code-block-tab-bg-active: transparent;
+  --dds-code-block-tab-border-active: #60a5fa; /* blue-400 */
   --dds-code-block-select-border: #4b5563; /* gray-600 */
   --dds-code-block-select-bg: transparent;
   --dds-code-block-select-text: #e5e7eb; /* gray-200 */
@@ -311,17 +316,19 @@
   --dds-code-block-select-focus-ring: rgba(96, 165, 250, 0.2);
   --dds-code-block-label-text: #9ca3af; /* gray-400 */
   --dds-code-block-copy-bg: transparent;
-  --dds-code-block-copy-border: #4b5563; /* gray-600 */
-  --dds-code-block-copy-text: #e5e7eb; /* gray-200 */
-  --dds-code-block-copy-bg-hover: rgba(255, 255, 255, 0.05);
-  --dds-code-block-copy-border-hover: #6b7280; /* gray-500 */
-  --dds-code-block-copy-bg-active: rgba(255, 255, 255, 0.1);
-  --dds-code-block-content-bg: transparent;
+  --dds-code-block-copy-border: transparent;
+  --dds-code-block-copy-text: #6b7280; /* gray-500 */
+  --dds-code-block-copy-bg-hover: rgba(255, 255, 255, 0.08);
+  --dds-code-block-copy-border-hover: transparent;
+  --dds-code-block-copy-bg-active: rgba(255, 255, 255, 0.12);
+  --dds-code-block-content-bg: #0a0a0a; /* hsla(0,0%,4%,1) */
   --dds-code-block-text: #e2e8f0; /* slate-200 */
   --dds-code-block-highlight-bg: rgba(96, 165, 250, 0.15);
   --dds-code-block-highlight-border: #60a5fa; /* blue-400 */
   --dds-code-block-loading-text: #9ca3af; /* gray-400 */
   --dds-code-block-error-text: #f87171; /* red-400 */
+  --dds-code-block-filename-text: #9ca3af; /* gray-400 */
+  --dds-code-block-filename-size: 0.8125rem;
 
   /* Prism Syntax - Dark palette */
   --dds-prism-comment: #9ca3af; /* gray-400 */
@@ -416,15 +423,16 @@
     --dds-collapser-text: #e5e7eb;
 
     /* CodeBlock */
-    --dds-code-block-bg: transparent;
-    --dds-code-block-border: #4b5563;
-    --dds-code-block-header-bg: transparent;
-    --dds-code-block-tab-bg: rgba(255, 255, 255, 0.05);
+    --dds-code-block-bg: #0a0a0a;
+    --dds-code-block-border: #262626;
+    --dds-code-block-header-bg: #141414;
+    --dds-code-block-tab-bg: transparent;
     --dds-code-block-tab-text: #9ca3af;
     --dds-code-block-tab-text-hover: #e5e7eb;
-    --dds-code-block-tab-bg-hover: rgba(255, 255, 255, 0.1);
+    --dds-code-block-tab-bg-hover: transparent;
     --dds-code-block-tab-text-active: #f9fafb;
     --dds-code-block-tab-bg-active: transparent;
+    --dds-code-block-tab-border-active: #60a5fa;
     --dds-code-block-select-border: #4b5563;
     --dds-code-block-select-bg: transparent;
     --dds-code-block-select-text: #e5e7eb;
@@ -433,17 +441,19 @@
     --dds-code-block-select-focus-ring: rgba(96, 165, 250, 0.2);
     --dds-code-block-label-text: #9ca3af;
     --dds-code-block-copy-bg: transparent;
-    --dds-code-block-copy-border: #4b5563;
-    --dds-code-block-copy-text: #e5e7eb;
-    --dds-code-block-copy-bg-hover: rgba(255, 255, 255, 0.05);
-    --dds-code-block-copy-border-hover: #6b7280;
-    --dds-code-block-copy-bg-active: rgba(255, 255, 255, 0.1);
-    --dds-code-block-content-bg: transparent;
+    --dds-code-block-copy-border: transparent;
+    --dds-code-block-copy-text: #6b7280;
+    --dds-code-block-copy-bg-hover: rgba(255, 255, 255, 0.08);
+    --dds-code-block-copy-border-hover: transparent;
+    --dds-code-block-copy-bg-active: rgba(255, 255, 255, 0.12);
+    --dds-code-block-content-bg: #0a0a0a; /* hsla(0,0%,4%,1) */
     --dds-code-block-text: #e2e8f0;
     --dds-code-block-highlight-bg: rgba(96, 165, 250, 0.15);
     --dds-code-block-highlight-border: #60a5fa;
     --dds-code-block-loading-text: #9ca3af;
     --dds-code-block-error-text: #f87171;
+    --dds-code-block-filename-text: #9ca3af;
+    --dds-code-block-filename-size: 0.8125rem;
 
     /* Prism Syntax - Dark palette */
     --dds-prism-comment: #9ca3af;
@@ -456,6 +466,130 @@
     --dds-prism-regex: #fb923c;
   }
 }
+/* Explicit dark mode via data attribute (overrides OS preference) */
+[data-dds-theme="dark"] {
+  /* Heading / Typography */
+  --dds-heading-color: #f9fafb;
+  --dds-typography-caption-color: #9ca3af;
+
+  /* Button - Primary */
+  --dds-button-primary-bg: #3b82f6;
+  --dds-button-primary-bg-hover: #2563eb;
+  --dds-button-primary-text: #ffffff;
+  --dds-button-primary-focus-ring: #60a5fa;
+
+  /* Button - Secondary */
+  --dds-button-secondary-bg: transparent;
+  --dds-button-secondary-bg-hover: rgba(255, 255, 255, 0.1);
+  --dds-button-secondary-text: #e5e7eb;
+  --dds-button-secondary-focus-ring: #9ca3af;
+
+  /* Button - Outline */
+  --dds-button-outline-bg: transparent;
+  --dds-button-outline-bg-hover: rgba(255, 255, 255, 0.05);
+  --dds-button-outline-border: #6b7280;
+  --dds-button-outline-text: #e5e7eb;
+  --dds-button-outline-focus-ring: #9ca3af;
+
+  /* Focus Ring */
+  --dds-focus-ring-bg: transparent;
+
+  /* Card */
+  --dds-card-bg-blue: rgba(59, 130, 246, 0.08);
+  --dds-card-bg-green: rgba(34, 197, 94, 0.08);
+  --dds-card-bg-purple: rgba(168, 85, 247, 0.08);
+  --dds-card-bg-red: rgba(239, 68, 68, 0.08);
+  --dds-card-bg-yellow: rgba(234, 179, 8, 0.08);
+  --dds-card-bg-gray: rgba(156, 163, 175, 0.08);
+  --dds-card-bg-white: transparent;
+  --dds-card-border: #4b5563;
+  --dds-card-border-hover: #9ca3af;
+  --dds-card-shadow-hover: none;
+
+  --dds-card-title-blue: #93c5fd;
+  --dds-card-title-green: #86efac;
+  --dds-card-title-purple: #d8b4fe;
+  --dds-card-title-red: #fca5a5;
+  --dds-card-title-yellow: #fde047;
+  --dds-card-title-gray: #e5e7eb;
+
+  --dds-card-text-blue: #bfdbfe;
+  --dds-card-text-green: #bbf7d0;
+  --dds-card-text-purple: #e9d5ff;
+  --dds-card-text-red: #fecaca;
+  --dds-card-text-yellow: #fef08a;
+  --dds-card-text-gray: #d1d5db;
+
+  /* Link */
+  --dds-link-color: #60a5fa;
+  --dds-link-color-hover: #93c5fd;
+  --dds-link-decoration: #3b82f6;
+  --dds-link-decoration-hover: #60a5fa;
+
+  /* Callout */
+  --dds-callout-text: #e5e7eb;
+
+  --dds-callout-caution-bg: transparent;
+  --dds-callout-caution-title: #fca5a5;
+
+  --dds-callout-important-bg: transparent;
+  --dds-callout-important-title: #fcd34d;
+
+  --dds-callout-tip-bg: transparent;
+  --dds-callout-tip-title: #93c5fd;
+
+  --dds-callout-course-bg: transparent;
+  --dds-callout-course-title: #6ee7b7;
+
+  /* Collapser */
+  --dds-collapser-border: #4b5563;
+  --dds-collapser-button-hover-bg: rgba(255, 255, 255, 0.05);
+  --dds-collapser-icon-color: #9ca3af;
+  --dds-collapser-text: #e5e7eb;
+
+  /* CodeBlock */
+  --dds-code-block-bg: #0a0a0a;
+  --dds-code-block-border: #2e2e2e; /* hsla(0,0%,18%,1) */
+  --dds-code-block-header-bg: #141414;
+  --dds-code-block-tab-bg: transparent;
+  --dds-code-block-tab-text: #9ca3af;
+  --dds-code-block-tab-text-hover: #e5e7eb;
+  --dds-code-block-tab-bg-hover: transparent;
+  --dds-code-block-tab-text-active: #f9fafb;
+  --dds-code-block-tab-bg-active: transparent;
+  --dds-code-block-tab-border-active: #60a5fa;
+  --dds-code-block-select-border: #4b5563;
+  --dds-code-block-select-bg: transparent;
+  --dds-code-block-select-text: #e5e7eb;
+  --dds-code-block-select-border-hover: #6b7280;
+  --dds-code-block-select-border-focus: #60a5fa;
+  --dds-code-block-select-focus-ring: rgba(96, 165, 250, 0.2);
+  --dds-code-block-label-text: #9ca3af;
+  --dds-code-block-copy-bg: transparent;
+  --dds-code-block-copy-border: transparent;
+  --dds-code-block-copy-text: #6b7280;
+  --dds-code-block-copy-bg-hover: rgba(255, 255, 255, 0.08);
+  --dds-code-block-copy-border-hover: transparent;
+  --dds-code-block-copy-bg-active: rgba(255, 255, 255, 0.12);
+  --dds-code-block-content-bg: #0a0a0a; /* hsla(0,0%,4%,1) */
+  --dds-code-block-text: #e2e8f0;
+  --dds-code-block-highlight-bg: rgba(96, 165, 250, 0.15);
+  --dds-code-block-highlight-border: #60a5fa;
+  --dds-code-block-loading-text: #9ca3af;
+  --dds-code-block-error-text: #f87171;
+  --dds-code-block-filename-text: #9ca3af;
+  --dds-code-block-filename-size: 0.8125rem;
+
+  /* Prism Syntax - Dark palette */
+  --dds-prism-comment: #9ca3af;
+  --dds-prism-punctuation: #d1d5db;
+  --dds-prism-property: #f87171;
+  --dds-prism-string: #34d399;
+  --dds-prism-operator: #fbbf24;
+  --dds-prism-keyword: #60a5fa;
+  --dds-prism-function: #a78bfa;
+  --dds-prism-regex: #fb923c;
+}
 /* Import PrismJS theme */
 /**
  * prism.js default theme for JavaScript, CSS and HTML
@@ -878,6 +1012,13 @@ a.no-text-decoration {
   padding: var(--dds-collapser-content-padding);
   color: var(--dds-collapser-text);
 }
+.dds-collapser-group {
+  display: flex;
+  flex-direction: column;
+}
+.dds-collapser-group > .dds-collapser {
+  margin: 0;
+}
 .dds-code-block {
   border: 1px solid var(--dds-code-block-border);
   border-radius: var(--dds-code-block-radius);
@@ -888,18 +1029,19 @@ a.no-text-decoration {
 .dds-code-block-header {
   display: flex;
   justify-content: space-between;
-  align-items: flex-end;
+  align-items: center;
   padding: 0;
   background-color: var(--dds-code-block-header-bg);
   border-bottom: 1px solid var(--dds-code-block-border);
-  min-height: 2.75rem;
+  height: var(--dds-code-block-header-height);
   overflow: hidden;
 }
 .dds-code-block-header-left {
   display: flex;
-  align-items: flex-end;
+  align-items: center;
   flex: 1;
   min-width: 0;
+  height: 100%;
 }
 .dds-code-block-header-right {
   display: flex;
@@ -915,7 +1057,8 @@ a.no-text-decoration {
   overflow-x: auto;
   overflow-y: hidden;
   -webkit-overflow-scrolling: touch;
-  align-items: flex-end;
+  align-items: center;
+  height: 100%;
   /* Hide scrollbar but keep functionality */
   scrollbar-width: none; /* Firefox */
   -ms-overflow-style: none; /* IE and Edge */
@@ -926,18 +1069,18 @@ a.no-text-decoration {
 .dds-code-block-tab {
   padding: var(--dds-code-block-tab-padding);
   background-color: var(--dds-code-block-tab-bg);
-  border: 1px solid var(--dds-code-block-border);
-  border-bottom: none;
-  border-top-left-radius: var(--dds-code-block-tab-radius);
-  border-top-right-radius: var(--dds-code-block-tab-radius);
+  border: none;
+  border-bottom: 2px solid transparent;
   color: var(--dds-code-block-tab-text);
-  font-size: var(--dds-code-block-tab-size, 0.875rem);
+  font-size: 0.8125rem;
   font-weight: var(--dds-font-medium);
   cursor: pointer;
   white-space: nowrap;
   transition: var(--dds-transition-colors);
-  margin-right: 2px;
   position: relative;
+  height: 100%;
+  display: flex;
+  align-items: center;
 }
 .dds-code-block-tab:hover {
   color: var(--dds-code-block-tab-text-hover);
@@ -946,11 +1089,18 @@ a.no-text-decoration {
 .dds-code-block-tab-active {
   color: var(--dds-code-block-tab-text-active);
   background-color: var(--dds-code-block-tab-bg-active);
-  border-color: var(--dds-code-block-border);
+  border-bottom-color: var(--dds-code-block-tab-border-active);
 }
 .dds-code-block-tab-active:hover {
   background-color: var(--dds-code-block-tab-bg-active);
 }
+.dds-code-block-filename {
+  font-size: var(--dds-code-block-filename-size);
+  color: var(--dds-code-block-filename-text);
+  font-weight: var(--dds-font-medium);
+  padding: var(--dds-code-block-header-padding);
+  white-space: nowrap;
+}
 .dds-code-block-language-select {
   padding: var(--dds-code-block-select-padding);
   border: 1px solid var(--dds-code-block-select-border);
@@ -979,18 +1129,20 @@ a.no-text-decoration {
 .dds-code-block-copy-button {
   padding: var(--dds-code-block-copy-padding);
   background-color: var(--dds-code-block-copy-bg);
-  border: 1px solid var(--dds-code-block-copy-border);
+  border: none;
   border-radius: var(--dds-code-block-copy-radius);
   color: var(--dds-code-block-copy-text);
-  font-size: var(--dds-code-block-copy-size);
-  font-weight: var(--dds-font-medium);
   cursor: pointer;
   transition: var(--dds-transition-colors);
   white-space: nowrap;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
 }
 .dds-code-block-copy-button:hover {
   background-color: var(--dds-code-block-copy-bg-hover);
-  border-color: var(--dds-code-block-copy-border-hover);
 }
 .dds-code-block-copy-button:active {
   background-color: var(--dds-code-block-copy-bg-active);
@@ -1037,11 +1189,13 @@ a.no-text-decoration {
 }
 .dds-code-block-line-highlights {
   position: absolute;
-  top: 0;
+  top: var(--dds-code-block-pre-padding);
   left: 0;
   right: 0;
   bottom: 0;
   pointer-events: none;
+  font-size: var(--dds-code-block-font-size, 0.875rem);
+  line-height: var(--dds-code-block-line-height, 1.5);
 }
 .dds-code-block-line-highlight {
   position: absolute;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@roadlittledawn/docs-design-system-react",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "license": "MIT",
   "description": "React components for documentation design system",
   "repository": {