npm - @boostdev/design-system-components - Versions diffs - 1.1.2 → 1.2.0 - Mend

@boostdev/design-system-components 1.1.2 → 1.2.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 (169) hide show

package/src/web-components/interaction/BdsSkipLink.mdx ADDED Viewed

@@ -0,0 +1,34 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './BdsSkipLink.stories';
+<Meta of={Stories} />
+# Skip Link
+`<bds-skip-link>` renders a visually hidden anchor that becomes visible on focus, allowing keyboard users to skip directly to the main content. This is a critical accessibility component that should be the first focusable element on every page.
+## Usage
+```html
+<bds-skip-link href="#main-content">Skip to main content</bds-skip-link>
+<!-- ... navigation ... -->
+<main id="main-content">...</main>
+```
+## Attributes
+| Attribute | Type     | Default | Description                            |
+|-----------|----------|---------|----------------------------------------|
+| `href`    | `string` | `""`    | Target anchor ID (e.g. `#main-content`) |
+## Slots
+| Slot      | Description              |
+|-----------|--------------------------|
+| (default) | The visible link text    |
+## Notes
+- The link is visually hidden until it receives keyboard focus (Tab key)
+- Place it as the very first element inside `<body>` before any navigation
+- The `href` must point to an `id` on the main content container

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

@@ -0,0 +1,55 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import '../index';
+function BdsSkipLink({ href, children }: { href?: string; children?: React.ReactNode }) {
+  return React.createElement('bds-skip-link', { href }, children);
+}
+const meta = {
+  title: 'Web Components/Interaction/SkipLink',
+  component: BdsSkipLink,
+  tags: ['!stable', 'experimental'],
+  parameters: { layout: 'padded' },
+} satisfies Meta<typeof BdsSkipLink>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {
+  render: () => (
+    <div style={{ position: 'relative', minHeight: '80px', border: '1px dashed #ccc', padding: '8px' }}>
+      <p style={{ margin: '0 0 8px', fontSize: '0.75rem', color: '#888' }}>
+        Tab into this area to reveal the skip link
+      </p>
+      <BdsSkipLink href="#main">Skip to main content</BdsSkipLink>
+      <p style={{ margin: '8px 0 0', fontSize: '0.875rem' }}>Press Tab to focus the skip link above</p>
+    </div>
+  ),
+};
+export const CustomTarget: Story = {
+  render: () => (
+    <div style={{ position: 'relative', minHeight: '80px' }}>
+      <BdsSkipLink href="#main-content">Skip to main content</BdsSkipLink>
+    </div>
+  ),
+};
+export const CustomLabel: Story = {
+  render: () => (
+    <div style={{ position: 'relative', minHeight: '80px' }}>
+      <BdsSkipLink href="#content">Jump to content</BdsSkipLink>
+    </div>
+  ),
+};
+export const AllVariants: Story = {
+  render: () => (
+    <div style={{ position: 'relative', minHeight: '120px', display: 'flex', flexDirection: 'column', gap: '8px' }}>
+      <p style={{ margin: 0, fontSize: '0.75rem', color: '#888' }}>Tab to reveal — visually hidden until focused</p>
+      <BdsSkipLink href="#main">Skip to main content</BdsSkipLink>
+      <BdsSkipLink href="#nav">Skip to navigation</BdsSkipLink>
+    </div>
+  ),
+};

package/src/web-components/interaction/BdsTabs.mdx ADDED Viewed

@@ -0,0 +1,47 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './BdsTabs.stories';
+<Meta of={Stories} />
+# Tabs
+`<bds-tabs>` provides a tabbed interface. Place `<bds-tab>` elements in the `tab` slot and matching `<bds-tab-panel>` elements in the `panel` slot. Tabs and panels are associated by order.
+## Usage
+```html
+<bds-tabs>
+  <bds-tab slot="tab">Overview</bds-tab>
+  <bds-tab slot="tab">Details</bds-tab>
+  <bds-tab-panel slot="panel">
+    <p>Overview content.</p>
+  </bds-tab-panel>
+  <bds-tab-panel slot="panel">
+    <p>Details content.</p>
+  </bds-tab-panel>
+</bds-tabs>
+```
+## Attributes — `<bds-tab>`
+| Attribute  | Type      | Default | Description               |
+|------------|-----------|---------|---------------------------|
+| `disabled` | `boolean` | `false` | Prevents selecting this tab |
+## Keyboard Navigation
+| Key         | Action                  |
+|-------------|-------------------------|
+| `ArrowLeft` | Move to previous tab    |
+| `ArrowRight`| Move to next tab        |
+| `Home`      | Move to first tab       |
+| `End`       | Move to last tab        |
+## Stories
+<Canvas of={Stories.Default} />
+<Canvas of={Stories.AllVariants} />
+## Controls
+<ArgTypes of={Stories} />

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

