> ## 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/slot.html
> Source: specs/primitives/slot.md, specs/primitives/slot-a11y.md

---

# Slot · Oymyakon DS 3

> An invisible wrapper container. Controls the size and alignment of any nested component within a layout.

**Version:** 3.0.0 · **Status:** Draft

---

## 1. Description

Slot is a structural primitive. It carries no visual style (no background, borders, or shadows) — it only defines placement behavior: how the container expands or shrinks, and how its content is aligned inside.

**Binary nature:** each dimension (width, height) has exactly two modes — `hug` (shrink to content) or `fill` (expand to fill the parent). There are no intermediate values — only these two poles.

Slot has no states, does not respond to interaction, and carries no semantics. It is a pure layout container.

---

## 2. Anatomy

```
┌─ Slot ──────────────────────────────────┐
│  ▲ padding-top (SP-токен)               │
│                                         │
│    ┌─ content ──────────────────────┐   │
│    │  [любой DS-компонент]          │   │
│    └────────────────────────────────┘   │
│                                         │
│  ▼ padding-bottom (SP-токен)            │
└─────────────────────────────────────────┘
```

| Element | Required | Description |
|---|---|---|
| **content** | Required | The single child slot. Any DS component |
| **padding-top** | Optional | Inner top padding. SP token, default `s0` |
| **padding-bottom** | Optional | Inner bottom padding. SP token, default `s0` |

Horizontal padding is intentionally absent from Slot — it only controls vertical spacing. For horizontal padding, use the parent layout or apply it directly to the component.

---

## 3. Properties

### 3.1 Width — width mode

| Value | Behavior | CSS | Figma |
|---|---|---|---|
| `hug` | Width shrinks to content | `width: fit-content` | Width: Hug |
| `fill` | Width expands to fill the parent | `flex: 1 1 0` / `width: 100%` | Width: Fill |

**Default:** `hug`

### 3.2 Height — height mode

| Value | Behavior | CSS | Figma |
|---|---|---|---|
| `hug` | Height shrinks to content + padding | `height: fit-content` | Height: Hug |
| `fill` | Height expands to fill the parent | `align-self: stretch` / `height: 100%` | Height: Fill |

**Default:** `hug`

### 3.3 Align Horizontal — horizontal alignment

Controls the position of content along the horizontal axis inside the Slot.

| Value | Behavior | CSS `justify-content` |
|---|---|---|
| `start` | Content aligned to the left edge | `flex-start` |
| `center` | Content centered | `center` |
| `end` | Content aligned to the right edge | `flex-end` |
| `stretch` | Content stretched to full width | `stretch` |

**Default:** `start`

This property only takes effect when `width: fill` — with `hug`, the container width always equals the content width.

### 3.4 Align Vertical — vertical alignment

Controls the position of content along the vertical axis inside the Slot.

| Value | Behavior | CSS `align-items` |
|---|---|---|
| `top` | Content aligned to the top edge | `flex-start` |
| `center` | Content centered | `center` |
| `bottom` | Content aligned to the bottom edge | `flex-end` |
| `stretch` | Content stretched to full height | `stretch` |

**Default:** `top`

This property only takes effect when `height: fill` — with `hug`, the container height always equals the content height + padding.

### 3.5 Padding Top / Padding Bottom

Inner top and bottom padding. Vertical only.

| Property | Allowed values | Default |
|---|---|---|
| `padding-top` | SP tokens: `s0` `s2` `s4` `s6` `s8` `s12` `s16` `s20` `s24` `s32` `s40` `s48` `s56` `s64` `s80` `s96` | `s0` |
| `padding-bottom` | same SP tokens | `s0` |

---

## 4. All Property Combinations

### width × height matrix

```
              width: hug          width: fill
             ┌──────────────────┬──────────────────┐
height: hug  │ Shrinks to       │ Full width,      │
             │ content on both  │ height by        │
             │ axes             │ content          │
             ├──────────────────┼──────────────────┤
height: fill │ Full height,     │ Fully fills      │
             │ width by         │ the parent       │
             │ content          │                  │
             └──────────────────┴──────────────────┘
```

### Typical combinations

| width | height | align-h | align-v | Scenario |
|---|---|---|---|---|
| `fill` | `hug` | `center` | `top` | Horizontally centered block at full column width |
| `fill` | `fill` | `center` | `center` | Full-screen centered overlay |
| `hug` | `hug` | `start` | `top` | Component sized exactly to content (neutral mode) |
| `fill` | `hug` | `stretch` | `top` | Row stretched to full width (e.g. full-width button) |
| `hug` | `fill` | `center` | `center` | Vertically centered element with fixed width |

---

## 5. Animation and Behavior

Slot does not animate on its own. It does not respond to presses and has no state transitions.

If Slot is used as a wrapper for an animated component (e.g. for a card entrance animation), the animation belongs to the nested component, not to Slot.

---

## 6. CSS Implementation

```css
.slot {
  /* Inner alignment */
  display: flex;
  flex-direction: row;
  justify-content: var(--slot-align-h, flex-start); /* align-horizontal */
  align-items: var(--slot-align-v, flex-start);      /* align-vertical */

  /* Vertical padding */
  padding-top: var(--slot-padding-top, 0);
  padding-bottom: var(--slot-padding-bottom, 0);
}

/* Width modes */
.slot--width-hug  { width: fit-content; }
.slot--width-fill { flex: 1 1 0; min-width: 0; }

/* Height modes */
.slot--height-hug  { height: fit-content; }
.slot--height-fill { align-self: stretch; }

/* Align Horizontal */
.slot--align-h-start   { justify-content: flex-start; }
.slot--align-h-center  { justify-content: center; }
.slot--align-h-end     { justify-content: flex-end; }
.slot--align-h-stretch { justify-content: stretch; }

/* Align Vertical */
.slot--align-v-top     { align-items: flex-start; }
.slot--align-v-center  { align-items: center; }
.slot--align-v-bottom  { align-items: flex-end; }
.slot--align-v-stretch { align-items: stretch; }
```

