# SlopUI v0.1.0 - Table of Contents

> A semantic, themeable, accessible component library for Phoenix LiveView built on modern vanilla CSS.

## Pages

- [SlopUI](readme.md)
- [Browser support](browser-support.md)
- [Changelog](changelog.md)

## Modules

- [SlopUI](SlopUI.md): SlopUI is a semantic, themeable, accessible component library for Phoenix
LiveView built on modern vanilla CSS.
- [SlopUI.Components.Accordion](SlopUI.Components.Accordion.md): Accordion on native `<details>` elements. Works without JavaScript; the hook only adds arrow-key movement between headers.
- [SlopUI.Components.Alert](SlopUI.Components.Alert.md): Inline alerts.
- [SlopUI.Components.Avatar](SlopUI.Components.Avatar.md): Avatars and avatar groups.
- [SlopUI.Components.Badge](SlopUI.Components.Badge.md): Badges and status pills.
- [SlopUI.Components.Button](SlopUI.Components.Button.md): Buttons and button groups.

- [SlopUI.Components.Card](SlopUI.Components.Card.md): Cards.
- [SlopUI.Components.Carousel](SlopUI.Components.Carousel.md): A scroll-snap carousel with buttons, dots and optional autoplay.
- [SlopUI.Components.Command](SlopUI.Components.Command.md): Command palette.
- [SlopUI.Components.DatePicker](SlopUI.Components.DatePicker.md): Date, date-range and time pickers, plus an inline calendar.
- [SlopUI.Components.Dialog](SlopUI.Components.Dialog.md): Modal dialogs on the native `<dialog>` element.
- [SlopUI.Components.Elements](SlopUI.Components.Elements.md): Small building blocks: skeleton, progress, spinner, kbd, separator, breadcrumbs, pagination.
- [SlopUI.Components.Form](SlopUI.Components.Form.md): Form fields with labels, descriptions and errors wired together with the
correct `id`/`for`/`aria-describedby`/`aria-invalid` relationships.

- [SlopUI.Components.HoverCard](SlopUI.Components.HoverCard.md): Hover cards: rich previews that open when a trigger is hovered or focused.
- [SlopUI.Components.Inputs](SlopUI.Components.Inputs.md): Specialised inputs: slider, number, pin, tag, rating, password and color.
- [SlopUI.Components.Layout](SlopUI.Components.Layout.md): Layout primitives: composition, not utilities. A stack spaces children
vertically, a cluster groups them horizontally with wrapping, a grid
auto-fits columns.

