Headless
v0.0.10
The headless components ship the behavior and accessibility of Mishka Chelekom without its styling: semantic markup, full WAI-ARIA wiring, named part slots, data-* state and the JavaScript hooks. Generate one with mix mishka.ui.gen.headless, or all of them with mix mishka.ui.gen.headless.components, and style it with your own Tailwind classes.
- Accordion HeadlessStatelessAccessibleJS Accordion without styles: WAI-ARIA wiring, roving tabindex keyboard navigation and data-open state. Open one panel or several, and use your own classes.
- Action Icon HeadlessStatelessAccessible Icon-only button, headless, for Phoenix LiveView. Requires an aria-label, supports button, submit and reset types, and mirrors disabled to data-disabled.
- Alert HeadlessStatelessAccessibleJS-module Unstyled inline alert where urgency picks the ARIA role: polite status, assertive alert or plain region. Optional dismiss button, icon, title and actions.
- Alert Dialog HeadlessStatelessAccessibleJS Unstyled alert dialog for Phoenix LiveView: role alertdialog, focus trap, data-open state. A backdrop click never closes it; Escape or a data-close button does.
- Alpha Slider HeadlessStatelessAccessibleJS Headless opacity slider from 0 to 100 with a draggable handle, arrow-key steps and a hidden form input. The base color becomes a CSS variable for gradients.
- Anchor HeadlessStatelessAccessible Link primitive without styles. Renders an anchor, or a LiveView link when given navigate or patch; anchor attributes and phx bindings pass through.
- Angle Slider HeadlessStatelessAccessibleJS Circular headless control for choosing an angle from 0 to 360 degrees. Handles pointer drag and arrow keys, submits via hidden input, exposes --angle.
- Autocomplete HeadlessStatelessAccessibleJS Free-text combobox with no styles: typeahead filtering, a roving highlight, grouped options and a live status region announcing how many results match.
- Avatar HeadlessStatelessAccessibleJS Avatar image with a fallback, headless. Tracks load status (idle, loading, loaded, error) and shows initials until the image loads, after an optional delay.
- Breadcrumb HeadlessStatelessAccessibleJS-module Breadcrumb trail without styles: a nav landmark, an ordered list, aria-current on the last item, hidden separators, and max_items to collapse long trails.
- Burger HeadlessStatelessAccessible Hamburger button wired with aria-expanded and aria-controls, headless. A data-opened hook lets you animate the bars into a close icon using CSS alone.
- Button HeadlessStatelessAccessible Action primitive that renders a button, or a link with navigate, patch or href. Headless, with a loading state (aria-busy), disabled handling and icon slots.
- Calendar HeadlessStatelessAccessibleJS-moduleJS Month calendar computed on the server and rendered as a real table, unstyled. Single, multiple and range modes, plus full keyboard grid navigation.
- Card HeadlessStatelessAccessible Headless card with an optional image, a real heading for the title (h3 by default) and an actions row. Add navigate, patch or href to turn the card into a link.
- Carousel HeadlessStatelessAccessibleJS Scroll-snap carousel, headless, with previous and next buttons, indicators, autoplay that pauses on hover and focus, and the APG carousel ARIA roles.
- Chart HeadlessStatelessAccessibleJS Wrapper for Apache ECharts, Chart.js or billboard.js, headless. Pass the engine's options as an Elixir map, theme with CSS variables and push live updates.
- Checkbox HeadlessStatelessAccessibleJS Unstyled checkbox with role checkbox, an indeterminate state and a hidden native input for forms. Space or Enter toggles it, and data-checked drives styling.
- Checkbox Group HeadlessStatelessAccessibleJS Group of headless checkboxes with a tristate select-all parent, per-item disabled state and hidden inputs that submit as name[]. ARIA and keyboard built in.
- Chip HeadlessStatelessAccessible Selectable chip without styles, built on a native checkbox or radio input in a label, so selection, form submission and Space to toggle work without JavaScript.
- Close Button HeadlessStatelessAccessible Close button for dialogs, drawers and alerts, unstyled. Icon-only, with a default aria-label of Close, a built-in cross you can swap, and a data-disabled hook.
- Code HeadlessStatelessAccessible Inline or block code element without styles. Renders code, or pre plus code with the block option to keep whitespace; you supply font, background and spacing.
- Collapsible HeadlessStatelessAccessibleJS Unstyled collapsible panel: the trigger sets aria-expanded and aria-controls, data-open and data-closed track state, and Enter or Space toggles it.
- Color Input HeadlessStatelessAccessibleJS-moduleJS Headless color input with a hex text field and preview swatch: a trigger button opens the picker panel, Escape or outside click closes it, hidden form input.
- Color Picker HeadlessStatelessAccessibleJS Color picker with a saturation and value area plus a hue slider, and no styles. It outputs hex, paints a preview swatch and fills a hidden input for forms.
- Color Swatch HeadlessStatelessAccessible Shows any CSS color as a labelled image, with optional overlay content such as a check mark. Headless, so you size it; pass only trusted, developer-set colors.
- Combobox HeadlessStatelessAccessibleJS Unstyled combobox that filters a listbox as you type. Single or multiple selection with chips, grouped options, a creatable mode, and clear and trigger buttons.
- Context Menu HeadlessStatelessAccessibleJS Right-click and long-press menu that opens at the cursor, with roving highlight, typeahead, checkbox and radio items, and nested submenus. Unstyled, ARIA wired.
- Countdown HeadlessStatelessAccessibleJS Countdown timer, unstyled: the server renders the correct time on first paint, a hook ticks it down, and on_complete fires once. Announcements are opt in.
- Dialog HeadlessStatelessAccessibleJS Modal dialog without styles: focus trap, scroll lock, backdrop and open state. Escape and outside click close it (both configurable), per the WAI-ARIA pattern.
- Dock HeadlessStatelessAccessibleJS-module Dock navigation, headless: a nav landmark with aria-current on the active item, links or buttons, top or bottom placement, and a contained mode for cards.
- Drawer HeadlessStatelessAccessibleJS Unstyled slide-in drawer: focus trap, swipe-to-dismiss, snap points and an edge swipe area. Style with data-open, data-side and a swipe progress CSS variable.
- Editor HeadlessStatelessAccessibleJS Rich-text editor on TipTap 3 and ProseMirror, headless. Content syncs to a hidden field for plain form submits and is stored as JSON by default.
- Empty State HeadlessStatelessAccessible Empty state placeholder without styles: indicator, title, description and actions parts plus a data-align hook. Add role status when results appear dynamically.
- FAB HeadlessStatelessAccessibleJS-moduleJS Floating action button that can fan out into a speed dial, unstyled. A real button with aria-expanded that closes on Escape and outside click.
- Field HeadlessStatelessAccessibleJS Headless form field: label points at your control, aria-describedby joins description and errors; data attributes track focused, touched, dirty and filled.
- Fieldset HeadlessStatelessAccessible Unstyled fieldset for related controls. A native element, so disabled cascades to every nested control without JS, and the legend is linked by aria-labelledby.
- File Input HeadlessStatelessAccessible Unstyled file input for plain forms and Phoenix LiveView uploads. Pass upload, field or name; the input is the root, with data-invalid and data-disabled hooks.
- Floating Indicator HeadlessStatelessAccessibleJS One highlight box measures the active target and slides over it. Headless, with data-active and aria-pressed kept in sync and an on_change event for LiveView.
- Floating Window HeadlessStatelessAccessibleJS Move a panel by its handle or arrow keys (10px, 1px with Shift) while it stays clamped to its positioned parent. Headless, with on_move for coordinates.
- Highlight HeadlessStatelessAccessible Wrap every case-insensitive match of a query, or a list of queries, in a mark element at render time. Unstyled, no JavaScript, and other text stays escaped.
- Hue Slider HeadlessStatelessAccessibleJS Choose a hue from 0 to 360 degrees with a draggable handle. Headless, built on the shared slider engine with drag, keyboard, ARIA and a hidden input for forms.
- JSON Input HeadlessStatelessAccessible Unstyled JSON textarea for Phoenix LiveView. Parse it on the server (Jason.decode/1); invalid sets aria-invalid and data-invalid, value binds to a form field.
- Loading Overlay HeadlessStatelessAccessible Cover a container with a centered loader in a role=status region that fades via data-visible. Headless, no JavaScript, and a hidden overlay never blocks clicks.
- Mark HeadlessStatelessAccessible Mark an inline run of text with a semantic mark element. Unstyled, so bring your own highlight color and style it through the chelekom-mark class.
- Marquee HeadlessStatelessAccessible Scroll a row of content continuously in pure CSS with no JS hook. Headless, and the content renders twice (the copy is aria-hidden) so keyframes loop smoothly.
- Mask Input HeadlessStatelessAccessibleJS Format text to a pattern as users type, with 9 for digits, a for letters and * for alphanumerics. Unstyled, and the masked value is what submits with the form.
- Menu HeadlessStatelessAccessibleJS Menu button with roving highlight, typeahead, checkbox and radio items, nested submenus and hover-to-open. Headless, with WAI-ARIA keyboard support.
- Menubar HeadlessStatelessAccessibleJS Headless menubar for Phoenix LiveView: top-level menu buttons with roving tabindex, arrow keys and Home/End, and hover or arrow switching once a menu is open.
- Meter HeadlessStatelessAccessible Show a measurement within a known range, like disk usage, with role=meter and clamped aria values. Headless, with an optional readout and a CSS-variable fill.
- Nav Link HeadlessStatelessAccessible Unstyled navigation item for Phoenix LiveView. A leaf renders a link with data-active and aria-current; nested children become a native details disclosure.
- Navigation Menu HeadlessStatelessAccessibleJS Site navigation whose dropdowns share one popup that morphs in size and slides between items. Headless, with hover delays and WAI-ARIA behavior.
- Number Field HeadlessStatelessAccessibleJS Number input with stepper buttons, drag-to-scrub, locale-aware formatting and min, max and step. Headless, with full keyboard support and a hidden number input.
- Number Formatter HeadlessStatelessAccessible Display a number with thousands and decimal separators and an optional prefix or suffix. Unstyled span, formatted at render time with no JavaScript.
- OTP Field HeadlessStatelessAccessibleJS One-time-code input with single-character slots, auto-advance, paste distribution, masking and roving tabindex. Headless, with a hidden input and on_complete.
- Overflow List HeadlessStatelessAccessibleJS Keep items on one row and collapse the ones that do not fit into a +N counter. Unstyled; hidden items turn inert, and on_change reports the count to LiveView.
- Pagination HeadlessStatelessAccessibleJS-module Compute the page window from total, boundaries and siblings, with ellipses. Headless pagination renders pages as buttons, crawlable links or form radios.
- Pill HeadlessStatelessAccessible Unstyled pill for compact tags and tokens, with an optional remove button that has an accessible aria-label and fires on_remove. Style it through chelekom-pill.
- Pills Input HeadlessStatelessAccessibleJS-module Input-shaped box that holds pills plus a text field, the base for tag and multi-select inputs. Headless; clicking anywhere focuses it, and on_add handles Enter.
- Popover HeadlessStatelessAccessibleJS Anchored dialog panel that flips and clamps to the viewport, opened by click or hover. Headless, and non-modal, focus-trapped or modal with a backdrop.
- Preview Card HeadlessStatelessAccessibleJS Hover card that shows a floating preview on trigger hover or focus. Unstyled, with anchored positioning, open and close delays, and Escape to dismiss.
- Progress HeadlessStatelessAccessible Progress bar with role=progressbar and aria values. Headless, with indeterminate, progressing and complete states as data attributes and a CSS-variable fill.
- Radio HeadlessStatelessAccessibleJS Radio control that wraps a native input and keeps data-checked and data-unchecked in sync across a named group. Headless, with disabled, readonly and required.
- Radio Group HeadlessStatelessAccessibleJS Single-select group of radios with roving tabindex and selection that follows focus. Unstyled; a hidden input dispatches input so a form's phx-change fires.
- Rating HeadlessStatelessAccessibleJS Star rating built on a radio group, so arrow keys select and it has one tab stop. Headless, with half-star precision, readonly, clearable and a form input.
- Rolling Number HeadlessStatelessAccessibleJS Animate a number up to its value on mount and again when LiveView re-renders with a new one. Unstyled, honors reduced motion, with static fallback text.
- Scroll Area HeadlessStatelessAccessibleJS Scrollable viewport with a custom draggable scrollbar thumb sized to the content. Headless; vertical, horizontal or both, with overflow data attributes.
- Scroller HeadlessStatelessAccessibleJS Horizontal scroller with previous and next buttons that move the viewport about 80% of its width. Unstyled; buttons get data-disabled at the ends.
- Segmented Control HeadlessStatelessAccessible Mutually exclusive segments on native radios, so selection, arrow keys and form submission need no JavaScript. Headless; segments can be disabled individually.
- Select HeadlessStatelessAccessibleJS Pick one or several options from a listbox with groups, typeahead and hidden inputs that fire phx-change. Headless, with WAI-ARIA behavior and no styling.
- Semi Circle Progress HeadlessStatelessAccessible Half-circle gauge: a progressbar with an SVG arc computed at render time, no JavaScript. Unstyled; set shape to full for a ring, with a slot for the readout.
- Separator HeadlessStatelessAccessible Divider with role=separator and aria-orientation, or role=none when decorative. Headless, horizontal or vertical, with an optional label and no JavaScript.
- Slider HeadlessStatelessAccessibleJS Single or range thumbs with drag, arrow, Page and Home/End keys, collision rules and hidden form inputs. Headless, following the ARIA slider pattern.
- Sparkline HeadlessStatelessAccessible Inline trend chart as server-side SVG, no JavaScript. Unstyled line, area or bar types draw in currentColor, accept pinned min and max, and take an aria label.
- Splitter HeadlessStatelessAccessibleJS Two resizable panes with a draggable divider, moved by pointer or arrow keys with Home/End limits. Headless; the split is exposed as a CSS variable.
- Spoiler HeadlessStatelessAccessibleJS-module Headless spoiler for Phoenix LiveView: a Show more button flips data-expanded and aria-expanded with JS commands, no hook. You set the collapsed height in CSS.
- Stepper HeadlessStatelessAccessibleJS-module Ordered steps with complete, current and incomplete states derived from one active index. Headless; the current step gets aria-current, and steps can link.
- Switch HeadlessStatelessAccessibleJS On/off switch as a role=switch button with indeterminate, readonly and disabled states and a hidden checkbox for forms. Headless, so styling is up to you.
- Table HeadlessStatelessAccessibleJS-moduleJS Table semantics done for you: a hidden caption, header scope, aria-sort on sortable columns and a tri-state select-all checkbox. Headless and unstyled.
- Tabs HeadlessStatelessAccessibleJS Tabs with roving focus, activate-on-focus and an animated sliding indicator. Headless; control the active tab from LiveView with value and on_change.
- Tags Input HeadlessStatelessAccessibleJS-module Removable tokens plus a text field, with you owning the tags list. Unstyled; add by form submit or keydown, remove via on_remove, and tags submit as inputs.
- Text Input HeadlessStatelessAccessible Single-line input that takes its id, name, value and errors from a form field. Headless, with invalid and valid state and start and end sections for icons.
- Textarea HeadlessStatelessAccessibleJS Unstyled textarea for Phoenix LiveView forms. Optional autosize grows it between min and max rows, and errors appear only after the user has touched the field.
- Theme Controller HeadlessStatelessAccessibleJS Switch themes by setting data-theme on any target, remembered in localStorage and restored next visit. Headless, with native inputs and a system option.
- Theme Icon HeadlessStatelessAccessible Unstyled container that wraps an icon. It is decorative by default, and passing label gives it role=img with an aria-label. Size, color and shape are yours.
- Toast HeadlessStatelessAccessibleJS Stacking notification region: a polite aria-live viewport that expands on hover or focus and pauses auto-dismiss. Headless; add toasts from slots or a template.
- Toggle HeadlessStatelessAccessibleJS Headless two-state button with aria-pressed and data-pressed. An optional hidden checkbox submits it with forms, and on_change pushes the state to LiveView.
- Toggle Group HeadlessStatelessAccessibleJS Group of toggle buttons for single or multiple selection, with roving tabindex, looping arrow keys and hidden inputs that submit with forms. Headless, unstyled.
- Toolbar HeadlessStatelessAccessibleJS Headless toolbar with roving focus across buttons, links, inputs and labeled groups. Arrow keys follow orientation; disabled items stay focusable by default.
- Tooltip HeadlessStatelessAccessibleJS Popup shown on hover or focus, with anchored positioning, shared delay groups, optional cursor tracking and Escape to close. Headless, non-modal and unstyled.
- Tree HeadlessStatelessAccessibleJS Tree view built from nested maps, with expand and collapse, multi-select, cascading checkboxes, keyboard navigation, drag and drop and async loading. Headless.
- Tree Select HeadlessStatelessAccessibleJS-module Dropdown that shows a chosen label and opens a panel for your tree. Unstyled; it toggles with JS commands, no hook, and closes on outside click or Escape.
- Visually Hidden HeadlessStatelessAccessible Hide content from sight but keep it for screen readers. Headless, with inline styles that need no stylesheet, for extra labels and live text.