# XWUISpecStrip

One row of named things. Every cell carries a monospaced name over a plain description,
and the cells are separated by hairlines that the grid gap itself draws: the strip paints
the line colour behind the grid, each cell paints the ground back over it, and the gap is
one hairline wide, so the separators between cells and between wrapped rows are the same
line without a single border declaration on a cell. The strip is ruled above and below by
the same colour. It has no fill, no corner and no shadow of its own.

`new XWUISpecStrip(container, data, config?)`, positional. Implements `setupDOM()`, and
`destroy()` calls `super.destroy()`.

## Data

| Key | Default | Meaning |
| --- | --- | --- |
| `caption` | `''` | What the strip lists. Names the strip for assistive technology and is not painted. |
| `items` | `[]` | Cells in painting order. |

## Item

| Key | Default | Meaning |
| --- | --- | --- |
| `name` | required | What the cell names. Monospaced, and left to read left to right under a right-to-left document. |
| `description` | `''` | One sentence. Omit it for a strip of bare names; the cell keeps its empty value slot so the names stay on one baseline. |

## Config

| Key | Default | Meaning |
| --- | --- | --- |
| `className` | none | Extra class on the strip element. |

## How many cells fit

The strip is not told a column count. It lays out
`repeat(auto-fit, minmax(min(100%, --xwui-spec-strip-cell-min), 1fr))`, so the container
decides how many cells sit on a row and the rest wrap onto the next one, down to a single
column on a narrow viewport. Nothing here is a media query, so the strip behaves the same
inside a narrow column of a wide page as it does on a narrow screen.

`--xwui-spec-strip-cell-min` defaults to `calc(var(--spacing-md) * 17)` and is the one
knob a host has over the count. A host that wants four cells across a container narrower
than four minimums lowers it; a host that wants them to wrap sooner raises it.

## The ground the cells paint

`--xwui-spec-strip-ground` defaults to `var(--bg-app)`. The hairline effect needs the
cells to paint the surface the strip sits on, so a strip placed on a raised or sunken
surface has to be told which one, by setting that property on the strip or on any
ancestor. Getting it wrong shows immediately: the cells read as blocks of the wrong
shade rather than as a ruled row.

## Semantics

A real `<dl>`, one `<div>` per cell holding a `<dt>` name and a `<dd>` description, which
is the markup for a set of name and value pairs. The `caption` is a paragraph taken out
of flow with `clip-path: inset(50%)` rather than the framework's `.sr-only`, so the
component does not depend on a global utility sheet, and the `<dl>` is labelled by it.
With no caption there is no name and no label.

Nothing here is interactive. There is no hover, no focus and no click.

## Right to left

The strip mirrors and the names do not: `.xwui-spec-strip__name` carries
`direction: ltr` and `unicode-bidi: isolate` as a class rule, not as a `dir` attribute,
because `XWUIShellApp.css` neutralises `[dir]` islands inside the public shell and only a
class rule survives there.

## Cell height

Derived from padding plus the line boxes, not declared. `--spacing-md` above and below,
`--spacing-lg` on the inline edges, a `--font-size-sm` name at `--line-height-tight` over
a `--font-size-xs` description at `--line-height-normal`, with `--spacing-xs` between
them. Every cell in a row is the height of the tallest, because the grid stretches them.

## Style dependencies

- Base: `reset.css`, `typography.css`
- Brand: `brand/xwui/brand.css`
- Style: `style/modern/spacing.css`
- Theme: `theme/colors/{selected}.css`, `theme/lines/{selected}.css`,
  `theme/typography/{selected}.css`

There is no accent in this component and no status colour, so it needs neither the accent
sheet nor a fallback for a token that only one colour theme declares.