# basic-web-components

Small self-registering web components with native slots. One page per
component: a live example plus the full README reference.

## Components

- [bwc-accordion](./accordion.html) ([markdown](./accordion.md)): 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.
- [bwc-modal](./modal.html) ([markdown](./modal.md)): 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.
- [bwc-popover](./popover.html) ([markdown](./popover.md)): 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.
- [bwc-tooltip](./tooltip.html) ([markdown](./tooltip.md)): 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.
- [bwc-preview-card](./preview-card.html) ([markdown](./preview-card.md)): 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).
- [bwc-menu](./menu.html) ([markdown](./menu.md)): A floating menu anchored to a trigger button, built on the shared floating core (`src/floating`). Use it for action menus and dropdown commands.
- [bwc-context-menu](./context-menu.html) ([markdown](./context-menu.md)): 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`.
- [bwc-select](./select.html) ([markdown](./select.md)): 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.
- [bwc-switch](./switch.html) ([markdown](./switch.md)): 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.
- [bwc-otp](./otp.html) ([markdown](./otp.md)): 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.
- [bwc-tabs](./tabs.html) ([markdown](./tabs.md)): 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.
- [bwc-slide-out](./slide-out.html) ([markdown](./slide-out.md)): 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.
- [bwc-alert-dialog](./alert-dialog.html) ([markdown](./alert-dialog.md)): A centered confirmation dialog: a trigger button opens a `role="alertdialog"` popup. Use it when the user must confirm or dismiss before proceeding.
- [bwc-toast-region / bwc-toast](./toast.html) ([markdown](./toast.md)): 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.
- [bwc-menubar](./menubar.html) ([markdown](./menubar.md)): 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.
- [bwc-navigation-menu](./navigation-menu.html) ([markdown](./navigation-menu.md)): 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.

## Guides

- [Styling](./styling.html) ([markdown](./styling.md)): optional variable-driven default CSS or Tailwind and direct styling, with a live configurator.