@boostdev/design-system-components 1.1.1 → 1.2.0

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

@@ -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

@@ -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

@@ -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-item.spec.ts

@@ -0,0 +1,75 @@
+import { fixture, cleanup } from '../test/helpers';
+import { BdsAccordionItem } from './bds-accordion-item';
+
+describe('bds-accordion-item', () => {
+  it('is registered as a custom element', () => {
+    expect(customElements.get('bds-accordion-item')).toBe(BdsAccordionItem);
+  });
+
+  it('is closed by default', async () => {
+    const el = await fixture('<bds-accordion-item><span slot="header">Q</span><p>A</p></bds-accordion-item>') as BdsAccordionItem;
+    expect(el.open).toBe(false);
+    cleanup(el);
+  });
+
+  it('renders a trigger button', async () => {
+    const el = await fixture('<bds-accordion-item><span slot="header">Q</span><p>A</p></bds-accordion-item>');
+    expect(el.shadowRoot!.querySelector('button.trigger')).not.toBeNull();
+    cleanup(el);
+  });
+
+  it('trigger has aria-expanded="false" when closed', async () => {
+    const el = await fixture('<bds-accordion-item><span slot="header">Q</span><p>A</p></bds-accordion-item>');
+    const btn = el.shadowRoot!.querySelector('button')!;
+    expect(btn.getAttribute('aria-expanded')).toBe('false');
+    cleanup(el);
+  });
+
+  it('trigger has aria-expanded="true" when open', async () => {
+    const el = await fixture('<bds-accordion-item open><span slot="header">Q</span><p>A</p></bds-accordion-item>');
+    const btn = el.shadowRoot!.querySelector('button')!;
+    expect(btn.getAttribute('aria-expanded')).toBe('true');
+    cleanup(el);
+  });
+
+  it('panel is hidden when closed', async () => {
+    const el = await fixture('<bds-accordion-item><span slot="header">Q</span><p>A</p></bds-accordion-item>');
+    const panel = el.shadowRoot!.querySelector('[role="region"]')!;
+    expect(panel.hasAttribute('hidden')).toBe(true);
+    cleanup(el);
+  });
+
+  it('panel is visible when open', async () => {
+    const el = await fixture('<bds-accordion-item open><span slot="header">Q</span><p>A</p></bds-accordion-item>');
+    const panel = el.shadowRoot!.querySelector('[role="region"]')!;
+    expect(panel.hasAttribute('hidden')).toBe(false);
+    cleanup(el);
+  });
+
+  it('fires bds-accordion-item-toggle when trigger is clicked', async () => {
+    const el = await fixture('<bds-accordion-item><span slot="header">Q</span><p>A</p></bds-accordion-item>');
+    const btn = el.shadowRoot!.querySelector('button')!;
+    const handler = vi.fn();
+    el.addEventListener('bds-accordion-item-toggle', handler);
+    btn.dispatchEvent(new MouseEvent('click', { bubbles: true, composed: true }));
+    expect(handler).toHaveBeenCalledOnce();
+    cleanup(el);
+  });
+
+  it('does not fire toggle event when disabled', async () => {
+    const el = await fixture('<bds-accordion-item disabled><span slot="header">Q</span><p>A</p></bds-accordion-item>');
+    const btn = el.shadowRoot!.querySelector('button')!;
+    const handler = vi.fn();
+    el.addEventListener('bds-accordion-item-toggle', handler);
+    btn.dispatchEvent(new MouseEvent('click', { bubbles: true, composed: true }));
+    expect(handler).not.toHaveBeenCalled();
+    cleanup(el);
+  });
+
+  it('button is disabled when disabled attribute is set', async () => {
+    const el = await fixture('<bds-accordion-item disabled><span slot="header">Q</span><p>A</p></bds-accordion-item>');
+    const btn = el.shadowRoot!.querySelector('button')!;
+    expect(btn.hasAttribute('disabled')).toBe(true);
+    cleanup(el);
+  });
+});

package/src/web-components/interaction/bds-accordion-item.ts

