### Multilevel Nav Menu Example

Source: https://github.com/matraic/m3e/blob/main/packages/web/src/nav-menu/README.md

Demonstrates a nested navigation menu structure. The 'Getting Started' item is initially open, showcasing expandable sub-items.

```html
<m3e-nav-menu>
  <m3e-nav-menu-item open>
    <m3e-icon slot="icon" name="rocket_launch"></m3e-icon>
    <span slot="label">Getting Started</span>
    <m3e-nav-menu-item>
      <m3e-icon slot="icon" name="widgets"></m3e-icon>
      <span slot="label">Overview</span>
    </m3e-nav-menu-item>
    <m3e-nav-menu-item>
      <m3e-icon slot="icon" name="package_2"></m3e-icon>
      <span slot="label">Installation</span>
    </m3e-nav-menu-item>
  </m3e-nav-menu-item>
  <m3e-nav-menu-item>
    <span slot="label">Actions</span>
    <m3e-nav-menu-item><span slot="label">Button</span></m3e-nav-menu-item>
    <m3e-nav-menu-item><span slot="label">Icon</span></m3e-nav-menu-item>
    <m3e-nav-menu-item><span slot="label">Icon Button</span></m3e-nav-menu-item>
  </m3e-nav-menu-item>
</m3e-nav-menu>
```

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

### Basic Drawer Layout Example

Source: https://github.com/matraic/m3e/blob/main/packages/web/src/drawer-container/README.md

Illustrates a standard layout with start and end drawers alongside main content.

```html
<m3e-drawer-container>
  <nav slot="start">
    <!-- Start drawer content -->
  </nav>
  <main>
    <!-- Main content -->
  </main>
  <aside slot="end">
    <!-- End drawer content -->
  </aside>
</m3e-drawer-container>
```

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

### Install Dependencies

Source: https://github.com/matraic/m3e/blob/main/README.md

Run this command after cloning the repository to install all necessary project dependencies.

```bash
npm install
```

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

### Basic Split Pane Usage

Source: https://github.com/matraic/m3e/blob/main/docs/components/split-pane.html

Demonstrates the basic setup of the m3e-split-pane with 'start' and 'end' slots. The 'value' attribute controls the initial size distribution.

```html
<m3e-split-pane value="50">
  <m3e-card slot="start"></m3e-card>
  <m3e-card slot="end"></m3e-card>
</m3e-split-pane>
```

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

### Install Commit Preview Build

Source: https://github.com/matraic/m3e/blob/main/README.md

Installs a preview build of M3E packages for a specific commit SHA.

```bash
npm install pkg.pr.new/matraic/m3e/commit/<COMMIT_SHA>
```

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

### Basic Dialog Example

Source: https://github.com/matraic/m3e/blob/main/packages/web/src/dialog/README.md

Illustrates a dialog with a header, content, and actions. Use m3e-dialog-trigger to open the dialog.

```html
<m3e-button variant="filled">
  <m3e-dialog-trigger for="dlg">Open Dialog</m3e-dialog-trigger>
</m3e-button>
<m3e-dialog id="dlg" dismissible onclosed="console.log(this.returnValue)">
  <span slot="header">Dialog Title</span>
  Dialog content goes here.
  <div slot="actions" end>
    <m3e-button autofocus><m3e-dialog-action return-value="ok">Close</m3e-dialog-action></m3e-button>
  </div>
</m3e-dialog>
```

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

### Install Pull Request Preview Build

Source: https://github.com/matraic/m3e/blob/main/README.md

Installs a preview build of M3E packages for a specific pull request number.

```bash
npm install pkg.pr.new/matraic/m3e/pull/<PR_NUMBER>
```

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

### Install M3E Web Package

Source: https://github.com/matraic/m3e/blob/main/README.md

Installs the core M3E Web Components package using npm.

```bash
npm install @m3e/web
```

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

### Native Module Support

Source: https://github.com/matraic/m3e/blob/main/docs/components/slider.html

Example of how to use the @m3e/web package directly in a browser using a module script, without a bundler.

```html
<script type="module">
  import "https://cdn.jsdelivr.net/npm/@m3e/web@2.5.7/dist/slider.min.js";
</script>
```

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

### Install M3E React Package

Source: https://github.com/matraic/m3e/blob/main/README.md

Installs the React bindings for M3E Web Components using npm.

```bash
npm install @m3e/react
```

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

### Basic App Bar Usage

Source: https://github.com/matraic/m3e/blob/main/docs/components/app-bar.html

A basic example of an app bar with leading, title, subtitle, and trailing slots.

```html
<m3e-app-bar>
  <m3e-icon-button slot="leading" aria-label="Back">
    <m3e-icon name="arrow_back"></m3e-icon>
  </m3e-icon-button>
  <span slot="title">Top 10 hiking trails</span>
  <span slot="subtitle">Discover popular trails</span>
  <m3e-icon-button slot="trailing" aria-label="Bookmark" variant="tonal">
    <m3e-icon name="bookmark" filled></m3e-icon>
  </m3e-icon-button>
</m3e-app-bar>
```

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

### Basic Expansion Panel Accordion Example

Source: https://github.com/matraic/m3e/blob/main/packages/web/src/expansion-panel/README.md

Demonstrates the basic usage of `m3e-accordion` to group `m3e-expansion-panel` components. Each panel has a header and content.

