{
  "$schema": "https://ui.shadcn.com/schema/registry.json",
  "name": "shadcn-htmx",
  "homepage": "https://github.com/productdevbook/shadcn-htmx",
  "items": [
    {
      "name": "utils",
      "type": "registry:lib",
      "title": "cn() utility",
      "description": "Minimal class-name joiner. Drop-in replacement for clsx in the small surface this library uses. JSX projects only."
    },
    {
      "name": "button",
      "type": "registry:ui",
      "title": "Button",
      "description": "A native <button> element with shadcn variants, sized for htmx v4. Ships in five flavours: Hono JSX (TypeScript), Jinja2 macro, Go html/template, Phoenix function component, and a raw HTML snippet. Follows the WAI-ARIA APG button pattern."
    },
    {
      "name": "input",
      "type": "registry:ui",
      "title": "Input",
      "description": "Native <input> with shadcn styling, sized for htmx live-validation patterns. Ships in five flavours."
    },
    {
      "name": "label",
      "type": "registry:ui",
      "title": "Label",
      "description": "Native <label> with shadcn polish — peer-disabled-aware, click-to-focus from the platform."
    },
    {
      "name": "checkbox",
      "type": "registry:ui",
      "title": "Checkbox",
      "description": "Native <input type=\"checkbox\"> with shadcn polish — peer-checked SVG indicator, indeterminate support, htmx-ready."
    },
    {
      "name": "dialog",
      "type": "registry:ui",
      "title": "Dialog",
      "description": "Native <dialog> + 30-line script. Focus trap, ESC, accessible modal — all from the platform. Backdrop click to close, X button, htmx-rendered variants."
    },
    {
      "name": "tabs",
      "type": "registry:ui",
      "title": "Tabs",
      "description": "WAI-ARIA tabs over real <button role=\"tab\">. Inline boot script eliminates first-paint flicker; keyboard contract (arrows/Home/End) lives in site.js."
    },
    {
      "name": "textarea",
      "type": "registry:ui",
      "title": "Textarea",
      "description": "Native <textarea> with shadcn polish + CSS field-sizing: content auto-resize. htmx autosave demo."
    },
    {
      "name": "switch",
      "type": "registry:ui",
      "title": "Switch",
      "description": "Native input role=\"switch\" styled as a sliding pill. Two sizes; htmx save-on-toggle pattern."
    },
    {
      "name": "radio-group",
      "type": "registry:ui",
      "title": "Radio Group",
      "description": "Native <input type=\"radio\"> grouped by name; arrow-key cycle from the platform, custom dot indicator on top."
    },
    {
      "name": "select",
      "type": "registry:ui",
      "title": "Select",
      "description": "Native <select> + chevron icon overlay. Browser-driven dropdown, type-to-search, mobile-native picker. htmx cascading select demo."
    },
    {
      "name": "card",
      "type": "registry:ui",
      "title": "Card",
      "description": "Structural container — Header / Title / Description / Action / Content / Footer slots. Pure layout primitive; pair with htmx for content swaps."
    },
    {
      "name": "badge",
      "type": "registry:ui",
      "title": "Badge",
      "description": "Small visual marker — status pill / counter / label. Six variants; renders as span (default) or anchor (with href)."
    },
    {
      "name": "separator",
      "type": "registry:ui",
      "title": "Separator",
      "description": "Horizontal or vertical divider. Decorative (visual only) or semantic (renders <hr> or role=\"separator\")."
    },
    {
      "name": "alert",
      "type": "registry:ui",
      "title": "Alert",
      "description": "Boxed informational / success / warning / error message. Five variants + live-region politeness (off / polite / assertive)."
    },
    {
      "name": "toast",
      "type": "registry:ui",
      "title": "Toast",
      "description": "Transient notifications. Fixed-position viewport + per-toast item with live-region politeness. Server-driven via htmx beforeend swap."
    },
    {
      "name": "tooltip",
      "type": "registry:ui",
      "title": "Tooltip",
      "description": "Short label on a control. CSS-only show on hover + focus; ESC to dismiss. APG-compliant tooltip pattern."
    },
    {
      "name": "accordion",
      "type": "registry:ui",
      "title": "Accordion",
      "description": "Collapsible stacked sections. Native <details>/<summary> + new HTML name attribute for zero-JS exclusive accordion. APG keyboard nav in site.js."
    },
    {
      "name": "avatar",
      "type": "registry:ui",
      "title": "Avatar",
      "description": "Round image with text/icon fallback. Native <img> + inline onerror handler reveals fallback on 404. Group + count subcomponents."
    },
    {
      "name": "popover",
      "type": "registry:ui",
      "title": "Popover",
      "description": "Native HTML Popover API. Light dismiss + ESC + top-layer + focus restoration handled by the browser."
    },
    {
      "name": "dropdown-menu",
      "type": "registry:ui",
      "title": "Dropdown Menu",
      "description": "Menu of actions from a button. Native Popover API + APG menu keyboard contract (arrows, Home/End, type-to-find)."
    },
    {
      "name": "progress",
      "type": "registry:ui",
      "title": "Progress",
      "description": "ARIA role=\"progressbar\" with valuemin/max/now. Omit value for indeterminate (animated stripe). htmx polling demo for live updates."
    },
    {
      "name": "skeleton",
      "type": "registry:ui",
      "title": "Skeleton",
      "description": "Pulsing placeholder for content that hasn't loaded yet. role=\"status\" + aria-busy; pairs with htmx outerHTML swap."
    },
    {
      "name": "slider",
      "type": "registry:ui",
      "title": "Slider",
      "description": "Native <input type=\"range\"> styled cross-browser. role=slider + ARIA value attrs + arrow/Home/End/PageUp-Down keyboard contract come from the platform."
    },
    {
      "name": "pagination",
      "type": "registry:ui",
      "title": "Pagination",
      "description": "Page navigation strip. <nav> landmark + aria-label + aria-current=\"page\" on the active link. Previous/Next have built-in aria-labels."
    },
    {
      "name": "table",
      "type": "registry:ui",
      "title": "Table",
      "description": "Semantic <table>/<thead>/<tbody>; sortable columns via aria-sort + clickable button inside <th>. Sort actions route through htmx."
    },
    {
      "name": "combobox",
      "type": "registry:ui",
      "title": "Combobox",
      "description": "Autocomplete text input. Native <datalist> variant (zero JS) + APG role=combobox + htmx-filtered listbox variant."
    },
    {
      "name": "meter",
      "type": "registry:ui",
      "title": "Meter",
      "description": "The native <meter> element (ARIA role=\"meter\") — a gauge of a value within a known range with low/high/optimum zoning. Cross-browser fill colors via the meter pseudo-elements; includes an htmx live-gauge demo."
    },
    {
      "name": "number-input",
      "type": "registry:ui",
      "title": "Number Input",
      "description": "Native <input type=\"number\"> styled like Input, with optional −/+ stepper buttons that call stepUp()/stepDown(). role=spinbutton, aria-valuenow/min/max, arrow-key stepping and value clamping all come from the platform. Ships in five flavours."
    },
    {
      "name": "breadcrumb",
      "type": "registry:ui",
      "title": "Breadcrumb",
      "description": "A native <nav> landmark wrapping an <ol> of links that shows the path to the current page; the current page is a plain <span aria-current=\"page\">, separators are aria-hidden. Zero JS. Ships in five flavours and follows the WAI-ARIA APG breadcrumb pattern."
    },
    {
      "name": "link",
      "type": "registry:ui",
      "title": "Link",
      "description": "A native <a href> with shadcn styling — default (underlined), muted, and hover-underline variants, plus an external treatment that opens a new tab, sets rel=\"noopener noreferrer\", and announces \"(opens in new tab)\"."
    },
    {
      "name": "collapsible",
      "type": "registry:ui",
      "title": "Collapsible",
      "description": "A single show/hide disclosure built on native <details>/<summary> — click, Space, or Enter toggle and the browser mirrors aria-expanded, all with zero JavaScript. A standalone disclosure, distinct from the grouped Accordion."
    },
    {
      "name": "alert-dialog",
      "type": "registry:ui",
      "title": "Alert Dialog",
      "description": "A modal that interrupts the user to confirm a consequential action. Native HTML <dialog> opened with showModal() and role=\"alertdialog\"; not light-dismissible — the user must choose Cancel or the confirming action."
    },
    {
      "name": "range-slider",
      "type": "registry:ui",
      "title": "Range Slider",
      "description": "A two-thumb range slider built from two overlaid native <input type=\"range\"> on one track, each form-submittable (name=min/max), with the platform-provided role=slider and arrow/Home/End/PageUp/Down keyboard contract."
    },
    {
      "name": "toolbar",
      "type": "registry:ui",
      "title": "Toolbar",
      "description": "A role=\"toolbar\" container that groups related controls (buttons, toggle buttons, separators) into a single tab stop with APG roving-tabindex arrow-key navigation. Ships ToolbarButton, ToolbarToggle, ToolbarSeparator, and ToolbarGroup subcomponents."
    },
    {
      "name": "listbox",
      "type": "registry:ui",
      "title": "Listbox",
      "description": "A scrollable single- or multi-select list built on role=\"listbox\" with role=\"option\" children, following the WAI-ARIA APG keyboard contract. A hidden input mirrors the selection so it submits like a normal form field."
    },
    {
      "name": "menubar",
      "type": "registry:ui",
      "title": "Menubar",
      "description": "A visually-persistent, app-style horizontal bar of menus built on the native Popover API and the WAI-ARIA menu/menubar keyboard contract (roving tabindex, arrow navigation, type-ahead, ESC)."
    },
    {
      "name": "tree",
      "type": "registry:ui",
      "title": "Tree",
      "description": "A hierarchical role=\"tree\" widget built from nested <ul>/<li> lists, where parent nodes carry aria-expanded and contain a nested role=\"group\". Ships Tree, TreeItem, and TreeGroup subcomponents with the full WAI-ARIA APG keyboard contract and roving tabindex wired in site.js."
    },
    {
      "name": "carousel",
      "type": "registry:ui",
      "title": "Carousel",
      "description": "A slideshow built on native CSS scroll-snap (snap-x mandatory; each slide snap-center). WAI-ARIA carousel/slide roles, real <button> prev/next that scroll by one slide; touch, trackpad and keyboard scrolling are the platform's."
    },
    {
      "name": "feed",
      "type": "registry:ui",
      "title": "Feed",
      "description": "A role=\"feed\" container of <article> items that loads more as the user scrolls (htmx infinite scroll via hx-trigger=\"revealed\"), following the WAI-ARIA APG Feed pattern. A structure, not a widget — screen readers stay in reading mode."
    },
    {
      "name": "grid",
      "type": "registry:ui",
      "title": "Grid",
      "description": "An interactive data grid built on a real <table role=\"grid\">: a single tab stop with 2-D arrow-key cell navigation (roving tabindex), Home/End to row ends, and Ctrl+Home/End to the grid corners."
    },
    {
      "name": "treegrid",
      "type": "registry:ui",
      "title": "Treegrid",
      "description": "A hierarchical data grid: role=\"treegrid\" rows expand and collapse like a tree (aria-expanded + aria-level) while cells navigate like a grid with the arrow keys. Built on a native HTML table, following the WAI-ARIA APG Treegrid pattern."
    },
    {
      "name": "splitter",
      "type": "registry:ui",
      "title": "Splitter",
      "description": "A resizable two-pane split whose divider is a focusable role=\"separator\" widget — drag it or use the arrow keys — driving a single CSS variable (--split) that sizes a grid track."
    },
    {
      "name": "landmarks",
      "type": "registry:ui",
      "title": "Landmarks",
      "description": "An accessible page-shell from the native HTML landmark elements (header, nav, search, main, aside, section, footer). Thin semantic wrappers that expose the matching ARIA landmark role, with aria-label/aria-labelledby where the APG Landmarks practice requires a unique name. Zero JS."
    },
    {
      "name": "form-field",
      "type": "registry:ui",
      "title": "Form Field",
      "description": "Field-row wrapper composing label + control slot + description + error, auto-wiring aria-describedby and aria-invalid, with a native :user-invalid styling hook. Includes a fieldset/legend group variant. Ships in five flavours; zero JS."
    },
    {
      "name": "file-upload",
      "type": "registry:ui",
      "title": "File Upload",
      "description": "Styled label-wrapped native <input type=\"file\"> with drag-and-drop, a filename/preview list, and a native <progress> bar. Submits via standard multipart POST. Ships in five flavours."
    },
    {
      "name": "copy-button",
      "type": "registry:ui",
      "title": "Copy Button",
      "description": "A native <button> that writes an associated string (snippet, API key, URL) to the clipboard with the Async Clipboard API, then flips to a transient aria-live \"Copied\" state. Progressive-enhancement fallback for non-secure contexts. Ships in five flavours: Hono JSX (TypeScript), Jinja2 macro, Go html/template, Phoenix function component, and a raw HTML snippet. Follows the WAI-ARIA APG button pattern."
    },
    {
      "name": "date-time-picker",
      "type": "registry:ui",
      "title": "Date Time Picker",
      "description": "Native <input type=\"date|time|datetime-local|month|week\"> family styled like Input, with min/max/step constraints and normalized machine-readable values. The browser supplies the calendar/clock picker, segment editing, locale-aware display and constraint validation — no JS calendar library. Ships in five flavours."
    },
    {
      "name": "sheet",
      "type": "registry:ui",
      "title": "Sheet",
      "description": "Edge-anchored slide-in drawer (left/right/top/bottom) built on the native <dialog> + showModal(): focus trap, ESC, ::backdrop and aria-modal from the platform. Light dismiss via the native closedby=\"any\" attribute. Reuses Dialog's trigger/close wiring — zero new JS — and can stream its body in via htmx."
    },
    {
      "name": "hover-card",
      "type": "registry:ui",
      "title": "Hover Card",
      "description": "A rich interactive preview surface revealed when the user shows interest in a trigger (hover, keyboard focus, or long-press) — the interactive-content primitive Tooltip explicitly defers to. Built entirely on the native Popover API interest-invoker mechanism: the trigger carries interestfor and the card is popover=\"hint\", so the browser owns hover/focus reveal, ESC dismissal, and implicit-anchor positioning with zero JavaScript. Progressive enhancement: in browsers without interest invokers the trigger stays a working link/button and the card (falling back to popover=\"manual\") simply doesn't appear."
    },
    {
      "name": "active-search",
      "type": "registry:ui",
      "title": "Active Search",
      "description": "A debounced live-search box (native <form role=\"search\"> + <input type=\"search\">) that filters an external results list/table as you type, with an inline loading indicator and stale-request cancellation. Submits as a normal GET search on Enter with zero JS."
    },
    {
      "name": "edit-in-place",
      "type": "registry:ui",
      "title": "Edit In Place",
      "description": "A read-only record view with an Edit affordance that swaps in a pre-filled form. Save issues a PUT and the server returns the updated view; Cancel re-fetches the view. The canonical htmx editable primitive — built entirely on outerHTML swaps over REST, no modal, no custom JS."
    },
    {
      "name": "load-more",
      "type": "registry:ui",
      "title": "Load More",
      "description": "A self-replacing pagination trigger. Click a button or scroll a sentinel into view; htmx appends the next page and swaps in a fresh trigger via hx-swap=\"outerHTML\". When the server omits the trigger, the chain ends. The click mode is a real <button> so it works without JavaScript."
    },
    {
      "name": "skip-link",
      "type": "registry:ui",
      "title": "Skip Link",
      "description": "A \"Skip to main content\" link: the first focusable element on the page, visually hidden until a keyboard user tabs to it, that jumps focus past the repeated banner/nav to the main landmark. A native <a href=\"#main\"> with a CSS focus reveal — zero JavaScript. Ships in five flavours: Hono JSX (TypeScript), Jinja2 macro, Go html/template, Phoenix function component, and a raw HTML snippet. Built on the WAI-ARIA APG Landmark Regions practice."
    },
    {
      "name": "theme-toggle",
      "type": "registry:ui",
      "title": "Theme Toggle",
      "description": "Light / dark / system colour-scheme switcher. Honours prefers-color-scheme by default and persists an explicit override in a cookie so the server re-renders the right theme with no flash. Rendered as a native radiogroup of three radios (system / light / dark). Ships in five flavours: Hono JSX (TypeScript), Jinja2 macro, Go html/template, Phoenix function component, and a self-contained HTML snippet. Built on the prefers-color-scheme media feature + color-scheme property + cookie persistence; follows the WAI-ARIA APG radio group pattern."
    },
    {
      "name": "output",
      "type": "registry:ui",
      "title": "Output",
      "description": "Live result region for the outcome of a calculation or server action. Renders the native <output> element (implicit role=\"status\", an aria-live=\"polite\" + aria-atomic=\"true\" region), tied to its inputs via the for attribute. htmx innerHTML swaps of its content are announced by assistive tech automatically — zero JS."
    },
    {
      "name": "segmented-control",
      "type": "registry:ui",
      "title": "Segmented Control",
      "description": "A compact, horizontally-joined set of mutually-exclusive options (List / Grid, Day / Week / Month) built on a native radio group — a <fieldset> wrapping <input type=\"radio\"> options that share a name, so arrow-key navigation and one-selected-at-a-time come from the platform with zero JS. Selects a value, not a panel. Ships in five flavours: Hono JSX (TypeScript), Jinja2 macro, Go html/template, Phoenix function component, and a raw HTML snippet."
    },
    {
      "name": "rating",
      "type": "registry:ui",
      "title": "Rating",
      "description": "A star/icon rating control built as a single-select radio group: one native <input type=\"radio\"> per star sharing a name, with per-star aria-label and a CSS-only hover preview. Submits a real value and works without JavaScript — the browser handles arrow-key navigation, focus, and one-at-a-time selection. Fill and hover preview come from rendering stars in reverse DOM order under flex-row-reverse so named-peer general-sibling selectors light the chosen star and every star to its visual left. Zero site.js."
    },
    {
      "name": "color-picker",
      "type": "registry:ui",
      "title": "Color Picker",
      "description": "A native <input type=\"color\"> styled as a shadcn swatch, with an optional live hex readout. The browser supplies the entire picker UI and guarantees a valid CSS color value — we only restyle the swatch and never parse colors ourselves."
    },
    {
      "name": "autosize-textarea",
      "type": "registry:ui",
      "title": "Autosize Textarea",
      "description": "Native <textarea> that grows/shrinks to fit its content between min/max bounds via the single CSS rule field-sizing: content — no scrollHeight JS hack. Degrades to a plain fixed field where unsupported; autosize={false} opts out to field-sizing: fixed. htmx autosave demo."
    },
    {
      "name": "cascading-select",
      "type": "registry:ui",
      "title": "Cascading Select",
      "description": "Two dependent native <select>s: choosing the parent reloads the child's <option>s — and an optional detail panel — from the server via an hx-swap-oob fragment. Cascade rides htmx's default `change` trigger on <select>; zero custom JS."
    },
    {
      "name": "selectable-table",
      "type": "registry:ui",
      "title": "Selectable Table",
      "description": "A data table with row checkboxes, a header select-all, a live selection count, and a contextual bulk-action bar revealed purely in CSS via :has(:checked). Each row is a native name=\"selected\" checkbox; bulk-action buttons hx-post the checked values and re-render the whole form."
    },
    {
      "name": "delete-row",
      "type": "registry:ui",
      "title": "Delete Row",
      "description": "A row/item delete affordance that confirms, sends DELETE, then fades out in place. One inherited declaration on the list host (hx-confirm:inherited / hx-target:inherited / hx-swap:inherited) covers every row, so each Delete button only needs hx-delete — no per-row wiring and no client-side list state. The server replies 200 with an empty body and the row simply disappears after a CSS opacity fade. Zero custom JS."
    },
    {
      "name": "optimistic-toggle",
      "type": "registry:ui",
      "title": "Optimistic Toggle",
      "description": "A server-backed action toggle (like, star, follow, pin) that flips appearance instantly via a native <template> of the toggled state, then reconciles with the server's HTML response — rolling back automatically on error. Built on a real <button> with aria-pressed and the htmx v4 hx-optimistic extension. Ships in five flavours: Hono JSX (TypeScript), Jinja2 macro, Go html/template, Phoenix function component, and a raw HTML snippet. Follows the WAI-ARIA APG button (toggle) pattern."
    },
    {
      "name": "status",
      "type": "registry:ui",
      "title": "Status",
      "description": "A persistent polite live-region announcer (role=status / role=log, aria-live=polite, aria-atomic) for non-urgent updates like \"Saved\" or \"3 results\" — the non-interruptive counterpart to Alert and Toast. Render it once and swap text in; assistive tech announces the change when the user is idle, without moving focus."
    },
    {
      "name": "split-button",
      "type": "registry:ui",
      "title": "Split Button",
      "description": "Primary action joined to a disclosure toggle that opens a popup of related secondary actions. Native Popover API + the APG menu keyboard contract (arrows, Home/End, type-to-find). Distinct from a dropdown menu — the main button has its own default action."
    },
    {
      "name": "lazy-load",
      "type": "registry:ui",
      "title": "Lazy Load",
      "description": "A deferred-content container that fetches its own contents after the page paints (hx-trigger=\"load\") and swaps them in, with a reserved-space placeholder to prevent layout shift (CLS). Pairs with Skeleton for slow dashboard panels and per-tab content. Zero JS of its own — htmx owns the request and the IntersectionObserver."
    },
    {
      "name": "sidebar",
      "type": "registry:ui",
      "title": "Sidebar",
      "description": "A responsive app-navigation sidebar: a fixed rail on wide screens that collapses to an off-canvas drawer behind a labelled hamburger on narrow screens. Nav links are real <a href> anchors and the open/close works without JavaScript — layout is CSS grid (grid-template-columns: minmax() 1fr) and the drawer toggles on the CSS :target pseudo-class."
    },
    {
      "name": "aspect-ratio",
      "type": "registry:ui",
      "title": "Aspect Ratio",
      "description": "A ratio-box wrapper that locks a child (image, video, iframe, embed, or chart slot) to a fixed width-to-height ratio while it resizes fluidly, eliminating layout shift. Built on the native CSS aspect-ratio property plus object-fit — one CSS declaration, zero JavaScript."
    },
    {
      "name": "auto-grid",
      "type": "registry:ui",
      "title": "Auto Grid",
      "description": "A responsive, intrinsically-wrapping grid of equal cells with no breakpoints. Children flow into as many columns as fit at a configurable minimum item width, then grow to share the leftover space — the card-grid recipe, built on CSS Grid's repeat(auto-fit, minmax()) (the RAM pattern). Pure CSS, zero JavaScript."
    },
    {
      "name": "kbd",
      "type": "registry:ui",
      "title": "Kbd",
      "description": "Inline keyboard-key badge — renders a native <kbd> for a single key, or nests one <kbd> per key inside an outer one for a shortcut like Ctrl + Shift + R. Zero JavaScript."
    },
    {
      "name": "highlight",
      "type": "registry:ui",
      "title": "Highlight",
      "description": "Semantic marker that wraps the words matching a search query in a native <mark>, the HTML element for text relevant to the user's current activity. Rendered entirely on the server, styled with theme tokens, zero client JS — drop it inside the fragment htmx swaps into a results list."
    },
    {
      "name": "relative-time",
      "type": "registry:ui",
      "title": "Relative Time",
      "description": "A semantic timestamp built on the native <time> element. The server renders a machine-readable instant in the datetime attribute and a human-readable label as the text; a tiny optional script re-localises the label to the visitor's locale and timezone via the Intl APIs and degrades to the server value with no JavaScript."
    },
    {
      "name": "figure",
      "type": "registry:ui",
      "title": "Figure",
      "description": "Self-contained, referenced content — an image, diagram, code block, or quotation — wrapped in a native <figure> whose <figcaption> supplies its accessible name. Distinct from a Card's generic surface: a figure stands apart from the main flow and can be moved without breaking it, and its caption is semantically tied to the content. Built on native <figure> + <figcaption>, zero JavaScript."
    },
    {
      "name": "responsive-image",
      "type": "registry:ui",
      "title": "Responsive Image",
      "description": "Art-directed, format-switching image built on native <picture> + <source> + a fallback <img>. The browser selects the best candidate by media and type queries (light/dark, AVIF/WebP/JPEG, viewport crops) and falls back to the <img> when none match — all natively, zero JS."
    },
    {
      "name": "media-player",
      "type": "registry:ui",
      "title": "Media Player",
      "description": "A styled native <video controls> / <audio controls> with multiple <source> formats, <track> captions, a poster, and aspect-ratio framing. The browser ships the entire accessible playback UI — play, scrub, volume, captions, fullscreen, Picture-in-Picture — so there are no custom controls and zero JavaScript."
    },
    {
      "name": "autocomplete",
      "type": "registry:ui",
      "title": "Autocomplete",
      "description": "Free-text input with native typeahead suggestions: <input list> bound to a <datalist>. The browser owns the dropdown, filtering, and selection; htmx can stream a fresh <option> set in on input. The light native sibling of the APG combobox — it suggests, it does not constrain."
    },
    {
      "name": "exclusive-accordion",
      "type": "registry:ui",
      "title": "Exclusive Accordion",
      "description": "Scriptless single-open accordion: multiple native <details> elements share one `name` attribute so opening one auto-closes the others — the pure-HTML exclusive variant of the APG-scripted accordion. Zero JavaScript; the exclusivity survives with JS disabled. Ships in five flavours: Hono JSX (TypeScript), Jinja2 macros, Go html/template, Phoenix function component, and a raw HTML snippet."
    },
    {
      "name": "scroll-area",
      "type": "registry:ui",
      "title": "Scroll Area",
      "description": "A constrained-overflow region with a themed native scrollbar and optional fade masks that appear only while more content can scroll into view. Scrolling is fully native (keyboard, wheel, trackpad, touch) with zero JavaScript — no Radix-style scrollbar reimplementation. The fade masks are driven purely by CSS @container scroll-state()."
    },
    {
      "name": "snap-list",
      "type": "registry:ui",
      "title": "Snap List",
      "description": "The bare, reusable CSS scroll-snapping rail (gallery strip, chip row, media shelf, date rail) — zero JavaScript. A real <ul role=\"list\"> scroll container with snap-x/snap-y + snap-mandatory/snap-proximity, and <li> children carrying scroll-snap-align (snap-start/center/end) and optional scroll-snap-stop:always. It is the un-opinionated scroller the Carousel dresses up with Prev/Next controls; the platform owns the scrolling and snapping."
    },
    {
      "name": "container-card",
      "type": "registry:ui",
      "title": "Container Card",
      "description": "A self-adapting card that restyles based on its own inline width, not the viewport. The same markup stacks media above text in a narrow column or sidebar and lays them side-by-side in a wide column or grid cell — built on CSS container queries (container-type: inline-size + @container). Pure CSS, zero JavaScript."
    },
    {
      "name": "sticky-header",
      "type": "registry:ui",
      "title": "Sticky Header",
      "description": "A page/section/table header that pins on scroll via position: sticky and visually reacts (shadow + solid background) the moment it becomes stuck, using a @container scroll-state(stuck: top) query — no IntersectionObserver sentinel, zero JS. The root is both the sticky element and the scroll-state query container; descendants opt into the stuck styling with data-sticky-revealed."
    },
    {
      "name": "scroll-progress",
      "type": "registry:ui",
      "title": "Scroll Progress",
      "description": "A reading-position bar whose fill tracks how far the user has scrolled the page (or a named scroller). Pure CSS scroll-driven animation (animation-timeline: scroll()) — zero JavaScript, no scroll listeners. Distinct from value-driven Progress."
    }
  ]
}