npm - @boostdev/design-system-components - Versions diffs - 1.0.2 → 1.1.0 - Mend

@boostdev/design-system-components 1.0.2 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (268) hide show

package/src/stories/DesignSystem/DarkMode.mdx ADDED Viewed

@@ -0,0 +1,130 @@
+import { Meta } from '@storybook/blocks';
+<Meta title="Design System/Dark Mode" />
+# Dark Mode
+All components adapt to dark mode automatically. No extra CSS imports or component changes are needed — switching the theme updates every token at once.
+## How it works
+The design system foundation ships two sets of semantic tokens: one for light mode and one for dark mode. When dark mode is active, the `--bds-color_*` tokens remap to their dark counterparts. Because every component is built on these tokens, the entire UI responds in a single cascade update.
+## Enabling dark mode
+### Via `data-theme` attribute (recommended)
+Set `data-theme="dark"` on a container element — typically `<html>` for a global switch, or any wrapper for a scoped one.
+```html
+<!-- global dark mode -->
+<html data-theme="dark">
+<!-- scoped dark mode (only this subtree) -->
+<div data-theme="dark">
+  <Button>Dark button</Button>
+</div>
+```
+Remove the attribute (or set `data-theme="light"`) to return to light mode.
+### Via `prefers-color-scheme` (automatic)
+No attribute needed. When a user has dark mode enabled at the OS level, the design system tokens switch automatically:
+```css
+/* this is built into @boostdev/design-system-foundation — nothing to add */
+@media (prefers-color-scheme: dark) {
+  :root { /* dark token values */ }
+}
+```
+`data-theme` always takes precedence over `prefers-color-scheme`, so you can override the system preference.
+## Building a theme toggle
+A minimal React hook that syncs with the system preference and lets the user override it:
+```tsx
+import { useEffect, useState } from 'react';
+type Theme = 'light' | 'dark';
+function getSystemTheme(): Theme {
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
+export function useTheme() {
+  const [theme, setTheme] = useState<Theme>(
+    () => (localStorage.getItem('theme') as Theme) ?? getSystemTheme()
+  );
+  useEffect(() => {
+    document.documentElement.setAttribute('data-theme', theme);
+    localStorage.setItem('theme', theme);
+  }, [theme]);
+  const toggle = () => setTheme(t => (t === 'dark' ? 'light' : 'dark'));
+  return { theme, toggle };
+}
+```
+Usage:
+```tsx
+function ThemeToggle() {
+  const { theme, toggle } = useTheme();
+  return (
+    <Button onClick={toggle}>
+      {theme === 'dark' ? 'Switch to light' : 'Switch to dark'}
+    </Button>
+  );
+}
+```
+## Customising tokens in dark mode
+Override any token in `@layer tokens.override` — the rule applies regardless of the active theme unless you scope it:
+```css
+@import "@boostdev/design-system-foundation/css";
+/* override for all themes */
+@layer tokens.override {
+  :root {
+    --bds-color_green: oklch(60% 0.15 145);
+  }
+}
+/* override for dark mode only */
+@layer tokens.override {
+  [data-theme="dark"],
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) {
+      --bds-color_green: oklch(75% 0.15 145);
+    }
+  }
+}
+```
+## Component-level dark mode overrides
+Use component CSS variables to restyle a specific component in dark mode without touching global tokens:
+```css
+/* make all Tooltips use a high-contrast dark style in both themes */
+.my-app {
+  --tooltip_bg: #1a1a1a;
+  --tooltip_text: #f5f5f5;
+}
+/* only override in dark mode */
+[data-theme="dark"] .my-card {
+  --card_color: #1e1e1e;
+}
+```
+## Testing dark mode in Storybook
+Use the **Theme** toolbar toggle in the top bar to switch between light and dark mode while browsing stories. This sets `data-theme` on the story canvas root.

package/src/stories/DesignSystem/Elevation.mdx CHANGED Viewed