@@ -0,0 +1,181 @@
+import { LitElement, css, html } from 'lit';
+
+/**
+ * `<bds-accordion-item>` — child element of `<bds-accordion>`.
+ *
+ * Manages a single collapsible panel. The `open` and `disabled` state is
+ * controlled by the parent `<bds-accordion>` element.
+ *
+ * Attributes:
+ *   open     — boolean; whether the panel is expanded
+ *   disabled — boolean; prevents the user from toggling this item
+ *
+ * Slots:
+ *   header   — the always-visible trigger label
+ *   (default) — the content revealed when open
+ *
+ * Events:
+ *   bds-accordion-item-toggle — fired (bubbles, composed) when the trigger
+ *                               button is clicked; the parent accordion handles
+ *                               the state change.
+ *
+ * @example
+ * <bds-accordion-item>
+ *   <span slot="header">Question</span>
+ *   <p>Answer content</p>
+ * </bds-accordion-item>
+ */
+export class BdsAccordionItem extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+      border-block-end: 1px solid var(--bds-color_bg--subtle);
+    }
+
+    :host(:last-child) {
+      border-block-end: none;
+    }
+
+    .heading {
+      margin: 0;
+    }
+
+    .trigger {
+      all: unset;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      inline-size: 100%;
+      padding: var(--bds-space_m);
+      font-family: var(--bds-font_family--body);
+      font-size: var(--bds-font_size--body);
+      font-weight: var(--bds-font_weight--semibold);
+      color: var(--bds-color_on-bg);
+      cursor: pointer;
+      transition: var(--bds-animation_transition);
+      box-sizing: border-box;
+    }
+
+    .trigger:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+
+    .trigger:focus-visible {
+      outline: var(--bds-outline_default);
+      outline-offset: calc(var(--bds-outline_offset) * -1);
+      border-radius: var(--bds-border_radius--xs);
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+      .trigger:not(:disabled):hover {
+        background-color: var(--bds-color_bg--subtle);
+      }
+    }
+
+    .trigger-label {
+      flex: 1;
+      text-align: start;
+    }
+
+    .chevron {
+      inline-size: 1.25rem;
+      block-size: 1.25rem;
+      flex-shrink: 0;
+      transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
+    }
+
+    :host([open]) .chevron {
+      transform: rotate(180deg);
+    }
+
+    .panel {
+      overflow: hidden;
+    }
+
+    .panel-content {
+      padding: 0 var(--bds-space_m) var(--bds-space_m);
+      color: var(--bds-color_on-bg);
+      font-size: var(--bds-font_size--body);
+      line-height: var(--bds-font_line-height--body);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .chevron {
+        transition: none;
+      }
+    }
+  `;
+
+  static properties = {
+    open:     { type: Boolean, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+  };
+
+  declare open: boolean;
+  declare disabled: boolean;
+
+  // Stable IDs for aria-controls / aria-labelledby
+  private readonly _uid = Math.random().toString(36).slice(2, 8);
+
+  constructor() {
+    super();
+    this.open = false;
+    this.disabled = false;
+  }
+
+  private _handleTriggerClick() {
+    if (this.disabled) return;
+    this.dispatchEvent(
+      new CustomEvent('bds-accordion-item-toggle', { bubbles: true, composed: true }),
+    );
+  }
+
+  render() {
+    const triggerId = `bds-acc-trigger-${this._uid}`;
+    const panelId = `bds-acc-panel-${this._uid}`;
+
+    return html`
+      <h3 class="heading">
+        <button
+          type="button"
+          id=${triggerId}
+          class="trigger"
+          aria-expanded=${this.open}
+          aria-controls=${panelId}
+          ?disabled=${this.disabled}
+          @click=${this._handleTriggerClick}
+        >
+          <span class="trigger-label"><slot name="header"></slot></span>
+          <svg
+            class="chevron"
+            aria-hidden="true"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+          >
+            <path stroke-linecap="round" stroke-linejoin="round" d="M6 9l6 6 6-6" />
+          </svg>
+        </button>
+      </h3>
+      <div
+        id=${panelId}
+        class="panel"
+        role="region"
+        aria-labelledby=${triggerId}
+        ?hidden=${!this.open}
+      >
+        <div class="panel-content"><slot></slot></div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('bds-accordion-item', BdsAccordionItem);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bds-accordion-item': BdsAccordionItem;
+  }
+}

package/src/web-components/interaction/bds-accordion.spec.ts

