# Skua v0.1.0 - Table of Contents

> Headless-first, token-driven UI components for Phoenix LiveView — rich selects, date pickers, dialogs, menus, tables, sliders and toasts that live in the browser top layer. Themeable through CSS tokens, viewport-aware, server-authoritative, with zero third-party JS.

## Pages

- [Skua](readme.md)
- [Skua usage rules](usage-rules.md)
- [Changelog](changelog.md)
- [Skua — Revised Project Plan](plan.md)

## Modules

- [Skua](Skua.md): Skua — headless-first, token-driven UI components for Phoenix LiveView.
- [Skua.Phone.Countries](Skua.Phone.Countries.md): The country dataset Skua's phone field ships with — `{name, iso2, dial}`
tuples for 230 countries and territories. Self-contained (no third-party
dependency); ported from the aif-core dogfooding app so existing apps get
the identical list.

- Forms
  - [Skua.Components.Date](Skua.Components.Date.md): A date input — a hidden ISO `<input>` that carries the value plus a trigger
that opens a keyboard-navigable calendar (W3C APG date-grid pattern).
  - [Skua.Components.Form](Skua.Components.Form.md): Skua form components — button, label, error, field wrapper, input, textarea,
toggle (checkbox / radio / switch), OTP, chip toggle, segmented control and
slider (single + dual-handle range).
  - [Skua.Components.Phone](Skua.Components.Phone.md): An international phone field — country picker + national number input that
writes a canonical E.164 value (e.g. `"+15555550100"`) into a hidden input
for `phx-change`/`phx-submit`.
  - [Skua.Components.Select](Skua.Components.Select.md): A styled, accessible `<select>` — single or multi, text or badge display,
optionally searchable and creatable.

- Overlays
  - [Skua.Components.Menu](Skua.Components.Menu.md): A dropdown menu — a trigger button that opens a top-layer menu of actions.
  - [Skua.Components.Overlay](Skua.Components.Overlay.md): Top-layer overlay components — popover, dialog and drawer.
  - [Skua.Components.Tooltip](Skua.Components.Tooltip.md): A tooltip — a small top-layer label shown on hover/focus of its trigger.

- Display &amp; feedback
  - [Skua.Components.Display](Skua.Components.Display.md): Display & feedback components — badge, dot, card, header, list, empty state,
spinner, alert, accordion, breadcrumb, avatar, progress, skeleton.
  - [Skua.Components.Table](Skua.Components.Table.md): A token-styled, slot-driven `table` and a `pagination` control.
  - [Skua.Components.Tabs](Skua.Components.Tabs.md): A tabs component — an ARIA tablist with **client-side** panel switching (no
server round-trip), full keyboard support (Left/Right/Up/Down/Home/End), and
roving tabindex. Token-styled and morphdom-safe.

- Theming
  - [Skua.Components.Theme](Skua.Components.Theme.md): A dark/light theme toggle.
  - [Skua.Components.Toast](Skua.Components.Toast.md): Toasts — two complementary mechanisms

- Utilities
  - [Skua.Field](Skua.Field.md): Normalizes a `Phoenix.HTML.FormField` (or raw name/value) into the
attributes every Skua form component needs: a sanitized DOM `id`, the form
`name`, the current `value`, and the list of `errors` to display.
  - [Skua.Phone](Skua.Phone.md): Self-contained phone harness — country data, country/dial-code helpers,
E.164 normalization, display formatting, and an Ecto changeset validator.

## Mix Tasks

- [mix skua.install](Mix.Tasks.Skua.Install.md): Installs Skua into the current Phoenix project

