FeatureTabs

The <dsgn-feature-tabs> component presents a set of product features as a vertical tab list with a matching panel. It rotates through the tabs on a timer, pauses on demand, and renders each feature’s eyebrow, title, description, metric, code line, and calls to action from data.

All of its content comes from the features property — the component itself holds only chrome and microcopy props.

Usage

<dsgn-feature-tabs code-path="~/my-project" tabs-aria-label="Features">
  <dsgn-heading slot="header" heading-size="h2" surface="dark"
    >What you get</dsgn-heading
  >
</dsgn-feature-tabs>

document.querySelector('dsgn-feature-tabs').features = [
  {
    id: 'packages',
    eyebrow: 'Public packages',
    title: 'Components and tokens',
    short: 'Build with web components and design tokens.',
    desc: 'Install both packages from public npm.',
    code: 'bun add @ds-gn/ui @ds-gn/tokens',
    metric: '24 components',
    icon: 'terminal',
    ctaLabel: 'Get started',
    ctaHref: '/getting-started/installation/',
  },
];

Import the component module in your application entrypoint:

import '@ds-gn/ui/feature-tabs';

Props

code-path, rotating-label, paused-label, pause-aria-label, resume-aria-label, and tabs-aria-label are the attribute names; the matching JavaScript properties are codePath, rotatingLabel, pausedLabel, pauseAriaLabel, resumeAriaLabel, and tabsAriaLabel.

Every content-bearing value here follows the system-wide content ownership policy. Production features, paths, status text, and accessible labels come from your application’s content source and passed in; standalone sample values are not production defaults.

Slots

The features array

type FeatureTabIcon =
  | 'terminal'
  | 'brain'
  | 'cpu'
  | 'palette'
  | 'plug'
  | 'shield';

interface FeatureTabData {
  id: string;
  eyebrow: string;
  title: string;
  short: string;
  desc: string;
  code: string;
  metric: string;
  icon: FeatureTabIcon;
  ctaLabel?: string;
  ctaHref?: string;
  ctaSecondaryLabel?: string;
  ctaSecondaryHref?: string;
}

• short is the summary in the tab list; desc is the longer copy in the panel.
• code is the command shown in the panel’s code block, under code-path.
• icon picks from the component’s own fixed icon set — it is not an <dsgn-icon> name.
• Both CTAs are optional. Omit ctaLabel to render no primary action, and ctaSecondaryLabel to render no secondary one.

Rotation

• Tabs advance every duration milliseconds and the visible status line reports the interval.
• Rotation runs only while the section is in the viewport, and stops entirely under prefers-reduced-motion: reduce.
• The pause control stops and restarts it. Selecting a tab by hand moves to that tab and pauses rotation until the resume control is activated.

Examples

Custom copy and timing

<dsgn-feature-tabs
  duration="8000"
  code-path="~/acme-design-system"
  rotating-label="rotating"
  paused-label="paused — click to resume"
  pause-aria-label="Pause the feature rotation"
  resume-aria-label="Resume the feature rotation"
  tabs-aria-label="Platform features"
></dsgn-feature-tabs>

With a section header

<dsgn-feature-tabs>
  <dsgn-heading-block slot="header" alignment="center">
    <dsgn-heading slot="heading" heading-size="h2" surface="dark"
      >One platform</dsgn-heading
    >
    <dsgn-text slot="description" surface="dark"
      >From scaffolding to shipped components.</dsgn-text
    >
  </dsgn-heading-block>
</dsgn-feature-tabs>

Accessibility

• The tab list uses the standard tablist/tab/tabpanel roles with a vertical orientation, and each panel is labelled by its tab.
• Arrow keys move between tabs and wrap at both ends; Home and End jump to the first and last. Selecting a tab with the keyboard also moves focus to it.
• Author tabs-aria-label and both pause labels in your application; the pause control’s name has to match its current action.
• Rotation stops under reduced-motion preferences, so no user is forced to read moving content.