@boostdev/design-system-components 0.1.13 → 0.1.15

package/src/components/ui/Tabs/Tabs.stories.tsx

@@ -4,7 +4,6 @@ import { Tabs } from './Tabs';
 const meta = {
   title: 'UI/Tabs',
   component: Tabs,
-  tags: ['autodocs'],
 } satisfies Meta<typeof Tabs>;
 
 export default meta;

package/src/components/ui/Tooltip/Tooltip.mdx

@@ -0,0 +1,43 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './Tooltip.stories';
+
+<Meta of={Stories} />
+
+# Tooltip
+
+Short contextual label that appears on hover or focus. Use to supplement icon buttons or truncated text with a brief description.
+
+## When to use
+- Icon-only buttons that need a text label for clarity
+- Truncated content where the full value is useful on demand
+
+## When not to use
+- For critical information — tooltips are not visible on touch devices
+- For lengthy explanations — use an inline hint or a popover instead
+
+## Examples
+
+### Top (default)
+<Canvas of={Stories.Top} />
+
+### Bottom
+<Canvas of={Stories.Bottom} />
+
+### Left
+<Canvas of={Stories.Left} />
+
+### Right
+<Canvas of={Stories.Right} />
+
+### All placements
+<Canvas of={Stories.AllPlacements} />
+
+## Props
+
+<ArgTypes of={Stories} />
+
+## Accessibility
+
+- Tooltip content is linked via `aria-describedby` on the trigger element
+- Shown on both `:hover` and `:focus` to be keyboard accessible
+- Does not contain interactive content (use `Popover` for that)

package/src/components/ui/Tooltip/Tooltip.module.css

