### Basecoat Table Styling

Source: https://context7_llms

Provides examples of Basecoat's CSS for styling HTML tables. It covers basic table styling and an option for striped rows to improve readability.

```html
<table class="table">
  <!-- Table content -->
</table>

<table class="table table-striped">
  <!-- Striped table content -->
</table>
```

--------------------------------

### Basecoat CDN Installation

Source: https://context7_llms

Provides instructions for using Basecoat via CDN, including linking the CSS file and including the JavaScript bundle. The script tag uses the 'defer' attribute for asynchronous loading.

```html
<link href="https://cdn.jsdelivr.net/npm/basecoat-css@latest/dist/basecoat.cdn.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/basecoat-css@latest/dist/js/all.min.js" defer></script>
```

--------------------------------

### Install Basecoat CSS in a Tailwind Project

Source: https://context7_llms

Instructions for installing the basecoat-css package in a project that already uses Tailwind CSS. This involves adding the package via npm and importing the necessary CSS files.

```bash
npm i basecoat-css
```

```css
@import "tailwindcss";
@import "basecoat-css";
```

--------------------------------

### Basecoat Button Styling

Source: https://context7_llms

Example of applying Basecoat's CSS classes to create styled buttons. It demonstrates base styling and variations for secondary buttons, as well as size modifiers.

```html
<button class="btn">Default Button</button>
<button class="btn btn-secondary">Secondary Button</button>
<button class="btn btn-sm">Small Button</button>
<button class="btn btn-lg">Large Button</button>
```

--------------------------------

### Basecoat Card Component Structure

Source: https://context7_llms

Example of the HTML structure for a Basecoat Card component. It includes slots for a header, main content section, and footer, allowing for flexible content arrangement.

```html
<div class="card">
  <div class="card-header">Card Header</div>
  <div class="card-section">Card Content</div>
  <div class="card-footer">Card Footer</div>
</div>
```

--------------------------------

### Manual Basecoat JavaScript Initialization

Source: https://context7_llms

Shows how to manually re-initialize Basecoat's JavaScript functionality. This can be done for specific components or for all components on the page.

```javascript
window.basecoat.init('tabs');
window.basecoat.initAll();
```

--------------------------------

### Keyboard Key Visual Component (CSS)

Source: https://context7_llms

Styles elements to visually represent keyboard keys. Uses the `kbd` class for styling.

```html
<kbd class="kbd">⌘K</kbd>
```

--------------------------------

### Basecoat Alert Component Usage

Source: https://context7_llms

Example of using the Basecoat alert component. It requires the 'alert' class and can optionally use 'alert-destructive' for specific contexts. The component is semantically marked with 'role="alert"'.

```html
<div role="alert" class="alert">{CONTENT}</div>
```

--------------------------------

### Manual JavaScript Initialization for Basecoat Components

Source: https://context7_llms

Demonstrates how to manually initialize Basecoat components using its JavaScript API. This is useful for initializing specific components or all components after dynamic content has been loaded.

```javascript
window.basecoat.init('<name>');
window.basecoat.initAll();
```

--------------------------------

### Basecoat Dialog Styling (CSS/Native)

Source: https://context7_llms

Demonstrates how to style the native HTML `<dialog>` element using Basecoat's CSS. It also shows a variant for integrating with the Command component.

```html
<dialog class="dialog">
  <!-- Dialog content -->
</dialog>

<dialog class="command-dialog">
  <!-- Command component within a dialog -->
</dialog>
```

--------------------------------

### Label Component (CSS)

Source: https://context7_llms

Styles form labels. Applied to native `<label>` elements with the `label` class.

```html
<label class="label" for="{id}">{TEXT}</label>
```

--------------------------------

### Import Basecoat Components with ESM

Source: https://context7_llms

Shows how to import specific Basecoat components or all components into a project using ECMAScript Modules (ESM). This approach is common in modern JavaScript development.

```javascript
import 'basecoat-css/all';
import 'basecoat-css/tabs';
```

--------------------------------

### Table Component (CSS)

Source: https://context7_llms

Provides styling for HTML tables. Applies the `table` class to the `<table>` element.

```html
<table class="table">{ROWS}</table>
```

--------------------------------

### Basecoat Button Group Component Usage

Source: https://context7_llms

Example of the Basecoat button group component, which groups adjacent buttons. It uses the 'button-group' class and can be oriented horizontally or vertically using 'data-orientation'.

```html
<div class="button-group" data-orientation="{horizontal|vertical}">{BUTTONS}</div>
```

--------------------------------

### Basecoat Component Initialization Event

Source: https://context7_llms

This event is emitted by Basecoat components after they have been successfully initialized. It can be used to perform actions or apply further configurations to the component.

```javascript
componentRoot.addEventListener('basecoat:initialized', () => {
  // Component has been initialized
});
```

--------------------------------

### Sidebar Component (JavaScript)

Source: https://context7_llms

