@reliability-design/web 1.0.3 → 1.1.1

package/dist/components/rel-stepper/README.md

@@ -0,0 +1,160 @@
+# rel-stepper
+
+## Overview
+A comprehensive stepper component for visualizing multi-step processes. Supports horizontal and vertical orientations, text positioning (below or right of indicator), two size variants, and three step states (done, progress, disabled). Features clickable steps, automatic connector lines, and checkmark icons for completed steps.
+
+## Usage
+```html
+<!-- Basic horizontal stepper -->
+<rel-stepper id="checkout"></rel-stepper>
+<script>
+  const stepper = document.getElementById('checkout');
+  stepper.steps = [
+    { title: 'Cart', status: 'done' },
+    { title: 'Shipping', status: 'progress' },
+    { title: 'Payment', status: 'disabled' },
+    { title: 'Confirmation', status: 'disabled' }
+  ];
+</script>
+
+<!-- Vertical stepper with text to the right -->
+<rel-stepper
+  id="onboarding"
+  orientation="vertical"
+  textAlign="right">
+</rel-stepper>
+<script>
+  const onboarding = document.getElementById('onboarding');
+  onboarding.steps = [
+    { title: 'Create Account', status: 'done' },
+    { title: 'Verify Email', status: 'done' },
+    { title: 'Profile Setup', status: 'progress' },
+    { title: 'Complete', status: 'disabled' }
+  ];
+</script>
+
+<!-- Small size horizontal stepper -->
+<rel-stepper
+  id="wizard"
+  size="small"
+  textAlign="below">
+</rel-stepper>
+<script>
+  const wizard = document.getElementById('wizard');
+  wizard.steps = [
+    { title: 'Select', status: 'done' },
+    { title: 'Configure', status: 'progress' },
+    { title: 'Review', status: 'disabled' }
+  ];
+</script>
+
+<!-- Listen for step clicks -->
+<rel-stepper id="interactive"></rel-stepper>
+<script>
+  const interactive = document.getElementById('interactive');
+  interactive.steps = [
+    { title: 'Step 1', status: 'done' },
+    { title: 'Step 2', status: 'progress' },
+    { title: 'Step 3', status: 'disabled' }
+  ];
+  interactive.addEventListener('step-change', (e) => {
+    console.log('Clicked step:', e.detail.index, e.detail.step);
+    // Update step statuses or navigate to step content
+  });
+</script>
+```
+
+## API
+
+### Attributes/Properties
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `steps` | `Step[]` | `[]` | Array of step items (see Step interface below) |
+| `textAlign` | `"right" \| "below"` | `"below"` | Position of step labels relative to indicators |
+| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | Layout direction |
+| `size` | `"small" \| "large"` | `"large"` | Size variant (controls connector line length and spacing) |
+
+### Step Interface
+```typescript
+interface Step {
+  title: string;                               // Step label text
+  status: "done" | "progress" | "disabled";   // Step state
+}
+```
+
+## Events
+| Event | Detail | Description |
+|-------|--------|-------------|
+| `step-change` | `{ index: number, step: Step }` | Fired when a non-disabled step is clicked |
+
+## Slots
+Default slot not used.
+
+## CSS Parts
+None exposed.
+
+## Tokens / CSS Variables
+
+### Semantic Tokens
+- `--rel-fontFamilies-primary` - Font family
+- `--rel-fontSizes-sm` - Label font size
+- `--rel-fontWeights-medium` - Default label font weight
+- `--rel-fontWeights-semibold` - Active/done label font weight
+
+### Spacing Tokens
+- `--rel-spacing-space-2xs` - Gap between indicators and labels (text-right mode)
+
+### Color Tokens
+- `--rel-colors-white` - Indicator background (progress, disabled states)
+- `--rel-colors-black` - Active/done indicator background, text, and connector color
+- `--rel-colors-gray-border` - Disabled indicator border and inactive connector
+- `--rel-colors-gray-light` - Disabled indicator background
+- `--rel-text-disabled` - Disabled label text color
+- `--rel-text-primary` - Default label text color
+
+## Accessibility
+- Steps can be clicked unless in disabled state
+- Checkmark SVG uses `currentColor` for proper theming
+- Focus states could be enhanced with keyboard navigation (not currently implemented)
+
+### Keyboard Interactions
+- Click-based interaction only (no keyboard navigation implemented)
+
+### Focus Behavior
+- No specific focus handling (steps are div elements, not buttons)
+
+## Notes / Edge Cases
+- **Indicator states**:
+  - **done**: Black circle with white checkmark SVG icon
+  - **progress**: White circle with black border and step number
+  - **disabled**: Light gray circle with gray border and step number
+  
+- **Connector lines**:
+  - Positioned absolutely relative to the indicator
+  - **Horizontal**: 2px height, extends from indicator to next step
+  - **Vertical**: 2px width, extends from indicator to next step
+  - **done/progress** connectors are black; **disabled** connectors are gray
+  - Last step has no connector
+
+- **Size variants** (control connector length and gap):
+  - **large horizontal**: 86px connector, 86px gap
+  - **small horizontal**: 60px connector, 60px gap
+  - **large vertical**: 86px connector, 86px gap
+  - **small vertical**: 42px connector, 42px gap
+
+- **Text positioning**:
+  - **below**: Labels appear centered below indicators
+  - **right**: Labels appear to the right of indicators with a small gap
+
+- **Layout combinations**:
+  - **horizontal + text-below**: Steps arranged in a row, labels centered below
+  - **horizontal + text-right**: Steps in a row, labels to the right of each indicator
+  - **vertical + text-below**: Steps stacked vertically, labels centered below each indicator
+  - **vertical + text-right**: Steps stacked vertically, labels to the right with indicators on the left
+
+- The indicator is 22px × 22px with a 2px border
+- Step numbers are 1-indexed (displayed as `index + 1`)
+- Clicking a disabled step does nothing (no event dispatched)
+- All transitions use `0.2s ease`
+- The component uses flexbox extensively for layout management
+- The stepper is `display: block` and `width: 100%`