@@ -7,7 +7,7 @@ export const ShadowCard = ({ token, label }) => (
     <div style={{
       width: '8rem',
       height: '5rem',
-      background: 'var(--bds-bg)',
+      background: 'var(--bds-color_bg)',
       borderRadius: '0.75rem',
       boxShadow: `var(${token})`,
     }} />
@@ -23,7 +23,7 @@ export const RadiusBox = ({ token, label, value }) => (
     <div style={{
       width: '4rem',
       height: '4rem',
-      background: 'var(--bds-interactive)',
+      background: 'var(--bds-color_interactive)',
       borderRadius: `var(${token})`,
       opacity: 0.8,
     }} />
@@ -49,7 +49,7 @@ export const ZRow = ({ token, value, description }) => (
 Five shadow levels from subtle to dramatic. All values adapt to dark mode (higher opacity for visibility against dark surfaces).
-<div style={{ display: 'flex', gap: '2.5rem', flexWrap: 'wrap', padding: '2rem', background: 'var(--bds-bg--subtle)', borderRadius: '0.75rem', marginBottom: '2rem' }}>
+<div style={{ display: 'flex', gap: '2.5rem', flexWrap: 'wrap', padding: '2rem', background: 'var(--bds-color_bg--subtle)', borderRadius: '0.75rem', marginBottom: '2rem' }}>
   <ShadowCard token="--bds-shadow_s" label="Small" />
   <ShadowCard token="--bds-shadow_m" label="Medium" />
   <ShadowCard token="--bds-shadow_l" label="Large" />
@@ -69,7 +69,7 @@ Five shadow levels from subtle to dramatic. All values adapt to dark mode (highe
 ## Border radius
-<div style={{ display: 'flex', gap: '2rem', flexWrap: 'wrap', padding: '2rem', background: 'var(--bds-bg--subtle)', borderRadius: '0.75rem', marginBottom: '2rem' }}>
+<div style={{ display: 'flex', gap: '2rem', flexWrap: 'wrap', padding: '2rem', background: 'var(--bds-color_bg--subtle)', borderRadius: '0.75rem', marginBottom: '2rem' }}>
   <RadiusBox token="--bds-border_radius--xs" label="X-Small" value="0.25rem / 4px" />
   <RadiusBox token="--bds-border_radius--s" label="Small" value="0.75rem / 12px" />
   <RadiusBox token="--bds-border_radius--m" label="Medium" value="1rem / 16px" />

package/src/stories/DesignSystem/Grid.mdx CHANGED Viewed

@@ -2,11 +2,11 @@ import { Meta } from '@storybook/blocks';
 <Meta title="Design System/Grid" />
-export const GridCell = ({ span, label, color = 'var(--bds-interactive)' }) => (
+export const GridCell = ({ span, label, color = 'var(--bds-color_interactive)' }) => (
   <div style={{
     gridColumn: span,
     background: color,
-    color: 'var(--bds-on-interactive)',
+    color: 'var(--bds-color_on-interactive)',
     borderRadius: '0.25rem',
     padding: '0.5rem 0.75rem',
     fontSize: '0.75rem',
@@ -23,7 +23,7 @@ export const GridDemo = ({ children }) => (
     gridTemplateColumns: 'repeat(12, 1fr)',
     gap: '0.5rem',
     padding: '1rem',
-    background: 'var(--bds-bg--subtle)',
+    background: 'var(--bds-color_bg--subtle)',
     borderRadius: '0.5rem',
     marginBottom: '1.5rem',
   }}>
@@ -69,14 +69,14 @@ The grid system is responsive and built entirely on CSS custom properties. It ad
 <GridDemo>
   <GridCell span="span 9" label="span 75%" />
-  <GridCell span="span 3" label="25%" color="var(--bds-grey)" />
+  <GridCell span="span 3" label="25%" color="var(--bds-color_grey)" />
 </GridDemo>
 ### Two thirds — `--bds-grid_span-66`
 <GridDemo>
   <GridCell span="span 8" label="span 66%" />
-  <GridCell span="span 4" label="33%" color="var(--bds-grey)" />
+  <GridCell span="span 4" label="33%" color="var(--bds-color_grey)" />
 </GridDemo>
 ### Half and half — `--bds-grid_span-50`

package/src/stories/DesignSystem/Motion.mdx CHANGED Viewed

@@ -7,7 +7,7 @@ export const AnimDemo = ({ label, token, animationStyle }) => (
     <div style={{
       width: '3rem',
       height: '3rem',
-      background: 'var(--bds-interactive)',
+      background: 'var(--bds-color_interactive)',
       borderRadius: '0.5rem',
       animation: animationStyle,
       opacity: 0.9,
@@ -47,7 +47,7 @@ export const AnimDemo = ({ label, token, animationStyle }) => (
 The foundation ships six named keyframes.
-<div style={{ display: 'flex', gap: '3rem', flexWrap: 'wrap', padding: '2rem', background: 'var(--bds-bg--subtle)', borderRadius: '0.75rem', marginBottom: '2rem' }}>
+<div style={{ display: 'flex', gap: '3rem', flexWrap: 'wrap', padding: '2rem', background: 'var(--bds-color_bg--subtle)', borderRadius: '0.75rem', marginBottom: '2rem' }}>
   <AnimDemo label="bounce" animationStyle="bounce 1s ease-out infinite" />
   <AnimDemo label="rotate" animationStyle="rotate 2s linear infinite" />
   <AnimDemo label="fade-zoom" animationStyle="fade-zoom 2s ease-in-out infinite" />

package/src/stories/DesignSystem/Overview.mdx CHANGED Viewed

@@ -81,7 +81,7 @@ Override any token in your own layer to retheme:
 @layer tokens.override {
   :root {
     --bds-cta:    var(--bds-BASE__color--blue);
-    --bds-on-cta: var(--bds-BASE__color--white);
+    --bds-color_on-green: var(--bds-BASE__color--white);
   }
 }
 ```

package/src/stories/DesignSystem/Spacing.mdx CHANGED Viewed

@@ -3,10 +3,10 @@ import { Meta } from '@storybook/blocks';
 <Meta title="Design System/Spacing" />
 export const SpaceStep = ({ token, mobile, tablet, desktop }) => (
-  <div style={{ display: 'grid', gridTemplateColumns: '10rem auto 1fr', gap: '0 1.5rem', alignItems: 'center', padding: '0.625rem 0', borderBottom: '1px solid var(--bds-grey--subtle)' }}>
+  <div style={{ display: 'grid', gridTemplateColumns: '10rem auto 1fr', gap: '0 1.5rem', alignItems: 'center', padding: '0.625rem 0', borderBottom: '1px solid var(--bds-color_grey--subtle)' }}>
     <code style={{ fontSize: '0.75rem' }}>{token}</code>
-    <div style={{ width: `var(${token})`, height: '1.25rem', background: 'var(--bds-interactive)', borderRadius: '0.125rem', minWidth: '2px' }} />
-    <div style={{ fontSize: '0.75rem', color: 'var(--bds-grey)', fontFamily: 'monospace' }}>
+    <div style={{ width: `var(${token})`, height: '1.25rem', background: 'var(--bds-color_interactive)', borderRadius: '0.125rem', minWidth: '2px' }} />
+    <div style={{ fontSize: '0.75rem', color: 'var(--bds-color_grey)', fontFamily: 'monospace' }}>
       {mobile}{tablet !== mobile ? ` → ${tablet}` : ''}{desktop !== tablet ? ` → ${desktop}` : ''}
     </div>
   </div>

package/src/stories/DesignSystem/Typography.mdx CHANGED Viewed

@@ -3,8 +3,8 @@ import { Meta } from '@storybook/blocks';
 <Meta title="Design System/Typography" />
 export const TypeScale = ({ token, label, style = {} }) => (
-  <div style={{ display: 'grid', gridTemplateColumns: '10rem 1fr', gap: '0.5rem 1.5rem', alignItems: 'baseline', padding: '0.75rem 0', borderBottom: '1px solid var(--bds-grey--subtle)' }}>
-    <div style={{ fontSize: '0.75rem', fontFamily: 'monospace', color: 'var(--bds-on-bg--muted, var(--bds-grey))', lineHeight: 1.4 }}>
+  <div style={{ display: 'grid', gridTemplateColumns: '10rem 1fr', gap: '0.5rem 1.5rem', alignItems: 'baseline', padding: '0.75rem 0', borderBottom: '1px solid var(--bds-color_grey--subtle)' }}>
+    <div style={{ fontSize: '0.75rem', fontFamily: 'monospace', color: 'var(--bds-on-bg--muted, var(--bds-color_grey))', lineHeight: 1.4 }}>
       {token}
     </div>
     <div style={{ fontFamily: 'var(--bds-font_family--body)', fontSize: `var(${token})`, ...style }}>
@@ -14,8 +14,8 @@ export const TypeScale = ({ token, label, style = {} }) => (
 );
 export const WeightSample = ({ weight, token, label }) => (
-  <div style={{ display: 'grid', gridTemplateColumns: '12rem 1fr', gap: '0.5rem 1.5rem', alignItems: 'baseline', padding: '0.75rem 0', borderBottom: '1px solid var(--bds-grey--subtle)' }}>
-    <div style={{ fontSize: '0.75rem', fontFamily: 'monospace', color: 'var(--bds-grey)' }}>
+  <div style={{ display: 'grid', gridTemplateColumns: '12rem 1fr', gap: '0.5rem 1.5rem', alignItems: 'baseline', padding: '0.75rem 0', borderBottom: '1px solid var(--bds-color_grey--subtle)' }}>
+    <div style={{ fontSize: '0.75rem', fontFamily: 'monospace', color: 'var(--bds-color_grey)' }}>
       <div>{token}</div>
       <div style={{ opacity: 0.7 }}>{weight}</div>
     </div>
@@ -26,8 +26,8 @@ export const WeightSample = ({ weight, token, label }) => (
 );
 export const TrackingSample = ({ token, label, value }) => (
-  <div style={{ display: 'grid', gridTemplateColumns: '12rem 1fr', gap: '0.5rem 1.5rem', alignItems: 'baseline', padding: '0.75rem 0', borderBottom: '1px solid var(--bds-grey--subtle)' }}>
-    <div style={{ fontSize: '0.75rem', fontFamily: 'monospace', color: 'var(--bds-grey)' }}>
+  <div style={{ display: 'grid', gridTemplateColumns: '12rem 1fr', gap: '0.5rem 1.5rem', alignItems: 'baseline', padding: '0.75rem 0', borderBottom: '1px solid var(--bds-color_grey--subtle)' }}>
+    <div style={{ fontSize: '0.75rem', fontFamily: 'monospace', color: 'var(--bds-color_grey)' }}>
       <div>{token}</div>
       <div style={{ opacity: 0.7 }}>{value}</div>
     </div>

package/src/types.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ /** Allows consumers to pass a CSS class to the component's root element. */
2	+ export type WithClassName = { className?: string \| undefined };

package/src/typings.d.ts CHANGED Viewed

@@ -2,3 +2,6 @@ declare module '*.module.css' {
   const classes: Record<string, string>;
   export default classes;
 }
+// CSS Anchor Positioning augmentation lives in react-augment.d.ts — see that
+// file for why it must be a separate module file rather than declared here.

package/src/web-components/globals.ts ADDED Viewed

@@ -0,0 +1,61 @@
+/**
+ * Injects the bdc border-decoration @property rules into the document's adopted stylesheets.
+ *
+ * @property declarations must live at the document level — they cannot be scoped to a Shadow DOM.
+ * This module is imported once by src/web-components/index.ts and runs as a side effect.
+ */
+const bdcCss = `
+  @property --bdc_color {
+    syntax: '<color>';
+    inherits: false;
+    initial-value: currentcolor;
+  }
+  @property --bdc-outline_width {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: 1px;
+  }
+  @property --bdc-outline_offset {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: -1px;
+  }
+  @property --bdc-outline_radius {
+    syntax: '<length-percentage>';
+    inherits: false;
+    initial-value: 0;
+  }
+  @property --bdc-outline_shadow {
+    syntax: '*';
+    inherits: false;
+    initial-value: none;
+  }
+  @layer component {
+    :root {
+      --bdc-outline_border: none;
+      --bdc_color:        currentcolor;
+      --bdc_color--focus: var(--bds-color_interactive);
+      --bdc_color--error: var(--bds-color_error);
+      --bdc-outline_width:  1px;
+      --bdc-outline_offset: -1px;
+      --bdc-outline_radius: var(--bds-border_radius--xs);
+      --bdc-outline_shadow: none;
+    }
+  }
+`;
+// Guard against double-injection during hot-reload or test re-evaluation.
+if (!('__bdcInjected' in document)) {
+  Object.defineProperty(document, '__bdcInjected', { value: true });
+  const sheet = new CSSStyleSheet();
+  sheet.replaceSync(bdcCss);
+  document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
+}

package/src/web-components/index.ts ADDED Viewed

@@ -0,0 +1,12 @@
+// Inject global bdc @property declarations into the document.
+// Must run before any component that uses --bdc_color / --bdc-outline_* tokens.
+import './globals';
+// Phase 1 — proof of concept components
+export { BdsBadge } from './ui/bds-badge';
+export { BdsButton } from './interaction/bds-button';
+export { BdsAlert } from './ui/bds-alert';
+// Phase 2 — layout-driven components
+export { BdsPopover } from './interaction/bds-popover';
+export { BdsToastProvider } from './interaction/bds-toast-provider';

package/src/web-components/interaction/BdsButton.stories.tsx ADDED Viewed

@@ -0,0 +1,60 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import type { ButtonVariant, ButtonSize } from './bds-button';
+import '../index'; // auto-registers all custom elements
+// Thin React wrapper so Storybook controls work with the custom element's props
+function BdsButton({
+  variant = 'default',
+  size = 'medium',
+  disabled,
+  href,
+  hasPulse,
+  children,
+}: {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  disabled?: boolean;
+  href?: string;
+  hasPulse?: boolean;
+  children?: React.ReactNode;
+}) {
+  return React.createElement(
+    'bds-button',
+    { variant, size, disabled: disabled || undefined, href, 'has-pulse': hasPulse || undefined },
+    children,
+  );
+}
+const meta = {
+  title: 'Web Components/Interaction/Button',
+  component: BdsButton,
+  tags: ['!stable', 'experimental'],
+  parameters: { layout: 'centered' },
+  argTypes: {
+    variant: { control: 'select', options: ['default', 'ghost'] },
+    size: { control: 'select', options: ['small', 'medium', 'large'] },
+  },
+} satisfies Meta<typeof BdsButton>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = { args: { children: 'Default', variant: 'default' } };
+export const Ghost: Story = { args: { children: 'Ghost', variant: 'ghost' } };
+export const Small: Story = { args: { children: 'Small', size: 'small' } };
+export const Medium: Story = { args: { children: 'Medium', size: 'medium' } };
+export const Large: Story = { args: { children: 'Large', size: 'large' } };
+export const WithPulse: Story = { args: { children: 'Pulsing', hasPulse: true } };
+export const Disabled: Story = { args: { children: 'Disabled', disabled: true } };
+export const AllVariants: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap', alignItems: 'center' }}>
+      {(['default', 'ghost'] as const).flatMap(v =>
+        (['small', 'medium', 'large'] as const).map(s => (
+          <BdsButton key={`${v}-${s}`} variant={v} size={s}>{v} {s}</BdsButton>
+        )),
+      )}
+    </div>
+  ),
+};

package/src/web-components/interaction/BdsPopover.stories.tsx ADDED Viewed

@@ -0,0 +1,70 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import type { PopoverPlacement } from './bds-popover';
+import '../index'; // auto-registers all custom elements
+// Thin React wrapper so Storybook controls work with the custom element's props
+function BdsPopover({
+  placement = 'bottom',
+  children,
+  trigger,
+}: {
+  placement?: PopoverPlacement;
+  children?: React.ReactNode;
+  trigger?: React.ReactNode;
+}) {
+  return React.createElement(
+    'bds-popover',
+    { placement },
+    trigger ?? React.createElement('button', { slot: 'trigger' }, 'Open popover'),
+    children ?? React.createElement('p', { style: { margin: 0 } }, 'Popover content'),
+  );
+}
+const meta = {
+  title: 'Web Components/Interaction/Popover',
+  component: BdsPopover,
+  tags: ['!stable', 'experimental'],
+  parameters: { layout: 'centered' },
+  argTypes: {
+    placement: { control: 'select', options: ['bottom', 'top', 'left', 'right'] },
+  },
+} satisfies Meta<typeof BdsPopover>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = { args: { placement: 'bottom' } };
+export const Top: Story = { args: { placement: 'top' } };
+export const Right: Story = { args: { placement: 'right' } };
+export const Left: Story = { args: { placement: 'left' } };
+export const WithRichContent: Story = {
+  args: { placement: 'bottom' },
+  render: (args) => (
+    <BdsPopover {...args}>
+      {React.createElement(
+        'div',
+        { style: { display: 'flex', flexDirection: 'column', gap: '0.5rem' } },
+        React.createElement('strong', null, 'Actions'),
+        React.createElement('button', null, 'Edit'),
+        React.createElement('button', null, 'Duplicate'),
+        React.createElement('button', null, 'Delete'),
+      )}
+    </BdsPopover>
+  ),
+};
+export const AllPlacements: Story = {
+  render: () => (
+    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, auto)', gap: '3rem', padding: '4rem' }}>
+      {(['bottom', 'top', 'right', 'left'] as const).map(p => (
+        <div key={p} style={{ display: 'flex', justifyContent: 'center' }}>
+          <BdsPopover placement={p}>
+            {React.createElement('p', { style: { margin: 0 } }, `Placed ${p}`)}
+          </BdsPopover>
+        </div>
+      ))}
+    </div>
+  ),
+};

package/src/web-components/interaction/BdsToastProvider.stories.tsx ADDED Viewed

@@ -0,0 +1,73 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import type { ToastVariant } from './bds-toast-provider';
+import { BdsToastProvider } from './bds-toast-provider';
+import '../index'; // auto-registers all custom elements
+// Render the bds-toast-provider as a wrapper around demo content.
+// Trigger buttons call BdsToastProvider.show() — the static convenience API.
+function ToastDemo() {
+  const variants: { label: string; variant: ToastVariant }[] = [
+    { label: 'Info',    variant: 'info' },
+    { label: 'Success', variant: 'success' },
+    { label: 'Warning', variant: 'warning' },
+    { label: 'Error',   variant: 'error' },
+  ];
+  return React.createElement(
+    'bds-toast-provider',
+    null,
+    React.createElement(
+      'div',
+      { style: { display: 'flex', gap: '0.75rem', flexWrap: 'wrap' } },
+      ...variants.map(({ label, variant }) =>
+        React.createElement(
+          'button',
+          {
+            key: variant,
+            onClick: () => BdsToastProvider.show(`This is a ${variant} toast`, variant),
+          },
+          `Show ${label}`,
+        ),
+      ),
+    ),
+  );
+}
+const meta = {
+  title: 'Web Components/Interaction/ToastProvider',
+  component: ToastDemo,
+  tags: ['!stable', 'experimental'],
+  parameters: { layout: 'centered' },
+} satisfies Meta<typeof ToastDemo>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};
+export const EventAPI: Story = {
+  render: () =>
+    React.createElement(
+      'bds-toast-provider',
+      null,
+      React.createElement(
+        'div',
+        { style: { display: 'flex', flexDirection: 'column', gap: '0.5rem' } },
+        React.createElement('p', { style: { margin: 0, fontSize: '0.875rem', color: '#666' } },
+          'Uses the document event API — no import required.'),
+        React.createElement(
+          'button',
+          {
+            onClick: () =>
+              document.dispatchEvent(
+                new CustomEvent('bds-show-toast', {
+                  detail: { message: 'Fired via bds-show-toast event', variant: 'info' },
+                }),
+              ),
+          },
+          'Dispatch bds-show-toast',
+        ),
+      ),
+    ),
+};

package/src/web-components/interaction/bds-button.spec.ts ADDED Viewed

@@ -0,0 +1,95 @@
+import { fixture, cleanup } from '../test/helpers';
+import { BdsButton } from './bds-button';
+describe('bds-button', () => {
+  it('is registered as a custom element', () => {
+    expect(customElements.get('bds-button')).toBe(BdsButton);
+  });
+  it('renders a <button> by default', async () => {
+    const el = await fixture('<bds-button>Click</bds-button>');
+    const btn = el.shadowRoot!.querySelector('button');
+    expect(btn).not.toBeNull();
+    cleanup(el);
+  });
+  it('renders an <a> when href is set', async () => {
+    const el = await fixture('<bds-button href="/home">Home</bds-button>');
+    const a = el.shadowRoot!.querySelector('a');
+    expect(a).not.toBeNull();
+    expect(a!.getAttribute('href')).toBe('/home');
+    cleanup(el);
+  });
+  it('defaults to variant="default" and size="medium"', async () => {
+    const el = await fixture('<bds-button>Click</bds-button>');
+    expect(el.getAttribute('variant')).toBe('default');
+    expect(el.getAttribute('size')).toBe('medium');
+    cleanup(el);
+  });
+  it('reflects variant attribute', async () => {
+    const el = await fixture('<bds-button variant="ghost">Click</bds-button>');
+    expect(el.getAttribute('variant')).toBe('ghost');
+    const btn = el.shadowRoot!.querySelector('button');
+    expect(btn!.className).toContain('ghost');
+    cleanup(el);
+  });
+  it('reflects size attribute', async () => {
+    const el = await fixture('<bds-button size="small">Click</bds-button>');
+    const btn = el.shadowRoot!.querySelector('button');
+    expect(btn!.className).toContain('small');
+    cleanup(el);
+  });
+  it('sets disabled on the inner button', async () => {
+    const el = await fixture('<bds-button disabled>Click</bds-button>');
+    const btn = el.shadowRoot!.querySelector('button');
+    expect(btn!.disabled).toBe(true);
+    cleanup(el);
+  });
+  it('sets aria-disabled and removes href when disabled + href', async () => {
+    const el = await fixture('<bds-button href="/home" disabled>Home</bds-button>');
+    const a = el.shadowRoot!.querySelector('a');
+    expect(a!.getAttribute('aria-disabled')).toBe('true');
+    expect(a!.hasAttribute('href')).toBe(false);
+    cleanup(el);
+  });
+  it('applies has-pulse class when has-pulse is set', async () => {
+    const el = await fixture('<bds-button has-pulse>Click</bds-button>');
+    const btn = el.shadowRoot!.querySelector('button');
+    expect(btn!.className).toContain('has-pulse');
+    cleanup(el);
+  });
+  it('renders default slot content in light DOM', async () => {
+    const el = await fixture('<bds-button>Save</bds-button>');
+    expect(el.textContent?.trim()).toBe('Save');
+    cleanup(el);
+  });
+  it('renders icon-start slot when content is provided', async () => {
+    const el = await fixture(`
+      <bds-button>
+        <svg slot="icon-start" data-testid="icon"></svg>
+        Label
+      </bds-button>
+    `);
+    await (el as unknown as { updateComplete: Promise<void> }).updateComplete;
+    // Icon span should be present in shadow DOM
+    const iconStart = el.shadowRoot!.querySelector('.icon-start');
+    expect(iconStart).not.toBeNull();
+    cleanup(el);
+  });
+  it('forwards target and rel to anchor', async () => {
+    const el = await fixture('<bds-button href="/ext" target="_blank" rel="noopener">Ext</bds-button>');
+    const a = el.shadowRoot!.querySelector('a');
+    expect(a!.getAttribute('target')).toBe('_blank');
+    expect(a!.getAttribute('rel')).toBe('noopener');
+    cleanup(el);
+  });
+});