```html
<m3e-accordion>
  <m3e-expansion-panel>
    <span slot="header">Panel 1</span>
    I am content for the first expansion panel
  </m3e-expansion-panel>
  <m3e-expansion-panel>
    <span slot="header">Panel 2</span>
    I am content for the second expansion panel
  </m3e-expansion-panel>
</m3e-accordion>
```

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

### Drawer Container with Push Mode

Source: https://github.com/matraic/m3e/blob/main/docs/components/drawer-container.html

Configures the start drawer to use the 'push' mode, where it shifts the main content when opened.

```html
<m3e-drawer-container start start-mode="push">
  <div slot="start">Start drawer</div>
  <div>Main content</div>
</m3e-drawer-container>
```

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

### Install M3E Web Components via npm

Source: https://github.com/matraic/m3e/blob/main/docs/getting-started/installation.html

Install the M3E Web Component library using npm. This is the primary method for adding M3E components to your project.

```bash
npm i @m3e/web
```

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

### Basic Navigation Bar Example

Source: https://github.com/matraic/m3e/blob/main/packages/web/src/nav-bar/README.md

Demonstrates a basic usage of the m3e-nav-bar with multiple m3e-nav-item elements, each featuring an icon and text.

```html
<m3e-nav-bar>
  <m3e-nav-item><m3e-icon slot="icon" name="news"></m3e-icon>News</m3e-nav-item>
  <m3e-nav-item><m3e-icon slot="icon" name="globe"></m3e-icon>Global</m3e-nav-item>
  <m3e-nav-item><m3e-icon slot="icon" name="star"></m3e-icon>For you</m3e-nav-item>
  <m3e-nav-item><m3e-icon slot="icon" name="newsstand"></m3e-icon>Trending</m3e-nav-item>
</m3e-nav-bar>
```

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

### Basic Actionable Card Example

Source: https://github.com/matraic/m3e/blob/main/docs/components/card.html

An example of a basic actionable M3E card linking to Google. Actionable cards are given ARIA role="button" by default.

```html
<m3e-card actionable href="https://www.google.com" target="_blank">
  <div slot="content">Google</div>
</m3e-card>
```

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

### Native Module Import

Source: https://github.com/matraic/m3e/blob/main/docs/components/divider.html

Example of importing the m3e-divider component using a native module script.

```html
<script type="module" src="/node_modules/@m3e/web/dist/divider.js"></script>
```

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

### Basic Radio Group Example

Source: https://github.com/matraic/m3e/blob/main/packages/web/src/radio-group/README.md

Demonstrates the basic usage of m3e-radio-group and m3e-radio to create a selectable list of options.

```html
<label for="rdg1">Radio group</label>
<br />
<m3e-radio-group id="rdg1">
  <label><m3e-radio value="1"></m3e-radio> Value 1</label>
  <label><m3e-radio value="2"></m3e-radio> Value 2</label>
  <label><m3e-radio value="3"></m3e-radio> Value 3</label>
  <label><m3e-radio value="4"></m3e-radio> Value 4</label>
</m3e-radio-group>
```

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

### Basic M3E Select Example

Source: https://github.com/matraic/m3e/blob/main/docs/components/select.html

A simple M3E select component with a label and options. This is a foundational example for basic usage.

```html
<m3e-form-field>
  <label slot="label" for="select">Favorite fruit</label>
  <m3e-select id="select">
    <m3e-option disabled>Apples</m3e-option>
    <!-- Additional option groups omitted for brevity -->
  </m3e-select>
</m3e-form-field>
```

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

### Install M3E Icons Package

Source: https://github.com/matraic/m3e/blob/main/README.md

Installs the M3E Icons package using npm.

```bash
npm install @m3e/icons
```

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

### FAB Menu Example

Source: https://github.com/matraic/m3e/blob/main/packages/web/src/fab-menu/README.md

Illustrates triggering a m3e-fab-menu from an m3e-fab using a m3e-fab-menu-trigger. The menu contains several m3e-fab-menu-item elements.

```html
<m3e-fab variant="primary" size="large">
  <m3e-fab-menu-trigger for="fabmenu">
    <m3e-icon name="edit"></m3e-icon>
  </m3e-fab-menu-trigger>
</m3e-fab>
<m3e-fab-menu id="fabmenu" variant="secondary">
  <m3e-fab-menu-item>First</m3e-fab-menu-item>
  <m3e-fab-menu-item>Second</m3e-fab-menu-item>
  <m3e-fab-menu-item>Third</m3e-fab-menu-item>
  <m3e-fab-menu-item>Forth</m3e-fab-menu-item>
  <m3e-fab-menu-item>Fifth</m3e-fab-menu-item>
  <m3e-fab-menu-item>Sixth</m3e-fab-menu-item>
</m3e-fab-menu>
```

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

### Simple M3E Tree Example

Source: https://github.com/matraic/m3e/blob/main/packages/web/src/tree/README.md

Demonstrates a basic tree structure with nested items. Use the 'open' attribute to initially expand an item.

