# Typography Gallery

A complete catalogue of `XWUITypography`, mirroring a typical type-spec page and
exercising **every** per-instance control from config alone - no inline CSS or
per-call class hacks in app code:

1. **Display & Gradient** - `color: 'gradient'`, `fontSize`, `letterSpacing`.
2. **Standard Hierarchy** - the `h1`-`h6` variants.
3. **Font Families** - `fontFamily` (sans / serif+`italic` / monospace).
4. **Body Copy** - `fontSize`, `lineHeight`, `weight`, `color`.
5. **Inline Formatting & Decorations** - `weight`, `italic`, and the combinable
   `underline` / `overline` / `strikethrough`, plus `letterSpacing`.
6. **Case Modes** - `case` incl. the JS-only `sentence-case` and `toggle-case`
   that CSS cannot express.
7. **Quotes & Callouts** - semantic `component: 'blockquote'` + `align`.

```ts
new XWUITypography(el, { text: "Designing the Future" }, { variant: "h1", color: "gradient", weight: "bold" });
new XWUITypography(el, { text: "the first letter. and the next ONE." }, { case: "sentence-case" });
new XWUITypography(el, { text: "Both lines" }, { underline: true, overline: true });
```

> Roles: an instance can also set `role: 'hero-title'` to inherit a theme's
> `--xwui-typo-<role>-*` tokens (falling back to `--xwui-typo-global-*`); any
> explicit prop above still overrides the role.