> ## Oymyakon DS index
> Fetch the full index at: https://super-dollop-pzmo65r.pages.github.io/llms.txt
> HTML preview: https://super-dollop-pzmo65r.pages.github.io/swoosh.html
> Source: specs/components/swoosh/swoosh.md, specs/components/swoosh/swoosh-a11y.md, specs/components/swoosh/capabilities.json

---

# Swoosh · Oymyakon DS 3

> A brand swoosh behind a word or a short phrase — the key benefit in an onboarding title, the
> ETA in a tariff card. It hugs the text and stretches with it.

**Version:** 3.0.2 · **Status:** Ready · **Figma:** `[Swoosh] 3.0` (main components file `7vdl5YkZFDWvh9QvSmydsH`, page `34670:11715`, component `34697:1689`, key `4d990013…`; Specification frame `34670:12553`)

---

## 1. Description

Swoosh is a brand accent: a stretched swoosh shape drawn behind a short text. It marks the one
word or phrase in a text block — a title, a row — that carries the point — "Wait and **save** or get a ride faster" on an
onboarding slide, "**3 min**" next to a tariff's name. The swoosh hugs the text: whatever the text
style and the length, the shape stretches to the text's box, so one component serves every size
from Compact Body to Promo Heading.

The text is Figma's `Title•` building block (`Mode = Expanded`, exposed): the text, its style and
the two icon slots are edited right on the Swoosh instance. The swoosh is decoration — the text
carries the meaning on its own.

### Platform implementations

| Platform | Entry point | Version | Notes |
|---|---|---|---|
| iOS | — | — | Not in the platform bridge (manifest seed, 2026-10-19); the Figma cover shows no version |
| Android | — | — | Not in the platform bridge (manifest seed, 2026-10-19); the Figma cover shows no version |
| Flutter | — | — | Not shipped |
| Web | `src/shared/shared.css` (`.swoosh`) | 3.0.1 | Reference implementation, this repo; preview page `src/swoosh.njk`; the shape is the exported Figma vector, inlined in `shared.css` as a data URI (source: `illu/shape/swoosh.svg`) — the first build of this component on any platform |

---

## 2. Anatomy

```
Swoosh (.swoosh)                    hug × hug · s2 top/bottom, s4 left/right · centre-aligned row
├── Swoosh shape (::before)           absolute · stretches to the whole box · Constant/Drive Green 1
└── Text (Title•, Mode = Expanded)    one line, on top of the shape
    ├── A-slot (.swoosh__slot)          optional · an icon at s24, before the text
    ├── Text (.swoosh__text)            any DS text style — Heading 3 by default · AlwaysDark
    └── B-slot (.swoosh__slot)          optional · an icon at s24, after the text
```

| Part | Required | Description |
|---|---|---|
| **Container** | Required | A horizontal auto-layout that hugs its content: padding `s2` top/bottom and `s4` left/right, children centred vertically; no fill, no corner radius — the shape is the swoosh |
| **Swoosh shape** | Required | A vector with absolute position and Stretch × Stretch constraints: it fills the container's whole box and scales with it — not repeated, not cropped. `Constant/Drive Green 1` by default |
| **Text** | Required | `Title•` (`Mode = Expanded`), exposed: one line in any DS text style — Heading 3 by default — in `TextAndIcon/AlwaysDark` |
| **A-slot / B-slot** | Optional, off by default | `Title•`'s own slots: an `[IconContainer] 3.0` at `s24` before (A) or after (B) the text, `s4` from it |

- The shape is scaled, not repeated: the longer the text, the flatter the swoosh; the taller the
  text style, the taller the shape.
- Swoosh has no Multiline mode — the text stays on one line.

### RTL layout

The Figma component stages no RTL. On the web the row follows the reading direction (`dir="rtl"`):
the A-slot moves to the right of the text, the B-slot to the left. The swoosh shape is a brand
form, not a directional glyph — it does not mirror.

---

## 3. Variants and sizes