```html
<m3e-tree>
  <m3e-tree-item open>
    <span slot="label">Getting Started</span>
    <m3e-tree-item>
      <span slot="label">Overview</span>
    </m3e-tree-item>
    <m3e-tree-item>
      <span slot="label">Installation</span>
    </m3e-tree-item>
  </m3e-tree-item>
  <m3e-tree-item>
    <span slot="label">Components</span>
    <m3e-tree-item>
      <span slot="label">Button</span>
    </m3e-tree-item>
    <m3e-tree-item>
      <span slot="label">Card</span>
    </m3e-tree-item>
  </m3e-tree-item>
</m3e-tree>
```

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

### Nested Split Panes Example

Source: https://github.com/matraic/m3e/blob/main/docs/components/split-pane.html

Demonstrates how to nest M3E split panes to create complex, multi-pane layouts. This example shows a primary split pane with a nested vertical split pane.

```html
<m3e-split-pane value="25" class="complex">
  <m3e-card slot="start"></m3e-card>
  <m3e-split-pane slot="end" value="50" orientation="vertical">
    <m3e-card slot="start"></m3e-card>
    <m3e-card slot="end"></m3e-card>
  </m3e-split-pane>
</m3e-split-pane>
```

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

### Basic Paginator Example

Source: https://github.com/matraic/m3e/blob/main/packages/web/src/paginator/README.md

Illustrates the basic usage of the m3e-paginator component with a total length of 300 items and showing first/last buttons.

```html
<m3e-paginator show-first-last-buttons length="300"></m3e-paginator>
```

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

### Basic Drawer Container Usage

Source: https://github.com/matraic/m3e/blob/main/docs/components/drawer-container.html

Demonstrates the basic structure of the m3e-drawer-container with start and end drawers, and main content.

```html
<m3e-drawer-container start end>
  <div slot="start">Start drawer</div>
  <div>Main content</div>
  <div slot="end">End drawer</div>
</m3e-drawer-container>
```

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

### Drawer Container with Over Mode

Source: https://github.com/matraic/m3e/blob/main/docs/components/drawer-container.html

Configures the start drawer to use the 'over' mode, where it overlays the main content without displacement.

```html
<m3e-drawer-container start start-mode="over">
  <div slot="start">Start drawer</div>
  <div>Main content</div>
</m3e-drawer-container>
```

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

### Linear Stepper Example

Source: https://github.com/matraic/m3e/blob/main/docs/components/stepper.html

Demonstrates a linear stepper where users must complete previous steps before proceeding. Steps can be marked as editable to allow backward navigation.

```html
<m3e-stepper linear>
  <m3e-step for="step1" editable>Fill out your name</m3e-step>
  <m3e-step for="step2" editable>Fill out your address</m3e-step>
  <m3e-step for="step3">Done</m3e-step>
  <!-- Content omitted for brevity -->
</m3e-stepper>
```

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

### Drawer Toggle with IconButton

Source: https://github.com/matraic/m3e/blob/main/packages/web/src/drawer-container/README.md

Shows how to use m3e-drawer-toggle within an m3e-icon-button to control the start drawer's visibility.

```html
<m3e-icon-button slot="leading-icon" aria-label="Menu" toggle selected>
  <m3e-drawer-toggle for="startDrawer"></m3e-drawer-toggle>
  <m3e-icon name="menu"></m3e-icon>
  <m3e-icon slot="selected" name="menu_open"></m3e-icon>
</m3e-icon-button>

<m3e-drawer-container start>
  <nav slot="start" id="startDrawer" aria-label="Navigation">
    <!-- Start drawer content -->
  </nav>
  <!-- Container content -->
</m3e-drawer-container>
```

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

### Min and Max Pane Sizes

Source: https://github.com/matraic/m3e/blob/main/docs/components/split-pane.html

Sets minimum and maximum percentage constraints for the start pane using the 'min' and 'max' attributes.

```html
<m3e-split-pane value="50" min="25" max="75">
  <m3e-card slot="start"></m3e-card>
  <m3e-card slot="end"></m3e-card>
</m3e-split-pane>
```

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

### Native Module Support

Source: https://github.com/matraic/m3e/blob/main/docs/components/button-group.html

Example of how to import the Button Group component using a native JavaScript module script in a browser.

```html
<script type="module" src="/node_modules/@m3e/web/dist/button-group.js"></script>
```

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

### Basic Usage of M3E Tabs

Source: https://github.com/matraic/m3e/blob/main/packages/web/src/tabs/README.md

Demonstrates the basic structure for using m3e-tabs, m3e-tab, and m3e-tab-panel components to create a tabbed interface. This example uses the secondary variant.

```html
<m3e-tabs>
  <m3e-tab selected for="videos"><m3e-icon slot="icon" name="videocam"></m3e-icon>Video</m3e-tab>
  <m3e-tab for="photos"><m3e-icon slot="icon" name="photo"></m3e-icon>Photos</m3e-tab>
  <m3e-tab for="audio"><m3e-icon slot="icon" name="music_note"></m3e-icon>Audio</m3e-tab>
  <m3e-tab-panel id="videos">Videos</m3e-tab-panel>
  <m3e-tab-panel id="photos">Photos</m3e-tab-panel>
  <m3e-tab-panel id="audio">Audio</m3e-tab-panel>
</m3e-tabs>
```

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

### Nav Item with Link Attributes

Source: https://github.com/matraic/m3e/blob/main/docs/components/nav-rail.html

Example of a navigation item configured as a link using href, target, rel, and download attributes.