@@ -0,0 +1,73 @@
+import { fixture, cleanup } from '../test/helpers';
+import { BdsAccordion } from './bds-accordion';
+import { BdsAccordionItem } from './bds-accordion-item';
+
+const html = `
+  <bds-accordion>
+    <bds-accordion-item><span slot="header">Q1</span><p>A1</p></bds-accordion-item>
+    <bds-accordion-item><span slot="header">Q2</span><p>A2</p></bds-accordion-item>
+    <bds-accordion-item><span slot="header">Q3</span><p>A3</p></bds-accordion-item>
+  </bds-accordion>
+`;
+
+describe('bds-accordion', () => {
+  it('is registered as a custom element', () => {
+    expect(customElements.get('bds-accordion')).toBe(BdsAccordion);
+  });
+
+  it('all items are closed by default', async () => {
+    const el = await fixture(html);
+    const items = [...el.querySelectorAll<BdsAccordionItem>('bds-accordion-item')];
+    // Reflect: true means open=false removes the attribute; check attribute absence.
+    expect(items.every(i => !i.hasAttribute('open'))).toBe(true);
+    cleanup(el);
+  });
+
+  it('opens the toggled item when a bds-accordion-item-toggle fires', async () => {
+    const el = await fixture(html);
+    const items = [...el.querySelectorAll<BdsAccordionItem>('bds-accordion-item')];
+    items[0].dispatchEvent(new CustomEvent('bds-accordion-item-toggle', { bubbles: true, composed: true }));
+    expect(items[0].open).toBe(true);
+    cleanup(el);
+  });
+
+  it('closes other items when a new one is toggled (exclusive by default)', async () => {
+    const el = await fixture(html);
+    const items = [...el.querySelectorAll<BdsAccordionItem>('bds-accordion-item')];
+    // Open first
+    items[0].dispatchEvent(new CustomEvent('bds-accordion-item-toggle', { bubbles: true, composed: true }));
+    expect(items[0].open).toBe(true);
+    // Toggle second
+    items[1].dispatchEvent(new CustomEvent('bds-accordion-item-toggle', { bubbles: true, composed: true }));
+    expect(items[1].open).toBe(true);
+    expect(items[0].open).toBe(false);
+    cleanup(el);
+  });
+
+  it('allows multiple open items when allow-multiple is set', async () => {
+    const el = await fixture(`
+      <bds-accordion allow-multiple>
+        <bds-accordion-item><span slot="header">Q1</span><p>A1</p></bds-accordion-item>
+        <bds-accordion-item><span slot="header">Q2</span><p>A2</p></bds-accordion-item>
+      </bds-accordion>
+    `);
+    const items = [...el.querySelectorAll<BdsAccordionItem>('bds-accordion-item')];
+    items[0].dispatchEvent(new CustomEvent('bds-accordion-item-toggle', { bubbles: true, composed: true }));
+    items[1].dispatchEvent(new CustomEvent('bds-accordion-item-toggle', { bubbles: true, composed: true }));
+    expect(items[0].open).toBe(true);
+    expect(items[1].open).toBe(true);
+    cleanup(el);
+  });
+
+  it('closes an already-open item when toggled again', async () => {
+    const el = await fixture(html);
+    const items = [...el.querySelectorAll<BdsAccordionItem>('bds-accordion-item')];
+    // Open first
+    items[0].dispatchEvent(new CustomEvent('bds-accordion-item-toggle', { bubbles: true, composed: true }));
+    expect(items[0].open).toBe(true);
+    // Toggle again to close
+    items[0].dispatchEvent(new CustomEvent('bds-accordion-item-toggle', { bubbles: true, composed: true }));
+    expect(items[0].open).toBe(false);
+    cleanup(el);
+  });
+});

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

@@ -0,0 +1,98 @@
+import { LitElement, css, html } from 'lit';
+import type { BdsAccordionItem } from './bds-accordion-item';
+
+/**
+ * `<bds-accordion>` — framework-agnostic Accordion custom element.
+ *
+ * Contains `<bds-accordion-item>` children. Coordinates open/closed state
+ * across items; by default only one item is open at a time.
+ *
+ * Attributes:
+ *   allow-multiple — boolean; when set, multiple items can be open simultaneously
+ *
+ * @example
+ * <bds-accordion>
+ *   <bds-accordion-item>
+ *     <span slot="header">Question 1</span>
+ *     <p>Answer 1</p>
+ *   </bds-accordion-item>
+ *   <bds-accordion-item>
+ *     <span slot="header">Question 2</span>
+ *     <p>Answer 2</p>
+ *   </bds-accordion-item>
+ * </bds-accordion>
+ */
+export class BdsAccordion extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+      --bdc_color: var(--bds-color_bg--subtle);
+      --bdc-outline_radius: var(--bds-border_radius--s);
+      border-radius: var(--accordion_radius, var(--bdc-outline_radius));
+      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
+      overflow: hidden;
+    }
+  `;
+
+  static properties = {
+    allowMultiple: { type: Boolean, attribute: 'allow-multiple', reflect: true },
+  };
+
+  declare allowMultiple: boolean;
+
+  private _mo: MutationObserver | null = null;
+
+  constructor() {
+    super();
+    this.allowMultiple = false;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('bds-accordion-item-toggle', this._handleItemToggle);
+    this._mo = new MutationObserver(() => this._discoverItems());
+    this._mo.observe(this, { childList: true, subtree: false });
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener('bds-accordion-item-toggle', this._handleItemToggle);
+    this._mo?.disconnect();
+    this._mo = null;
+  }
+
+  private get _items(): BdsAccordionItem[] {
+    return [...this.querySelectorAll<BdsAccordionItem>('bds-accordion-item')];
+  }
+
+  private _discoverItems() {
+    // No-op: items are queried on demand via _items getter.
+    // The MutationObserver ensures we react to added/removed items.
+    this.requestUpdate();
+  }
+
+  private _handleItemToggle = (e: Event) => {
+    const toggled = e.target as BdsAccordionItem;
+    const items = this._items;
+    const wasOpen = toggled.open;
+
+    if (!this.allowMultiple) {
+      // Close all others
+      items.forEach(item => { item.open = false; });
+    }
+    // Toggle the clicked item
+    toggled.open = !wasOpen;
+  };
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+
+customElements.define('bds-accordion', BdsAccordion);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bds-accordion': BdsAccordion;
+  }
+}

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

@@ -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);