A collapsible navigation sidebar component. Requires JavaScript and uses `aria-current='page'` for active link styling.

```javascript
// No specific HTML syntax provided, but JS handles functionality.
```

--------------------------------

### Basecoat Alert Styling

Source: https://context7_llms

Shows how to apply Basecoat's CSS classes to create contextual alert banners. These are useful for displaying informational messages, warnings, or success notifications.

```html
<div class="alert alert-info">Information message.</div>
<div class="alert alert-warning">Warning message.</div>
```

--------------------------------

### Dialog and Drawer Variants (CSS/JS-lite)

Source: https://context7_llms

Patterns for dialog and drawer interfaces built on native elements and styled by Basecoat. Uses wrapper class `command-dialog` for Command palette in a dialog. Encourages use of native `<dialog>` or popover attributes.

```html
<!-- Example using native dialog -->
<dialog class="command-dialog">
  <!-- Content -->
</dialog>
```

--------------------------------

### Textarea Component (CSS)

Source: https://context7_llms

Styles multiline text input fields. Applies the `textarea` class to the `<textarea>` element.

```html
<textarea class="textarea" rows="{n}"></textarea>
```

--------------------------------

### Tabs Component (JavaScript)

Source: https://context7_llms

Implements a tabbed interface with keyboard navigation. Requires JavaScript and manages `aria-controls` and `aria-selected` attributes for accessibility.

```html
<div class="tabs">
  <div role="tablist">
    <button role="tab" aria-controls="panel-1" aria-selected="true" tabindex="0">Tab 1</button>
    <button role="tab" aria-controls="panel-2" aria-selected="false" tabindex="-1">Tab 2</button>
  </div>
  <section id="panel-1" role="tabpanel">...</section>
  <section id="panel-2" role="tabpanel" hidden>...</section>
</div>
```

--------------------------------

### Dropdown Menu Component (JavaScript)

Source: https://context7_llms

Creates a contextual menu triggered by a button. Requires JavaScript and utilizes `basecoat:popover` for coordination. It consists of a trigger button and a menu section.

```html
<div class="dropdown-menu">
  <button type="button">{TRIGGER}</button>
  <div role="menu"> <button role="menuitem">{ITEM}</button> </div>
</div>
```

--------------------------------

### Basecoat Input Field Styling

Source: https://context7_llms

Shows how to use Basecoat's CSS classes for styling input fields, labels, and their associated wrappers. This promotes consistent form design across the application.

```html
<div class="field">
  <label class="label" for="name">Name</label>
  <input class="input" type="text" id="name" name="name">
</div>
```

--------------------------------

### Include Basecoat via CDN

Source: https://context7_llms

How to include Basecoat's CSS and JavaScript files directly in an HTML document using CDN links. This method is suitable for projects not using a build system or for quick prototyping.

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/basecoat-css@latest/dist/basecoat.cdn.min.css">
<script src="https://cdn.jsdelivr.net/npm/basecoat-css@latest/dist/js/all.min.js" defer></script>
```

--------------------------------

### Switch Component (CSS)

Source: https://context7_llms

Styles a switch using a checkbox input with `role='switch'`. Uses the `.input[type='checkbox'][role='switch']` selector.

```html
<input type="checkbox" role="switch" class="input" />
```

--------------------------------

### Basecoat Toast Notification Event

Source: https://context7_llms

Illustrates how to trigger a toast notification in Basecoat by dispatching a custom event. The event payload includes configuration details for the toast message.

```javascript
document.addEventListener('basecoat:toast', ({ detail: { config } }) => {
  // Handle toast configuration
});
```

--------------------------------

### Command Palette Component (JavaScript)

Source: https://context7_llms

Implements a command palette with search and results functionality. Requires JavaScript and supports keyboard navigation. Disabled items should use `aria-disabled='true'` or `disabled` attributes.

```html
<div class="command">
  <header><input type="text" placeholder="Search" /></header>
  <div role="menu">
    <button role="menuitem">{ITEM}</button>
  </div>
</div>
```

--------------------------------

### Import Basecoat CSS and JS

Source: https://context7_llms

Demonstrates how to import Basecoat's CSS and JavaScript modules. CSS is imported after Tailwind CSS. JavaScript can be imported globally or cherry-picked for specific components using ESM.

```css
@import "tailwindcss";
@import "basecoat-css";
```

```javascript
import 'basecoat-css/all';
// or cherry-pick
import 'basecoat-css/tabs';
import 'basecoat-css/select';
import 'basecoat-css/popover';
import 'basecoat-css/dropdown-menu';
import 'basecoat-css/sidebar';
import 'basecoat-css/toast';
```

--------------------------------

### Basecoat Card Component Usage

Source: https://context7_llms

Demonstrates the Basecoat card component, providing a container for content with optional header, section, and footer parts. It uses the 'card' class and semantic HTML elements for structure.

```html
<article class="card">
  <header><h2>{TITLE}</h2><p>{SUBTITLE}</p></header>
  <section>{CONTENT}</section>
  <footer>{ACTIONS}</footer>