```html
<m3e-nav-item href="/news" target="_blank" rel="noopener noreferrer" download>News Link</m3e-nav-item>
```

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

### Import Map for Dependencies

Source: https://github.com/matraic/m3e/blob/main/docs/components/fab.html

An example of an import map required when using M3E web components directly in the browser without a bundler.

```html
<script type="importmap">
  {
    "imports": {

```

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

### Basic Menu Example

Source: https://github.com/matraic/m3e/blob/main/packages/web/src/menu/README.md

Illustrates a simple menu structure triggered by a button. The m3e-menu-trigger links to the m3e-menu via the 'for' attribute.

```html
<m3e-button>
  <m3e-menu-trigger for="menu1">Basic menu</m3e-menu-trigger>
</m3e-button>
<m3e-menu id="menu1">
  <m3e-menu-item>Apple</m3e-menu-item>
  <m3e-menu-item>Apricot</m3e-menu-item>
  <m3e-menu-item>Avocado</m3e-menu-item>
  <m3e-menu-item>Green Apple</m3e-menu-item>
  <m3e-menu-item>Green Grapes</m3e-menu-item>
  <m3e-menu-item>Olive</m3e-menu-item>
  <m3e-menu-item>Orange</m3e-menu-item>
</m3e-menu>
```

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

### Import Map for Native Module Dependencies

Source: https://github.com/matraic/m3e/blob/main/docs/components/split-button.html

Provides an example of an import map required when using M3E web components directly in the browser without a bundler.

```json
{
  "imports": {
    "tslib": "https://cdn.jsdelivr.net/npm/tslib@2.8.1/+esm",
    "lit": "https://cdn.jsdelivr.net/npm/lit@3.3.0/+esm"
  }
}
```

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

### Import Map for Dependencies

Source: https://github.com/matraic/m3e/blob/main/docs/components/drawer-container.html

Include an import map to manage dependencies when using native modules. This example shows how to map common libraries like tslib and lit.

```html
<script type="importmap">
  {
    "imports": {
      "tslib": "https://cdn.jsdelivr.net/npm/tslib@2.8.1/+esm",
      "lit": "https://cdn.jsdelivr.net/npm/lit@3.3.0/+esm",
      "lit/": "https://cdn.jsdelivr.net/npm/lit@3.3.0/",
      "lit-html": "https://cdn.jsdelivr.net/npm/lit-html@3.3.0/+esm",
      "lit-html/directive.js": "https://cdn.jsdelivr.net/npm/lit-html@3.3.0/directive.js",
      "lit-html/directives/if-defined.js": "https://cdn.jsdelivr.net/npm/lit-html@3.3.0/directives/if-defined.js",
      "lit-html/directives/class-map.js": "https://cdn.jsdelivr.net/npm/lit-html@3.3.0/directives/class-map.js",
      "@lit/reactive-element": "https://cdn.jsdelivr.net/npm/@lit/reactive-element@2.0.4/+esm",
      "@lit/reactive-element/": "https://cdn.jsdelivr.net/npm/@lit/reactive-element@2.0.4/",
      "@m3e/web/core": "/node_modules/@m3e/web/dist/core.js",
      "@m3e/web/core/a11y": "/node_modules/@m3e/web/dist/core-a11y.js",
      "@m3e/web/core/layout": "/node_modules/@m3e/web/dist/core-layout.js"
    }
  }
</script>
```

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

### Using M3E Card with Native Modules

Source: https://github.com/matraic/m3e/blob/main/docs/components/card.html

Demonstrates how to include the M3E Card component in a browser without a bundler using a module script and an import map.

```html
<script type="module" src="/node_modules/@m3e/web/dist/card.js"></script>
```

```html
<script type="importmap">
  {
    "imports": {
      "tslib": "https://cdn.jsdelivr.net/npm/tslib@2.8.1/+esm",
      "lit": "https://cdn.jsdelivr.net/npm/lit@3.3.0/+esm",
      "lit/": "https://cdn.jsdelivr.net/npm/lit@3.3.0/",
      "lit-html": "https://cdn.jsdelivr.net/npm/lit-html@3.3.0/+esm",
      "lit-html/directive.js": "https://cdn.jsdelivr.net/npm/lit-html@3.3.0/directive.js",
      "lit-html/directives/if-defined.js": "https://cdn.jsdelivr.net/npm/lit-html@3.3.0/directives/if-defined.js",
      "lit-html/directives/class-map.js": "https://cdn.jsdelivr.net/npm/lit-html@3.3.0/directives/class-map.js",
      "@lit/reactive-element": "https://cdn.jsdelivr.net/npm/@lit/reactive-element@2.0.4/+esm",
      "@lit/reactive-element/": "https://cdn.jsdelivr.net/npm/@lit/reactive-element@2.0.4/",
      "@m3e/web/core": "/node_modules/@m3e/web/dist/core.js"
    }
  }
</script>
```

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

### Build, Analyze, and Lint

Source: https://github.com/matraic/m3e/blob/main/README.md

Combines build, analysis, and linting steps into a single command for comprehensive checks.

```bash
npm run all
```

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

### Native Module Support with Import Map

Source: https://github.com/matraic/m3e/blob/main/docs/components/loading-indicator.html

Example of how to use the @m3e/web package directly in a browser without a bundler, utilizing JavaScript Modules and an import map for dependencies.

