@boostdev/design-system-components 0.1.12 → 0.1.14

package/src/components/ui/Progress/Progress.mdx

@@ -0,0 +1,52 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './Progress.stories';
+
+<Meta of={Stories} />
+
+# Progress
+
+Horizontal progress bar communicating completion towards a goal.
+
+## When to use
+- File uploads, form step completion, onboarding flows
+- Any process with a known total and measurable progress
+
+## Examples
+
+### Default
+<Canvas of={Stories.Default} />
+
+### With label
+<Canvas of={Stories.WithLabel} />
+
+### All sizes
+<Canvas of={Stories.AllSizes} />
+
+### Complete
+<Canvas of={Stories.Complete} />
+
+### Empty
+<Canvas of={Stories.Empty} />
+
+## Props
+
+<ArgTypes of={Stories} />
+
+## CSS variables
+
+
+<table>
+<thead>
+<tr><th>Variable</th><th>Description</th></tr>
+</thead>
+<tbody>
+<tr><td>`--progress_color-active`</td><td>Filled track colour (defaults to `var(--color_active)`)</td></tr>
+<tr><td>`--progress_color-track`</td><td>Empty track colour</td></tr>
+</tbody>
+</table>
+
+
+## Accessibility
+
+- Uses `<progress>` element with `aria-valuenow`, `aria-valuemin`, `aria-valuemax`
+- `label` prop sets `aria-label` — always provide a meaningful label

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

