# XWUICautionBanner

A full-width honesty banner: a warning glyph and one standing limitation of the
product. It is not a toast and not an alert. It has no dismiss control, no
timeout and no stored state, so it reads the same on a first visit, on a reload
and on paper.

## When this and not XWUIAlert or XWUIFeedbackBanner

`XWUIAlert` and `XWUIFeedbackBanner` both stamp a live or landmark role on their
root with no knob to turn it off: `XWUIAlert.ts:51` sets `role="alert"`, and
`XWUIFeedbackBanner.ts:68-69` sets `role="banner"` plus `aria-live="polite"`.
Both are correct for something that just happened and wrong for something that
has always been true. Both also paint their warning variant as a bordered
`--bg-elevated` panel with amber ink, not as an amber wash under primary ink.

## Style dependencies

The stylesheet declares no value of its own. It reads, and needs a host that
declares:

- base: `styles/core/reset.css`, `styles/core/typography.css`
- style: `styles/style/modern/spacing.css` for `--spacing-sm` and `--spacing-md`
- theme colours: `--text-primary`, `--accent-warning`, and the two tint tokens
  `--status-warning-surface` and `--status-warning-border`. A theme that
  declares neither falls back to `--bg-elevated` and to `--accent-warning`
  itself, so the banner degrades to a warning-bordered raised panel rather than
  to an unmarked one.
- theme roundness: `--radius-md`
- theme lines: `--border-width-thin`
- theme typography: `--font-size-sm`, `--font-weight-normal`,
  `--line-height-normal`, `--letter-spacing-normal`

## Basic usage

```ts
new XWUICautionBanner(container, {
  message: 'There is no conformance suite.'
});
```

## Data

| Key | Type | Default | Meaning |
|---|---|---|---|
| `message` | string | `''` | The standing limitation. One paragraph, plain text. |
| `label` | string | `'Caution'` | The word that names the kind of statement for assistive technology. Clipped, never painted. |

## Configuration

| Key | Type | Default | Meaning |
|---|---|---|---|
| `className` | string | none | Extra class on the banner element. |

## The glyph

The glyph is an inline SVG carrying `stroke="currentColor"`, so its colour comes
from `--accent-warning` on its own wrapper and never from an attribute. It is
the same triangle `XWUIAlert` and `XWUIFeedbackBanner` draw for their warning
variant, copied as geometry.

It is deliberately **not** an `XWUIIcon`. `XWUIIcon` writes its size as an inline
length (`XWUIIcon.ts:704`) and fetches its SVG over the network
(`XWUIIcon.ts:407-415`), and a standing statement of fact should not depend on a
request that can fail.

## Accessibility

The banner carries **no role and no `aria-live`**. A live region announces its
content when it enters the accessibility tree, which is right for an event and
wrong for a permanent limitation: a reader would be interrupted on every load to
be told something that was already true.

Instead the word is text. A clipped span before the message carries
`"<label>: "`, so the reading is `Caution: There is no conformance suite.` in
document order, at the place a sighted reader sees the amber bar. The colon and
the trailing space are inside the string on purpose: the span and the message
are adjacent inline text, so without them they would read as one word.

The glyph is `aria-hidden`, because on its own it is a shape.

Nothing here is interactive: no control, no tab stop, no handler. There is
nothing to dismiss, which is the point of the component.

## Motion

No transition and no animation, so `prefers-reduced-motion` has nothing to
answer.

## Comp values that lost to the token ladder

| Comp value | Written | Resolves | Why |
|---|---|---|---|
| padding 14px vertical | `--spacing-md` | 16px | The spacing unit is 4; 16 is 2 away, 8 is 6 away. |
| gap 12px | `--spacing-sm` | 8px | 8 and 16 are equidistant; `XWUIAlert.css:18` uses `--spacing-sm` for the same glyph-to-text gap, so the estate already answers this tie. |
| corner radius 10px | `--radius-md` | 8px | 8 and 12 are equidistant; `--radius-alert` resolves to `--radius-md`, so the banner shares a corner with every alert in the estate. |
| glyph 13px | `--font-size-sm` | 14px | The type ladder's floor for body-sized text. |
| body 13.5px | `--font-size-sm` | 14px | Same step. |
| line height 1.55 | `--line-height-normal` | 1.5 | The nearest rung. |
| body capped at 1080px | nothing written | the host's own cap | There is no width token in the vocabulary, and a component that caps its own measure would drift from the page's. A proposed token is named below. |

## Proposed tokens, not added here

- a text measure, about 60 to 75 characters, for the line-length cap the comp
  draws. Adding it means picking one measure for the whole estate, which is a
  question for a person and not a guess inside one component.