```html
<script type="module" src="/node_modules/@m3e/web/dist/loading-indicator.js"></script>

<script type="importmap">
  {
    "imports": {
      "tslib": "https://cdn.jsdelivr.net/npm/tslib@2.8.1/+esm",
      "lit": "https://cdn.jsdelivr.net/npm/lit@3.3.0/+esm",
      "lit/": "https://cdn.jsdelivr.net/npm/lit@3.3.0/",
      "lit-html": "https://cdn.jsdelivr.net/npm/lit-html@3.3.0/+esm",
      "lit-html/directive.js": "https://cdn.jsdelivr.net/npm/lit-html@3.3.0/directive.js",
      "lit-html/directives/if-defined.js": "https://cdn.jsdelivr.net/npm/lit-html@3.3.0/directives/if-defined.js",
      "lit-html/directives/class-map.js": "https://cdn.jsdelivr.net/npm/lit-html@3.3.0/directives/class-map.js",
      "@lit/reactive-element": "https://cdn.jsdelivr.net/npm/@lit/reactive-element@2.0.4/+esm",
      "@lit/reactive-element/": "https://cdn.jsdelivr.net/npm/@lit/reactive-element@2.0.4/",
      "@m3e/web/core": "/node_modules/@m3e/web/dist/core.js"
    }
  }
</script>
```

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

### Checkbox with Label (for Attribute)

Source: https://github.com/matraic/m3e/blob/main/packages/web/src/checkbox/README.md

Example of using the 'for' attribute on a label to associate it with a m3e-checkbox.

```html
<m3e-checkbox id="chk"></m3e-checkbox><label for="chk">Checkbox label </label>
```

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

### Checkbox with Label (Wrapping)

Source: https://github.com/matraic/m3e/blob/main/packages/web/src/checkbox/README.md

Example of wrapping a m3e-checkbox within a label element for accessibility and usability.

```html
<label>
  <m3e-checkbox></m3e-checkbox>
  Checkbox label
</label>
```

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

### Import Expansion Panel Module

Source: https://github.com/matraic/m3e/blob/main/docs/components/expansion-panel.html

Import the expansion panel module to enable its components. This should be done once at the application level.

```html
import "@m3e/web/expansion-panel";
```

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

### Basic Usage of M3E Option Components

Source: https://github.com/matraic/m3e/blob/main/packages/web/src/option/README.md

Demonstrates the structure of m3e-option-panel with m3e-option and m3e-optgroup elements. Use this to create a selectable list with grouped options.

```html
<m3e-option-panel>
  <m3e-option value="apple">Apple</m3e-option>
  <m3e-option value="banana">Banana</m3e-option>
  <m3e-optgroup>
    <span slot="label">Citrus</span>
    <m3e-option value="lemon">Lemon</m3e-option>
    <m3e-option value="orange">Orange</m3e-option>
  </m3e-optgroup>
</m3e-option-panel>
```

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

### Basic Chip Set Example

Source: https://github.com/matraic/m3e/blob/main/packages/web/src/chips/README.md

Use m3e-chip and m3e-chip-set to display non-interactive chips like tags or filters.

```html
<m3e-chip-set>
  <m3e-chip><m3e-icon slot="icon" name="palette"></m3e-icon>Design</m3e-chip>
  <m3e-chip><m3e-icon slot="icon" name="accessibility_new"></m3e-icon>Accessibility</m3e-chip>
  <m3e-chip><m3e-icon slot="icon" name="motion_photos_on"></m3e-icon>Motion</m3e-chip>
  <m3e-chip><m3e-icon slot="icon" name="description"></m3e-icon>Documentation</m3e-chip>
</m3e-chip-set>
```

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

### Nav Rail Example

Source: https://github.com/matraic/m3e/blob/main/packages/web/src/nav-rail/README.md

Illustrates a nav rail with auto mode for expanded state based on screen size, and a toggle button for manual control. Includes an icon button, a FAB, and several nav items.

```html
<m3e-nav-rail id="nav-rail" mode="auto">
  <m3e-icon-button toggle>
    <m3e-icon name="menu"></m3e-icon>
    <m3e-icon slot="selected" name="menu_open"></m3e-icon>
    <m3e-nav-rail-toggle for="nav-rail"></m3e-nav-rail-toggle>
  </m3e-icon-button>
  <m3e-fab size="small">
    <m3e-icon name="edit"></m3e-icon>
    <span slot="label">Extended</span>
  </m3e-fab>
  <m3e-nav-item><m3e-icon slot="icon" name="news"></m3e-icon>News</m3e-nav-item>
  <m3e-nav-item><m3e-icon slot="icon" name="globe"></m3e-icon>Global</m3e-nav-item>
  <m3e-nav-item><m3e-icon slot="icon" name="star"></m3e-icon>For you</m3e-nav-item>
  <m3e-nav-item><m3e-icon slot="icon" name="newsstand"></m3e-icon>Trending</m3e-nav-item>
</m3e-nav-rail>
```

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

### m3e-app-bar Component Usage

Source: https://github.com/matraic/m3e/blob/main/packages/web/src/app-bar/README.md

This snippet shows a basic example of the m3e-app-bar with leading and trailing icons, title, and subtitle.