@@ -6,15 +6,12 @@
   }
 
   .tooltip {
-    --tooltip_bg:   var(--color_on-bg);
-    --tooltip_text: var(--color_bg);
-
     position: absolute;
     z-index: var(--z-index_popover);
     padding: var(--space_xxs) var(--space_xs);
     border-radius: var(--border_radius--xs);
-    background-color: var(--tooltip_bg);
-    color: var(--tooltip_text);
+    background-color: var(--tooltip_bg, var(--color_on-bg));
+    color: var(--tooltip_text, var(--color_bg));
     font-size: var(--font_size--body--s);
     line-height: var(--font_line-height--body);
     white-space: nowrap;

package/src/components/ui/Tooltip/Tooltip.stories.tsx

@@ -1,10 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { Tooltip } from './Tooltip';
+import { Button } from '../../interaction/Button/Button';
 
 const meta = {
   title: 'UI/Tooltip',
   component: Tooltip,
-  tags: ['autodocs'],
   argTypes: {
     placement: { control: 'radio', options: ['top', 'bottom', 'left', 'right'] },
   },
@@ -24,7 +24,7 @@ export const Top: Story = {
   args: { content: 'Helpful tip', placement: 'top' },
   render: args => (
     <Tooltip {...args}>
-      <button type="button">Hover or focus me</button>
+      <Button>Hover or focus me</Button>
     </Tooltip>
   ),
 };
@@ -33,7 +33,7 @@ export const Bottom: Story = {
   args: { content: 'Below the trigger', placement: 'bottom' },
   render: args => (
     <Tooltip {...args}>
-      <button type="button">Bottom tooltip</button>
+      <Button>Bottom tooltip</Button>
     </Tooltip>
   ),
 };
@@ -42,7 +42,7 @@ export const Left: Story = {
   args: { content: 'On the left', placement: 'left' },
   render: args => (
     <Tooltip {...args}>
-      <button type="button">Left tooltip</button>
+      <Button>Left tooltip</Button>
     </Tooltip>
   ),
 };
@@ -51,7 +51,7 @@ export const Right: Story = {
   args: { content: 'On the right', placement: 'right' },
   render: args => (
     <Tooltip {...args}>
-      <button type="button">Right tooltip</button>
+      <Button>Right tooltip</Button>
     </Tooltip>
   ),
 };
@@ -61,7 +61,7 @@ export const AllPlacements: Story = {
     <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '3rem' }}>
       {(['top', 'bottom', 'left', 'right'] as const).map(p => (
         <Tooltip key={p} content={`Placement: ${p}`} placement={p}>
-          <button type="button">{p}</button>
+          <Button>{p}</Button>
         </Tooltip>
       ))}
     </div>

package/src/components/ui/Typography/Typography.mdx

@@ -0,0 +1,41 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './Typography.stories';
+
+<Meta of={Stories} />
+
+# Typography
+
+Renders a text element with a design-system variant. Decouples visual style from semantic HTML element via the `component` override prop.
+
+## When to use
+- Any heading or body text that should follow the design system scale
+- When you need visual h2 styling on a semantically different element (e.g. a `<h3>`)
+
+## Examples
+
+### All variants
+<Canvas of={Stories.AllVariants} />
+
+### H1
+<Canvas of={Stories.H1} />
+
+### H2
+<Canvas of={Stories.H2} />
+
+### H3
+<Canvas of={Stories.H3} />
+
+### Body
+<Canvas of={Stories.Body} />
+
+### Body small
+<Canvas of={Stories.BodySmall} />
+
+## Props
+
+<ArgTypes of={Stories} />
+
+## Accessibility
+
+- Defaults to the semantically correct element for each variant (`h1`–`h3`, `p`)
+- Use the `component` prop to override the rendered element when document outline requires a different level than the visual style

package/src/components/ui/Typography/Typography.stories.tsx

@@ -4,7 +4,6 @@ import { Typography } from './Typography';
 const meta = {
   title: 'UI/Typography',
   component: Typography,
-  tags: ['autodocs'],
   argTypes: {
     variant: { control: 'select', options: ['h1', 'h2', 'h3', 'body', 'body_s'] },
   },

package/src/index.ts

@@ -6,6 +6,8 @@ export { Avatar } from './components/ui/Avatar';
 export { Badge } from './components/ui/Badge';
 export { Breadcrumb } from './components/ui/Breadcrumb';
 export type { BreadcrumbItem } from './components/ui/Breadcrumb';
+export { Collapsible } from './components/ui/Collapsible';
+export type { CollapsibleProps } from './components/ui/Collapsible';
 export { Calendar } from './components/ui/Calendar';
 export { Carousel } from './components/ui/Carousel';
 export { DescriptionList } from './components/ui/DescriptionList';

package/src/static/logo.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 97.165 42.584" >
+    <path fill="currentcolor" d="M0 25.594V1.406h3.465v8.527h.068q.578-.849 1.376-1.308t1.817-.459q1.257 0 1.954.442.695.441 1.138 1.121.339.543.441 1.427.101.883.102 2.752v6.557q0 1.427-.136 2.276-.136.85-.441 1.427-.884 1.63-3.023 1.63-1.291 0-1.971-.509c-.68-.509-.895-.759-1.325-1.257v1.563zM6.896 13.67q0-.816-.356-1.427-.357-.61-1.342-.611-.748 0-1.24.527-.493.526-.493 1.342v6.692q0 .952.476 1.546t1.257.595q.884 0 1.291-.646.408-.645.408-1.699V13.67ZM12.909 14.146q0-1.053.136-1.937a4.7 4.7 0 0 1 .51-1.563 4.67 4.67 0 0 1 1.75-1.8q1.138-.68 2.769-.68c1.631 0 2.01.227 2.769.68a4.7 4.7 0 0 1 1.75 1.8q.374.68.509 1.563.137.884.137 1.937v5.673q0 1.053-.137 1.937-.135.884-.509 1.562a4.7 4.7 0 0 1-1.75 1.801q-1.139.68-2.769.679c-1.63-.001-2.011-.226-2.769-.679a4.67 4.67 0 0 1-1.75-1.801 4.7 4.7 0 0 1-.51-1.562 13 13 0 0 1-.136-1.937zm3.465 6.216q0 .986.459 1.478.459.493 1.24.493c.781 0 .934-.164 1.24-.493q.459-.492.458-1.478v-6.76q0-.985-.458-1.478-.46-.492-1.24-.493c-.78-.001-.935.165-1.24.493q-.459.493-.459 1.478zM25.479 14.146q0-1.053.136-1.937a4.7 4.7 0 0 1 .51-1.563 4.67 4.67 0 0 1 1.75-1.8q1.138-.68 2.769-.68c1.631 0 2.01.227 2.769.68a4.7 4.7 0 0 1 1.75 1.8q.374.68.509 1.563.137.884.137 1.937v5.673q0 1.053-.137 1.937-.135.884-.509 1.562a4.7 4.7 0 0 1-1.75 1.801q-1.138.68-2.769.679c-1.631-.001-2.011-.226-2.769-.679a4.67 4.67 0 0 1-1.75-1.801 4.7 4.7 0 0 1-.51-1.562 13 13 0 0 1-.136-1.937zm3.465 6.216q0 .986.459 1.478.459.493 1.24.493c.781 0 .934-.164 1.24-.493q.459-.492.458-1.478v-6.76q0-.985-.458-1.478-.46-.492-1.24-.493c-.78-.001-.935.165-1.24.493q-.459.493-.459 1.478zM44.64 13.194q-.034-.883-.561-1.325a1.83 1.83 0 0 0-1.206-.441q-.816 0-1.257.526a1.82 1.82 0 0 0-.441 1.206q0 .475.237.934.236.458 1.223.833l2.039.815q1.936.748 2.667 2.038a5.64 5.64 0 0 1 .73 2.82q0 1.088-.392 2.021a5.4 5.4 0 0 1-1.069 1.648 4.9 4.9 0 0 1-1.631 1.121 5.2 5.2 0 0 1-2.072.407q-2.107 0-3.533-1.325a4.85 4.85 0 0 1-1.155-1.614q-.442-.968-.476-2.259h3.262q.1.714.492 1.325.39.612 1.376.611.747 0 1.342-.493.595-.492.595-1.376 0-.713-.374-1.223t-1.358-.883l-1.665-.612q-1.63-.611-2.564-1.817-.936-1.207-.935-2.938 0-1.087.407-2.021a4.9 4.9 0 0 1 1.121-1.614 4.6 4.6 0 0 1 1.597-1.036q.918-.357 1.971-.357c1.053 0 1.354.125 1.953.374q.9.374 1.546 1.053c.646.679.77.991 1.02 1.613q.374.936.374 1.988zM50.312 8.37V3.138h3.465V8.37h2.141v2.718h-2.141v9.546q0 .612.119.951.118.34.391.51c.273.17.402.181.663.204q.39.034.968.034v3.261h-1.427q-1.19 0-1.987-.374-.798-.373-1.274-.951c-.476-.578-.549-.821-.696-1.308a4.9 4.9 0 0 1-.221-1.41V11.088h-1.732V8.37zM25.479 37.796V27.404h1.489v3.663h.029a1.8 1.8 0 0 1 .59-.562q.344-.197.781-.197.54 0 .839.19.3.19.489.482.146.234.19.613c.044.379.044.648.044 1.182v2.817q0 .614-.058.978a2 2 0 0 1-.19.613q-.38.7-1.299.7-.556 0-.846-.219a3.6 3.6 0 0 1-.569-.54v.672zm2.963-5.124q0-.35-.154-.613-.152-.263-.576-.263a.7.7 0 0 0-.533.226.8.8 0 0 0-.211.576v2.876q0 .41.204.664c.204.254.316.256.54.256q.38 0 .555-.278.174-.277.175-.73zM35.521 30.396v7.4h-1.489v-.715h-.029a2.1 2.1 0 0 1-.562.577q-.329.226-.839.226-.277 0-.554-.095a1.3 1.3 0 0 1-.497-.314 1.6 1.6 0 0 1-.35-.562 2.4 2.4 0 0 1-.131-.839v-5.678h1.489v5.123q-.001.409.19.642.188.234.539.234.424 0 .584-.263c.16-.263.161-.428.161-.759v-4.977zM36.677 28.892v-1.489h1.489v1.489zm0 8.904v-7.4h1.489v7.4zM39.278 27.403h1.489v8.305q0 .423.154.576.153.153.576.197v1.401a5 5 0 0 1-.92-.08 1.6 1.6 0 0 1-.701-.314q-.291-.218-.445-.62c-.154-.402-.154-.62-.154-1.059v-8.407ZM42.274 30.396v-2.248h1.489v2.248h.92v1.168h-.92v4.102q0 .262.05.409c.05.147.09.17.169.219a.6.6 0 0 0 .284.088q.167.015.417.015v1.401h-.613q-.511 0-.854-.161a1.5 1.5 0 0 1-.547-.409q-.205-.247-.299-.562c-.094-.315-.094-.411-.094-.606v-4.496h-.745v-1.168h.745ZM47.967 30.396v-2.248h1.489v2.248h.92v1.168h-.92v4.102q0 .262.05.409c.05.147.09.17.169.219a.6.6 0 0 0 .284.088q.167.015.417.015v1.401h-.613q-.511 0-.854-.161a1.5 1.5 0 0 1-.547-.409q-.205-.247-.299-.562c-.094-.315-.094-.411-.094-.606v-4.496h-.745v-1.168h.745ZM51.043 32.877q0-.453.058-.832c.058-.379.111-.477.219-.672q.263-.482.752-.774.488-.292 1.19-.292c.702 0 .863.097 1.19.292q.488.292.751.774.161.293.219.672.059.38.059.832v2.438q0 .453-.059.832a2 2 0 0 1-.219.672 2 2 0 0 1-.751.774q-.49.292-1.19.292c-.7 0-.864-.097-1.19-.292a2 2 0 0 1-.752-.774 2 2 0 0 1-.219-.672 5.5 5.5 0 0 1-.058-.832zm1.489 2.671q0 .424.197.635c.197.211.309.212.533.212s.401-.071.532-.212.198-.352.198-.635v-2.904q0-.423-.198-.635c-.198-.212-.309-.212-.532-.212s-.402.071-.533.212-.197.353-.197.635z"/>
+    <path fill="none"
+          d="M72.798 23.318q.61 1.122 1.75 1.801 1.138.68 2.769.679 1.189 0 2.14-.407a4.9 4.9 0 0 0 1.631-1.121q1.394-1.393 1.394-3.669h-3.466a3.1 3.1 0 0 1-.391 1.155q-.323.578-1.308.578-.782 0-1.24-.442-.459-.441-.459-1.257v-2.344h6.863v-4.756q0-2.31-1.359-3.839a4.8 4.8 0 0 0-1.647-1.121q-.969-.407-2.157-.408-1.631 0-2.769.68a4.67 4.67 0 0 0-1.75 1.8 4.7 4.7 0 0 0-.51 1.563 13 13 0 0 0-.136 1.937v5.673q0 1.053.136 1.937a4.7 4.7 0 0 0 .51 1.562Zm2.819-9.716q0-.985.459-1.478.459-.492 1.24-.493c.781-.001.934.165 1.24.493q.458.493.458 1.478v1.97h-3.397zM95.186 8.37h-3.669l-2.31 11.007h-.068L86.828 8.37h-3.669l4.485 17.224h3.057zM66.14 9.933h-.067q-.58-.849-1.376-1.308-.8-.459-1.818-.459-1.29 0-1.936.442-1.394.85-1.598 2.548-.101.883-.102 2.752v6.557q0 1.427.136 2.276.136.85.442 1.427.848 1.63 3.023 1.63.645 0 1.121-.136.475-.135.849-.374.374-.237.68-.561.306-.322.646-.697v1.563h3.465V1.406H66.14zm0 10.259q0 .951-.476 1.546-.475.595-1.257.595-.884 0-1.291-.646c-.407-.646-.408-.997-.408-1.699v-6.319q0-.816.357-1.427.356-.61 1.342-.611.747 0 1.24.527.492.526.492 1.342v6.692Z"/>
+    <path fill="currentcolor" d="M79.015 13.602q0-.985-.458-1.478-.46-.492-1.24-.493c-.78-.001-.935.165-1.24.493q-.459.493-.459 1.478v1.97h3.397zM66.992 31.797q-.336 0-.533.212-.198.212-.197.635v.846h1.46v-.846q0-.423-.198-.635a.7.7 0 0 0-.532-.212M61.523 31.797q-.336 0-.54.255c-.204.255-.204.392-.204.664v2.875q0 .35.211.577a.7.7 0 0 0 .533.226q.424 0 .576-.263.153-.262.154-.613v-2.715q0-.453-.175-.73-.175-.278-.555-.278Z"/>
+    <path fill="currentcolor" d="M97.142 0 57.498.008l.022 42.576 39.644-.008zm-24.99 14.146q0-1.053.136-1.937a4.7 4.7 0 0 1 .51-1.563 4.67 4.67 0 0 1 1.75-1.8q1.138-.68 2.769-.68 1.189 0 2.157.408a4.8 4.8 0 0 1 1.647 1.121q1.358 1.53 1.359 3.839v4.756h-6.863v2.344q0 .815.459 1.257t1.24.442q.984 0 1.308-.578.322-.578.391-1.155h3.466q0 2.277-1.394 3.669a4.9 4.9 0 0 1-1.631 1.121q-.951.407-2.14.407-1.631 0-2.769-.679a4.67 4.67 0 0 1-1.75-1.801 4.7 4.7 0 0 1-.51-1.562 13 13 0 0 1-.136-1.937v-5.673Zm-8.41 21.27q0 .817-.044 1.183-.087.73-.671 1.094-.292.19-.847.19-.437 0-.781-.197a1.8 1.8 0 0 1-.59-.562h-.029v3.664h-1.489V30.396h1.489v.671q.277-.321.569-.54t.846-.219q.919 0 1.299.701.131.249.19.613.057.364.058.978zm5.469-.759h-2.949v1.007q0 .35.197.54t.533.19q.423 0 .561-.248t.169-.496h1.489q0 .978-.599 1.576a2.1 2.1 0 0 1-.7.482 2.3 2.3 0 0 1-.92.175q-.702 0-1.19-.292a2 2 0 0 1-.752-.774 2 2 0 0 1-.219-.672 5.5 5.5 0 0 1-.058-.832v-2.438q0-.453.058-.832.058-.38.219-.672.263-.482.752-.774.488-.292 1.19-.292.51 0 .927.175.416.176.708.482.585.657.584 1.649v2.043Zm.393-9.063h-3.465v-1.563q-.34.375-.646.697a3.6 3.6 0 0 1-.68.561 3.2 3.2 0 0 1-.849.374 4.1 4.1 0 0 1-1.121.136q-2.175 0-3.023-1.63-.306-.577-.442-1.427t-.136-2.276v-6.557q0-1.869.102-2.752.204-1.698 1.598-2.548.645-.442 1.936-.442 1.02 0 1.818.459.797.459 1.376 1.308h.067V1.406h3.465zm4.109 6.29a1.2 1.2 0 0 0-.452-.088q-.235 0-.504.08-.27.081-.489.27a1.4 1.4 0 0 0-.38.496q-.146.306-.146.759v4.393h-1.489v-7.4h1.489v.788q.452-.408.89-.642.439-.234 1.08-.234v1.577Zm3.829-3.08h-.672q-.438 0-.438.511v1.08h1.109v1.168h-1.109v6.232h-1.489v-6.232h-.73v-1.168h.73v-1.007q0-.54.161-.912.159-.372.438-.62.262-.248.605-.35t.708-.102h.687zm5.026 6.51q0 .453-.059.832a2 2 0 0 1-.219.672 2 2 0 0 1-.751.774q-.49.292-1.19.292c-.7 0-.864-.097-1.19-.292a2 2 0 0 1-.752-.774 2 2 0 0 1-.219-.672 5.5 5.5 0 0 1-.058-.832v-2.438q0-.453.058-.832c.058-.379.111-.477.219-.672q.263-.482.752-.774.488-.292 1.19-.292c.702 0 .863.097 1.19.292q.488.292.751.774.161.293.219.672.059.38.059.832zm4.512-3.43a1.2 1.2 0 0 0-.452-.088q-.235 0-.504.08-.27.081-.489.27a1.4 1.4 0 0 0-.379.496q-.146.306-.146.759v4.393h-1.489v-7.4h1.489v.788a4.6 4.6 0 0 1 .889-.642q.439-.234 1.08-.234v1.577ZM83.159 8.37h3.669l2.311 11.007h.068l2.31-11.007h3.669l-4.484 17.224h-3.058L83.16 8.37Zm12.107 29.426h-1.489v-5.123q0-.409-.19-.643-.189-.233-.54-.233-.423 0-.583.263-.16.262-.161.759v4.977h-1.489v-5.123q0-.408-.19-.643-.19-.233-.54-.233-.423 0-.584.263-.16.262-.16.759v4.977h-1.489v-7.4h1.489v.715h.029q.233-.35.561-.577t.839-.226q.482 0 .803.234t.525.51q.278-.307.613-.525.336-.219.934-.219.278 0 .569.095a1.4 1.4 0 0 1 .526.314q.234.219.379.562.146.343.146.839v5.678Z"/>
+    <path fill="currentcolor" d="M80.349 31.797q-.336 0-.533.212c-.197.212-.197.353-.197.635v2.904q0 .424.197.635c.197.211.309.212.533.212s.401-.071.532-.212.198-.352.198-.635v-2.904q0-.423-.198-.635c-.198-.212-.309-.212-.532-.212M64.407 11.631q-.985 0-1.342.611t-.357 1.427v6.319q0 1.053.408 1.699c.408.646.702.646 1.291.646q.78 0 1.257-.595.476-.594.476-1.546V13.5q0-.815-.492-1.342a1.63 1.63 0 0 0-1.24-.527Z"/>
+</svg>

package/src/stories/Introduction.css

@@ -0,0 +1,17 @@
+.sbdocs.sbdocs-content .title {
+    font-size: 1.5em;
+    font-weight: bold;
+    line-height: 1.2;
+}
+
+.grid {
+    padding-inline: 0;
+}
+
+.card {
+    grid-column: var(--grid_span-25)
+}
+
+.cardContent {
+    font-size: var(--font_size--body--s);
+}

package/src/stories/Introduction.mdx

@@ -0,0 +1,129 @@
+import {Meta} from '@storybook/blocks';
+import {Button} from "../components/interaction/Button/index.ts";
+import componentsPackageJson from '../../package.json';
+import foundationPackageJson from '../../node_modules/@boostdev/design-system-foundation/package.json';
+import './Introduction.css';
+import {ButtonGroup} from "../components/layout/ButtonGroup/index.ts";
+import {Card} from "../components/layout/Card/index.ts";
+
+<Meta title="Introduction"/>
+
+
+
+<div>
+    <div>
+        <img src="../../src/static/logo.svg" alt="BoostDev logo" width={200}/>
+        <div className="title">Design System Foundation {foundationPackageJson.version} &<br/> Components {componentsPackageJson.version}</div>
+    </div>
+    <div className="main-description">
+        <p>
+            Accessible, token-driven React components. Zero extra runtime.
+        </p>
+        <ButtonGroup variant="content">
+            <Button variant="secondary" href="https://www.npmjs.com/package/@boostdev/design-system-foundation">DS Foundation</Button>
+            <Button variant="secondary" href="https://www.npmjs.com/package/@boostdev/design-system-components">DS Components</Button>
+        </ButtonGroup>
+    </div>
+    ---
+
+    ## Installation
+
+    ```bash
+    pnpm add @boostdev/components @boostdev/design-system-foundation
+    ```
+
+    Import the CSS once at your app root:
+
+    ```ts
+    import '@boostdev/design-system-foundation/css';
+    import '@boostdev/components/css';
+    ```
+
+    For **Next.js / RSC**, use the `/client` subpath:
+
+    ```ts
+    import {Button, Card} from '@boostdev/components/client';
+    ```
+
+    ---
+
+    ## Components
+
+    <div className="utl-main-grid grid">
+
+        <Card className="card">
+            <strong>UI</strong>
+            <div className="cardContent">
+                Badge · Typography · Alert · Avatar · Loading · Skeleton · Separator · Tooltip · Progress ·
+                ProgressCircle · Tabs · Breadcrumb · Accordion · Pagination · Link · Table · DescriptionList ·
+                NotificationBanner · SkipLink · Carousel · Calendar
+            </div>
+        </Card>
+
+        <Card className="card">
+            <strong>Interaction</strong>
+            <div className="cardContent">
+                Button · Dialog · Toast · Rating · Popover · DropdownMenu · Command · Drawer
+            </div>
+        </Card>
+
+        <Card className="card">
+            <strong>Form</strong>
+            <div className="cardContent">
+                FormInput · Checkbox · Radio · Switch · Select · Textarea · Slider · NumberInput · FileInput · Combobox
+            </div>
+        </Card>
+
+        <Card className="card">
+            <strong>Layout</strong>
+            <div className="cardContent">
+                ButtonGroup · Card · SectionHeader · IconWrapper
+            </div>
+        </Card>
+    </div>
+
+    ---
+
+    ## Design tokens
+
+    All components consume tokens from `@boostdev/design-system-foundation`. Override semantic tokens to retheme
+    everything at once:
+
+    ```css
+    @layer tokens.override {
+        :root {
+            --color_cta:         var(--BASE__color--orange);
+            --color_on-cta:      var(--BASE__color--white);
+            --color_interactive: var(--BASE__color--orange);
+            --color_active:      var(--BASE__color--orange);
+            --color_on-active:   var(--BASE__color--white);
+        }
+    }
+    ```
+
+    Dark mode is applied via `[data-theme="dark"]` or `prefers-color-scheme`. Use the **Theme** toolbar button at the
+    top of Storybook to toggle.
+
+    ---
+
+    ## MCP server
+
+    The design system exposes a live MCP server at `https://ds.boostdev.nl/api/mcp`.
+    AI coding agents can connect to it to query component props and tokens without reading source files directly.
+
+
+<table>
+<thead>
+<tr><th>Tool</th><th>Description</th></tr>
+</thead>
+<tbody>
+<tr><td>`ds_get_component`</td><td>Full props interface for a named component</td></tr>
+<tr><td>`ds_list_components`</td><td>All components grouped by category</td></tr>
+<tr><td>`ds_list_tokens`</td><td>Design tokens, filterable by group</td></tr>
+<tr><td>`ds_search`</td><td>Keyword search across components and tokens</td></tr>
+<tr><td>`ds_get_guide`</td><td>Returns the AGENTS.md usage guide</td></tr>
+</tbody>
+</table>
+
+
+</div>