| Axis | Values | Default | Web mechanism |
|---|---|---|---|
| **Text style** | `promo-heading` · `heading1` · `heading2` · `heading3` · `heading4` · `promo-body` · `main-body` · `compact-body` · `main-link` · `compact-link` · `caption` | `heading3` | The DS text-style class on the root (`.text-heading-heading1`, `.text-body-compact-body`, … from `typography.css`); the Heading 3 default is declared at zero specificity, so any text-style class wins |
| **A-slot** | off · on | off | Presence of a `.swoosh__slot` before `.swoosh__text` |
| **B-slot** | off · on | off | Presence of a `.swoosh__slot` after `.swoosh__text` |
| **Fill** | any DS token | `Constant/Drive Green 1` | `--swoosh-fill` re-pointed on the instance |
| **Text colour** | any DS token | `TextAndIcon/AlwaysDark` | `--swoosh-text` re-pointed on the instance |

The text style is Figma's `Title•` → **Size** swap (the 11 DS text styles it offers). The swoosh's
height follows it — the taller of the text line and a slot icon (`s24`), plus 2 × `s2`. With the
slots off:

| Text style | Text | Swoosh height @100% |
|---|---|---|
| Compact Body | 14/16 | 20 |
| Heading 3 (default) | 20/28 | 32 |
| Heading 1 | 32/36 | 40 |
| Promo Heading | 40/44 | 48 |

- Use the same text style as the text around the Swoosh — it sits inside a line of text, not on
  top of it.
- An icon in a slot keeps `s24` whatever the text style — with a slot on, a 16-line style (Compact
  Body, Compact Link, Caption) grows to 28.
- The link styles (Main Link, Compact Link) underline the text — a link affordance; they belong to a
  Swoosh inside a link host only.

---

## 4. States

Swoosh has one state: **Standard**. It is not interactive; the Figma component stages no State
axis.

| State | What shows |
|---|---|
| **Standard** | The swoosh shape in its fill (`Constant/Drive Green 1` by default) and the text in its colour (`TextAndIcon/AlwaysDark` by default) |

- The fill and the text colour are defaults, not states: an instance re-points them to any DS
  token (§ 6) — `Background/Primary` with `TextAndIcon/Primary` on the brand background,
  `Constant/Orange 1` for a late ETA in the tariff card.
- A fill re-pointed to signal a state (a late ETA) is never the only carrier: the state is also in
  the words or a labelled slot icon, and in the host's announcement (§ 10).
- No Pressed, Hover, Disabled or Skeleton state. A host that loads shows its own skeleton over the
  Swoosh.

---

## 5. Animation and behavior

