<!-- source-hash: e7dc6507dbb40dd8dffb5171634e1bd5 -->
Segmented progress bar component that visualizes a numeric value (0–100) using dynamically calculated fill segments, with responsive sizing and threshold-based color coding.

## Key Components

### `ProgressBarProps`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `progress` | `number` | — | Value from 0–100 to display |
| `warningThreshold` | `number` | `75` | Threshold for warning color |
| `criticalThreshold` | `number` | `90` | Threshold for critical color |
| `segmentWidth` | `number` | `3.43px` | Desktop segment width |
| `mobileSegmentWidth` | `number` | `5px` | Mobile segment width |
| `segmentGap` | `number` | `2px` | Gap between segments |
| `height` | `number` | `24px` | Desktop bar height |
| `mobileHeight` | `number` | `8px` | Mobile bar height |
| `inverted` | `boolean` | `false` | Flips color logic (high = good) |

### Color Logic
- **Normal** (e.g., disk usage): green → warning → red as value increases
- **Inverted** (e.g., battery health): red → warning → green as value increases
- Uses ODS design tokens: `--ods-attention-green-success`, `--color-warning`, `--ods-attention-red-error`

### Responsive Behavior
Uses `useMdUp()` hook to switch between desktop and mobile segment dimensions. A `ResizeObserver` dynamically recalculates segment count based on container width, ensuring pixel-perfect fills on any layout.

## Usage Example

```typescript
// Normal mode — disk usage (high values = bad)
<ProgressBar progress={85} warningThreshold={70} criticalThreshold={90} />

// Inverted mode — battery health (high values = good)
<ProgressBar
  progress={25}
  warningThreshold={40}
  criticalThreshold={80}
  inverted={true}
/>

// Custom sizing
<ProgressBar
  progress={60}
  segmentWidth={5}
  mobileSegmentWidth={8}
  height={32}
  mobileHeight={12}
  segmentGap={3}
/>
```