```APIDOC
## m3e-app-bar

### Description
A bar, placed at the top of a screen, used to help users navigate through an application.

### Attributes
- `centered` (boolean) - Optional - Whether the title and subtitle are centered.
- `size` ("small" | "medium" | "large") - Optional - The size of the bar. Defaults to "small".
- `for` (string) - Optional - The identifier of the interactive control to which this element is attached.

### Slots
- `leading` - Renders content positioned at the start of the bar.
- `subtitle` - Renders the subtitle of the bar.
- `title` - Renders the title of the bar.
- `trailing` - Renders one or more action buttons aligned to the end of the bar.

### CSS Custom Properties
- `--m3e-app-bar-container-color`: Background color of the app bar container.
- `--m3e-app-bar-container-color-on-scroll`: Background color when scrolled.
- `--m3e-app-bar-container-elevation`: Elevation (shadow) of the app bar container.
- `--m3e-app-bar-container-elevation-on-scroll`: Elevation (shadow) when scrolled.
- `--m3e-app-bar-title-text-color`: Color of the app bar title text.
- `--m3e-app-bar-subtitle-text-color`: Color of the app bar subtitle text.
- `--m3e-app-bar-padding-left`: Left padding for the app bar container.
- `--m3e-app-bar-padding-right`: Right padding for the app bar container.

### Example Usage
```html
<m3e-app-bar size="medium">
  <m3e-icon-button slot="leading-icon" aria-label="Back">
    <m3e-icon name="arrow_back"></m3e-icon>
  </m3e-icon-button>
  <span slot="title">Top 10 hiking trails</span>
  <span slot="subtitle">Discover popular trails</span>
  <m3e-icon-button slot="trailing-icon" aria-label="Bookmark" variant="tonal">
    <m3e-icon name="bookmark" filled></m3e-icon>
  </m3e-icon-button>
</m3e-app-bar>
```
```

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

### Chip with Leading Icon

Source: https://github.com/matraic/m3e/blob/main/docs/components/chips.html

Add a leading icon to a `m3e-chip` using the `icon` slot. The example uses `m3e-icon`.

```html
<m3e-chip>
  <m3e-icon slot="icon" name="finance"></m3e-icon>
  Finance
</m3e-chip>
```

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

### Basic m3e-icon-button Example

Source: https://github.com/matraic/m3e/blob/main/packages/web/src/icon-button/README.md

Demonstrates changing the appearance to 'filled', size to 'large', and enabling toggle behavior with a selected state. Use this to create interactive icon buttons with custom styling.

```html
<m3e-icon-button variant="filled" size="large" toggle selected>
  <m3e-icon name="favorite"></m3e-icon>
</m3e-icon-button>
```

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

### Linear Progress Indicator - Query Mode

Source: https://github.com/matraic/m3e/blob/main/docs/components/progress-indicator.html

Employ `mode="query"` on `m3e-linear-progress-indicator` for pre-loading states before actual loading begins. `value` and `max` are not applicable in this mode.

```html
<m3e-linear-progress-indicator mode="query"></m3e-linear-progress-indicator>
```

```html
<m3e-linear-progress-indicator variant="wavy" mode="query"></m3e-linear-progress-indicator>
```

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

### Basic Breadcrumb Example

Source: https://github.com/matraic/m3e/blob/main/packages/web/src/breadcrumb/README.md

A simple breadcrumb with three navigation items. Use m3e-breadcrumb as a wrapper and m3e-breadcrumb-item for each navigation link.

```html
<m3e-breadcrumb>
  <m3e-breadcrumb-item href="/dashboard">Dashboard</m3e-breadcrumb-item>
  <m3e-breadcrumb-item href="/dashboard/reports">Reports</m3e-breadcrumb-item>
  <m3e-breadcrumb-item href="/dashboard/reports/annual">Annual</m3e-breadcrumb-item>
</m3e-breadcrumb>
```

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

### Basic FAB Usage

Source: https://github.com/matraic/m3e/blob/main/docs/components/fab.html

Demonstrates the basic usage of the m3e-fab component with an icon.

```html
<m3e-fab variant="primary">
  <m3e-icon name="add"></m3e-icon>
</m3e-fab>
```

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

### Basic Textarea Autosize Usage

Source: https://github.com/matraic/m3e/blob/main/docs/components/textarea-autosize.html

Use m3e-textarea-autosize with the 'for' attribute to link it to a textarea. This example shows integration with m3e-form-field.

```html
<m3e-form-field variant="filled">
  <label slot="label" for="field">Textarea Autosize</label>
  <textarea id="field">
    <!-- Content omitted for brevity -->
  </textarea>
</m3e-form-field>
<m3e-textarea-autosize for="field"></m3e-textarea-autosize>
```

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

### Basic Menu Usage

Source: https://github.com/matraic/m3e/blob/main/docs/components/menu.html

Demonstrates a basic menu with two items, triggered by a button.

```html
<m3e-button>
  <m3e-menu-trigger for="menu1">Menu</m3e-menu-trigger>
</m3e-button>
<m3e-menu id="menu1">
  <m3e-menu-item>Item 1</m3e-menu-item>
  <m3e-menu-item>Item 2</m3e-menu-item>
</m3e-menu>
```

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

### Filter Chip Set Example

Source: https://github.com/matraic/m3e/blob/main/packages/web/src/chips/README.md

