# XWUITypography

Text component with type scale (h1-h6, body, caption, overline), colour and alignment options.

## Basic Usage

Single heading.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: Single heading.
```

## Scale

Full type-scale demo.

```example
file: examples/Scale.ts
html: examples/Scale.html
title: Scale
description: Full type-scale demo.
```

## Colors

Semantic colour variants.

```example
file: examples/Colors.ts
html: examples/Colors.html
title: Colors
description: Semantic colour variants.
```

## Full text-styling contract

Beyond `variant`, every text knob is a wired per-instance prop (no class hacks):

- `case`: `none | uppercase | lowercase | capitalize | sentence-case | toggle-case` - the first four use CSS `text-transform`; `sentence-case` and `toggle-case`
  transform the text content in JS (CSS cannot express them). `textTransform` is a
  deprecated alias for the CSS-only values.
- `italic`, and the combinable `underline` / `overline` / `strikethrough`.
- `letterSpacing`, `lineHeight`, `fontFamily`, `fontSize`, `weight`, `align`, `color`
  (incl. `gradient` and `inherit`).

### Roles (theme-driven)

Set `role: 'hero-title'` (or `menu-title`, `h1-title`, …) and the element inherits
that role's `--xwui-typo-<role>-*` tokens, which fall back to `--xwui-typo-global-*`.
Any explicit prop above overrides the role. A theme defines a role once and every
instance obeys - e.g. "titles are UPPERCASE in English" lives in the theme, not in
per-call code.

```example
file: examples/TypographyGallery.ts
html: examples/TypographyGallery.html
title: Typography Gallery
description: Every per-instance control - gradient titles, hierarchy, families, body copy, decorations, case modes (incl. JS sentence/toggle-case), and quotes.
```

```api
```