# Design System - Select Strategy

## Overview
Dropdown component for selecting the current active strategy. Uses primary button styling for the strategy badge with a chevron indicator. Includes the signature Orange→Pink→Blue ripple effect on hover.

---

## Component Structure

| Element | Description |
|---------|-------------|
| Label | "Current Strategy:" text |
| Badge | Strategy name with primary button styling |
| Chevron | Dropdown indicator icon |
| Dropdown Menu | List of available strategies |

---

## Select Strategy Specs

### Container

| Property | Value |
|----------|-------|
| Display | Flex |
| Align Items | center |
| Gap | 8px |
| Background | #ffffff |
| Padding | 4px 12px |
| Border Radius | 20px |
| Box Shadow | 0 1px 3px rgba(0, 0, 0, 0.1) |

---

### Label

| Property | Value |
|----------|-------|
| Font Family | Space Grotesk |
| Font Size | 14px |
| Font Weight | 400 |
| Color | #383737 |
| White Space | nowrap |

---

### Strategy Badge (Primary Button Style)

| Property | Value |
|----------|-------|
| Background | #1a1a2e |
| Padding | 4px 10px |
| Border Radius | 6px |
| Display | Flex |
| Align Items | center |
| Gap | 6px |
| Cursor | pointer |

**Text:**
| Property | Value |
|----------|-------|
| Font Family | Space Grotesk |
| Font Size | 12px |
| Font Weight | 500 |
| Color | #ffffff |

**Chevron Icon:**
| Property | Value |
|----------|-------|
| Width | 10px |
| Height | 10px |
| Color | #ffffff |
| Transition | transform 0.2s ease |

**Hover State:**
- Ripple effect (Orange→Pink→Blue)
- Chevron rotates 180° when open

---

### Dropdown Menu

| Property | Value |
|----------|-------|
| Position | absolute |
| Top | calc(100% + 8px) |
| Right | 0 |
| Min Width | 200px |
| Background | #ffffff |
| Border Radius | 8px |
| Box Shadow | 0 4px 20px rgba(0, 0, 0, 0.12) |
| Border | 1px solid rgba(0, 0, 0, 0.08) |
| Padding | 8px 0 |
| Z-Index | 100 |

---

### Dropdown Item

| Property | Value |
|----------|-------|
| Padding | 10px 16px |
| Font Family | Space Grotesk |
| Font Size | 12px |
| Font Weight | 400 |
| Color | #383737 |
| Cursor | pointer |
| Transition | background 0.15s ease |

**Hover State:**
| Property | Value |
|----------|-------|
| Background | rgba(0, 0, 0, 0.04) |

**Active/Selected State:**
| Property | Value |
|----------|-------|
| Font Weight | 500 |
| Color | #1a1a2e |
| Background | rgba(26, 26, 46, 0.06) |

---

## Code Reference

### HTML Structure

```html
<div class="select-strategy">
  <div class="strategy-wrapper">
    <div class="ripple-grid"></div>
    <div class="strategy-content">
      <span class="strategy-label">Current Strategy:</span>
      <button class="strategy-badge" id="strategyDropdownTrigger">
        <span class="strategy-name">SkinTracker</span>
        <svg class="chevron-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <polyline points="6 9 12 15 18 9"/>
        </svg>
      </button>
    </div>
  </div>

  <div class="strategy-dropdown" id="strategyDropdown">
    <div class="dropdown-item active">
      <span class="item-name">SkinTracker</span>
      <svg class="check-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <polyline points="20 6 9 17 4 12"/>
      </svg>
    </div>
    <div class="dropdown-item">
      <span class="item-name">MarketPulse</span>
    </div>
    <div class="dropdown-item">
      <span class="item-name">FitnessPro</span>
    </div>
    <div class="dropdown-item">
      <span class="item-name">EcoShop</span>
    </div>
    <div class="dropdown-divider"></div>
    <div class="dropdown-item create-new">
      <svg class="plus-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <line x1="12" y1="5" x2="12" y2="19"/>
        <line x1="5" y1="12" x2="19" y2="12"/>
      </svg>
      <span class="item-name">Create New Strategy</span>
    </div>
  </div>
</div>
```