package/dist/components/rel-stepper/rel-stepper.ts

@@ -126,8 +126,8 @@ export class RelStepper extends LitElement {
       display: flex;
       align-items: center;
       justify-content: center;
-      width: 22px;
-      height: 22px;
+      width: var(--rel-stepper-indicator-size, 22px);
+      height: var(--rel-stepper-indicator-size, 22px);
       border: 2px solid var(--rel-colors-gray-border);
       background: var(--rel-colors-white);
       border-radius: 50%;
@@ -151,7 +151,7 @@ export class RelStepper extends LitElement {
     .step-label {
       white-space: nowrap;
       font-size: var(--rel-fontSizes-sm);
-      color: var(--rel-colors-gray-paragraph);
+      color: var(--rel-text-primary, #333);
     }
 
     /* Horizontal text-below specific */
@@ -237,43 +237,54 @@ export class RelStepper extends LitElement {
      * Step States
      ********************************************/
     .rel-step.done .indicator {
-      background: var(--rel-colors-black);
-      border-color: var(--rel-colors-black);
-      color: var(--rel-colors-white);
+      background: var(--rel-color-text-heading);
+      border-color: var(--rel-color-text-heading);
+      color: var(--rel-color-text-inverse);
     }
 
     .rel-step.progress .indicator {
-      border-color: var(--rel-colors-black);
-      color: var(--rel-colors-black);
-      background: var(--rel-colors-white);
+      border-color: var(--rel-color-text-heading);
+      background: var(--rel-color-bg-primary);
+      color: var(--rel-color-text-heading);
     }
 
     .rel-step.disabled .indicator {
-      background: var(--rel-colors-gray-bg-subtle);
-      border-color: var(--rel-colors-gray-border);
-      color: var(--rel-colors-gray-disabled);
+      background: var(--rel-colors-gray-light, #fafafa);
+      border-color: var(--rel-colors-gray-border, #ddd);
+      color: var(--rel-text-disabled, #9e9e9e);
     }
 
     .rel-step.done .connector {
-      background: var(--rel-colors-black);
+      background: var(--rel-color-text-heading);
     }
 
     .rel-step.progress .connector {
-      background: var(--rel-colors-black);
+      background: var(--rel-color-text-heading);
     }
 
     .rel-step.done .step-label {
-      color: var(--rel-colors-black);
+      color: var(--rel-color-text-heading);
       font-weight: var(--rel-fontWeights-semibold);
     }
 
     .rel-step.progress .step-label {
-      color: var(--rel-colors-black);
+      color: var(--rel-color-text-heading);
       font-weight: var(--rel-fontWeights-semibold);
     }
 
     .rel-step.disabled .step-label {
-      color: var(--rel-colors-gray-disabled);
+      color: var(--rel-text-disabled, #9e9e9e);
+    }
+
+    /* Dark mode: ensure progress/done indicator and labels stay readable */
+    :host-context(:root[data-theme="dark"]) .rel-step.progress .step-label,
+    :host-context(.dark) .rel-step.progress .step-label {
+      color: var(--rel-color-text-primary);
+    }
+
+    :host-context(:root[data-theme="dark"]) .rel-step.progress .indicator,
+    :host-context(.dark) .rel-step.progress .indicator {
+      color: #ffffff;
     }
 
     /********************************************
@@ -281,36 +292,36 @@ export class RelStepper extends LitElement {
      ********************************************/
     /* Horizontal */
     .rel-stepper.large.horizontal {
-      gap: 86px;
+      gap: var(--rel-stepper-connector-length-lg, 86px);
     }
 
     .rel-stepper.small.horizontal {
-      gap: 60px;
+      gap: var(--rel-stepper-connector-length-md, 60px);
     }
 
     .rel-stepper.large.horizontal .connector {
-      width: 86px;
+      width: var(--rel-stepper-connector-length-lg, 86px);
     }
 
     .rel-stepper.small.horizontal .connector {
-      width: 60px;
+      width: var(--rel-stepper-connector-length-md, 60px);
     }
 
     /* Vertical */
     .rel-stepper.large.vertical .connector {
-      height: 86px;
+      height: var(--rel-stepper-connector-length-lg, 86px);
     }
 
     .rel-stepper.large.vertical {
-      gap: 86px;
+      gap: var(--rel-stepper-connector-length-lg, 86px);
     }
 
     .rel-stepper.small.vertical .connector {
-      height: 42px;
+      height: var(--rel-stepper-connector-length-sm, 42px);
     }
 
     .rel-stepper.small.vertical {
-      gap: 42px;
+      gap: var(--rel-stepper-connector-length-sm, 42px);
     }
   `;
 
@@ -338,7 +349,7 @@ export class RelStepper extends LitElement {
     if (step.status === "disabled") return;
 
     this.dispatchEvent(
-      new CustomEvent("step-change", {
+      new CustomEvent("rel-step-change", {
         detail: {
           index,
           step,
@@ -362,7 +373,7 @@ export class RelStepper extends LitElement {
         >
           <path
             d="M6.44479 14L0.5 7.36383L1.9862 5.70478L6.44479 10.6819L16.0138 0L17.5 1.65904L6.44479 14Z"
-            fill="white"
+            fill="currentColor"
           />
         </svg>
       `;

package/dist/components/rel-switch/README.md

@@ -0,0 +1,102 @@
+# rel-switch
+
+## Overview
+A toggle switch component for binary on/off states. Features smooth animations, focus halo effects, pressed states, and respects user motion preferences. Built with custom visual styling while maintaining native checkbox accessibility.
+
+## Usage
+```html
+<!-- Basic switch -->
+<rel-switch></rel-switch>
+
+<!-- Pre-checked switch -->
+<rel-switch checked></rel-switch>
+
+<!-- Disabled switch -->
+<rel-switch disabled></rel-switch>
+<rel-switch checked disabled></rel-switch>
+
+<!-- With event listener -->
+<rel-switch id="notifications"></rel-switch>
+<script>
+  const toggle = document.getElementById('notifications');
+  toggle.addEventListener('changed', (e) => {
+    console.log('Switch state:', e.detail); // boolean: true/false
+  });
+</script>
+
+<!-- Programmatically control -->
+<rel-switch id="darkMode"></rel-switch>
+<script>
+  const darkModeSwitch = document.getElementById('darkMode');
+  darkModeSwitch.checked = true;
+  darkModeSwitch.disabled = false;
+</script>
+```
+
+## API
+
+### Attributes/Properties
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `checked` | `boolean` | `false` | Whether the switch is in the ON position |
+| `disabled` | `boolean` | `false` | Disables the switch and reduces opacity |
+
+## Events
+| Event | Detail | Description |
+|-------|--------|-------------|
+| `changed` | `boolean` (the new checked state) | Fired when the switch is toggled by user interaction |
+
+## Slots
+Default slot not used.
+
+## CSS Parts
+None exposed.
+
+## Tokens / CSS Variables
+
+### Component-Level Custom Properties
+The component defines these CSS custom properties on `:host` which can be overridden:
+
+- `--switch-track` - Track color when unchecked (default: `--rel-text-placeholder`)
+- `--switch-knob-on` - Knob color when checked (default: `--rel-colors-black`)
+- `--switch-knob-off` - Knob color when unchecked (default: `--rel-colors-white`)
+- `--switch-halo` - Focus halo color (default: `--rel-border-default`)
+- `--switch-disabled` - Color for disabled state (default: `--rel-text-disabled`)
+
+### Design Token References
+- `--rel-text-placeholder` - Default track color
+- `--rel-text-dark-placeholder` - Hover track color
+- `--rel-colors-black` - ON knob color
+- `--rel-colors-white` - OFF knob color
+- `--rel-border-default` - Focus halo
+- `--rel-text-disabled` - Disabled state color
+- `--rel-surface-surface` - Used in disabled styling
+
+## Accessibility
+- Uses native checkbox input with `role="switch"` and `aria-checked`
+- Visually hidden checkbox maintains keyboard and screen reader support
+- Focus visible state shows prominent halo around knob
+- Disabled state prevents interaction and reduces opacity to 0.5
+- Smooth transitions respect `prefers-reduced-motion` media query
+
+### Keyboard Interactions
+- `Space` - Toggle switch on/off
+- `Tab` - Move focus to/from switch
+
+### Focus Behavior
+- Focus ring appears as a 6px halo around the knob using `--switch-halo` color
+- Halo uses box-shadow for smooth visual feedback
+
+### Motion Support
+- Animations disabled when `prefers-reduced-motion: reduce` is set
+- Transitions apply to track color, knob position, knob color, and box-shadow
+
+## Notes / Edge Cases
+- The switch is 42px wide × 22px tall with a 12px tall track and 18px diameter knob
+- Visual knob animates 22px horizontally when toggling from OFF to ON
+- Hover effect only applies when not disabled (track darkens slightly)
+- Pressed state applies a `scale(0.9)` transform to the knob for tactile feedback
+- The knob includes a subtle drop shadow (`0 1px 3px rgba(0,0,0,0.3)`) for depth
+- When disabled, both track and knob use `--switch-disabled` color
+- The component is `display: inline-block` by default
+- Focus halo appears on keyboard focus only (`:focus-visible`), not on mouse click

package/dist/components/rel-switch/rel-switch.ts

@@ -5,17 +5,21 @@ import { customElement, property, state } from "lit/decorators.js";
 export class RelSwitch extends LitElement {
   @property({ type: Boolean }) checked = false;
   @property({ type: Boolean }) disabled = false;
+  @property({ type: String }) value = "";
+
+  private _onChange: (value: boolean) => void = () => {};
+  private _onTouched: () => void = () => {};
 
   @state() private isFocused = false;
   @state() private isPressed = false;
 
   static styles = css`
     :host {
-      --switch-track: #7e8186;
-      --switch-knob-on: #000000;
-      --switch-knob-off: #ffffff;
-      --switch-halo: rgba(224, 224, 224, 0.8);
-      --switch-disabled: #d1d5db;
+      --switch-track: var(--rel-text-placeholder);
+      --switch-knob-on: var(--rel-colors-black);
+      --switch-knob-off: var(--rel-colors-white);
+      --switch-halo: var(--rel-border-default);
+      --switch-disabled: var(--rel-text-disabled);
       display: inline-block;
     }
 
@@ -23,8 +27,8 @@ export class RelSwitch extends LitElement {
     .switch-wrapper {
       position: relative;
       display: inline-block;
-      width: 42px;
-      height: 22px;
+      width: var(--rel-switch-track-width, 42px);
+      height: var(--rel-switch-track-height, 22px);
       cursor: pointer;
     }
 
@@ -60,8 +64,8 @@ export class RelSwitch extends LitElement {
       top: 50%;
       left: -2px;
       transform: translateY(-50%);
-      height: 18px;
-      width: 18px;
+      height: var(--rel-switch-thumb-size, 18px);
+      width: var(--rel-switch-thumb-size, 18px);
       background-color: var(--switch-knob-off);
       border-radius: 50%;
       transition: transform 0.25s ease, background-color 0.25s ease,
@@ -77,7 +81,7 @@ export class RelSwitch extends LitElement {
 
     /* Hover */
     .switch-wrapper:hover:not(.switch-disabled) .switch-slider {
-      background-color: #666;
+      background-color: var(--rel-text-dark-placeholder);
     }
 
     /* Focus halo */
@@ -100,6 +104,13 @@ export class RelSwitch extends LitElement {
     .switch-disabled .switch-slider::before {
       background-color: var(--switch-disabled);
     }
+
+    @media (prefers-reduced-motion: reduce) {
+      .switch-slider,
+      .switch-slider::before {
+        transition: none;
+      }
+    }
   `;
 
   private toggle(ev: Event) {
@@ -109,14 +120,22 @@ export class RelSwitch extends LitElement {
     this.checked = input.checked;
 
     this.dispatchEvent(
-      new CustomEvent<boolean>("changed", {
-        detail: this.checked,
+      new CustomEvent("rel-change", {
+        detail: {
+          checked: this.checked,
+          value: this.value,
+        },
         bubbles: true,
         composed: true,
       })
     );
+    this._onChange(this.checked);
   }
 
+  registerOnChange(fn: (value: boolean) => void): void { this._onChange = fn; }
+  registerOnTouched(fn: () => void): void { this._onTouched = fn; }
+  writeValue(checked: boolean): void { this.checked = checked; }
+
   private handleFocus() {
     this.isFocused = true;
   }
@@ -124,6 +143,7 @@ export class RelSwitch extends LitElement {
   private handleBlur() {
     this.isFocused = false;
     this.isPressed = false;
+    this._onTouched();
   }
 
   private handleMouseDown() {
@@ -148,6 +168,8 @@ export class RelSwitch extends LitElement {
       <label class="${wrapperClasses}">
         <input
           type="checkbox"
+          role="switch"
+          aria-checked="${this.checked}"
           ?disabled=${this.disabled}
           .checked=${this.checked}
           @change=${(e: Event) => this.toggle(e)}

package/dist/components/rel-tab/README.md

@@ -0,0 +1,163 @@
+# rel-tab
+
+## Overview
+A tabbed interface component with automatic underline indicator, keyboard navigation, optional badge counts, and disabled states. Features ARIA-compliant navigation with roving tabindex and arrow key support.
+
+## Usage
+```html
+<!-- Basic tabs -->
+<rel-tab id="basicTabs"></rel-tab>
+<script>
+  const tabs = document.getElementById('basicTabs');
+  tabs.tabs = [
+    { label: 'Overview' },
+    { label: 'Details' },
+    { label: 'Settings' }
+  ];
+  tabs.activeIndex = 0;
+</script>
+
+<!-- With badges (notification counts) -->
+<rel-tab id="badgeTabs"></rel-tab>
+<script>
+  const badgeTabs = document.getElementById('badgeTabs');
+  badgeTabs.tabs = [
+    { label: 'Inbox', badge: 5 },
+    { label: 'Drafts', badge: 2 },
+    { label: 'Sent' }
+  ];
+</script>
+
+<!-- With disabled tab -->
+<rel-tab id="disabledTabs"></rel-tab>
+<script>
+  const disabledTabs = document.getElementById('disabledTabs');
+  disabledTabs.tabs = [
+    { label: 'Available' },
+    { label: 'Coming Soon', disabled: true },
+    { label: 'Active' }
+  ];
+</script>
+
+<!-- Listen for tab changes -->
+<rel-tab id="tabsWithListener"></rel-tab>
+<script>
+  const listener = document.getElementById('tabsWithListener');
+  listener.tabs = [
+    { label: 'Tab 1' },
+    { label: 'Tab 2' },
+    { label: 'Tab 3' }
+  ];
+  listener.addEventListener('tab-change', (e) => {
+    console.log('Active tab index:', e.detail);
+  });
+</script>
+
+<!-- Tab content controlled externally -->
+<rel-tab id="contentTabs" activeIndex="0"></rel-tab>
+<div id="tabContent">
+  <div class="panel" data-index="0">Content for Tab 1</div>
+  <div class="panel" data-index="1" style="display:none;">Content for Tab 2</div>
+  <div class="panel" data-index="2" style="display:none;">Content for Tab 3</div>
+</div>
+<script>
+  const contentTabs = document.getElementById('contentTabs');
+  contentTabs.tabs = [
+    { label: 'Tab 1' },
+    { label: 'Tab 2' },
+    { label: 'Tab 3' }
+  ];
+  contentTabs.addEventListener('tab-change', (e) => {
+    document.querySelectorAll('#tabContent .panel').forEach((panel, i) => {
+      panel.style.display = i === e.detail ? 'block' : 'none';
+    });
+  });
+</script>
+```
+
+## API
+
+### Attributes/Properties
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `tabs` | `TabItem[]` | `[]` | Array of tab items (see TabItem interface below) |
+| `activeIndex` (reflected) | `number` | `0` | Index of the currently active tab |
+
+### TabItem Interface
+```typescript
+interface TabItem {
+  label: string;       // Display text
+  badge?: number;      // Optional notification count
+  disabled?: boolean;  // Disables interaction
+}
+```
+
+## Events
+| Event | Detail | Description |
+|-------|--------|-------------|
+| `tab-change` | `number` (the new active index) | Fired when a different tab is selected |
+
+## Slots
+| Slot | Description |
+|------|-------------|
+| (default) | Tab panel content (rendered in `.tab-content` wrapper below tabs) |
+
+## CSS Parts
+None exposed.
+
+## Tokens / CSS Variables
+
+### Component-Level Custom Properties
+The component defines CSS custom properties on `:host`:
+
+- `--tab-active-color` - Active tab underline color (default: `--rel-colors-green-primary`)
+- `--tab-text-default` - Default tab text color (default: `--rel-text-primary`)
+- `--tab-text-disabled` - Disabled tab text color (default: `--rel-text-disabled`)
+- `--tab-text-hover` - Hover tab text color (default: `--rel-text-heading`)
+- `--tab-underline-height` - Height of active underline (default: `3px`)
+- `--tab-hover-color` - Background color on hover (default: `--rel-surface-surface`)
+
+### Design Token References
+- `--rel-fontFamilies-primary` - Font family
+- `--rel-fontSizes-md` - Font size
+- `--rel-fontWeights-medium` - Font weight
+- `--rel-spacing-space-sm`, `--rel-spacing-space-md` - Tab padding
+- `--rel-spacing-space-2xs` - Gap between label and badge
+- `--rel-border-tab` - Bottom border color (default: `#c4c4c4`)
+- `--rel-border-info` - Focus outline color
+- `--rel-borders-radius-border-radius-100` - Focus outline border radius
+- `--rel-colors-red-primary` - Badge background color
+- `--rel-colors-white` - Badge text color
+
+## Accessibility
+- Uses `role="tablist"` on container and `role="tab"` on each tab
+- Tabs have `aria-selected` and `aria-disabled` attributes
+- Implements roving tabindex (only active tab is focusable via Tab key)
+- Arrow key navigation between tabs
+- Focus visible states with blue outline
+
+### Keyboard Interactions
+- `Tab` - Focus the active tab (or first non-disabled tab)
+- `Arrow Right` - Navigate to next tab (wraps to first, skips disabled)
+- `Arrow Left` - Navigate to previous tab (wraps to last, skips disabled)
+- `Enter / Space` - Activate focused tab
+
+### Focus Behavior
+- Focus outline: 2px blue with -2px offset (inside boundary)
+- Border radius applied to focus outline
+- Focus automatically moves when navigating with arrow keys
+
+## Notes / Edge Cases
+- The **active tab** has a colored underline (3px high by default) at the bottom
+- **Hover effect** (non-active, non-disabled): light gray background
+- **Badges** are circular (16px height, min 16px width) with red background and white text
+- Clicking a disabled tab does nothing (no event dispatched, no index change)
+- Arrow key navigation wraps around (after last tab, goes to first, and vice versa)
+- Arrow key navigation skips disabled tabs
+- When a tab is activated via arrow keys, focus is programmatically moved to that tab
+- The component includes a `.tab-content` wrapper (with 1rem vertical padding) that renders slotted content
+- The `.tab-content` is always visible; consumers must manually show/hide panel content based on `activeIndex`
+- Tabs have a bottom border (1px solid) via `border-bottom` on `.tabs-wrapper`
+- Active tab underline (`position: absolute`, `bottom: 0`) overlays the border
+- Transitions: color (0.2s), background-color (0.2s), transform (0.2s) for smooth interactions
+- The `activeIndex` property is reflected in HTML as an attribute