Use m3e-filter-chip and m3e-filter-chip-set for single or multi-select filtering options. The 'multi' attribute enables multiselect.

```html
<m3e-filter-chip-set aria-label="Filter by topic">
  <m3e-filter-chip><m3e-icon slot="icon" name="palette"></m3e-icon>Design</m3e-filter-chip>
  <m3e-filter-chip><m3e-icon slot="icon" name="accessibility_new"></m3e-icon>Accessibility</m3e-filter-chip>
  <m3e-filter-chip><m3e-icon slot="icon" name="motion_photos_on"></m3e-icon>Motion</m3e-filter-chip>
  <m3e-filter-chip><m3e-icon slot="icon" name="description"></m3e-icon>Documentation</m3e-filter-chip>
</m3e-filter-chip-set>
```

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

### Basic Split Button Example

Source: https://github.com/matraic/m3e/blob/main/packages/web/src/split-button/README.md

Illustrates the basic usage of the m3e-split-button by combining m3e-button, m3e-icon-button, and m3e-menu components. The leading button triggers the primary action, and the trailing icon button reveals additional options.

```html
<m3e-split-button>
  <m3e-button slot="leading-button"> <m3e-icon slot="icon" name="edit"></m3e-icon>Edit </m3e-button>
  <m3e-icon-button slot="trailing-button">
    <m3e-icon name="keyboard_arrow_down"></m3e-icon>
    <m3e-menu-trigger for="menu1"></m3e-menu-trigger>
  </m3e-icon-button>
</m3e-split-button>
```

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

### Breadcrumb with Custom Separator

Source: https://github.com/matraic/m3e/blob/main/packages/web/src/breadcrumb/README.md

Customize the separator between breadcrumb items by using the 'separator' slot. This example uses a forward slash character.

```html
<m3e-breadcrumb>
  <span slot="separator">/</span>
  <m3e-breadcrumb-item href="/dashboard">Dashboard</m3e-breadcrumb-item>
  <m3e-breadcrumb-item href="/dashboard/reports">Reports</m3e-breadcrumb-item>
  <m3e-breadcrumb-item href="/dashboard/reports/annual">Annual</m3e-breadcrumb-item>
</m3e-breadcrumb>
```

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

### Build All Packages

Source: https://github.com/matraic/m3e/blob/main/README.md

Executes the build process for all packages within the monorepo.

```bash
npm run build
```

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

### Import All Icons

Source: https://github.com/matraic/m3e/blob/main/packages/icons/README.md

Import all available icon modules from the package to make them accessible.

```javascript
import "@m3e/icons";
```

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

### Using Paginator with Module Script

Source: https://github.com/matraic/m3e/blob/main/docs/components/paginator.html

Demonstrates how to use the M3E paginator component directly in a browser without a bundler, using a module script.

```html
<script type="module" src="/node_modules/@m3e/web/dist/paginator.js"></script>
```

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

### Assist Chip Set Example

Source: https://github.com/matraic/m3e/blob/main/packages/web/src/chips/README.md

Use m3e-assist-chip within a m3e-chip-set for actions. The container has ARIA role="group" for accessibility.

```html
<m3e-chip-set role="group" aria-label="Quick actions">
  <m3e-assist-chip><m3e-icon slot="icon" name="edit"></m3e-icon>Edit</m3e-assist-chip>
  <m3e-assist-chip><m3e-icon slot="icon" name="delete"></m3e-icon>Delete</m3e-assist-chip>
  <m3e-assist-chip><m3e-icon slot="icon" name="content_copy"></m3e-icon>Copy</m3e-assist-chip>
  <m3e-assist-chip><m3e-icon slot="icon" name="share"></m3e-icon>Share</m3e-assist-chip>
</m3e-chip-set>
```

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

### Native Module Support with Import Map

Source: https://github.com/matraic/m3e/blob/main/docs/components/heading.html

To use the `@m3e/web` package directly in a browser without a bundler, use a module script and an import map to manage dependencies.

```html
<script type="module" src="/node_modules/@m3e/web/dist/heading.js"></script>
```

```json
{
  "imports": {
    "tslib": "https://cdn.jsdelivr.net/npm/tslib@2.8.1/+esm",
    "lit": "https://cdn.jsdelivr.net/npm/lit@3.3.0/+esm",
    "lit/ப்புகளை": "https://cdn.jsdelivr.net/npm/lit@3.3.0/",
    "lit-html": "https://cdn.jsdelivr.net/npm/lit-html@3.3.0/+esm",
    "lit-html/directive.js": "https://cdn.jsdelivr.net/npm/lit-html@3.3.0/directive.js",
    "lit-html/directives/if-defined.js": "https://cdn.jsdelivr.net/npm/lit-html@3.3.0/directives/if-defined.js",
    "lit-html/directives/class-map.js": "https://cdn.jsdelivr.net/npm/lit-html@3.3.0/directives/class-map.js",
    "@lit/reactive-element": "https://cdn.jsdelivr.net/npm/@lit/reactive-element@2.0.4/+esm",
    "@lit/reactive-element/ப்புகளை": "https://cdn.jsdelivr.net/npm/@lit/reactive-element@2.0.4/",
    "@m3e/web/core": "/node_modules/@m3e/web/dist/core.js"
  }
}
```

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

### Native Module Support with Import Map

Source: https://github.com/matraic/m3e/blob/main/docs/components/expansion-panel.html