### CSS

```css
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;700&display=swap');

/* Select Strategy Container */
.select-strategy {
  position: relative;
  display: inline-block;
}

.strategy-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  background: #ffffff;
  padding: 4px 12px;
  border-radius: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.strategy-wrapper .ripple-grid {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  z-index: 1;
  overflow: hidden;
  border-radius: 20px;
}

.strategy-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.9);
  padding: 2px;
  border-radius: 18px;
}

/* Label */
.strategy-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #383737;
  white-space: nowrap;
}

/* Strategy Badge - Primary Button Style */
.strategy-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #1a1a2e;
  padding: 4px 10px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.strategy-badge:hover {
  transform: scale(1.02);
}

.strategy-badge:active {
  transform: scale(0.98);
}

.strategy-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #ffffff;
  white-space: nowrap;
}

.chevron-icon {
  width: 10px;
  height: 10px;
  color: #ffffff;
  transition: transform 0.2s ease;
}

.select-strategy.open .chevron-icon {
  transform: rotate(180deg);
}

/* Dropdown Menu */
.strategy-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 8px 0;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.select-strategy.open .strategy-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Dropdown Items */
.dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #383737;
  cursor: pointer;
  transition: background 0.15s ease;
}

.dropdown-item:hover {
  background: rgba(0, 0, 0, 0.04);
}

.dropdown-item.active {
  font-weight: 500;
  color: #1a1a2e;
  background: rgba(26, 26, 46, 0.06);
}

.dropdown-item .check-icon {
  width: 14px;
  height: 14px;
  color: #1a1a2e;
}

/* Divider */
.dropdown-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.08);
  margin: 8px 0;
}

/* Create New Item */
.dropdown-item.create-new {
  gap: 8px;
  justify-content: flex-start;
  color: #1a1a2e;
  font-weight: 500;
}

.dropdown-item.create-new .plus-icon {
  width: 14px;
  height: 14px;
  color: #1a1a2e;
}
```

### JavaScript

```javascript
// Toggle dropdown
const selectStrategy = document.querySelector('.select-strategy');
const trigger = document.getElementById('strategyDropdownTrigger');
const dropdown = document.getElementById('strategyDropdown');

trigger.addEventListener('click', (e) => {
  e.stopPropagation();
  selectStrategy.classList.toggle('open');
});

// Close on outside click
document.addEventListener('click', (e) => {
  if (!selectStrategy.contains(e.target)) {
    selectStrategy.classList.remove('open');
  }
});

// Handle item selection
const items = dropdown.querySelectorAll('.dropdown-item:not(.create-new)');
items.forEach(item => {
  item.addEventListener('click', () => {
    // Remove active from all
    items.forEach(i => i.classList.remove('active'));
    // Add active to clicked
    item.classList.add('active');
    // Update badge text
    const name = item.querySelector('.item-name').textContent;
    document.querySelector('.strategy-name').textContent = name;
    // Close dropdown
    selectStrategy.classList.remove('open');
  });
});
```

---

## Interaction States

### Default State
- Badge displays current strategy name
- Chevron points down
- Dropdown hidden

### Hover State
- Ripple effect on wrapper
- Badge scales to 1.02
- Cursor: pointer

### Open State
- Chevron rotates 180° (points up)
- Dropdown fades in and slides down
- Container has `.open` class

### Item Hover State
- Background: rgba(0, 0, 0, 0.04)

### Item Active/Selected State
- Font weight: 500
- Color: #1a1a2e
- Background: rgba(26, 26, 46, 0.06)
- Check icon visible

---

## Empty State

When users have no strategies, the component displays an empty state.

### Empty Badge Specs

| Property | Value |
|----------|-------|
| Background | transparent |
| Border | 1px dashed #9a9a9a |
| Text Color | #9a9a9a |
| Chevron Color | #9a9a9a |
| Text | "None" |

