# Component and behavior index All public classes use the `c19-` prefix. The framework does not register custom elements. CSS provides the complete visual and layout layer; `dist/cargo19.js` is an optional enhancement for discrete interactions. ## Document root and themes | Concern | API | Notes | |---|---|---| | Root | `.c19-root` | Apply to `` for global typography, background, and text color. | | Theme | `[data-c19-theme="paper|bridge|auto"]` | May be placed on the document root or a component subtree. | | Theme utility | `.c19-theme-paper`, `.c19-theme-bridge` | Local class-based theme override. | | Theme control | `[data-c19-theme-toggle]` | Optional JS toggles paper/bridge and persists the selection. | | Skip link | `.c19-skip-link` | Becomes visible on keyboard focus. | ## Application structure | Component | Primary classes | Notes | |---|---|---| | Page | `.c19-page` | Full-page grid that prevents intrinsic-width overflow. | | App bar | `.c19-appbar`, `.c19-appbar__inner` | Sticky translucent application header. | | Brand | `.c19-brand`, `__mark`, `__text` | Compact mark and name. Text collapses on narrow screens. | | Navigation | `.c19-nav`, `__link`, `__index` | Numbered vertical navigation; use `aria-current="page"`. | | Panel | `.c19-panel`, `__header`, `__body`, `__footer`, `__title` | Structured operational module. Add `.c19-panel--critical` for a critical header. | | Card | `.c19-card`, `.c19-card--interactive` | General content surface with optional hover affordance. | | Divider | `.c19-divider`, `.c19-rule-label` | Structural separator and indexed label. | ## Signs and icons | Component | Primary classes | Notes | |---|---|---| | SVG icon | `.c19-icon` | Baseline SVG sizing. Sprite symbols determine whether geometry is filled or stroked. | | Icon sizes | `.c19-icon-xs`, `-sm`, `-lg` | Compact size utilities. | | Sign container | `.c19-symbol`, `.c19-symbol-sm|md|lg|xl` | Preserves the `19 × 18` sign ratio. The generated sign contains its own frame and palette. | | Micro container | `.c19-symbol--micro` | Neutral framed surface for interface glyphs. | | Legacy semantic modifiers | `.c19-symbol--red|gray|black|yellow|blue|green` | Retained for custom current-color SVGs; generated equipment signs carry fixed colors internally. | The sprite contains 39 equipment signs and 20 micro interface glyphs. Use `aria-hidden="true"` for decorative icons. Put the accessible name on an icon-only button, or use `role="img"` and a label for a meaningful standalone sign. ## Actions and navigation controls | Component | Primary classes | Notes | |---|---|---| | Button | `.c19-button` | Primary action. | | Button variants | `--secondary`, `--ghost`, `--warning`, `--danger`, `--small` | Preserve hierarchy; use warning/danger only for matching semantics. | | Icon button | `.c19-icon-button`, `--secondary`, `--ghost` | Requires an accessible name. | | Tabs | `.c19-tabs`, `__list`, `__tab` | Use native `role="tablist"`, `role="tab"`, `role="tabpanel"`, `aria-controls`, and `aria-selected`. | | Pagination | `.c19-pagination` | Use links or buttons and `aria-current="page"`. | | Command bar | `.c19-commandbar`, `.c19-key` | Search/command treatment with optional key hints. | | Accordion | `.c19-accordion`, `.c19-accordion__body` | Styles native `

` and `

`. | | Popover menu | `.c19-menu-trigger`, `.c19-menu`, `__label`, `__item`, `__meta`, `__separator` | Uses native `popover` and `popovertarget`; no JavaScript is required. Set a shared unique `--c19-menu-anchor` when a page has multiple anchored menus. | ## Forms | Component | Primary classes | Notes | |---|---|---| | Field | `.c19-field`, `__label`, `__hint`, `__error` | Groups a label, native control, help text, and error text. | | Inputs | `.c19-input`, `.c19-textarea`, `.c19-select` | Shared focus, disabled, invalid, and theme behavior. | | Input group | `.c19-input-group`, `.c19-input-group__addon` | Joins inputs, selects, addons, and buttons while preserving native controls. | | Choice | `.c19-choice` | Native checkbox/radio wrapper. | | Switch | `.c19-switch`, `.c19-switch__track` | Visual switch around a native checkbox. Keep the input in the accessibility tree. | ## Feedback and status | Component | Primary classes | Notes | |---|---|---| | Badge | `.c19-badge`, `--red`, `--yellow`, `--blue`, `--green` | Compact category or state text. | | Status | `.c19-status`, `--ok`, `--warn`, `--danger`, `--cold` | Dot plus text; never relies on color alone. | | Alert | `.c19-alert`, `__title`, `--info`, `--success`, `--warning`, `--danger` | Inline message with optional dismiss action. | | Toast | `.c19-toast` | Compact transient message. Applications control live-region behavior and placement. | | Tooltip | `[data-c19-tooltip]` | CSS-only supplemental text. Add `data-c19-tooltip-position="end"` near the right viewport edge. | | Skeleton | `.c19-skeleton` | Loading placeholder that respects reduced motion. | | Inline loading | `.c19-inline-loading`, `.c19-spinner`, `.c19-spinner--large` | Pair the visual spinner with status text; use `aria-busy` on the region or control being updated. | | Dialog | `.c19-dialog`, `__header`, `__body`, `__footer` | Styling for native `