@@ -0,0 +1,80 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import '../index';
+function TabsDemo({ withDisabled = false }: { withDisabled?: boolean }) {
+  return React.createElement(
+    'bds-tabs',
+    null,
+    React.createElement('bds-tab', { slot: 'tab' }, 'Overview'),
+    React.createElement('bds-tab', { slot: 'tab' }, 'Details'),
+    withDisabled
+      ? React.createElement('bds-tab', { slot: 'tab', disabled: true }, 'Disabled')
+      : React.createElement('bds-tab', { slot: 'tab' }, 'Settings'),
+    React.createElement(
+      'bds-tab-panel',
+      { slot: 'panel' },
+      React.createElement('p', { style: { margin: 0 } }, 'Overview content — general information about this item.'),
+    ),
+    React.createElement(
+      'bds-tab-panel',
+      { slot: 'panel' },
+      React.createElement('p', { style: { margin: 0 } }, 'Details content — technical specifications and metadata.'),
+    ),
+    React.createElement(
+      'bds-tab-panel',
+      { slot: 'panel' },
+      withDisabled
+        ? React.createElement('p', { style: { margin: 0 } }, 'Disabled tab content.')
+        : React.createElement('p', { style: { margin: 0 } }, 'Settings content — configuration options.'),
+    ),
+  );
+}
+// Thin wrapper so Storybook controls work
+function BdsTabs({ withDisabled }: { withDisabled?: boolean }) {
+  return React.createElement(TabsDemo, { withDisabled });
+}
+const meta = {
+  title: 'Web Components/Interaction/Tabs',
+  component: BdsTabs,
+  tags: ['!stable', 'experimental'],
+  parameters: { layout: 'padded' },
+  argTypes: {
+    withDisabled: { control: 'boolean' },
+  },
+} satisfies Meta<typeof BdsTabs>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = { args: { withDisabled: false } };
+export const WithDisabledTab: Story = { args: { withDisabled: true } };
+export const AllVariants: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '32px' }}>
+      <div>
+        <p style={{ margin: '0 0 8px', fontSize: '0.75rem', color: '#888', fontWeight: 600 }}>Standard tabs</p>
+        <TabsDemo />
+      </div>
+      <div>
+        <p style={{ margin: '0 0 8px', fontSize: '0.75rem', color: '#888', fontWeight: 600 }}>With disabled tab</p>
+        <TabsDemo withDisabled />
+      </div>
+    </div>
+  ),
+};
+export const Interactive: Story = {
+  name: 'Interactive (keyboard nav)',
+  render: () => (
+    <div>
+      <p style={{ margin: '0 0 12px', fontSize: '0.875rem', color: '#666' }}>
+        Use ArrowLeft / ArrowRight to navigate between tabs. Home / End jump to first / last.
+      </p>
+      <TabsDemo />
+    </div>
+  ),
+};

package/src/web-components/interaction/BdsTooltip.mdx ADDED Viewed

@@ -0,0 +1,38 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './BdsTooltip.stories';
+<Meta of={Stories} />
+# Tooltip
+`<bds-tooltip>` wraps any trigger element and shows a floating tooltip on hover and focus. The tooltip is dismissed on mouse-out and blur.
+## Usage
+```html
+<bds-tooltip content="Save changes" placement="top">
+  <button type="button">Save</button>
+</bds-tooltip>
+```
+## Attributes
+| Attribute   | Type                                    | Default  | Description                      |
+|-------------|-----------------------------------------|----------|----------------------------------|
+| `content`   | `string`                                | `""`     | Tooltip text                     |
+| `placement` | `"top" \| "bottom" \| "left" \| "right"` | `"top"`  | Preferred tooltip placement      |
+## Slots
+| Slot      | Description                        |
+|-----------|------------------------------------|
+| (default) | The trigger element for the tooltip |
+## Stories
+<Canvas of={Stories.Top} />
+<Canvas of={Stories.AllPlacements} />
+## Controls
+<ArgTypes of={Stories} />

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

