# basic-web-components

Static docs for the basic-web-components library (self-registering web
components with native slots). One page per component: a live example
plus the full README reference, rendered with syntax highlighting.
This file is auto-generated by `website/src/prerender.ts` on every
build — do not edit by hand.

## Pages

- [Overview](./index.html): component index and getting started. Markdown: ./index.md
- [bwc-accordion](./accordion.html): A collapsible section list built on native `<details>` elements. Use it for FAQs, settings groups, or any stacked disclosures where at most one (or, with `multiple`, several) panels stay open. Markdown: ./accordion.md
- [bwc-modal](./modal.html): A dialog overlay: a trigger button opens a native `<dialog>` popup with `showModal()`. Use it for confirmations, forms, or anything needing modal focus and backdrop dismissal. Markdown: ./modal.md
- [bwc-popover](./popover.html): A non-modal floating panel anchored to a trigger button, built on the native `popover` API. Use it for menus, tooltips with actions, or filters — anything that floats without trapping focus or locking scroll. Markdown: ./popover.md
- [bwc-tooltip](./tooltip.html): A non-modal hover tooltip anchored to any focusable trigger, built on the shared floating core (`src/floating`). Hovering or focusing the trigger opens it; leaving both surfaces, blurring, pressing Escape, or clicking the trigger closes it. Markdown: ./tooltip.md
- [bwc-preview-card](./preview-card.html): A non-modal link preview card anchored to an `a[href]` trigger, built on the shared floating core (`src/floating`). Hovering or focusing the link opens the card; leaving both surfaces, blurring, pressing Escape, or clicking the link closes it. The card stays open while the pointer rests on it (always hoverable). Markdown: ./preview-card.md
- [bwc-menu](./menu.html): A floating menu anchored to a trigger button, built on the shared floating core (`src/floating`). Use it for action menus and dropdown commands. Markdown: ./menu.md
- [bwc-context-menu](./context-menu.html): A floating menu that opens on `contextmenu` (right-click / long-press), anchored at the pointer by default. Built on the shared floating core (`src/floating`) with the same item model as `bwc-menu`. Markdown: ./context-menu.md
- [bwc-select](./select.html): A single-value select with a floating listbox, built on the shared floating core (`src/floating`). The trigger shows the selected label; options live in the popup. Markdown: ./select.md
- [bwc-switch](./switch.html): An on/off toggle. Unlike the other components it takes no author children: it generates its own `button` (with thumb) plus a hidden checkbox so the value submits with native forms. Use it for settings and preferences instead of a raw checkbox. Markdown: ./switch.md
- [bwc-otp](./otp.html): A one-time-code input: `length` single-character fields plus one hidden input so the code submits with native forms. Like switch it takes no author children — fields are generated. Use it for verification / 2FA codes. Markdown: ./otp.md
- [bwc-tabs](./tabs.html): A tabbed interface: a button list plus matched panels, one visible at a time. Use it for settings pages, multi-view panels, or wizard steps where only one view shows. Markdown: ./tabs.md
- [bwc-slide-out](./slide-out.html): Non-modal drawer panel sliding in from the viewport edge, with a shadow-DOM dismiss overlay, Escape dismissal, and focus management. Built for navigation menus and side panels that must not trap focus like a modal dialog. Markdown: ./slide-out.md
- [bwc-alert-dialog](./alert-dialog.html): A centered confirmation dialog: a trigger button opens a `role="alertdialog"` popup. Use it when the user must confirm or dismiss before proceeding. Markdown: ./alert-dialog.md
- [bwc-toast-region / bwc-toast](./toast.html): Toast notifications: `bwc-toast-region` is the viewport that owns stacking and queueing; `bwc-toast` is one notification with an auto-dismiss timer that pauses on hover/focus. Markdown: ./toast.md
- [bwc-menubar](./menubar.html): A horizontal bar of top-level menus, built on `bwc-menu` (`src/menu`). The bar itself is a coordinator with no open state of its own: each child `bwc-menu` owns its open state through its public API (`show()` / `close()` / `toggle()`, the `open` property, and `open-change` events), and the menubar adds roving focus, hover/focus switching, and a single-open invariant on top. Markdown: ./menubar.md
- [bwc-navigation-menu](./navigation-menu.html): Site navigation with hover/focus-driven content panels, built on the shared floating core (`src/floating`). Triggers and panels are light-DOM pairs linked by `data-value`; at most one panel is open at a time. Markdown: ./navigation-menu.md
- [Styling](./styling.html): optional variable-driven default CSS or Tailwind and direct styling, with a live configurator. Markdown: ./styling.md

## Markdown sources

- [Overview markdown](./index.md)
- [bwc-accordion markdown](./accordion.md)
- [bwc-modal markdown](./modal.md)
- [bwc-popover markdown](./popover.md)
- [bwc-tooltip markdown](./tooltip.md)
- [bwc-preview-card markdown](./preview-card.md)
- [bwc-menu markdown](./menu.md)
- [bwc-context-menu markdown](./context-menu.md)
- [bwc-select markdown](./select.md)
- [bwc-switch markdown](./switch.md)
- [bwc-otp markdown](./otp.md)
- [bwc-tabs markdown](./tabs.md)
- [bwc-slide-out markdown](./slide-out.md)
- [bwc-alert-dialog markdown](./alert-dialog.md)
- [bwc-toast-region / bwc-toast markdown](./toast.md)
- [bwc-menubar markdown](./menubar.md)
- [bwc-navigation-menu markdown](./navigation-menu.md)
- [Styling markdown](./styling.md)