### Padding via SP tokens

```css
/* Padding examples via tokens from spacing.css */
.slot--pt-s0  { padding-top: var(--sp-s0);  }   /* 0 */
.slot--pt-s8  { padding-top: var(--sp-s8);  }   /* 8px */
.slot--pt-s16 { padding-top: var(--sp-s16); }   /* 16px */
.slot--pt-s24 { padding-top: var(--sp-s24); }   /* 24px */

.slot--pb-s0  { padding-bottom: var(--sp-s0);  }
.slot--pb-s8  { padding-bottom: var(--sp-s8);  }
.slot--pb-s16 { padding-bottom: var(--sp-s16); }
.slot--pb-s24 { padding-bottom: var(--sp-s24); }
```

---

## 7. Usage Context

### When to use Slot

- You need to wrap a component and change its width or height behavior without modifying the component itself.
- You need to add vertical spacing between components via padding rather than an outer gap.
- You need to center or align a component inside a parent container.
- Inside Cell, Card, Bottom Sheet — for controlling the position of nested elements within a slot.

### When not to use Slot

- When horizontal padding is needed — use the component's own padding or the parent layout settings.
- When placing multiple components side by side — Slot is designed for a single child. For groups, use Row/Stack (when available).
- When a visible container is needed (background, border, shadow) — that is Card or Surface, not Slot.

### Related components

| Component | Relationship |
|---|---|
| Cell | Slot is used for the leading and trailing slots of the cell |
| Card | Slot wraps the card content, controlling padding |
| Bottom Sheet | Slot controls the height of the content zone (fill for stretching content) |
| Button | `width: fill` via Slot makes the button full-width |

---

## 8. Rules and Constraints

1. **One child.** Slot always contains exactly one child element. It is not a Row or Column.
2. **No horizontal padding.** Only `padding-top` and `padding-bottom`.
3. **No visual style.** Slot never receives `background-color`, `border`, or `box-shadow`.
4. **No semantics.** Slot renders as a `<div>` with no role or aria attributes. Semantics belong to the nested component.
5. **`align-horizontal` without `width: fill` has no effect** — the container width equals the content width.
6. **`align-vertical` without `height: fill` has no effect** — the container height equals the content height.

---

## 9. Accessibility

Slot adds nothing semantically meaningful to the DOM. The HTML element is a `<div>` with no `role` and no `aria-*`.

All accessibility is the responsibility of the nested component.

---

## 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` | `Slot` |
| Coverage unit | No by default. Slot is structural and should not inflate component coverage |
| Tap target model | None |
| Actions | None |
| Internal targets | None |
| Emits value | No |

Slot must not define `data-ds-action` and must not emit tap analytics. The nested component owns analytics and coverage unless the prototype explicitly audits layout primitives.

---

## Changelog

| Version | Date | Change |
|---|---|---|
| 3.1.0 | 2026-04-29 | Added prototype analytics and DS coverage contract: structural primitive, no tap analytics by default. |
| 3.0.0 | 2026-04-23 | Initial version within Oymyakon DS 3. Properties: width/height (hug/fill), align-horizontal (start/center/end/stretch), align-vertical (top/center/bottom/stretch), padding-top/bottom via SP tokens. CSS implementation via modifier classes. Combination matrix, constraint rules (one child, no horizontal padding, no visual style). |

---

# Slot · Accessibility Spec · Oymyakon DS 3

**Version:** 1.0.0 · **Status:** Draft · **Linked spec:** [`slot.md`](https://super-dollop-pzmo65r.pages.github.io/slot.md)

---

## 1. Roles and Semantics

Slot adds nothing meaningful to the accessibility tree.

```html
<div class="slot slot--width-fill slot--height-hug">
  <!-- any DS component -->
</div>
```

| Element | Role | Notes |
|---|---|---|
| Slot (`.slot`) | none | Renders as `<div>` with no `role` and no `aria-*` attributes |
| Nested component | own role | The nested component is fully responsible for its own semantics |

### Rules

- Do **not** add `role`, `aria-label`, or any `aria-*` to a Slot element.
- Do **not** add `tabindex` — Slot is not interactive.
- All screen-reader announcements come from the nested component, not from its Slot wrapper.

---

## 2. Keyboard Navigation

Slot is not in the tab order and cannot receive focus. It is a pure layout container.

| Key | Behavior |
|---|---|
| `Tab` | Skips the Slot, focuses the first focusable element inside it |
| All other keys | Handled by the nested component |

---

## 3. Focus Indicator

Slot requires no focus indicator. If the nested component is interactive, the focus indicator is the nested component's responsibility.

---

## 4. Contrast Requirements

Slot has no visual style (no background, border, or shadow). No contrast requirement applies.

| Element | Token | Requirement |
|---|---|---|
| Slot background | none | No requirement — transparent |
| Slot border | none | No requirement — invisible |

---

## 5. Platform Screen Reader Behavior

### Android · TalkBack

Slot is not announced. TalkBack traverses directly to the nested component.

### iOS · VoiceOver

Slot is not announced. VoiceOver traverses directly to the nested component.

---

## 6. Reduced Motion

Slot has no animations or transitions. No reduced-motion rules are needed.

```css
@media (prefers-reduced-motion: reduce) {
  /* Slot has no animation — intentionally empty */
}
```

---

## Changelog

| Version | Date | Change |
|---|---|---|
| 1.0.0 | 2026-05-19 | Initial a11y spec — transparent div, no role, no focus, no contrast requirement |