@@ -0,0 +1,68 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import type { TooltipPlacement } from './bds-tooltip';
+import '../index';
+function BdsTooltip({
+  content,
+  placement,
+  children,
+}: {
+  content?: string;
+  placement?: TooltipPlacement;
+  children?: React.ReactNode;
+}) {
+  return React.createElement(
+    'bds-tooltip',
+    { content, placement },
+    children ?? React.createElement('button', { type: 'button' }, 'Hover me'),
+  );
+}
+const meta = {
+  title: 'Web Components/Interaction/Tooltip',
+  component: BdsTooltip,
+  tags: ['!stable', 'experimental'],
+  parameters: { layout: 'centered' },
+  argTypes: {
+    placement: { control: 'select', options: ['top', 'bottom', 'left', 'right'] },
+  },
+} satisfies Meta<typeof BdsTooltip>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Top: Story = { args: { content: 'Tooltip on top', placement: 'top' } };
+export const Bottom: Story = { args: { content: 'Tooltip on bottom', placement: 'bottom' } };
+export const Left: Story = { args: { content: 'Tooltip on left', placement: 'left' } };
+export const Right: Story = { args: { content: 'Tooltip on right', placement: 'right' } };
+export const AllPlacements: Story = {
+  render: () => (
+    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, auto)', gap: '64px', padding: '48px' }}>
+      {(['top', 'bottom', 'left', 'right'] as const).map(p => (
+        <div key={p} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+          <BdsTooltip content={`Placed ${p}`} placement={p}>
+            <button type="button">{p}</button>
+          </BdsTooltip>
+        </div>
+      ))}
+    </div>
+  ),
+};
+export const AllVariants: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '32px', flexWrap: 'wrap', padding: '32px' }}>
+      <BdsTooltip content="A helpful tip" placement="top">
+        <button type="button">Info button</button>
+      </BdsTooltip>
+      <BdsTooltip content="Delete this item" placement="bottom">
+        <button type="button">Delete</button>
+      </BdsTooltip>
+      <BdsTooltip content="Opens in new tab" placement="right">
+        <button type="button">External link</button>
+      </BdsTooltip>
+    </div>
+  ),
+};

package/src/web-components/interaction/bds-accordion.ts CHANGED Viewed