### Empty Dropdown Content

| Property | Value |
|----------|-------|
| Padding | 24px 16px |
| Text Align | center |

**Empty Icon:**
| Property | Value |
|----------|-------|
| Width | 40px |
| Height | 40px |
| Color | #d0d0d0 |
| Margin Bottom | 12px |

**Empty Title:**
| Property | Value |
|----------|-------|
| Font Size | 14px |
| Font Weight | 500 |
| Color | #383737 |
| Text | "No strategies yet" |

**Empty Description:**
| Property | Value |
|----------|-------|
| Font Size | 12px |
| Color | #9a9a9a |
| Text | "Create your first strategy to get started" |

**Empty CTA Button:**
| Property | Value |
|----------|-------|
| Background | #1a1a2e |
| Color | #ffffff |
| Padding | 8px 16px |
| Border Radius | 6px |
| Font Size | 12px |
| Font Weight | 500 |
| Gap | 6px |
| Text | "Create Strategy" |

### Empty State CSS

```css
.select-strategy.empty .strategy-badge {
  background: transparent;
  border: 1px dashed #9a9a9a;
}

.select-strategy.empty .strategy-name {
  color: #9a9a9a;
  font-weight: 400;
}

.select-strategy.empty .chevron-icon {
  color: #9a9a9a;
}

.empty-dropdown {
  padding: 24px 16px;
  text-align: center;
}

.empty-icon {
  width: 40px;
  height: 40px;
  color: #d0d0d0;
  margin-bottom: 12px;
}

.empty-title {
  font-size: 14px;
  font-weight: 500;
  color: #383737;
  margin-bottom: 4px;
}

.empty-description {
  font-size: 12px;
  color: #9a9a9a;
  margin-bottom: 16px;
}

.empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #1a1a2e;
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  border: none;
  cursor: pointer;
}
```

---

## Navigation Context Spacing

When used in the navigation bar:

| Gap | Value | Between |
|-----|-------|---------|
| 5px | Logo → Select Strategy |
| 24px | Select Strategy → Nav Links |

### Navigation Layout CSS

```css
.nav-left {
  display: flex;
  align-items: center;
  gap: 5px;
}

.nav-spacer {
  width: 24px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: auto;
}
```

---

## Design Tokens

### Colors

| Token | Value | Usage |
|-------|-------|-------|
| `--color-badge-bg` | #1a1a2e | Strategy badge background |
| `--color-badge-text` | #ffffff | Badge text and chevron |
| `--color-label` | #383737 | "Current Strategy:" label |
| `--color-dropdown-bg` | #ffffff | Dropdown background |
| `--color-item-text` | #383737 | Dropdown item text |
| `--color-item-active` | #1a1a2e | Active item text |
| `--color-item-hover-bg` | rgba(0,0,0,0.04) | Item hover background |
| `--color-item-active-bg` | rgba(26,26,46,0.06) | Active item background |
| `--color-empty-border` | #9a9a9a | Empty state badge border |
| `--color-empty-text` | #9a9a9a | Empty state text |
| `--color-empty-icon` | #d0d0d0 | Empty state icon |

### Typography

| Element | Font | Size | Weight |
|---------|------|------|--------|
| Label | Space Grotesk | 14px | 400 |
| Badge Text | Space Grotesk | 12px | 500 |
| Item Text | Space Grotesk | 12px | 400 |
| Active Item | Space Grotesk | 12px | 500 |

### Spacing

| Token | Value |
|-------|-------|
| Wrapper padding | 4px 12px |
| Badge padding | 4px 10px |
| Content gap | 8px |
| Badge gap | 6px |
| Dropdown padding | 8px 0 |
| Item padding | 10px 16px |
| Dropdown offset | 8px |

### Shadows

| Usage | Value |
|-------|-------|
| Wrapper | 0 1px 3px rgba(0,0,0,0.1) |
| Dropdown | 0 4px 20px rgba(0,0,0,0.12) |

---

## Prototype
`select-strategy-prototype/index.html`