Use expansion panels directly in the browser without a bundler by including the module script and an import map for dependencies.

```html
<script type="module" src="/node_modules/@m3e/web/dist/expansion-panel.js"></script>

<script type="importmap">
  {
    "imports": {
      "tslib": "https://cdn.jsdelivr.net/npm/tslib@2.8.1/+esm",
      "lit": "https://cdn.jsdelivr.net/npm/lit@3.3.0/+esm",
      "lit/": "https://cdn.jsdelivr.net/npm/lit@3.3.0/",
      "lit-html": "https://cdn.jsdelivr.net/npm/lit-html@3.3.0/+esm"
    }
  }
</script>
```

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

### Basic FAB Menu Usage

Source: https://github.com/matraic/m3e/blob/main/docs/components/fab-menu.html

Demonstrates the basic structure of a FAB menu with a trigger and menu items. The 'for' attribute on the trigger links it to the menu's ID.

```html
<m3e-fab variant="primary" size="large">
  <m3e-fab-menu-trigger for="fabmenu">
    <m3e-icon name="edit"></m3e-icon>
  </m3e-fab-menu-trigger>
</m3e-fab>
<m3e-fab-menu id="fabmenu" variant="primary">
  <m3e-fab-menu-item>
    <m3e-icon slot="icon" name="email" filled></m3e-icon>
    Email
  </m3e-fab-menu-item>
  <m3e-fab-menu-item>
    <m3e-icon slot="icon" name="chat" filled></m3e-icon>
    Message
  </m3e-fab-menu-item>
  <m3e-fab-menu-item>
    <m3e-icon slot="icon" name="folder" filled></m3e-icon>
    Folder
  </m3e-fab-menu-item>
</m3e-fab-menu>
```

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

### Range Slider

Source: https://github.com/matraic/m3e/blob/main/packages/web/src/slider/README.md

Example of a labeled range slider with two thumbs for selecting a minimum and maximum value. The thumbs are initialized at 25 and 75.

```html
<m3e-slider labelled>
  <m3e-slider-thumb value="25"></m3e-slider-thumb>
  <m3e-slider-thumb value="75"></m3e-slider-thumb>
</m3e-slider>
```

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

### Single Value Slider

Source: https://github.com/matraic/m3e/blob/main/packages/web/src/slider/README.md

Example of a labeled slider for selecting a single numeric value. The thumb's initial value is set to 50.

```html
<m3e-slider labelled>
  <m3e-slider-thumb value="50"></m3e-slider-thumb>
</m3e-slider>
```

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

### Vibrant Rounded Toolbar Example

Source: https://github.com/matraic/m3e/blob/main/packages/web/src/toolbar/README.md

Illustrates a vibrant, rounded toolbar with icon buttons. Customize appearance using 'variant' and 'shape' attributes.

```html
<m3e-toolbar variant="vibrant" shape="rounded">
  <m3e-icon-button>
    <m3e-icon name="arrow_back"></m3e-icon>
  </m3e-icon-button>
  <m3e-icon-button>
    <m3e-icon name="arrow_forward"></m3e-icon>
  </m3e-icon-button>
  <m3e-icon-button width="wide" variant="filled">
    <m3e-icon name="add"></m3e-icon>
  </m3e-icon-button>
  <m3e-icon-button>
    <m3e-icon name="picture_in_picture"></m3e-icon>
  </m3e-icon-button>
  <m3e-icon-button>
    <m3e-icon name="more_vert"></m3e-icon>
  </m3e-icon-button>
</m3e-toolbar>
```

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

### Run Custom Elements Manifest Analysis

Source: https://github.com/matraic/m3e/blob/main/README.md

Initiates the analysis of custom elements manifests for the project.

```bash
npm run cem
```

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

### Sticky App Bar with Elevation on Scroll

Source: https://github.com/matraic/m3e/blob/main/packages/web/src/app-bar/README.md

This example demonstrates how to make the app bar sticky and elevate on scroll by attaching it to a scrollable container.

```APIDOC
## Sticky m3e-app-bar with Elevation

### Description
Attaches an app bar to a parent scroll container to produce elevation on scroll. The `for` attribute is used to attach a sticky-positioned `m3e-app-bar` to a parenting container styled to overflow vertically. When scrolled, the app bar will automatically transition to an elevated state.

### Example Usage
```html
<div style="overflow-y: auto; height: 300px" id="scrollContainer">
  <m3e-app-bar for="scrollContainer" style="position: sticky; top: 0">
    <span slot="title">Title</span>
  </m3e-app-bar>
  <div style="height: 400px; display: flex; align-items: center; justify-content: center">I am scrolling content</div>
</div>
```
```

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

### Import Snackbar Module

Source: https://github.com/matraic/m3e/blob/main/docs/components/snackbar.html

Import the snackbar module to make the M3eSnackbar service available globally.

```html
<script type="module" src="/node_modules/@m3e/web/dist/snackbar.js"></script>
```

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

### Disable Specific Dates with blackoutDates Function

Source: https://github.com/matraic/m3e/blob/main/docs/components/datepicker.html

The `blackoutDates` property accepts a function that determines if a date should be disabled. This example disables weekend dates.

```javascript
document.querySelector("#blackout-dates").blackoutDates = (date) => isWeekend(date);
```