@@ -23,10 +23,8 @@
   }
 
   .track {
-    --progress_height: var(--space_xs);
-
     width: 100%;
-    height: var(--progress_height);
+    height: var(--progress_height, var(--space_xs));
     background-color: var(--color_bg--subtle);
     border-radius: 999px;
     overflow: hidden;

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

@@ -4,7 +4,6 @@ import { Progress } from './Progress';
 const meta = {
   title: 'UI/Progress',
   component: Progress,
-  tags: ['autodocs'],
   argTypes: {
     size: { control: 'radio', options: ['small', 'medium', 'large'] },
     value: { control: { type: 'range', min: 0, max: 100 } },

package/src/components/ui/ProgressCircle/ProgressCircle.mdx

@@ -0,0 +1,46 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './ProgressCircle.stories';
+
+<Meta of={Stories} />
+
+# ProgressCircle
+
+Circular progress indicator. Use when a compact representation fits better than a horizontal bar.
+
+## Examples
+
+### Default
+<Canvas of={Stories.Default} />
+
+### With value
+<Canvas of={Stories.WithValue} />
+
+### Sizes
+<Canvas of={Stories.Small} />
+<Canvas of={Stories.Large} />
+
+### Complete
+<Canvas of={Stories.Complete} />
+
+## Props
+
+<ArgTypes of={Stories} />
+
+## CSS variables
+
+
+<table>
+<thead>
+<tr><th>Variable</th><th>Description</th></tr>
+</thead>
+<tbody>
+<tr><td>`--progress-circle_color-active`</td><td>Arc stroke colour</td></tr>
+<tr><td>`--progress-circle_color-track`</td><td>Background circle colour</td></tr>
+</tbody>
+</table>
+
+
+## Accessibility
+
+- SVG uses `role="img"` with an `aria-label` derived from `label` and current value
+- Numeric value is visually rendered when `showValue` is true; screen readers announce via `aria-valuenow`

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

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

package/src/components/ui/Separator/Separator.mdx

@@ -0,0 +1,29 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './Separator.stories';
+
+<Meta of={Stories} />
+
+# Separator
+
+Visual divider between content sections. Renders a semantic `<hr>` (horizontal) or a `<div role="separator">` (vertical).
+
+## When to use
+- Between logically distinct content blocks in a layout
+- To separate items in a menu or list
+
+## Examples
+
+### Horizontal
+<Canvas of={Stories.Horizontal} />
+
+### Vertical
+<Canvas of={Stories.Vertical} />
+
+## Props
+
+<ArgTypes of={Stories} />
+
+## Accessibility
+
+- Horizontal variant uses `<hr>` — natively announces a thematic break to screen readers
+- Vertical variant uses `role="separator"` with `aria-orientation="vertical"`

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

@@ -4,7 +4,6 @@ import { Separator } from './Separator';
 const meta = {
   title: 'UI/Separator',
   component: Separator,
-  tags: ['autodocs'],
   argTypes: {
     orientation: { control: 'radio', options: ['horizontal', 'vertical'] },
   },

package/src/components/ui/Skeleton/Skeleton.mdx

@@ -0,0 +1,36 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './Skeleton.stories';
+
+<Meta of={Stories} />
+
+# Skeleton
+
+Layout-preserving placeholder shown while content is loading. Renders a shimmer block sized by `className` or inline style.
+
+## When to use
+- Replace individual content areas (text lines, images, cards) during async data fetching
+- Preserve perceived layout stability during initial page load
+
+## When not to use
+- For very short loads (< 300 ms) — consider a spinner instead to avoid layout shift
+- When you cannot predict content dimensions — use a `Loading` spinner
+
+## Examples
+
+### Default
+<Canvas of={Stories.Default} />
+
+### Text line
+<Canvas of={Stories.TextLine} />
+
+### Card layout
+<Canvas of={Stories.Card} />
+
+## Props
+
+<ArgTypes of={Stories} />
+
+## Accessibility
+
+- Renders `aria-hidden="true"` — skeleton blocks are invisible to screen readers
+- The containing region should use `aria-busy="true"` while loading, then `aria-live="polite"` when content arrives

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

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

package/src/components/ui/SkipLink/SkipLink.mdx

@@ -0,0 +1,34 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './SkipLink.stories';
+
+<Meta of={Stories} />
+
+# SkipLink
+
+Visually hidden link that becomes visible on keyboard focus, allowing keyboard users to skip repetitive navigation and jump directly to the main content.
+
+## When to use
+- At the very top of every page, before any navigation
+- Required for WCAG 2.4.1 compliance (Bypass Blocks)
+
+## Notes
+
+The link is visually hidden until focused. Press **Tab** on the preview below to reveal it.
+
+## Examples
+
+### Default
+<Canvas of={Stories.Default} />
+
+### Custom target
+<Canvas of={Stories.CustomTarget} />
+
+## Props
+
+<ArgTypes of={Stories} />
+
+## Accessibility
+
+- Renders as a standard `<a>` — no special ARIA needed
+- The `href` must match a valid `id` on the target element (e.g. `<main id="main-content">`)
+- Visible focus style is required — the component applies a high-contrast outline on `:focus-visible`

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

@@ -4,7 +4,6 @@ import { SkipLink } from './SkipLink';
 const meta = {
   title: 'UI/SkipLink',
   component: SkipLink,
-  tags: ['autodocs'],
   decorators: [
     Story => (
       <div style={{ minHeight: '4rem', position: 'relative' }}>

package/src/components/ui/Table/Table.mdx

@@ -0,0 +1,38 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './Table.stories';
+
+<Meta of={Stories} />
+
+# Table
+
+Data table with optional sortable columns and caption.
+
+## When to use
+- Structured data with relationships across rows and columns
+- When users need to compare values across multiple attributes
+
+## When not to use
+- Layout purposes — use CSS Grid or Flexbox
+- Simple key-value data — use `DescriptionList` instead
+
+## Examples
+
+### Default
+<Canvas of={Stories.Default} />
+
+### Sortable columns
+<Canvas of={Stories.Sortable} />
+
+### With caption
+<Canvas of={Stories.WithCaption} />
+
+## Props
+
+<ArgTypes of={Stories} />
+
+## Accessibility
+
+- Wraps in `<table>` with `<thead>` and `<tbody>`
+- Column headers use `<th scope="col">`
+- Sortable columns set `aria-sort="ascending"` / `"descending"` / `"none"`
+- `caption` renders as `<caption>` — the accessible name of the table

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

@@ -7,7 +7,6 @@ type User = { name: string; role: string; status: string; joined: string };
 const meta = {
   title: 'UI/Table',
   component: Table,
-  tags: ['autodocs'],
 } satisfies Meta<typeof Table<User>>;
 
 export default meta;

package/src/components/ui/Tabs/Tabs.mdx

@@ -0,0 +1,40 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './Tabs.stories';
+
+<Meta of={Stories} />
+
+# Tabs
+
+Organises content into discrete panels accessible via a horizontal tab list.
+
+## When to use
+- Switching between related views without a page navigation
+- When all tab panels share the same context (e.g. product details: Overview, Specs, Reviews)
+
+## When not to use
+- More than 5–6 tabs — consider a `Select` or sidebar navigation instead
+- When panels are only loosely related — use separate pages or sections
+
+## Examples
+
+### Default
+<Canvas of={Stories.Default} />
+
+### With default open tab
+<Canvas of={Stories.WithDefaultTab} />
+
+### With disabled tab
+<Canvas of={Stories.WithDisabledTab} />
+
+### Rich content
+<Canvas of={Stories.RichContent} />
+
+## Props
+
+<ArgTypes of={Stories} />
+
+## Accessibility
+
+- Implements ARIA tabs pattern: `role="tablist"`, `role="tab"`, `role="tabpanel"`
+- Arrow keys navigate between tabs; `Enter`/`Space` activate
+- Active tab uses `aria-selected="true"`; panel linked via `aria-labelledby`

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

@@ -11,9 +11,6 @@
   }
 
   .tab {
-    --tab_color:        var(--color_on-bg);
-    --tab_border-color: transparent;
-
     all: unset;
     display: inline-flex;
     align-items: center;
@@ -21,8 +18,8 @@
     font-family: var(--font_family--body);
     font-size: var(--font_size--body);
     font-weight: var(--font_weight--semibold);
-    color: var(--tab_color);
-    border-bottom: 2px solid var(--tab_border-color);
+    color: var(--tab_color, var(--color_on-bg));
+    border-bottom: 2px solid var(--tab_border-color, transparent);
     margin-bottom: -1px;
     cursor: pointer;
     transition: var(--animation_transition);

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/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);
+}