</article>
```

--------------------------------

### Basecoat Avatar Component Usage

Source: https://context7_llms

Demonstrates the Basecoat avatar component, which displays a user's thumbnail. It requires the 'avatar' class and an 'img' tag with appropriate 'src' and 'alt' attributes.

```html
<div class="avatar"><img src="{image-url}" alt="{alt}" /></div>
```

--------------------------------

### Basecoat Badge Component Usage

Source: https://context7_llms

Illustrates the Basecoat badge component for displaying statuses or counts. It uses the 'badge' class and supports modifiers like 'badge-outline' and 'badge-destructive'.

```html
<span class="badge {MODIFIER}">{TEXT}</span>
```

--------------------------------

### Popover Component (JavaScript)

Source: https://context7_llms

Implements a small overlay anchored to a trigger element. Requires JavaScript and manages `aria-hidden` and `aria-expanded` attributes for accessibility and state management.

```html
<div class="popover">
  <button type="button">{TRIGGER}</button>
  <section data-popover aria-hidden="true">{CONTENT}</section>
</div>
```

--------------------------------

### Radio Group Component (CSS)

Source: https://context7_llms

Styles native radio input elements. Uses the `.input[type='radio']` selector for styling, typically within a `<label>` element.

```html
<label><input type="radio" class="input" name="{name}" /> {LABEL}</label>
```

--------------------------------

### Input Field Component (CSS)

Source: https://context7_llms

Provides styling for text input fields. Applied to native `<input>` elements with the class `input`. Can be paired with `.label` and `.field` for better form structure.

```html
<input type="text" class="input" placeholder="{Placeholder}" />
```

--------------------------------

### Basecoat Checkbox Component Usage (CSS)

Source: https://context7_llms

Shows the Basecoat styling for native checkboxes using the '.input[type=\'checkbox\']:not([role=\'switch\'])' selector. It requires pairing with a 'label' element for accessibility.

```html
<input type="checkbox" class="input" />
```

--------------------------------

### Select Component (JavaScript)

Source: https://context7_llms

A custom select component featuring a searchable popover and listbox. Requires JavaScript and dispatches a `change` event. Disabled options use `aria-disabled='true'`.

```html
<div class="select">
  <button type="button" aria-expanded="false"><span>{LABEL}</span></button>
  <input type="hidden" name="{name}" value="{value}" />
  <section data-popover aria-hidden="true">
    <header><input type="text" placeholder="Filter" /></header>
    <div role="listbox">
      <div role="option" data-value="{value}" data-label="{label}">{label}</div>
    </div>
  </section>
</div>
```

--------------------------------

### Basecoat Select Component Structure (JS)

Source: https://context7_llms

HTML structure for a Basecoat JavaScript-enhanced Select component. It requires specific roles and attributes for its trigger button, popover content, and list options.

```html
<div class="select">
  <button type="button" aria-haspopup="listbox" aria-expanded="false">...</button>
  <div role="listbox" aria-hidden="true">
    <div role="option">Option 1</div>
    <div role="option">Option 2</div>
  </div>
</div>
```

--------------------------------

### Toast Notification Component (JavaScript)

Source: https://context7_llms

Manages global notification toasts. Requires JavaScript and uses a container with the ID `#toaster`. Toasts are displayed via custom events.

```html
<section id="toaster"></section>
```

```javascript
document.dispatchEvent(new CustomEvent('basecoat:toast', { detail: { config: { title: 'Saved', description: 'Changes persisted', category: 'success' } } }))
```

--------------------------------

### Basecoat Button Component Usage

Source: https://context7_llms

Shows the Basecoat button component ('btn') with various style and size modifiers. It supports states like disabled and toggle buttons using standard HTML attributes.

```html
<button class="btn {MODIFIER}">{CONTENT}</button>
```

--------------------------------

### Basecoat Tabs Component Structure (JS)

Source: https://context7_llms

HTML markup for Basecoat's Tabs component, which uses ARIA roles for tabs and tab panels. Keyboard navigation is handled by the JavaScript, allowing users to switch between tabs using arrow keys.

```html
<div class="tabs">
  <div role="tablist" aria-label="Tab Navigation">
    <button role="tab" aria-selected="true" aria-controls="panel-1">Tab 1</button>
    <button role="tab" aria-selected="false" aria-controls="panel-2">Tab 2</button>
  </div>
  <div id="panel-1" role="tabpanel">Content for Tab 1</div>
  <div id="panel-2" role="tabpanel" hidden>Content for Tab 2</div>
</div>
```

--------------------------------

### Basecoat Popover Coordination Event

Source: https://context7_llms

A document-level event used by Basecoat to coordinate popovers, ensuring that only one popover is active at a time. This helps manage UI state and prevent overlapping interactive elements.

```javascript
document.addEventListener('basecoat:popover', () => {
  // Handle popover coordination
});
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.