- [SlopUI.Components.Markdown](SlopUI.Components.Markdown.md): Markdown rendering with [MDEx](https://hex.pm/packages/mdex). MDEx is an
optional dependency: add `{:mdex, "~> 0.13"}` to use this component.

- [SlopUI.Components.MarkdownEditor](SlopUI.Components.MarkdownEditor.md): A Markdown editor in the GitHub style: a textarea with a formatting toolbar,
keyboard shortcuts, list continuation, a Write/Preview switch, and image
upload by paste, drop or button through LiveView uploads.

- [SlopUI.Components.Menu](SlopUI.Components.Menu.md): Dropdown menus built on the popover API and anchor positioning.
- [SlopUI.Components.Popover](SlopUI.Components.Popover.md): Anchored popovers with arbitrary content.
- [SlopUI.Components.ScrollArea](SlopUI.Components.ScrollArea.md): A scroll container with thin styled scrollbars and optional edge shadows.
- [SlopUI.Components.Select](SlopUI.Components.Select.md): Custom select (select-only combobox) and editable combobox with autocomplete.

- [SlopUI.Components.Shell](SlopUI.Components.Shell.md): Application shell: sidebar, topbar, navigation, auth layout, indicator.
- [SlopUI.Components.SplitPanel](SlopUI.Components.SplitPanel.md): Two panes with a draggable, keyboard-operable divider.
- [SlopUI.Components.Structure](SlopUI.Components.Structure.md): Page structure: page header, empty state, description list.
- [SlopUI.Components.Table](SlopUI.Components.Table.md): Data tables.
- [SlopUI.Components.Tabs](SlopUI.Components.Tabs.md): Tabs following the WAI-ARIA tabs pattern.
- [SlopUI.Components.Theme](SlopUI.Components.Theme.md): Light/dark/system theme support.
- [SlopUI.Components.Toast](SlopUI.Components.Toast.md): Toast notifications, including LiveView flash integration.
- [SlopUI.Components.Tooltip](SlopUI.Components.Tooltip.md): Tooltips.
- [SlopUI.Components.Tree](SlopUI.Components.Tree.md): Tree views (WAI-ARIA tree pattern) for file browsers, navigation and hierarchies.
- [SlopUI.Components.Upload](SlopUI.Components.Upload.md): File upload dropzone and entry list for LiveView uploads.
- [SlopUI.Gettext](SlopUI.Gettext.md): The library's own Gettext backend. It holds the `slop_ui` domain template
(`priv/gettext/slop_ui.pot`) and English defaults.
- [SlopUI.Icons](SlopUI.Icons.md): The small set of icons the library's own chrome uses (close buttons,
chevrons, status glyphs, the editor toolbar). They are
[Phosphor Icons](https://phosphoricons.com) in the regular weight, vendored
here so the library carries no icon dependency (MIT, see `priv/phosphor/LICENSE`).
- [SlopUI.Icons.Set](SlopUI.Icons.Set.md): Compile-time icon sets.
- [SlopUI.JS](SlopUI.JS.md): `Phoenix.LiveView.JS` helpers for driving SlopUI components from the client
without a server round trip.
- [SlopUI.Sink.Endpoint](SlopUI.Sink.Endpoint.md)
- [SlopUI.Sink.ErrorHTML](SlopUI.Sink.ErrorHTML.md)
- [SlopUI.Sink.Helpers](SlopUI.Sink.Helpers.md): Kitchen-sink page helpers.
- [SlopUI.Sink.Icons](SlopUI.Sink.Icons.md): The kitchen sink's own icon sets, showing `use SlopUI.Icons`.
- [SlopUI.Sink.Layouts](SlopUI.Sink.Layouts.md)
- [SlopUI.Sink.Live](SlopUI.Sink.Live.md)
- [SlopUI.Sink.Pages.Accordion](SlopUI.Sink.Pages.Accordion.md)
- [SlopUI.Sink.Pages.Alerts](SlopUI.Sink.Pages.Alerts.md)
- [SlopUI.Sink.Pages.Badges](SlopUI.Sink.Pages.Badges.md)
- [SlopUI.Sink.Pages.Buttons](SlopUI.Sink.Pages.Buttons.md)
- [SlopUI.Sink.Pages.Cards](SlopUI.Sink.Pages.Cards.md)
- [SlopUI.Sink.Pages.Choices](SlopUI.Sink.Pages.Choices.md)
- [SlopUI.Sink.Pages.Command](SlopUI.Sink.Pages.Command.md)
- [SlopUI.Sink.Pages.Dates](SlopUI.Sink.Pages.Dates.md)
- [SlopUI.Sink.Pages.Dialogs](SlopUI.Sink.Pages.Dialogs.md)
- [SlopUI.Sink.Pages.Editor](SlopUI.Sink.Pages.Editor.md)
- [SlopUI.Sink.Pages.Elements](SlopUI.Sink.Pages.Elements.md)
- [SlopUI.Sink.Pages.Extras](SlopUI.Sink.Pages.Extras.md)
- [SlopUI.Sink.Pages.Forms](SlopUI.Sink.Pages.Forms.md)
- [SlopUI.Sink.Pages.Foundation](SlopUI.Sink.Pages.Foundation.md)
- [SlopUI.Sink.Pages.HoverCard](SlopUI.Sink.Pages.HoverCard.md)
- [SlopUI.Sink.Pages.Icons](SlopUI.Sink.Pages.Icons.md)
- [SlopUI.Sink.Pages.Inputs](SlopUI.Sink.Pages.Inputs.md)
- [SlopUI.Sink.Pages.Layout](SlopUI.Sink.Pages.Layout.md)
- [SlopUI.Sink.Pages.Markdown](SlopUI.Sink.Pages.Markdown.md)
- [SlopUI.Sink.Pages.Menus](SlopUI.Sink.Pages.Menus.md)
- [SlopUI.Sink.Pages.Panels](SlopUI.Sink.Pages.Panels.md)
- [SlopUI.Sink.Pages.Popover](SlopUI.Sink.Pages.Popover.md)
- [SlopUI.Sink.Pages.Selects](SlopUI.Sink.Pages.Selects.md)
- [SlopUI.Sink.Pages.Structure](SlopUI.Sink.Pages.Structure.md)
- [SlopUI.Sink.Pages.Tables](SlopUI.Sink.Pages.Tables.md)
- [SlopUI.Sink.Pages.Tabs](SlopUI.Sink.Pages.Tabs.md)
- [SlopUI.Sink.Pages.Templates](SlopUI.Sink.Pages.Templates.md)
- [SlopUI.Sink.Pages.Themes](SlopUI.Sink.Pages.Themes.md)
- [SlopUI.Sink.Pages.Toasts](SlopUI.Sink.Pages.Toasts.md)
- [SlopUI.Sink.Pages.Tooltips](SlopUI.Sink.Pages.Tooltips.md)
- [SlopUI.Sink.Pages.Tree](SlopUI.Sink.Pages.Tree.md)
- [SlopUI.Sink.Pages.Upload](SlopUI.Sink.Pages.Upload.md)
- [SlopUI.Sink.Reference](SlopUI.Sink.Reference.md): Renders API reference tables for components straight from their
`Phoenix.Component` metadata (`attr`/`slot` declarations) and `@doc` strings,
so the kitchen sink can never drift from the code.

- [SlopUI.Sink.Router](SlopUI.Sink.Router.md)
- [SlopUI.Sink.TemplateLive](SlopUI.Sink.TemplateLive.md): Full-page templates rendered without the kitchen sink chrome.
- [SlopUI.Sink.Templates.Chrome](SlopUI.Sink.Templates.Chrome.md): The shared shell used by the app-style templates.
- [SlopUI.Sink.Templates.Dashboard](SlopUI.Sink.Templates.Dashboard.md)
- [SlopUI.Sink.Templates.Detail](SlopUI.Sink.Templates.Detail.md)
- [SlopUI.Sink.Templates.List](SlopUI.Sink.Templates.List.md)
- [SlopUI.Sink.Templates.Settings](SlopUI.Sink.Templates.Settings.md)
- [SlopUI.Sink.Templates.SignIn](SlopUI.Sink.Templates.SignIn.md)
- [SlopUI.Sink.Templates.SignUp](SlopUI.Sink.Templates.SignUp.md)

## Mix Tasks

- [mix sink.audit](Mix.Tasks.Sink.Audit.md): Boots the kitchen sink on a random port, drives headless Chrome through the
DevTools protocol, and measures every token pairing for each palette in
light and dark, with and without `data-contrast="more"`.
- [mix sink.smoke](Mix.Tasks.Sink.Smoke.md): Boots the kitchen sink on a random port and drives headless Chrome through
the DevTools protocol, running the scenarios in `dev/smoke/tests/*.mjs`.
Each scenario opens a sink page, performs real clicks and key presses, and
asserts on the resulting DOM, so every hook's behaviour (open/close, arrow
keys, focus management, value changes) is checked end to end.

