> ## 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/notch.html > Source: specs/components/notch/notch.md, specs/components/notch/notch-a11y.md, specs/components/notch/capabilities.json --- # Notch · Oymyakon DS 3 > A short strip that hangs from the top or bottom edge of a card: an icon, a short note and an > optional chevron or avatar stack — "Fare is an estimate". **Version:** 3.0.3 · **Status:** Ready · **Figma:** `[Notch] 3.0` (main components file `7vdl5YkZFDWvh9QvSmydsH`, page `34638:4438`, set `36002:74102`, key `ddfd19a7…` — merged from the branch `WiWGOeTcDPnBYRPnMnAG73`, node-ids unchanged; Specification frame `36095:463`, ported 1:1 from the site page) --- ## 1. Description Notch attaches a short note to the edge of a host card — the tariff card in Ride Hailing is the first host ("Fare is an estimate"). It sits flush against the card's top or bottom edge: the two outer corners are rounded, the two inner corners are square so the strip reads as part of the card. The strip is either **interactive** — a button that opens the explanation behind the note — or **static**, a plain informational strip. Interactivity is an instance parameter (owner, 2026-10-09): a notch that shows the chevron is always interactive; without the chevron it is static by default and may still be made a button. This file was authored from the Figma set before it had a Specification frame — from the set (`Position × Size`) and its building blocks on the same page — `RowContent` (the exposed content row: `Alignment × RTL` + the two slot booleans), the `🔴StartSlot` icon slot, the `🔵EndSlot` swap (`IconContainer | Avatars`) and the `Avatars` stack, which the DS ships as the [StackContainer](https://super-dollop-pzmo65r.pages.github.io/stack-container.md) primitive (owner, 2026-10-09). The Specification frame (`36095:463`) was later ported 1:1 from the site page; this file stays the source. ### Platform implementations | Platform | Entry point | Version | Notes | |---|---|---|---| | iOS | `DsNotch` (DS3) | — | `init(text:)`; position, size, alignment, the start and end slots, the colours and `onTap` are modifiers. In the iOS Design Context Bridge since 2026-11 (the manifest binds the set since 2026-11-12); the bridge states no Figma version | | Android | — | — | Not shipped (no entry in the Android bridge, 2026-11-12) | | Flutter | — | — | Not shipped | | Web | `src/shared/shared.css` (`.notch`) | 3.0.1 | Reference implementation, this repo; preview page `src/notch.njk` — the first build of this component on any platform | --- ## 2. Anatomy ``` Notch (.notch) fills the host's width · Background/BaseGrey · two outer corners s28 └── RowContent (.notch__row) s4 between the parts ├── StartSlot (.notch__start-slot) optional · a 24 icon — discount-outlined by default ├── StartText (.notch__start-text) Compact Body, Secondary · S one line, M up to two └── EndSlot (.notch__end-slot) optional · chevron-right-small (24) or a StackContainer ``` | Part | Required | Description | |---|---|---| | **Container** | Required | The strip: `Background/BaseGrey`, horizontal padding `s20`, vertical padding per size; radius `s28` on the two outer corners only (Top: top-left + top-right; Bottom: bottom-left + bottom-right) at smoothing 0.6 | | **StartSlot** | Optional, on by default | An `[IconContainer] 3.0` at 24 — `discount-outlined` in `TextAndIcon/Primary` by default; any DS icon | | **StartText** | Required | The note — one line in S, up to two lines in M; the overflow ends with an ellipsis | | **EndSlot** | Optional, on by default | `Instance=IconContainer` — `chevron-right-small` at 24 in `TextAndIcon/Primary` (the default) — or `Instance=Avatars` — a [StackContainer](https://super-dollop-pzmo65r.pages.github.io/stack-container.md) of Mini squircles (1–3 portraits in the Figma staging) | - The chevron means "opens more": a notch that carries it is interactive by contract. - S stays one line high. M keeps a `s44` minimum and takes up to two lines, centred in it — the overflow ellipsizes instead of growing the strip further. - In the **Start** alignment the text fills the row and the EndSlot pins to the end edge; in **Center** the three parts hug their content and the group centres in the strip. ### RTL layout The row mirrors: the StartSlot moves to the right edge, the EndSlot to the left, the text aligns to the start (right) edge. The chevron follows its own `RTL` variant (it points left); the `discount-outlined` glyph is not directional and does not flip. A StackContainer in the EndSlot mirrors with the reading direction. Figma stages it as `RowContent` `RTL=On`; the web takes it from `dir="rtl"`. --- ## 3. Variants and sizes | Axis | Values | Default | Web mechanism | |---|---|---|---| | **Position** | `top` · `bottom` | `top` | `.notch--bottom` — which two corners round; `top` is the bare root (`.notch--top` is a hook with no rule of its own) | | **Size** | `s` · `m` | `s` | `.notch--m`; `s` is the bare root (`.notch--s` is a hook with no rule of its own) | | **Alignment** | `start` · `center` | `start` | `.notch--center` (the exposed `RowContent` property) | | **StartSlot** | off · on | on | Presence of `.notch__start-slot` | | **EndSlot** | off · `icon` · `stack` | `icon` | Presence of `.notch__end-slot`; its content is the chevron or a `.stack-container` | | **Interactive** | off · on | on (the default EndSlot is the chevron) | `.notch--interactive` on a ` ``` --- ## Changelog | Version | Date | Change | |---|---|---| | 3.0.3 | 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.2 | 2026-11-12 | Platform table: iOS ships `DsNotch` (DS3) — the iOS Design Context Bridge carries the set `36002:74102` since 2026-11, found by the manifest sync of 2026-11-12, which now binds it (Position and Size on iOS). Android still has no entry. | | 3.0.1 | 2026-10-19 | The Figma branch `WiWGOeTcDPnBYRPnMnAG73` merged into the main components file: the header points at the main file (page `34638:4438`, set `36002:74102` — node-ids unchanged, the set key is now `ddfd19a7…`) and the new Specification frame `36095:463` (ported from the site page). Re-checked on the merged set: M now allows two lines (`maxLines` 2) but keeps the `s10` padding under the `s44` cap — still flagged. Neither platform bridge carries the set, so the manifest entry binds no node yet. No contract change. | | 3.0.0 | 2026-10-09 | Initial spec, from the Figma `[Notch] 3.0` set on a **branch** of the main components file (`WiWGOeTcDPnBYRPnMnAG73`, page `34638:4438`, set `36002:74102`) and its building blocks — no Specification frame exists. Position `top`/`bottom` × Size `s` (32, one line) / `m` (a `s44` minimum, up to two lines — owner, 2026-10-09; the Figma set stages M with `s10` padding and one line, flagged), padding `s4`/`s20` in both; `Background/BaseGrey`; radius `s28` on the two outer corners (smoothing 0.6); the exposed `RowContent` (Alignment `start`/`center`, RTL, StartSlot/EndSlot booleans, gap `s4`); StartSlot `discount-outlined` 24; Text Compact Body in Secondary, ellipsized; EndSlot `chevron-right-small` 24 or the `Avatars` stack — shipped as the new [StackContainer](https://super-dollop-pzmo65r.pages.github.io/stack-container.md) primitive (owner, 2026-10-09). The **Interactive** parameter (owner, 2026-10-09): the chevron implies a button; without it the strip is static or a button by choice. One state, Standard (owner, 2026-10-09): no pressed state and no motion; the fill (`Background/BaseGrey`) and the note colour (`TextAndIcon/Secondary`) are defaults an instance re-points to any DS token (`--notch-fill` / `--notch-text`). Composition and motion (owner, 2026-10-09): the Notch is a DecorateContainer Slot#2 decorator over the card — the container in the Notch's fill and `s28` corners, the band (`--dc-band`, the Notch's height) opening and closing with it so the container resizes, `stretch`, the new `slide` mode (DecorateContainer 3.4.0) on `var(--transforming-state-slow)` / `var(--transforming-exit-slow)`, 300 ms; the Notch itself declares no motion. Neither mobile platform ships the component. The set lives on a BRANCH, so no manifest binding until it merges (the node-ids then carry over). | --- # Notch — Accessibility The note is the content. An **interactive** notch is one button whose name is the visible note; a **static** notch is plain text in the reading order. Every glyph — the start icon, the chevron, the avatar stack — is decorative: whatever it implies is said in the text. Label rule: announce the note, not the decoration — ✅ "Fare is an estimate, button", ❌ "Discount icon, Fare is an estimate, chevron". An avatar stack is never read as "3 images": the note puts the count in its words ("3 drivers are viewing your order"). **Its own element, after the card.** The Notch is a DecorateContainer decorator, but an interactive one keeps its own element, role and focus stop — it never merges into the card's node (the DecorateContainer 3.4 interactive-decorator exception). It follows the card in the reading order (the DOM order), on the Top edge as on the Bottom one. A static notch is read as plain text after the card. **Hidden is out of the tree; appearing is silent.** A hidden notch (the container's `--off`) is neither focusable nor announced. The Notch never announces its own appearance: a note that matters (a price caveat) belongs in the tree whenever the card is; a host that reveals it later and needs it heard uses a polite live region — the host's call. ## Android · TalkBack | Element | Label | Value | Trait | Hint | |---|---|---|---|---| | Notch — interactive | The note text | — | `Role.Button`; one focus stop (`mergeDescendants`) | "Double-tap to activate" by default; the host names the destination through `onClickLabel` ("Double-tap to learn how the fare is calculated") | | Notch — static | The note text | — | Plain text, read in the host's reading order; no role, not a separate focus stop | — | | StartSlot icon | — | — | Decorative (`contentDescription = null`) | — | | Chevron | — | — | Decorative — the Button role and the note carry the action | — | | StackContainer | — | — | Decorative; its squircles are not elements | — | ### Edge states - **Truncation:** the label is the **full** note, never the ellipsized string — the visual cut (S after one line, M after two) does not shorten the announcement. - **RTL:** the row mirrors; the announcement is unchanged. - **Touch target:** S is 32 dp high, M 44 — both under the 48 dp guidance; the strip's full width does not make up for the height. Both stay above WCAG 2.5.8's 24 px minimum; interactive notches favour M. An S with both slots off is 24 — exactly the WCAG floor; an interactive S keeps a slot. - **Text scaling (130 % / 150 %):** S stays one line (owner ruling), so a long note loses its tail for sighted readers even though the label is complete — keep S notes short; a note that must be read in full is an M. - **Disabled / Error:** not applicable — one state, Standard. - **Skeleton:** the host's skeleton covers the notch while the card loads; the notch is out of the tree for that time (the host's `aria-busy` container, the hidden decorator). --- ## iOS · VoiceOver | Element | Label | Value | Trait | Hint | |---|---|---|---|---| | Notch — interactive | The note text | — | `.isButton`; one element (`children: .combine`) | The host's, when the destination is not obvious | | Notch — static | The note text | — | `.isStaticText`; joins the host card's reading order | — | | Icons / StackContainer | — | — | `accessibilityHidden(true)` | — | ### Edge states - **Truncation / RTL:** as on Android — the full note as the label, a mirrored row with an unchanged announcement. - **Touch target:** S is 32 pt — under the 44 pt guidance; M (44) meets it; an S with both slots off is 24. - **Text scaling / Disabled / Skeleton:** as on Android — S stays one line, no disabled or error state, out of the tree under the host's skeleton. --- ## Web preview (reference) - **Interactive = a real `