> ## 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/text-row.html
> Source: specs/components/text-row/text-row.md

---

# TextRow · Oymyakon DS 3

> Text container — a horizontal row with text and optional slots on the left and right.

**Version:** 1.3.0 · **Status:** Draft

---

## 1. Overview

TextRow is a reusable text row primitive. Used inside Cell (top-row, middle-row, bottom-row, description), and also standalone — in any DS component that needs a row with text and optional icons/elements on either side.

TextRow is an instance of [`slot.md`](https://super-dollop-pzmo65r.pages.github.io/slot.md): horizontal autolayout, hug height, width determined by the parent.

---

## 2. Slot structure

```
TextRow
├── slot-start-1   slot › IconContainer   (expanded mode only, hidden by default)
├── slot-start-2   slot › IconContainer   (expanded mode only, hidden by default)
├── text            slot › text node       (always visible, fill width)
├── slot-end-1    slot › IconContainer   (expanded mode only, hidden when multiline: on)
└── slot-end-2    slot › IconContainer   (expanded mode only, hidden when multiline: on)
```

> Full Slot specification — [`specs/primitives/slot.md`](https://super-dollop-pzmo65r.pages.github.io/slot.md).

---

## 3. Anatomy

```
┌─────────────────────────────────────────────────────────────┐
│  [slot-start-1] [slot-start-2] [text] [slot-end-1] [slot-end-2]  │
└─────────────────────────────────────────────────────────────┘
```

| Element | Required | Description |
|---|---|---|
| **slot-start-1** | Optional | Left slot 1. Hug. Visible in `expanded` mode only. IconContainer by default |
| **slot-start-2** | Optional | Left slot 2. Hug. Visible in `expanded` mode only. IconContainer by default |
| **text** | Required | Text content. Fill width. Truncated with `…` when `multiline: off` |
| **slot-end-1** | Optional | Right slot 1. Hug. Visible in `expanded` mode only, hidden when `multiline: on` |
| **slot-end-2** | Optional | Right slot 2. Hug. Visible in `expanded` mode only, hidden when `multiline: on` |

---

## 4. Layout & Spacing

```
direction:   horizontal autolayout
height:      hug
width:       fill (determined by parent)
align-v:     center

gap between elements: var(--sp-s4)
```

---

## 5. Toggles

### 5.1 Multiline

Controls text wrapping.

| Value | Behaviour |
|---|---|
| `off` (default) | Single-line text. Truncated with `…` when there is not enough space |
| `on` | Text wraps to multiple lines. `slot-end-1` and `slot-end-2` are hidden |

### 5.2 Config mode

Controls the visibility of the side slots.

| Value | Behaviour |
|---|---|
| `standard` (default) | Text only. All four slots are hidden |
| `expanded` | Up to 4 slots around the text: slot-start-1, slot-start-2 (left), slot-end-1, slot-end-2 (right). Each is hug, hidden by default. IconContainer inside each by default |

---

## 6. Text

The text content of the row. Typography and color are set externally (by the parent component or directly). TextRow does not dictate style — it only controls layout.

### Default typography (for Cell context)

| Row in Cell | Token | Color |
|---|---|---|
| top-row (title) | `var(--text-body-main-body-*)` | `var(--text-and-icon-primary)` |
| middle-row (subtitle) | `var(--text-body-compact-body-*)` | `var(--text-and-icon-secondary)` |
| bottom-row (additional) | `var(--text-body-compact-body-*)` | `var(--text-and-icon-secondary)` |
| description | `var(--text-body-compact-body-*)` | `var(--text-and-icon-secondary)` |

Any Oymyakon DS typography token can be applied to TextRow text.

---

## 7. States (for description context)

When TextRow is used as a description in Cell, it supports additional text states:

| State | Text color |
|---|---|
| `default` | `var(--text-and-icon-secondary)` |
| `error` | error semantic token |
| `success` | success semantic token |
| `warning` | warning semantic token |
| `inform` | accent/inform semantic token |
| `disabled` | `var(--text-and-icon-disabled)` |

In other contexts, text states are determined by the parent component.

---

## 8. CSS Implementation

```css
.text-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  gap: var(--sp-s4);
}

/* text node */
.text-row__text {
  flex: 1 1 0;
  min-width: 0;
}

/* multiline: off (default) */
.text-row__text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* multiline: on */
.text-row--multiline .text-row__text {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}

/* slots */
.text-row__slot-start-1,
.text-row__slot-start-2,
.text-row__slot-end-1,
.text-row__slot-end-2 {
  display: none; /* hidden in standard mode */
  flex-shrink: 0;
}

/* expanded mode */
.text-row--expanded .text-row__slot-start-1,
.text-row--expanded .text-row__slot-start-2 {
  display: flex;
}
.text-row--expanded .text-row__slot-end-1,
.text-row--expanded .text-row__slot-end-2 {
  display: flex;
}

/* multiline: on — hides slot-end */
.text-row--multiline .text-row__slot-end-1,
.text-row--multiline .text-row__slot-end-2 {
  display: none;
}
```

---

## 9. Usage Context

### Where TextRow is used

| Component | Role |
|---|---|
| Cell › start-text | top-row, middle-row, bottom-row |
| Cell › end-text | top-row, middle-row, bottom-row |
| Cell › description | text-row |
| Any future component | anywhere a text row with side slots is needed |

### When not to use TextRow

- When only text is needed without side slots and without toggles — use a typography token directly.
- When multiple rows with a vertical stack are needed — use a stack of TextRows (like start-text in Cell).

---

## 10. Analytics and coverage contract

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

| Field | Value |
|---|---|
| `data-ds-component` | `TextRow` |
| Coverage unit | No when used inside another DS component. Optional when used as a standalone meaningful UI unit |
| Tap target model | None by default |
| Actions | None |
| Internal targets | `slot-start-1`, `slot-start-2`, `slot-end-1`, `slot-end-2` only when a parent component explicitly makes them action targets |
| Emits value | No |

TextRow is usually structural inside Cell and other components. It inherits analytics from the parent component and must not emit duplicate tap events.

Standalone TextRow prototypes may mark the root with `data-ds-component="TextRow"` for coverage only, without `data-ds-action`.

---

## RTL

**Default: RTL = Off.**

| Element | RTL behaviour |
|---|---|
| TextRow root | `dir="rtl"` reverses slot order: slot-end-2, slot-end-1 appear on the left; slot-start-1, slot-start-2 appear on the right |
| slot-start-1, slot-start-2 | Position mirrors; IconContainer inside — `rtl: false` by default |
| slot-end-1, slot-end-2 | Position mirrors; IconContainer inside — `rtl: false` by default |
| text node | Follows `dir` attribute automatically |

TextRow inherits `dir` from its parent (Cell, or any containing component). No standalone RTL override is needed in most cases.

---

## Accessibility

TextRow is a structural layout primitive. It does not carry its own ARIA role or label.

- **Inside a parent component** (e.g. Cell): the parent component is responsible for the accessible label. TextRow text content contributes to the parent's computed label automatically — no extra attributes needed.
- **Standalone use**: if TextRow is rendered outside a labeled parent, wrap it in an element with an appropriate ARIA role or `aria-label`.
- **slot-start / slot-end**: if an icon slot contains a meaningful action or decoration, the parent component must provide an `aria-label` for that action target. TextRow itself does not label icon slots.
- **Truncation**: when `multiline: off`, text is visually truncated. The full text remains in the DOM and is read by screen readers.

---

## Changelog

| Version | Date | Change |
|---|---|---|
| 1.3.0 | 2026-05-26 | Added Accessibility section: structural primitive, no own ARIA role, truncation visible to screen readers. |
| 1.2.0 | 2026-04-30 | Added RTL section: default RTL=Off, slot order reverses with dir="rtl", all IconContainers rtl:false by default. |
| 1.1.0 | 2026-04-29 | Added prototype analytics and DS coverage contract. |
| 1.0.0 | 2026-04-28 | Initial version. Extracted from Cell (top-row / middle-row / bottom-row / description text-row). Horizontal autolayout, toggles: multiline (off/on) + config mode (standard/expanded), 4 side slots (slot-start-1/2, slot-end-1/2), IconContainer inside each by default. CSS implementation. |