@@ -28,9 +28,8 @@ export class BdsAccordion extends LitElement {
       display: block;
       --bdc_color: var(--bds-color_bg--subtle);
       --bdc-outline_radius: var(--bds-border_radius--s);
-      outline: var(--bdc-outline_width) solid var(--bdc_color);
-      outline-offset: var(--bdc-outline_offset);
       border-radius: var(--accordion_radius, var(--bdc-outline_radius));
+      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
       overflow: hidden;
     }
   `;

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

@@ -1,13 +1,13 @@
 import { LitElement, css, html, nothing } from 'lit';
-export type ButtonVariant = 'default' | 'ghost';
+export type ButtonVariant = 'default' | 'outline' | 'ghost'; // 'ghost' is deprecated, use 'outline'
 export type ButtonSize = 'small' | 'medium' | 'large';
 /**
  * `<bds-button>` — framework-agnostic Button custom element.
  *
  * Attributes:
- *   variant   — "default" (filled, default) | "ghost" (transparent + outlined)
+ *   variant   — "default" (filled, default) | "outline" (transparent + outlined) | "ghost" (deprecated alias for "outline")
  *   size      — "small" | "medium" (default) | "large"
  *   disabled  — boolean
  *   href      — renders an <a> tag instead of <button>
@@ -38,9 +38,9 @@ export class BdsButton extends LitElement {
     }
     @keyframes pulse {
-      0%   { transform: scale(1);    box-shadow: 0 0 0 0    rgb(from var(--button_pulse-color, var(--button_color, var(--bds-color_green))) r g b / 50%); }
-      70%  { transform: scale(1.01); box-shadow: 0 0 0 var(--bds-space_m) rgb(from var(--button_pulse-color, var(--button_color, var(--bds-color_green))) r g b / 0%); }
-      100% { transform: scale(1);    box-shadow: 0 0 0 0    rgb(from var(--button_pulse-color, var(--button_color, var(--bds-color_green))) r g b / 0%); }
+      0%   { transform: scale(1);    box-shadow: 0 0 0 0    rgb(from var(--button_pulse-color, var(--button_color, var(--bds-color_interactive))) r g b / 50%); }
+      70%  { transform: scale(1.01); box-shadow: 0 0 0 var(--bds-space_m) rgb(from var(--button_pulse-color, var(--button_color, var(--bds-color_interactive))) r g b / 0%); }
+      100% { transform: scale(1);    box-shadow: 0 0 0 0    rgb(from var(--button_pulse-color, var(--button_color, var(--bds-color_interactive))) r g b / 0%); }
     }
     :host {
@@ -64,16 +64,16 @@ export class BdsButton extends LitElement {
       white-space: nowrap;
       line-height: 1;
-      --button_color:    var(--bds-color_green);
-      --button_on-color: var(--bds-color_on-green);
+      --button_color:        var(--bds-color_interactive);
+      --button_on-color:     var(--bds-color_on-interactive);
+      --button_color--on-bg: var(--bds-color_interactive_on-bg);
       background-color: var(--button_bg, var(--button_color));
       color: var(--button_text, var(--button_on-color));
       border: var(--button_border, none);
       --bdc_color: transparent;
-      outline: var(--bdc-outline_width) solid var(--bdc_color);
-      outline-offset: var(--bdc-outline_offset);
+      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
       transition: var(--bds-animation_transition),
                   --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing);
     }
@@ -83,10 +83,11 @@ export class BdsButton extends LitElement {
     }
     /* Variants */
-    .button.ghost {
+    .button.outline,
+    .button.ghost /* deprecated — use variant="outline" */ {
       --button_bg:   transparent;
-      --button_text: var(--button_color);
-      --bdc_color:   var(--button_color);
+      --button_text: var(--button_color--on-bg);
+      --bdc_color:   var(--button_color--on-bg);
     }
     /* Sizes */
@@ -155,7 +156,8 @@ export class BdsButton extends LitElement {
         --bdc_color:          currentcolor;
       }
-      /* Ghost hover */
+      /* Outline hover */
+      .button.outline:hover,
       .button.ghost:hover {
         --button_bg:   var(--button_color);
         --button_text: var(--button_on-color);

package/src/web-components/interaction/bds-dialog.ts CHANGED Viewed

@@ -37,10 +37,8 @@ export class BdsDialog extends LitElement {
       --bdc_color: currentcolor;
       --bdc-outline_radius: var(--bds-border_radius--m);
-      outline: var(--bdc-outline_width) solid var(--bdc_color);
-      outline-offset: var(--bdc-outline_offset);
       border-radius: var(--dialog_radius, var(--bdc-outline_radius));
-      box-shadow: var(--dialog_shadow, var(--bdc-outline_shadow));
+      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--dialog_shadow, var(--bdc-outline_shadow));
       background-color: var(--dialog_color, var(--bds-color_grey--subtle));
       color: var(--dialog_on-color, var(--bds-color_on-grey--subtle));
       padding: var(--bds-space_l);
@@ -74,8 +72,7 @@ export class BdsDialog extends LitElement {
       border: var(--dialog_close-border, none);
       --bdc_color: currentcolor;
-      outline: var(--bdc-outline_width) solid var(--bdc_color);
-      outline-offset: var(--bdc-outline_offset);
+      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
       cursor: pointer;
     }

package/src/web-components/interaction/bds-drawer.ts CHANGED Viewed

@@ -47,11 +47,26 @@ export class BdsDrawer extends LitElement {
       border: none;
       background: transparent;
       overflow: hidden;
+      transition:
+        display var(--bds-animation_transition-duration) allow-discrete,
+        overlay var(--bds-animation_transition-duration) allow-discrete;
     }
     .drawer::backdrop {
       background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
       backdrop-filter: blur(3px);
+      transition:
+        display var(--bds-animation_transition-duration) allow-discrete,
+        overlay var(--bds-animation_transition-duration) allow-discrete,
+        background-color var(--bds-animation_transition-duration) var(--bds-animation_easing),
+        backdrop-filter var(--bds-animation_transition-duration) var(--bds-animation_easing);
+    }
+    @starting-style {
+      .drawer[open]::backdrop {
+        background-color: transparent;
+        backdrop-filter: blur(0);
+      }
     }
     .panel {
@@ -65,16 +80,42 @@ export class BdsDrawer extends LitElement {
       color: var(--drawer_on-color, var(--bds-color_on-bg));
       box-shadow: var(--bds-shadow_xl);
       overflow: hidden;
-      transition: var(--bds-animation_transition);
+      translate: 100% 0;
+      transition: translate var(--bds-animation_transition-duration) var(--bds-animation_easing);
     }
     :host([side='right']) .panel {
       inset-inline-end: 0;
+      translate: 100% 0;
     }
     :host([side='left']) .panel,
     :host(:not([side])) .panel {
       inset-inline-start: 0;
+      translate: -100% 0;
+    }
+    .drawer[open] .panel {
+      translate: 0 0;
+    }
+    :host([side='right']) .drawer[open] .panel,
+    :host(:not([side])) .drawer[open] .panel {
+      animation: bds-drawer-slide-right var(--bds-animation_transition-duration) var(--bds-animation_easing) both;
+    }
+    :host([side='left']) .drawer[open] .panel {
+      animation: bds-drawer-slide-left var(--bds-animation_transition-duration) var(--bds-animation_easing) both;
+    }
+    @keyframes bds-drawer-slide-right {
+      from { translate: 100% 0; }
+      to { translate: 0 0; }
+    }
+    @keyframes bds-drawer-slide-left {
+      from { translate: -100% 0; }
+      to { translate: 0 0; }
     }
     .header {
@@ -128,9 +169,17 @@ export class BdsDrawer extends LitElement {
     }
     @media (prefers-reduced-motion: reduce) {
+      .drawer,
+      .drawer::backdrop,
       .panel {
         transition: none;
       }
+      :host([side='right']) .drawer[open] .panel,
+      :host(:not([side])) .drawer[open] .panel,
+      :host([side='left']) .drawer[open] .panel {
+        animation: none;
+      }
     }
   `;

