Stories will consume custom elements directly, without React adapters, using the production theme and styles.
-
The Angular and Vue integration checks remain in place during this scaffold phase.
+
Stories consume custom elements directly, without React adapters, using the production defaultTheme property and built stylesheet/fonts.
+
Use Controls to explore properties. Interactive stories display native gd-input / gd-change event details below the element. Objects such as theme and items are JavaScript properties, not string attributes.
+
Menu demonstrates trigger/content slots, selection, Escape and outside-click dismissal. Counter demonstrates bounded quantity changes. Other components are intentionally postponed.
+
The Angular and Vue integration checks remain in place; harness cleanup is a later phase.
Stories consume custom elements directly, without React adapters, using the production defaultTheme property and built stylesheet/fonts.
Use Controls to explore properties. Interactive stories display native gd-input / gd-change event details below the element. Objects such as theme and items are JavaScript properties, not string attributes.
-
Menu demonstrates trigger/content slots, selection, Escape and outside-click dismissal. Counter demonstrates bounded quantity changes. Other components are intentionally postponed.
-
The Angular and Vue integration checks remain in place; harness cleanup is a later phase.
+
Stories mirror the published React Storybook inventory. Menu demonstrates trigger/content slots, selection, Escape and outside-click dismissal. Counter demonstrates bounded quantity changes. Form controls expose native input/change details, while layout and display atoms demonstrate their token-backed variants and semantic output.
+
The Angular and Vue integration harnesses exercise the same custom-element package without framework adapters.
Stories consume custom elements directly, without React adapters, using the production defaultTheme property and built stylesheet/fonts.
-
Use Controls to explore properties. Interactive stories display native gd-input / gd-change event details below the element. Objects such as theme and items are JavaScript properties, not string attributes.
-
Stories mirror the published React Storybook inventory. Menu demonstrates trigger/content slots, selection, Escape and outside-click dismissal. Counter demonstrates bounded quantity changes. Form controls expose native input/change details, while layout and display atoms demonstrate their token-backed variants and semantic output.
-
The Angular and Vue integration harnesses exercise the same custom-element package without framework adapters.
+
+
+
+
Using Web Components
+
+ GridKit Web Components are framework-independent custom HTML elements built with Lit. They expose the
+ same design tokens, variants, states, and interaction patterns as the React components while using
+ standard browser APIs. Use them in plain HTML or inside Angular, Vue, React, and other web frameworks
+ without a framework-specific GridKit adapter.
+
+
+ Component names start with gd-, for example <gd-button>,
+ <gd-input>, and <gd-select>. Browse the Atoms and
+ Molecules sections to inspect each component's properties, variants, events, slots,
+ accessibility behavior, and token defaults.
+
+
+
Install and register
+
Install the component package and the GridKit design tokens in your application:
+
npm install web-components gd-design-library
+
+ Import the package once in your application entry point. The import registers every
+ gd-* custom element with the browser.
+
+
import 'web-components';
+import { defaultTheme } from 'gd-design-library/tokens';
+
+
How values and events work
+
+
Pass text, numbers, and booleans through HTML attributes or framework bindings.
+
Assign objects, arrays, functions, controlled values, and the theme as JavaScript properties.
+
Listen for native events such as gd-input and gd-change.
+
Read component data from event.detail.
+
Use default and named slots for labels, icons, custom initiators, and other composed content.
+
+
+ The theme is an object, so it must be assigned as a property. Writing
+ theme="defaultTheme" in HTML passes only a string and does not apply the theme.
+
+ Import the package in main.ts, enable custom elements with
+ CUSTOM_ELEMENTS_SCHEMA, and use Angular property and event bindings. Property bindings are
+ required for themes, arrays, objects, and controlled values.
+
+ Import the package in the application entry point. In Vue templates, use .prop when a
+ value must be assigned to the custom element as a JavaScript property, and use Vue's normal
+ @event syntax for native custom events.
+
+
// main.ts
+import { createApp } from 'vue';
+import 'web-components';
+import App from './App.vue';
+
+createApp(App).mount('#app');
+ Open a component story and use Controls to change its public properties. Interactive
+ stories display emitted event details next to the component. Each documentation page also includes
+ accessibility examples and the default design tokens used by that component.
+
+
`;
return page;
},
From 082889f5f6bc207e13492017456ad9015587af35 Mon Sep 17 00:00:00 2001
From: Zlodej43sm <8863227+Zlodej43sm@users.noreply.github.com>
Date: Thu, 1 Oct 2026 11:23:22 +0200
Subject: [PATCH 09/10] test: update web components overview smoke check
---
bin/storybook/smoke-test.mjs | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/bin/storybook/smoke-test.mjs b/bin/storybook/smoke-test.mjs
index 07a15a5..eac2bde 100644
--- a/bin/storybook/smoke-test.mjs
+++ b/bin/storybook/smoke-test.mjs
@@ -98,7 +98,7 @@ try {
// Composition must load the child's own native renderer, not a React wrapper.
await page.goto(`${base}/?path=/story/web-components_introduction-overview--overview`);
const nativeFrame = page.frameLocator('#storybook-ref-web-components');
- await nativeFrame.getByRole('heading', { name: 'GridKit Web Components', exact: true }).waitFor();
+ await nativeFrame.getByRole('heading', { name: 'Using Web Components', exact: true }).waitFor();
await page.goto(`${base}/?path=/story/web-components_atoms-button--default`);
await nativeFrame.getByRole('button', { name: 'Button', exact: true }).waitFor();
From f75829167c5878feeac007aad0994b2286195879 Mon Sep 17 00:00:00 2001
From: Zlodej43sm <8863227+Zlodej43sm@users.noreply.github.com>
Date: Thu, 1 Oct 2026 15:06:15 +0200
Subject: [PATCH 10/10] fix: render web component token stories
---
bin/storybook/native-checks.mjs | 15 ++++
libs/web-components/stories/Avatar.stories.ts | 4 +-
libs/web-components/stories/Badge.stories.ts | 8 +-
libs/web-components/stories/Box.stories.ts | 8 +-
libs/web-components/stories/Button.stories.ts | 4 +-
.../stories/Checkbox.stories.ts | 4 +-
.../web-components/stories/Counter.stories.ts | 4 +-
libs/web-components/stories/Icon.stories.ts | 8 +-
libs/web-components/stories/Image.stories.ts | 8 +-
libs/web-components/stories/Input.stories.ts | 4 +-
.../stories/InputFile.stories.ts | 8 +-
libs/web-components/stories/Label.stories.ts | 8 +-
libs/web-components/stories/Link.stories.ts | 8 +-
libs/web-components/stories/Loader.stories.ts | 8 +-
libs/web-components/stories/Menu.stories.ts | 4 +-
libs/web-components/stories/Select.stories.ts | 4 +-
.../stories/Separator.stories.ts | 8 +-
.../stories/Skeleton.stories.ts | 8 +-
libs/web-components/stories/Slider.stories.ts | 8 +-
.../stories/SliderDots.stories.ts | 8 +-
libs/web-components/stories/Switch.stories.ts | 8 +-
.../stories/Textarea.stories.ts | 8 +-
libs/web-components/stories/Toggle.stories.ts | 8 +-
.../stories/Typography.stories.ts | 4 +-
.../web-components/stories/Wrapper.stories.ts | 8 +-
libs/web-components/stories/helpers.ts | 81 +++++++++++++++++++
26 files changed, 144 insertions(+), 112 deletions(-)
diff --git a/bin/storybook/native-checks.mjs b/bin/storybook/native-checks.mjs
index 343da5f..6a58332 100644
--- a/bin/storybook/native-checks.mjs
+++ b/bin/storybook/native-checks.mjs
@@ -47,6 +47,21 @@ export async function checkNativeStories(page, base) {
'typography',
'wrapper',
]);
+ const tokenStories = Object.values(index.entries).filter(
+ (entry) => entry.type === 'story' && entry.id.endsWith('--default-tokens')
+ );
+ for (const story of tokenStories) {
+ await page.goto(`${base}/web-components/iframe.html?id=${story.id}&viewMode=story`);
+ const viewer = page.getByRole('region', { name: 'Token viewer' });
+ await viewer.waitFor();
+ const text = await viewer.textContent();
+ assert.ok(text.length > 50, `${story.id} should render its theme token values`);
+ assert.doesNotMatch(text, /^defaultTheme\./, `${story.id} should not render a token placeholder`);
+ const branch = viewer.getByRole('button').first();
+ await branch.click();
+ assert.equal(await branch.getAttribute('aria-expanded'), 'false');
+ }
+ assert.equal(tokenStories.length, 24, 'Every React token story port should render Web Component tokens');
const open = async (id) => {
await page.goto(`${base}/web-components/iframe.html?id=${id}&viewMode=story`);
await page.locator('#storybook-root').waitFor();
diff --git a/libs/web-components/stories/Avatar.stories.ts b/libs/web-components/stories/Avatar.stories.ts
index b75e98b..ab7fee1 100644
--- a/libs/web-components/stories/Avatar.stories.ts
+++ b/libs/web-components/stories/Avatar.stories.ts
@@ -1,6 +1,6 @@
import type { Meta, StoryObj } from '@storybook/web-components-vite';
import type { GdAvatar } from '../src';
-import { element, portrait } from './helpers';
+import { defaultTokenViewer, element, portrait } from './helpers';
type Args = Pick;
const meta = {
@@ -65,4 +65,4 @@ export const WithIcon: Story = SlottedFallback;
export const WithImageAndFallback: Story = { args: { src: portrait, fallback: 'AL' } };
export const WithDifferentSize: Story = AllSizes;
export const WithAccessibility: Story = { args: { alt: 'Ada Lovelace profile photo' } };
-export const DefaultTokens: Story = { render: () => document.createElement('pre') };
+export const DefaultTokens: Story = { render: () => defaultTokenViewer('avatar') };
diff --git a/libs/web-components/stories/Badge.stories.ts b/libs/web-components/stories/Badge.stories.ts
index 13ebc15..a97549d 100644
--- a/libs/web-components/stories/Badge.stories.ts
+++ b/libs/web-components/stories/Badge.stories.ts
@@ -1,6 +1,6 @@
import type { Meta, StoryObj } from '@storybook/web-components-vite';
import type { GdBadge } from '../src';
-import { element } from './helpers';
+import { defaultTokenViewer, element } from './helpers';
type Args = Pick;
const meta = {
@@ -59,9 +59,5 @@ export const WithAccessibility: Story = {
},
};
export const DefaultTokens: Story = {
- render: () => {
- const pre = document.createElement('pre');
- pre.textContent = 'defaultTheme.badge';
- return pre;
- },
+ render: () => defaultTokenViewer('badge'),
};
diff --git a/libs/web-components/stories/Box.stories.ts b/libs/web-components/stories/Box.stories.ts
index f6f4ea7..fa1d80c 100644
--- a/libs/web-components/stories/Box.stories.ts
+++ b/libs/web-components/stories/Box.stories.ts
@@ -1,6 +1,6 @@
import type { Meta, StoryObj } from '@storybook/web-components-vite';
import type { GdBox } from '../src';
-import { element } from './helpers';
+import { defaultTokenViewer, element } from './helpers';
type Args = Pick;
const meta = {
@@ -60,9 +60,5 @@ export const WithAccessibility: Story = {
},
};
export const DefaultTokens: Story = {
- render: () => {
- const pre = document.createElement('pre');
- pre.textContent = 'defaultTheme.box';
- return pre;
- },
+ render: () => defaultTokenViewer('box'),
};
diff --git a/libs/web-components/stories/Button.stories.ts b/libs/web-components/stories/Button.stories.ts
index 190dacb..9f94f2b 100644
--- a/libs/web-components/stories/Button.stories.ts
+++ b/libs/web-components/stories/Button.stories.ts
@@ -1,6 +1,6 @@
import type { Meta, StoryObj } from '@storybook/web-components-vite';
import type { GdButton } from '../src';
-import { element } from './helpers';
+import { defaultTokenViewer, element } from './helpers';
type Args = Pick<
GdButton,
@@ -96,4 +96,4 @@ export const CustomStyledButton: Story = {
export const RealWorldExamples: Story = AllVariants;
export const IsLoading: Story = Loading;
export const WithAccessibility: Story = { args: { ariaLabel: 'Save changes', label: 'Save' } };
-export const DefaultTokens: Story = { render: () => document.createElement('pre') };
+export const DefaultTokens: Story = { render: () => defaultTokenViewer('button') };
diff --git a/libs/web-components/stories/Checkbox.stories.ts b/libs/web-components/stories/Checkbox.stories.ts
index 8a7d775..dfd56cb 100644
--- a/libs/web-components/stories/Checkbox.stories.ts
+++ b/libs/web-components/stories/Checkbox.stories.ts
@@ -1,6 +1,6 @@
import type { Meta, StoryObj } from '@storybook/web-components-vite';
import type { GdCheckbox } from '../src';
-import { element, observed } from './helpers';
+import { defaultTokenViewer, element, observed } from './helpers';
type Args = Pick;
const meta = {
@@ -40,4 +40,4 @@ export const Sizes: Story = {
},
};
export const Controlled: Story = Checked;
-export const DefaultTokens: Story = { render: () => document.createElement('pre') };
+export const DefaultTokens: Story = { render: () => defaultTokenViewer('checkbox') };
diff --git a/libs/web-components/stories/Counter.stories.ts b/libs/web-components/stories/Counter.stories.ts
index e64586e..77dd3f1 100644
--- a/libs/web-components/stories/Counter.stories.ts
+++ b/libs/web-components/stories/Counter.stories.ts
@@ -1,6 +1,6 @@
import type { Meta, StoryObj } from '@storybook/web-components-vite';
import type { GdCounter } from '../src';
-import { element, observed } from './helpers';
+import { defaultTokenViewer, element, observed } from './helpers';
type Args = Pick;
const meta = {
@@ -29,4 +29,4 @@ export const AdjustedMaxValue5: Story = { args: { max: 5, initial: 5 } };
export const AdjustedMinValue3: Story = { args: { min: 3, initial: 3 } };
export const AdjustedMin2MaxValue10: Story = CustomRange;
export const WithExternalCounterChangeHandler: Story = Default;
-export const DefaultTokens: Story = { render: () => document.createElement('pre') };
+export const DefaultTokens: Story = { render: () => defaultTokenViewer('counter') };
diff --git a/libs/web-components/stories/Icon.stories.ts b/libs/web-components/stories/Icon.stories.ts
index 744356b..5a68ea6 100644
--- a/libs/web-components/stories/Icon.stories.ts
+++ b/libs/web-components/stories/Icon.stories.ts
@@ -1,7 +1,7 @@
import type { Meta, StoryObj } from '@storybook/web-components-vite';
import { iconCatalog, type GridKitIconName } from 'gd-design-core';
import type { GdIcon } from '../src';
-import { element } from './helpers';
+import { defaultTokenViewer, element } from './helpers';
type Args = Pick;
const names = Object.keys(iconCatalog) as GridKitIconName[];
@@ -65,9 +65,5 @@ export const WithAccessibility: Story = {
},
};
export const DefaultTokens: Story = {
- render: () => {
- const pre = document.createElement('pre');
- pre.textContent = 'defaultTheme.icon';
- return pre;
- },
+ render: () => defaultTokenViewer('icon'),
};
diff --git a/libs/web-components/stories/Image.stories.ts b/libs/web-components/stories/Image.stories.ts
index e2e1ac5..08fef8f 100644
--- a/libs/web-components/stories/Image.stories.ts
+++ b/libs/web-components/stories/Image.stories.ts
@@ -1,6 +1,6 @@
import type { Meta, StoryObj } from '@storybook/web-components-vite';
import type { GdImage } from '../src';
-import { element, portrait } from './helpers';
+import { defaultTokenViewer, element, portrait } from './helpers';
type Args = Pick;
const meta = {
@@ -84,9 +84,5 @@ export const WithCaptionAsProp: Story = {
};
export const WithAccessibility: Story = { args: { alt: 'Portrait of Ada Lovelace', caption: 'Ada Lovelace' } };
export const DefaultTokens: Story = {
- render: () => {
- const pre = document.createElement('pre');
- pre.textContent = 'defaultTheme.image';
- return pre;
- },
+ render: () => defaultTokenViewer('image'),
};
diff --git a/libs/web-components/stories/Input.stories.ts b/libs/web-components/stories/Input.stories.ts
index c82e0a9..600694b 100644
--- a/libs/web-components/stories/Input.stories.ts
+++ b/libs/web-components/stories/Input.stories.ts
@@ -1,6 +1,6 @@
import type { Meta, StoryObj } from '@storybook/web-components-vite';
import type { GdInput } from '../src';
-import { element, observed } from './helpers';
+import { defaultTokenViewer, element, observed } from './helpers';
type Args = Pick<
GdInput,
@@ -136,4 +136,4 @@ export const RadioGroupWithLabel: Story = InputTypes;
export const WithAccessibility: Story = {
args: { required: true, label: 'Email address', helperText: 'Required field' },
};
-export const DefaultTokens: Story = { render: () => document.createElement('pre') };
+export const DefaultTokens: Story = { render: () => defaultTokenViewer('input') };
diff --git a/libs/web-components/stories/InputFile.stories.ts b/libs/web-components/stories/InputFile.stories.ts
index 0d39173..12bd498 100644
--- a/libs/web-components/stories/InputFile.stories.ts
+++ b/libs/web-components/stories/InputFile.stories.ts
@@ -1,6 +1,6 @@
import type { Meta, StoryObj } from '@storybook/web-components-vite';
import type { GdInputFile } from '../src';
-import { element, observed } from './helpers';
+import { defaultTokenViewer, element, observed } from './helpers';
type Args = Pick;
const meta = {
@@ -58,9 +58,5 @@ export const WithAccessibility: Story = {
},
};
export const DefaultTokens: Story = {
- render: () => {
- const pre = document.createElement('pre');
- pre.textContent = 'defaultTheme.inputfile';
- return pre;
- },
+ render: () => defaultTokenViewer('inputfile'),
};
diff --git a/libs/web-components/stories/Label.stories.ts b/libs/web-components/stories/Label.stories.ts
index f38fa34..bef2f96 100644
--- a/libs/web-components/stories/Label.stories.ts
+++ b/libs/web-components/stories/Label.stories.ts
@@ -1,6 +1,6 @@
import type { Meta, StoryObj } from '@storybook/web-components-vite';
import type { GdLabel } from '../src';
-import { element } from './helpers';
+import { defaultTokenViewer, element } from './helpers';
type Args = Pick;
const meta = {
@@ -49,9 +49,5 @@ export const WithAccessibility: Story = {
},
};
export const DefaultTokens: Story = {
- render: () => {
- const pre = document.createElement('pre');
- pre.textContent = 'defaultTheme.label';
- return pre;
- },
+ render: () => defaultTokenViewer('label'),
};
diff --git a/libs/web-components/stories/Link.stories.ts b/libs/web-components/stories/Link.stories.ts
index c472061..127bde0 100644
--- a/libs/web-components/stories/Link.stories.ts
+++ b/libs/web-components/stories/Link.stories.ts
@@ -1,6 +1,6 @@
import type { Meta, StoryObj } from '@storybook/web-components-vite';
import type { GdLink } from '../src';
-import { element } from './helpers';
+import { defaultTokenViewer, element } from './helpers';
type Args = Pick<
GdLink,
@@ -88,9 +88,5 @@ export const WithAccessibility: Story = {
},
};
export const DefaultTokens: Story = {
- render: () => {
- const pre = document.createElement('pre');
- pre.textContent = 'defaultTheme.link';
- return pre;
- },
+ render: () => defaultTokenViewer('link'),
};
diff --git a/libs/web-components/stories/Loader.stories.ts b/libs/web-components/stories/Loader.stories.ts
index d156ce8..683b4b2 100644
--- a/libs/web-components/stories/Loader.stories.ts
+++ b/libs/web-components/stories/Loader.stories.ts
@@ -1,6 +1,6 @@
import type { Meta, StoryObj } from '@storybook/web-components-vite';
import type { GdLoader } from '../src';
-import { element } from './helpers';
+import { defaultTokenViewer, element } from './helpers';
type Args = Pick;
const meta = {
@@ -72,9 +72,5 @@ export const WithAccessibility: Story = {
},
};
export const DefaultTokens: Story = {
- render: () => {
- const pre = document.createElement('pre');
- pre.textContent = 'defaultTheme.loader';
- return pre;
- },
+ render: () => defaultTokenViewer('loader'),
};
diff --git a/libs/web-components/stories/Menu.stories.ts b/libs/web-components/stories/Menu.stories.ts
index 4a08d89..7d6b6cc 100644
--- a/libs/web-components/stories/Menu.stories.ts
+++ b/libs/web-components/stories/Menu.stories.ts
@@ -1,6 +1,6 @@
import type { Meta, StoryObj } from '@storybook/web-components-vite';
import type { GdMenu } from '../src';
-import { element, observed } from './helpers';
+import { defaultTokenViewer, element, observed } from './helpers';
type Args = Pick;
const placements = ['top-left', 'top-right', 'bottom-left', 'bottom-right'] as const;
@@ -78,4 +78,4 @@ export const CloseOnSelectFalse: Story = KeepOpenOnSelect;
export const WithRefControl: Story = Open;
export const WithPositioningOptions: Story = Placement;
export const WithEditAndDeleteModals: Story = Default;
-export const DefaultTokens: Story = { render: () => document.createElement('pre') };
+export const DefaultTokens: Story = { render: () => defaultTokenViewer('menu') };
diff --git a/libs/web-components/stories/Select.stories.ts b/libs/web-components/stories/Select.stories.ts
index d652673..d3c3e1f 100644
--- a/libs/web-components/stories/Select.stories.ts
+++ b/libs/web-components/stories/Select.stories.ts
@@ -1,6 +1,6 @@
import type { Meta, StoryObj } from '@storybook/web-components-vite';
import type { GdSelect } from '../src';
-import { element, observed, items } from './helpers';
+import { defaultTokenViewer, element, observed, items } from './helpers';
type Args = Pick<
GdSelect,
@@ -111,4 +111,4 @@ export const ColorPrimary: Story = { args: { color: 'primary' } };
export const ColorSuccess: Story = { args: { color: 'success' } };
export const ColorWarning: Story = { args: { color: 'warning' } };
export const ColorError: Story = { args: { color: 'error' } };
-export const DefaultTokens: Story = { render: () => document.createElement('pre') };
+export const DefaultTokens: Story = { render: () => defaultTokenViewer('select') };
diff --git a/libs/web-components/stories/Separator.stories.ts b/libs/web-components/stories/Separator.stories.ts
index ea59093..cf62b70 100644
--- a/libs/web-components/stories/Separator.stories.ts
+++ b/libs/web-components/stories/Separator.stories.ts
@@ -1,6 +1,6 @@
import type { Meta, StoryObj } from '@storybook/web-components-vite';
import type { GdSeparator } from '../src';
-import { element } from './helpers';
+import { defaultTokenViewer, element } from './helpers';
type Args = Pick<
GdSeparator,
@@ -109,10 +109,6 @@ export const WithAccessibility: Story = {
tags: ['a11y'],
};
export const DefaultTokens: Story = {
- render: () => {
- const pre = document.createElement('pre');
- pre.textContent = 'defaultTheme.separator';
- return pre;
- },
+ render: () => defaultTokenViewer('separator'),
parameters: { layout: 'padded' },
};
diff --git a/libs/web-components/stories/Skeleton.stories.ts b/libs/web-components/stories/Skeleton.stories.ts
index f6fa6a5..c56ad0c 100644
--- a/libs/web-components/stories/Skeleton.stories.ts
+++ b/libs/web-components/stories/Skeleton.stories.ts
@@ -1,6 +1,6 @@
import type { Meta, StoryObj } from '@storybook/web-components-vite';
import type { GdSkeleton } from '../src';
-import { element } from './helpers';
+import { defaultTokenViewer, element } from './helpers';
type Args = Pick<
GdSkeleton,
@@ -88,10 +88,6 @@ export const WithAccessibility: Story = {
tags: ['a11y'],
};
export const DefaultTokens: Story = {
- render: () => {
- const pre = document.createElement('pre');
- pre.textContent = 'defaultTheme.skeleton';
- return pre;
- },
+ render: () => defaultTokenViewer('skeleton'),
parameters: { layout: 'padded' },
};
diff --git a/libs/web-components/stories/Slider.stories.ts b/libs/web-components/stories/Slider.stories.ts
index df91869..2d20590 100644
--- a/libs/web-components/stories/Slider.stories.ts
+++ b/libs/web-components/stories/Slider.stories.ts
@@ -1,6 +1,6 @@
import type { Meta, StoryObj } from '@storybook/web-components-vite';
import type { GdSlider } from '../src';
-import { element, observed } from './helpers';
+import { defaultTokenViewer, element, observed } from './helpers';
type Args = Pick;
const meta = {
@@ -50,9 +50,5 @@ export const WithAccessibility: Story = {
tags: ['a11y'],
};
export const DefaultTokens: Story = {
- render: () => {
- const pre = document.createElement('pre');
- pre.textContent = 'defaultTheme.slider';
- return pre;
- },
+ render: () => defaultTokenViewer('slider'),
};
diff --git a/libs/web-components/stories/SliderDots.stories.ts b/libs/web-components/stories/SliderDots.stories.ts
index a21eba9..9fbcdb4 100644
--- a/libs/web-components/stories/SliderDots.stories.ts
+++ b/libs/web-components/stories/SliderDots.stories.ts
@@ -1,6 +1,6 @@
import type { Meta, StoryObj } from '@storybook/web-components-vite';
import type { GdSliderDots } from '../src';
-import { element, observed } from './helpers';
+import { defaultTokenViewer, element, observed } from './helpers';
type Args = Pick;
const meta = {
@@ -48,9 +48,5 @@ export const ManyDots: Story = {
parameters: { docs: { description: { story: 'Ten dots with the fifth active.' } } },
};
export const DefaultTokens: Story = {
- render: () => {
- const pre = document.createElement('pre');
- pre.textContent = 'defaultTheme.sliderDots';
- return pre;
- },
+ render: () => defaultTokenViewer('sliderDots'),
};
diff --git a/libs/web-components/stories/Switch.stories.ts b/libs/web-components/stories/Switch.stories.ts
index 051011a..100d545 100644
--- a/libs/web-components/stories/Switch.stories.ts
+++ b/libs/web-components/stories/Switch.stories.ts
@@ -1,6 +1,6 @@
import type { Meta, StoryObj } from '@storybook/web-components-vite';
import type { GdSwitch } from '../src';
-import { element, observed } from './helpers';
+import { defaultTokenViewer, element, observed } from './helpers';
type Args = Pick;
const meta = {
@@ -61,9 +61,5 @@ export const WithAccessibility: Story = {
tags: ['a11y'],
};
export const DefaultTokens: Story = {
- render: () => {
- const pre = document.createElement('pre');
- pre.textContent = 'defaultTheme.switchToken';
- return pre;
- },
+ render: () => defaultTokenViewer('switch', 'switchToken'),
};
diff --git a/libs/web-components/stories/Textarea.stories.ts b/libs/web-components/stories/Textarea.stories.ts
index ff39cc8..e5e41d8 100644
--- a/libs/web-components/stories/Textarea.stories.ts
+++ b/libs/web-components/stories/Textarea.stories.ts
@@ -1,6 +1,6 @@
import type { Meta, StoryObj } from '@storybook/web-components-vite';
import type { GdTextarea } from '../src';
-import { element, observed } from './helpers';
+import { defaultTokenViewer, element, observed } from './helpers';
type Args = Pick<
GdTextarea,
@@ -151,9 +151,5 @@ export const WithAccessibility: Story = {
tags: ['a11y'],
};
export const DefaultTokens: Story = {
- render: () => {
- const pre = document.createElement('pre');
- pre.textContent = 'defaultTheme.textarea';
- return pre;
- },
+ render: () => defaultTokenViewer('textarea'),
};
diff --git a/libs/web-components/stories/Toggle.stories.ts b/libs/web-components/stories/Toggle.stories.ts
index b0c929f..bdda506 100644
--- a/libs/web-components/stories/Toggle.stories.ts
+++ b/libs/web-components/stories/Toggle.stories.ts
@@ -1,7 +1,7 @@
import type { Meta, StoryObj } from '@storybook/web-components-vite';
import type { GridKitIconName } from 'gd-design-core';
import type { GdToggle } from '../src';
-import { element, observed } from './helpers';
+import { defaultTokenViewer, element, observed } from './helpers';
type Args = Pick;
const items = ['Option 1', 'Option 2', 'Option 3'];
@@ -54,9 +54,5 @@ export const WithAccessibility: Story = {
tags: ['a11y'],
};
export const DefaultTokens: Story = {
- render: () => {
- const pre = document.createElement('pre');
- pre.textContent = 'defaultTheme.switchToggle';
- return pre;
- },
+ render: () => defaultTokenViewer('switchToggle'),
};
diff --git a/libs/web-components/stories/Typography.stories.ts b/libs/web-components/stories/Typography.stories.ts
index a309237..087c20f 100644
--- a/libs/web-components/stories/Typography.stories.ts
+++ b/libs/web-components/stories/Typography.stories.ts
@@ -1,6 +1,6 @@
import type { Meta, StoryObj } from '@storybook/web-components-vite';
import type { GdTypography } from '../src';
-import { element } from './helpers';
+import { defaultTokenViewer, element } from './helpers';
type Args = Pick & { text: string };
const variants = [
@@ -133,4 +133,4 @@ export const Display: Story = DisplaySizes;
export const Heading: Story = AllVariants;
export const Body: Story = { args: { variant: 'p', as: 'p', text: 'Body paragraph text' } };
export const WithAccessibility: Story = { args: { variant: 'h2', as: 'h2', text: 'Accessible section heading' } };
-export const DefaultTokens: Story = { render: () => document.createElement('pre') };
+export const DefaultTokens: Story = { render: () => defaultTokenViewer('typography') };
diff --git a/libs/web-components/stories/Wrapper.stories.ts b/libs/web-components/stories/Wrapper.stories.ts
index f286534..7633fa0 100644
--- a/libs/web-components/stories/Wrapper.stories.ts
+++ b/libs/web-components/stories/Wrapper.stories.ts
@@ -1,6 +1,6 @@
import type { Meta, StoryObj } from '@storybook/web-components-vite';
import type { GdWrapper } from '../src';
-import { element } from './helpers';
+import { defaultTokenViewer, element } from './helpers';
type Args = Pick & { text: string };
const meta = {
@@ -71,9 +71,5 @@ export const WithAccessibility: Story = {
tags: ['a11y'],
};
export const DefaultTokens: Story = {
- render: () => {
- const pre = document.createElement('pre');
- pre.textContent = 'defaultTheme.wrapper';
- return pre;
- },
+ render: () => defaultTokenViewer('wrapper'),
};
diff --git a/libs/web-components/stories/helpers.ts b/libs/web-components/stories/helpers.ts
index 733d693..2b42951 100644
--- a/libs/web-components/stories/helpers.ts
+++ b/libs/web-components/stories/helpers.ts
@@ -149,6 +149,87 @@ export function element(tag: T, props: Partial {
+ const expanded = keyElement.getAttribute('aria-expanded') === 'true';
+ keyElement.setAttribute('aria-expanded', String(!expanded));
+ brace.textContent = expanded ? '{...}' : '{';
+ content.hidden = expanded;
+ closingBrace.hidden = expanded;
+ };
+ keyElement.addEventListener('click', toggle);
+ keyElement.addEventListener('keydown', (event) => {
+ if (event.key === 'Enter' || event.key === ' ') {
+ event.preventDefault();
+ toggle();
+ }
+ });
+ line.append(brace, content, closingBrace);
+ } else {
+ line.append(tokenNode(childValue, indent + 1));
+ }
+ node.append(line);
+ }
+ return node;
+}
+
+/** Render the same default-theme branch shown by the React Storybook TokenViewer. */
+export function defaultTokenViewer(
+ label: string,
+ themeToken: keyof typeof defaultTheme = label as keyof typeof defaultTheme
+) {
+ const viewer = document.createElement('div');
+ viewer.style.cssText = tokenViewerStyles;
+ viewer.tabIndex = 0;
+ viewer.setAttribute('role', 'region');
+ viewer.setAttribute('aria-label', 'Token viewer');
+ viewer.append(tokenNode({ [label]: defaultTheme[themeToken] }));
+ return viewer;
+}
+
/** Each render owns its output and listeners; no state leaks between stories. */
export function observed(node: HTMLElement, eventName: string, initial: unknown) {
const section = document.createElement('section');