Swoosh declares no motion (reference: [`motion-rules.md`](https://super-dollop-pzmo65r.pages.github.io/motion.md)).
It is static decoration: it appears and disappears with its host, on the host's motion.

- The shape is laid out, not animated: when the text changes, the box re-hugs it and the shape
  stretches with the box in the same frame.
- Reduced motion: nothing to reduce.
- No behaviour of its own — no tap, no focus. A Swoosh inside a tappable host is part of that
  host's target.

---

## 6. Color tokens

| Element | Token | Notes |
|---|---|---|
| Swoosh shape | `var(--constant-drive-green1)` | The default; the same in both themes (a Constant). An instance re-points `--swoosh-fill` to any DS token |
| Text | `var(--text-and-icon-always-dark)` | The default; the same in both themes. An instance re-points `--swoosh-text` to any DS token |
| Slot icons | the text colour (`--swoosh-text`) | Never `TextAndIcon/Primary`: on the always-light fill it turns white in Night (≈ 1.2:1). The web tints the slots with `currentColor`; the Figma master binds `TextAndIcon/AlwaysDark` (since 2026-10-19) |

Re-pointed pairs from the Figma specification:

| Context | Fill | Text |
|---|---|---|
| White or light surface (default) | `var(--constant-drive-green1)` | `var(--text-and-icon-always-dark)` |
| Brand background (`Background/Brand`) | `var(--background-primary)` | `var(--text-and-icon-primary)` |
| Late ETA in the tariff card | `var(--constant-orange1)` | `var(--text-and-icon-always-dark)` |
| Brand fill | `var(--background-brand)` | `var(--text-and-icon-always-dark)` — the Brand fill keeps AlwaysDark text in both themes (owner, 2026-10-19) |

- Keep the swoosh distinct from the background: no Drive Green 1 or Brand fill on the brand
  background (≈ 1.1:1 / 1:1), no `Background/Primary` on white.
- A re-pointed pair keeps the text at 4.5:1 or more on the fill in both themes (§ 10).

---

## 7. Typography

| Element | Style | Tokens |
|---|---|---|
| Text | Heading/Heading 3 (default) — or any of the 11 DS text styles via `Title•` → Size | `var(--text-heading-heading3-*)` — 20/28, Suisse Intl Bold; another style uses its own `var(--text-{group}-{name}-*)` set |

Scaling follows the chosen style's own mode (Promo Heading / Heading 1 `fixed`, Heading 2 / 3
`cap130`, Heading 4 and below `full`); the swoosh grows with the text wherever its style scales.

---

## 8. Spacing

The paddings are bound to `SP/100% ratio`; the text's size and line height to its style's own scale
(Heading 3 to `SP/130% ratio`).

| Property | Token | Value @100% | Notes |
|---|---|---|---|
| Width | — | hugs the content | |
| Height | — | the taller of the text line and a slot icon, + 2 × `s2` | 32 with Heading 3 (§ 3) |
| Padding — top / bottom | `var(--sp-s2)` | 2 | The same for every text style — the swoosh stretches |
| Padding — left / right | `var(--sp-s4)` | 4 | Owner, 2026-10-19 — the Figma component description's old `s6` was corrected to `s4` the same day |
| Slot ↔ text | `var(--sp-s4)` | 4 | `Title•`'s gap |
| Slot icon | `var(--sp-s24)` | 24 | `[IconContainer] 3.0` at 24 |
| Corner radius | `var(--sp-s0)` | 0 | The shape is the swoosh |
| Swoosh ↔ neighbouring text | `var(--sp-s4)` or more | 4 | In a text row, outside the component — the paddings make the swoosh a little wider than the word |

---

## 9. Usage context

### When to use Swoosh

- The key benefit in an onboarding title — "Wait and **save** or get a ride faster", Heading 1 on
  the brand background (`Background/Primary` fill, `TextAndIcon/Primary` text).
- The ETA in a tariff card — "**3 min**" in Compact Body, so the passenger sees at once how soon the
  car arrives; one per row. A late ETA re-points the fill to `Constant/Orange 1` and says so —
  "25 min · late".
- In a text row, next to other text in the same style, aligned by the text's centre, with `s4` or
  more to the neighbouring text.

### When not to use

- For a whole sentence — up to four words ("save up to 30%"); a long phrase loses the accent and
  stretches the swoosh flat (owner, 2026-10-19).
- More than once in one text block — a title, a row: a second Swoosh there stops being an accent. A
  list of rows may carry one each (an ETA per tariff row) — owner, 2026-10-19.
- For a status or a count — that is a Tag or an Indicator. Swoosh is not a status component; a host
  may re-point its fill to mark a state (a late ETA), and then says the state in words too.
- As a button or a link target — it is not interactive.
- Across two lines — it has no Multiline mode.

### Related components

- [Tag](https://super-dollop-pzmo65r.pages.github.io/tag.md) — a status or a category label with its own shape and states.
- [Indicator](https://super-dollop-pzmo65r.pages.github.io/indicator.md) — a count or a dot.
- [TariffCell](https://super-dollop-pzmo65r.pages.github.io/tariff-cell.md) — the tariff row whose ETA the Swoosh highlights.
- [IconContainer](https://super-dollop-pzmo65r.pages.github.io/icon-container.md) — the A-slot / B-slot icons.

---

## 10. Accessibility

Brief summary. Full spec: [`swoosh-a11y.md`](https://super-dollop-pzmo65r.pages.github.io/swoosh.md).

- The text is plain text in the host's reading order — no role, no focus stop, not a separate
  element. **One sentence, no stops** (owner, 2026-10-19): the host's sentence is read in one go —
  "Wait and save or get a ride faster" — with no stop or pause at the Swoosh.
- The swoosh shape is decorative: it is not announced and conveys no meaning the words do not.
- Slot icons are decorative unless they carry meaning the text does not; then they get a label. They
  take the text colour, never `TextAndIcon/Primary` (≈ 1.2:1 in Night on the fill); the Figma master
  binds `TextAndIcon/AlwaysDark`.
- Colour is never the only signal: a re-pointed fill that marks a state (a late ETA) has the state in
  words as well.
- Text contrast: `TextAndIcon/AlwaysDark` on `Constant/Drive Green 1` ≈ 14.6:1 in both themes.
- Text scaling: the swoosh grows with the text wherever its style scales, on one line — keep it short
  and check it at the platforms' largest sizes (Android 200 %, iOS accessibility sizes).

---

## 11. Analytics and coverage contract

Contract per [`prototype-analytics-and-coverage.md`](https://github.com/inDriver/oymyakon-ds/blob/main/docs/prototype-analytics-and-coverage.md).

| Field | Value |
|---|---|
| `data-ds-component` | `swoosh` |
| Coverage unit | yes |
| Tap target model | none — non-interactive; a tappable host owns the action |
| Actions | none |
| Internal targets | none |
| Emits value | no |

Attribute model: `data-ds-preset` = the text style (`heading3`, `compact-body`, …),
`data-ds-state` = `standard`. A re-pointed fill or text colour is an instance override, not a
preset.

```html
<h2 class="text-heading-heading1">Wait and
  <span class="swoosh text-heading-heading1"
        data-ds-component="swoosh" data-ds-component-id="onboarding.benefit"
        data-ds-preset="heading1" data-ds-state="standard"
        style="--swoosh-fill: var(--background-primary); --swoosh-text: var(--text-and-icon-primary);"><span class="swoosh__text">save</span></span>
  or get a ride faster</h2>
```

The Swoosh sits inline in its host's sentence, with real spaces around it — the heading's name
stays "Wait and save or get a ride faster".

---

## Changelog

| Version | Date | Change |
|---|---|---|
| 3.0.2 | 2026-11-12 | Status Draft → Ready (owner, 2026-11-12) — the backlog sweep: merged on main, web build shipped, no owner decision open. No contract change; Figma-side flags recorded above stay open on the Figma side. |
| 3.0.1 | 2026-10-19 | Review pass (spec-reviewer, a11y-reviewer). A fill re-pointed to signal a state is never the only carrier — the state is also in the words and in the host's announcement; Swoosh is not a status component. Slot icons take the text colour, never `TextAndIcon/Primary` (now in § 6, § 10 and both platform tables). Height is the taller of the text line and a slot icon, + 2 × `s2` (a 16-line style with a slot is 28). Link styles belong to a link host only. Text scaling follows the style's mode; check at Android 200 % / iOS accessibility sizes. The a11y spec gains the Android merge mechanism, Skeleton / unavailable host / live update edge states and precise forced-colours wording; § 11 shows the Swoosh inside its host sentence. `capabilities.json` brought to its schema. Owner rulings (2026-10-19): one Swoosh per **text block** (a title, a row — a list of tariff rows carries one ETA each; was "per screen"); a late ETA says so in words ("25 min · late"); up to **four** words ("save up to 30%", was 1–3); the shape is **inlined** in `shared.css` as a data URI (`illu/shape/swoosh.svg` stays the source) — no second request. **One sentence, no stops**: the host's sentence is read in one go — iOS one `accessibilityLabel` for the whole sentence, Android one `Text` (the swoosh behind a span) or one merged node, web an inline span (with the host's `aria-label` as the fallback). A `Background/Brand` fill keeps `TextAndIcon/AlwaysDark` text (≈ 13.4:1). The Figma side was updated the same day: slot icons bound to `TextAndIcon/AlwaysDark` in the master, the component description and the frame's Description / Stretching / States lines. |
| 3.0.0 | 2026-10-19 | Initial spec, from the Figma `[Swoosh] 3.0` component in the main components file (page `34670:11715`, component `34697:1689`) and its Specification frame (`34670:12553`). A horizontal hug auto-layout, paddings `s2` top/bottom and `s4` left/right (owner, 2026-10-19 — the component description's `s6` is stale, flagged), children centred; the swoosh vector absolute with Stretch × Stretch constraints in `Constant/Drive Green 1`; the text is `Title•` (`Mode = Expanded`, exposed) — one line, any of the 11 DS text styles via Size (Heading 3 by default), `TextAndIcon/AlwaysDark`; optional A-slot / B-slot icons at `s24`, `s4` from the text. One state, Standard; the fill and the text colour are re-pointable defaults (`--swoosh-fill` / `--swoosh-text`) — `Background/Primary` + `TextAndIcon/Primary` on the brand background, `Constant/Orange 1` for a late ETA. No motion. Web: the shape is the exported Figma vector (`illu/shape/swoosh.svg`) as a CSS mask stretched to the box; slot icons take the text colour (the Figma slots bind `TextAndIcon/Primary`, ≈ 1.2:1 in Night on the fill — flagged). Neither mobile platform ships it. |

---

# Swoosh — Accessibility

The text is the content; the swoosh is decoration. Swoosh is not a control and not an element of its
own: its text is read as part of the sentence it sits in, and the shape behind it is never
announced.

Label rule: the words carry the point — ✅ "Wait and save or get a ride faster", ❌ "Wait and,
highlighted, save, or get a ride faster". The emphasis is visual only, so the sentence reads the
same without it; a meaning that matters to the user goes into the words.

**One sentence, no stops** (owner, 2026-10-19). The Swoosh's text joins its neighbours into one
element (one heading, one line) and is read in one go — "Wait and save or get a ride faster", with
no stop, no pause and no change of voice at the Swoosh; in a tariff row it joins the row's own
reading order ("Economy, 4 seats, 3 minutes, 16 dollars" — the TariffCell phrase). Swipe navigation
never lands on the Swoosh alone. Where a platform would split the sentence, the host carries the
whole sentence as one label.

**Colour is never the only signal.** A fill re-pointed to mark a state — `Constant/Orange 1` for a
late ETA — always comes with the state in words (the text, or a labelled slot icon) and in the host's
announcement: "Moto, 1 seat, 25 minutes, late".

## Android · TalkBack

| Element | Label | Value | Trait | Hint |
|---|---|---|---|---|
| Text | The whole sentence as one string: the swoosh drawn behind a span of the host's one `Text` (an `AnnotatedString`), or a merged host node (`Modifier.semantics(mergeDescendants = true)`) whose `contentDescription` is the whole sentence if the merge would pause | — | None of its own — inherits the host's (`heading()` in a title) | — |
| Swoosh shape | — | — | Decorative — drawn behind the text, not a node | — |
| Slot icon — decorative | — | — | `contentDescription = null` | — |
| Slot icon — meaningful | What it adds ("International") | — | Part of the host's merged node | — |
| Slot icon — tint | — | — | The text colour (`--swoosh-text`) — `TextAndIcon/AlwaysDark` in the Figma master; never `TextAndIcon/Primary` (≈ 1.2:1 in Night on the fill) | — |

- **The trap:** a separate `Text` composable for the Swoosh, left unmerged, becomes its own focus
  stop — "Wait and" / "save" / "or get a ride faster" as three swipes. Merge the host, or keep the
  Swoosh a span of one `Text`.

### Edge states

- **Re-pointed colours:** a fill re-pointed to signal a state adds that state to the host's phrase
  ("Moto, 1 seat, 25 minutes, late"), and the screen shows it in words or a labelled slot icon too. A
  re-point with no meaning (the brand-background pair) changes nothing in the announcement.
- **Text scaling:** the swoosh grows with the text wherever its style scales — Promo Heading and
  Heading 1 are `fixed`, Heading 2 / 3 `cap130`, Heading 4 and below `full` — and stays on one line.
  A long phrase can overflow a narrow row at Android's 200 % font scale; keep it short.
- **RTL:** the slots follow the reading direction; the announcement is unchanged.
- **Disabled / Error:** not applicable — one state, Standard. A disabled host tints its own text;
  the Swoosh keeps its pair and is read as part of the host.
- **Unavailable host:** Figma stages no unavailable look for the Swoosh — on an unavailable tariff
  row it keeps its pair; the host's announcement says "unavailable". Flagged for the Figma side.
- **Skeleton:** the host's skeleton covers the Swoosh while it loads; the text is out of the tree for
  that time (the host's loading container).
- **Live update:** a changing text (an ETA that ticks) is not a live region; the host decides what,
  if anything, is announced.

---

## iOS · VoiceOver

| Element | Label | Value | Trait | Hint |
|---|---|---|---|---|
| Text | The whole sentence as the host's one `accessibilityLabel` ("Wait and save or get a ride faster") — or one `Text` with the swoosh behind a run; `children: .combine` over separate text views can pause between them, so it is not relied on | — | The host's (`.isHeader` in a title, `.isStaticText` in a row) | — |
| Swoosh shape | — | — | `accessibilityHidden(true)` | — |
| Slot icon — decorative | — | — | `accessibilityHidden(true)` | — |
| Slot icon — meaningful | What it adds | — | Joined into the host's label | — |
| Slot icon — tint | — | — | The text colour (`--swoosh-text`), never `TextAndIcon/Primary` | — |

### Edge states

- **Re-pointed colours:** as on Android — a state signalled by the fill is in the host's label and
  in the words on screen.
- **RTL / Disabled / Unavailable host / Skeleton / Live update:** as on Android.
- **Dynamic Type:** the swoosh grows with the text wherever its style scales (Heading 1 and Promo
  Heading stay fixed), one line — check at the accessibility sizes; keep it short.

---

## Web preview (reference)

- **Inline `<span>`** with no role and no `tabindex`: the text stays in the DOM flow of its heading
  or paragraph, so the accessible name of the host includes it and the sentence reads in one go. A
  reader that still stops on the inline-flex span (Safari + VoiceOver item stops) gets the whole
  sentence as the host's `aria-label` — the fallback, not the default. Not `<mark>` — the swoosh is a brand
  accent, not a search highlight.
- **The shape is a `::before` with a CSS mask** — generated content with no text, so it never
  reaches the accessibility tree.
- **Slot icons** are `aria-hidden="true"`; a meaningful one carries `role="img"` and an
  `aria-label`.
- **Forced colours** (Windows High Contrast): the `::before` background is forced to the system
  Canvas colour while the mask still applies — the shape blends into the page; the text takes the
  system text colour. The words remain, the accent goes.
- **The shape asset** is inlined in `shared.css` as a data URI — no second request that could fail
  and leave AlwaysDark text on a dark page in Night (owner, 2026-10-19).
- **Reduced motion:** no motion to reduce.

### Colour and contrast

| Pairing | Tokens | Measured |
|---|---|---|
| Text on the fill (defaults) | `--text-and-icon-always-dark` on `--constant-drive-green1` | ≈ 14.6:1 in both themes — both tokens are theme-constant |
| Text on the fill — brand background | `--text-and-icon-primary` on `--background-primary` | ≈ 17.8:1 Day / ≈ 17.0:1 Night |
| Text on the fill — late ETA | `--text-and-icon-always-dark` on `--constant-orange1` | ≈ 13.5:1 in both themes |
| Text on the fill — Brand | `--text-and-icon-always-dark` on `--background-brand` | ≈ 13.4:1 in both themes — Brand is theme-constant, so the text stays AlwaysDark (owner, 2026-10-19) |
| Slot icons | `--swoosh-text` on `--swoosh-fill` | The text's pair — the Figma slots bind `TextAndIcon/AlwaysDark` since 2026-10-19 (were `TextAndIcon/Primary`, ≈ 1.2:1 in Night) |
| Swoosh against the page | `--constant-drive-green1` on `--background-primary` | ≈ 1.2:1 Day — decorative, no non-text contrast duty (WCAG 1.4.11 covers controls and meaningful graphics); the text carries the meaning |
| Brand-pair swoosh against the brand background | `--background-primary` on `--background-brand` | ≈ 1.3:1 Day / ≈ 12.9:1 Night — decorative, as above |
| Text on a re-pointed fill | `--swoosh-text` on `--swoosh-fill` | ≥ 4.5:1 in both themes — the instance that re-points either token re-checks the pair |

---

## Machine contract — `specs/components/swoosh/capabilities.json`

Axes, allowed values, defaults, constraints and CSS/Figma bindings. Read this instead of guessing what the component can do.

```json
{
  "$schema": "../component-capabilities.schema.json",
  "id": "swoosh",
  "name": "Swoosh",
  "version": "3.0.2",
  "description": "A brand swoosh behind a word or a short phrase — the one accent in a text block (a title, a row). A hug row (s2/s4 paddings) whose shape stretches to the text in any DS text style; optional icon slots before and after the text. Static decoration: not interactive, read as part of its sentence.",
  "files": {
    "spec": "specs/components/swoosh/swoosh.md",
    "a11y": "specs/components/swoosh/swoosh-a11y.md",
    "preview": "src/swoosh.njk",
    "css": "src/shared/shared.css"
  },
  "figma": {
    "library": "🕹️ Oymyakon (components) — main file",
    "fileKey": "7vdl5YkZFDWvh9QvSmydsH",
    "componentSets": {
      "[Swoosh] 3.0": {
        "key": "4d990013630c31036f0bc33e59971b87b599b30a",
        "note": "A single component (no variant set), node 34697:1689 on page 34670:11715; Specification frame 34670:12553."
      }
    },
    "capturedAt": "2026-10-19"
  },
  "root": {
    "class": "swoosh",
    "dataDsComponent": "swoosh"
  },
  "anatomy": {
    "shape": {
      "class": "swoosh",
      "notes": "The root's ::before — not an element of its own: the ::before of .swoosh — the exported Figma vector (source illu/shape/swoosh.svg, inlined in shared.css as a data URI, preserveAspectRatio none) as a CSS mask over --swoosh-fill, stretched to the whole box (Figma's Stretch × Stretch). Decorative; never in the accessibility tree."
    },
    "text": {
      "class": "swoosh__text",
      "notes": "Figma's Title• (Mode = Expanded), exposed: one line in the root's text style, in --swoosh-text."
    },
    "slot": {
      "class": "swoosh__slot",
      "optional": true,
      "notes": "Title•'s A-slot (before the text) and B-slot (after it): an IconContainer at s24, s4 from the text, in the text colour. Decorative (aria-hidden) unless it carries meaning the text does not."
    }
  },
  "axes": {
    "textStyle": {
      "title": "Text style",
      "type": "enum",
      "values": ["promo-heading", "heading1", "heading2", "heading3", "heading4", "promo-body", "main-body", "compact-body", "main-link", "compact-link", "caption"],
      "default": "heading3",
      "css": {
        "mechanism": "the DS text-style class from tokens/generated/typography.css on the root (.text-heading-promo-heading, .text-heading-heading1 … .text-body-compact-body, .text-link-*, .text-caption-caption); the Heading 3 default is declared in :where(.swoosh) at zero specificity, so any text-style class wins"
      },
      "figma": { "kind": "none", "notes": "Title• → Size, an instance swap over the 11 DS text styles (PromoHeading, Heading1–4, PromoBody, MainBody, CompactBody, MainLink, CompactLink, Caption)." },
      "constraints": [
        "Use the same text style as the text around the Swoosh.",
        "The height is the taller of the text line and a slot icon (s24), + 2 × s2 — with the slots off 20 Compact Body, 32 Heading 3, 40 Heading 1, 48 Promo Heading; a 16-line style with a slot on is 28.",
        "main-link / compact-link underline the text — a link affordance; only for a Swoosh inside a link host."
      ]
    },
    "aSlot": {
      "title": "A-slot",
      "type": "boolean",
      "default": false,
      "css": { "mechanism": "presence of a .swoosh__slot before .swoosh__text" },
      "figma": { "kind": "none", "notes": "Title•'s A-slot boolean, exposed on the instance." }
    },
    "bSlot": {
      "title": "B-slot",
      "type": "boolean",
      "default": false,
      "css": { "mechanism": "presence of a .swoosh__slot after .swoosh__text" },
      "figma": { "kind": "none", "notes": "Title•'s B-slot boolean, exposed on the instance." }
    },
    "fill": {
      "title": "Fill",
      "type": "token",
      "tokens": ["--constant-drive-green1", "--background-primary", "--constant-orange1", "--background-brand"],
      "customizable": "any DS token — keep the swoosh distinct from the background (no Drive Green 1 on Background/Brand, no Background/Primary on white) and the text at 4.5:1 or more on it in both themes; a re-point that marks a state (a late ETA) also says the state in words and in the host's announcement; a --background-brand fill keeps --text-and-icon-always-dark text (owner, 2026-10-19)",
      "default": "--constant-drive-green1",
      "css": { "customProperty": "--swoosh-fill" },
      "figma": { "kind": "none", "notes": "The vector binds Constant/Drive Green 1; re-pointed by an instance override (Background/Primary on the brand background, Constant/Orange 1 for a late ETA in the Figma usage)." }
    },
    "text": {
      "title": "Text colour",
      "type": "token",
      "tokens": ["--text-and-icon-always-dark", "--text-and-icon-primary"],
      "customizable": "any DS token — 4.5:1 or more on the fill in both themes",
      "default": "--text-and-icon-always-dark",
      "css": { "customProperty": "--swoosh-text" },
      "figma": { "kind": "none", "notes": "The Title• text binds TextAndIcon/AlwaysDark on the instance; TextAndIcon/Primary pairs with a Background/Primary fill." }
    },
    "rtl": {
      "title": "RTL",
      "type": "boolean",
      "default": false,
      "css": { "mechanism": "dir=\"rtl\": the row follows the reading direction (A-slot to the right of the text, B-slot to the left); the shape does not mirror" },
      "figma": { "kind": "none", "notes": "The Figma component stages no RTL — a web call." }
    }
  },
  "states": {
    "default": ["standard"]
  },
  "analytics": {
    "dataDsComponent": "swoosh",
    "action": "none",
    "notes": "Coverage unit. No tap target — a tappable host owns the action. data-ds-preset = the text style (heading3, compact-body, …), data-ds-state = standard; a re-pointed fill or text colour is an instance override, not a preset."
  },
  "rtl": {
    "supported": true,
    "notes": "The row follows the reading direction; the swoosh shape is a brand form, not a directional glyph — it does not mirror. Figma stages no RTL."
  },
  "constraints": [
    "One state, Standard: no pressed, hover, disabled or skeleton state, and no motion — the shape re-hugs a text change in the same frame.",
    "One line (no Multiline mode), up to four words; one Swoosh per text block — a title, a row (owner, 2026-10-19: a list of tariff rows carries one ETA Swoosh per row).",
    "Paddings s2 top/bottom, s4 left/right for every text style (owner, 2026-10-19; the Figma component description corrected the same day).",
    "One sentence, no stops (owner, 2026-10-19): the text is read with its host's sentence in one go — inline, no role, no focus stop, no pause; where a platform would split it, the host carries the whole sentence as one label. The shape and decorative slot icons are never announced.",
    "Slot icons take the text colour (--swoosh-text), never TextAndIcon/Primary (≈ 1.2:1 in Night on Drive Green 1); the Figma master binds TextAndIcon/AlwaysDark since 2026-10-19.",
    "Colour is never the only signal: a fill re-pointed to mark a state comes with the state in words.",
    "Neither mobile platform ships it — no manifest node binding until a platform bridge carries [Swoosh] 3.0."
  ]
}
```