package/src/web-components/interaction/form/BdsCheckbox.mdx ADDED Viewed

@@ -0,0 +1,39 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './BdsCheckbox.stories';
+<Meta of={Stories} />
+# Checkbox
+`<bds-checkbox>` is a form-associated custom element that participates in HTML forms via the Form-Associated Custom Elements API. Native browser validation (`required`) works without any wrapper.
+## Usage
+```html
+<bds-checkbox name="agree" value="yes" required>I agree to the terms</bds-checkbox>
+```
+## Attributes
+| Attribute  | Type      | Default | Description                         |
+|------------|-----------|---------|-------------------------------------|
+| `name`     | `string`  | `""`    | Form field name                     |
+| `value`    | `string`  | `"on"`  | Submitted value when checked        |
+| `checked`  | `boolean` | `false` | Whether the checkbox is checked     |
+| `required` | `boolean` | `false` | Marks the field as required         |
+| `disabled` | `boolean` | `false` | Disables interaction                |
+## Slots
+| Slot      | Description   |
+|-----------|---------------|
+| (default) | Label text    |
+## Stories
+<Canvas of={Stories.Default} />
+<Canvas of={Stories.AllVariants} />
+## Controls
+<ArgTypes of={Stories} />

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

@@ -0,0 +1,73 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import '../../index';
+function BdsCheckbox({
+  label = 'Check me',
+  checked,
+  disabled,
+  required,
+}: {
+  label?: string;
+  checked?: boolean;
+  disabled?: boolean;
+  required?: boolean;
+}) {
+  return React.createElement(
+    'bds-checkbox',
+    {
+      checked: checked || undefined,
+      disabled: disabled || undefined,
+      required: required || undefined,
+    },
+    label,
+  );
+}
+const meta = {
+  title: 'Web Components/Interaction/Form/Checkbox',
+  component: BdsCheckbox,
+  tags: ['!stable', 'experimental'],
+  parameters: { layout: 'padded' },
+  argTypes: {
+    checked: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    required: { control: 'boolean' },
+  },
+} satisfies Meta<typeof BdsCheckbox>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = { args: { label: 'Accept terms and conditions' } };
+export const Checked: Story = { args: { label: 'Already checked', checked: true } };
+export const Disabled: Story = { args: { label: 'Disabled option', disabled: true } };
+export const DisabledChecked: Story = { args: { label: 'Disabled and checked', checked: true, disabled: true } };
+export const AllVariants: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+      {React.createElement('bds-checkbox', null, 'Unchecked')}
+      {React.createElement('bds-checkbox', { checked: true }, 'Checked')}
+      {React.createElement('bds-checkbox', { disabled: true }, 'Disabled')}
+      {React.createElement('bds-checkbox', { checked: true, disabled: true }, 'Disabled checked')}
+      {React.createElement('bds-checkbox', { required: true }, 'Required')}
+    </div>
+  ),
+};
+export const Interactive: Story = {
+  render: () => {
+    const [checked, setChecked] = React.useState(false);
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+        <p style={{ margin: 0, fontSize: '0.875rem' }}>State: {checked ? 'checked' : 'unchecked'}</p>
+        {React.createElement(
+          'bds-checkbox',
+          { checked: checked || undefined, onChange: (e: Event) => setChecked((e.target as HTMLInputElement).checked) },
+          'Controlled checkbox',
+        )}
+      </div>
+    );
+  },
+};