### Install All M3E Components using npm

Source: https://matraic.github.io/m3e/getting-started/installation

Installs the meta-package that aggregates all M3E components. This is a convenient option for accessing the entire M3E ecosystem.

```bash
npm i @m3e/all
```

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

### M3E Core Import Map for Native Module Support

Source: https://matraic.github.io/m3e/getting-started/installation

An example import map configuration for using M3E core modules directly in the browser. It maps package entry points to their respective CDN or local paths.

```json
{
  "imports": {
    "lit": "https://cdn.jsdelivr.net/npm/lit@3.3.0/+esm",
    "@m3e/core": "/node_modules/@m3e/core/dist/index.js",
    "@m3e/core/a11y": "/node_modules/@m3e/core/dist/a11y.js",
    "@m3e/core/anchoring": "/node_modules/@m3e/core/dist/anchoring.js",
    "@m3e/core/bidi": "/node_modules/@m3e/core/dist/bidi.js",
    "@m3e/core/layout": "/node_modules/@m3e/core/dist/layout.js",
    "@m3e/core/platform": "/node_modules/@m3e/core/dist/platform.js"
  }
}
```

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

### Installation

Source: https://matraic.github.io/m3e/components/progress-indicator

Instructions on how to install the progress indicator package.

```APIDOC
## Installation

### Description
Install the progress indicator components using npm.

### Method
npm

### Endpoint
N/A

### Parameters
None

### Request Example
```bash
npm i @m3e/progress-indicator
```

### Response
N/A
```

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

### Install m3e-toc Component using npm

Source: https://matraic.github.io/m3e/components/toc

This command installs the m3e-toc component from the npm registry. Ensure you have Node.js and npm installed on your system.

```bash
npm i @m3e/toc
```

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

### m3e-drawer-container with 'push' mode

Source: https://matraic.github.io/m3e/components/drawer-container

Example of using the 'push' mode for the start drawer in m3e-drawer-container. In this mode, the drawer pushes 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/expansion-panel

Source: https://matraic.github.io/m3e/components/expansion-panel

Installs the @m3e/expansion-panel package using npm. This is the first step to using the expansion panel components in your project.

```bash
npm i @m3e/expansion-panel
```

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

### Install m3e-loading-indicator

Source: https://matraic.github.io/m3e/components/loading-indicator

Installs the m3e-loading-indicator package using npm. This is the first step to using the component in your project.

```bash
npm i @m3e/loading-indicator
```

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

### Install m3e-app-bar using npm

Source: https://matraic.github.io/m3e/components/app-bar

This command installs the m3e-app-bar component from the npm registry. Ensure you have Node.js and npm installed on your system.

```bash
npm i @m3e/app-bar
```

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

### Install m3e-select Component

Source: https://matraic.github.io/m3e/components/select

Installs the '@m3e/select' package using npm. This is the first step before using the component in your project.

```bash
npm i @m3e/select
```

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

### m3e-drawer-container with 'over' mode

Source: https://matraic.github.io/m3e/components/drawer-container

Example of using the 'over' mode for the start drawer in m3e-drawer-container. In this mode, the drawer overlays the main content without pushing it.

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

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

### Install m3e-autocomplete

Source: https://matraic.github.io/m3e/components/autocomplete

Installs the m3e-autocomplete package using npm. This is the first step before using the component in your project.

```bash
npm i @m3e/autocomplete
```

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

### Install m3e-icon Package

Source: https://matraic.github.io/m3e/components/icon

Install the m3e-icon package using npm. This command downloads and installs the necessary files for using the icon component in your project.

```bash
npm i @m3e/icon
```

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

### Badge Installation

Source: https://matraic.github.io/m3e/components/badge

Instructions on how to install the m3e-badge component using npm.

```APIDOC
## Installation

```bash
npm i @m3e/badge
```
```

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

### Install m3e-dialog Component

Source: https://matraic.github.io/m3e/components/dialog

Installs the m3e-dialog component using npm. This is the first step to using the dialog functionality in your project.

```bash
npm i @m3e/dialog
```

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

### Install m3e-switch Component

Source: https://matraic.github.io/m3e/components/switch

Install the m3e-switch component using npm. This command downloads and installs the package into your project's node_modules directory, making it available for use.

```bash
npm i @m3e/switch
```

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

### Install @m3e/tooltip with npm

Source: https://matraic.github.io/m3e/components/tooltip

This command installs the m3e-tooltip package using npm. It is the first step to integrate the tooltip component into your project.

```bash
npm i @m3e/tooltip
```

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

### Install m3e-nav-menu using npm

Source: https://matraic.github.io/m3e/components/nav-menu

This command installs the m3e-nav-menu component using npm. Ensure you have Node.js and npm installed on your system. This is the first step before you can use the component in your project.

```bash
npm i @m3e/nav-menu
```

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

### Install m3e-paginator using npm

Source: https://matraic.github.io/m3e/components/paginator

Install the m3e-paginator component using npm. This command fetches and installs the package into your project's node_modules directory.

```bash
npm i @m3e/paginator
```

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

### Install m3e-card Component

Source: https://matraic.github.io/m3e/components/card

Installs the m3e-card component using npm. This is the first step before using the component in your project.

```bash
npm i @m3e/card
```

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

### Install m3e-split-button

Source: https://matraic.github.io/m3e/components/split-button

Installs the m3e-split-button component using npm. This is the initial step before using the component in your project.

```bash
npm i @m3e/split-button
```

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

### Install Progress Indicator Package

Source: https://matraic.github.io/m3e/components/progress-indicator

Installs the @m3e/progress-indicator package using npm. This is the first step to using the progress indicator components in your project.

```bash
npm i @m3e/progress-indicator
```

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

### Install m3e-fab Component

Source: https://matraic.github.io/m3e/components/fab

Instructions for installing the m3e-fab component using npm. This is the initial step to include the FAB in your project.

```bash
npm i @m3e/fab
```

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

### Install m3e-menu Component

Source: https://matraic.github.io/m3e/components/menu

Installs the m3e-menu component using npm. This is the first step before using the menu component in your project.

```bash
npm i @m3e/menu
```

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

### Install m3e-fab-menu using npm

Source: https://matraic.github.io/m3e/components/fab-menu

Installs the m3e-fab-menu component using npm. This is the first step to include the component in your project.

```bash
npm i @m3e/fab-menu
```

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

### Install m3e-form-field

Source: https://matraic.github.io/m3e/components/form-field

Installs the m3e-form-field component using npm. This is the first step to using the component in your project.

```bash
npm i @m3e/form-field
```

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

### Install m3e-button-group

Source: https://matraic.github.io/m3e/components/button-group

Installs the m3e-button-group package using npm. This is the first step to using the component in your project. Ensure you have Node.js and npm installed.

```bash
npm i @m3e/button-group
```

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

### Install m3e-heading Component

Source: https://matraic.github.io/m3e/components/heading

This snippet shows how to install the m3e-heading component using npm. It is a prerequisite for using the component in your project.

```bash
npm i @m3e/heading
```

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

### Install @m3e/snackbar Package

Source: https://matraic.github.io/m3e/components/snackbar

Install the @m3e/snackbar package using npm. This is the initial step to integrate the snackbar service into your application.

```bash
npm i @m3e/snackbar
```

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

### Install m3e-slide-group

Source: https://matraic.github.io/m3e/components/slide-group

Installs the m3e-slide-group component using npm. This is the first step to integrating the component into your project.

```bash
npm i @m3e/slide-group
```

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

### Install @m3e/chips Package

Source: https://matraic.github.io/m3e/components/chips

Installs the @m3e/chips package using npm. This is the first step to using the chip components in your project.

```bash
npm i @m3e/chips
```

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

### Install m3e-stepper

Source: https://matraic.github.io/m3e/components/stepper

Installs the m3e-stepper component using npm. This is the initial step to include the stepper functionality in your project.

```bash
npm i @m3e/stepper
```

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

### Install m3e-button Component

Source: https://matraic.github.io/m3e/components/button

This snippet shows how to install the m3e-button component using npm. It is a prerequisite for using the component in your project.

```bash
npm i @m3e/button
```

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

### Basic m3e-drawer-container Usage with Slots

Source: https://matraic.github.io/m3e/components/drawer-container

Demonstrates the basic structure of m3e-drawer-container using start, end, and default slots for drawers and main content. The 'start' and 'end' attributes control drawer visibility.

```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>
```

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

### Install m3e-nav-bar using npm

Source: https://matraic.github.io/m3e/components/nav-bar

This command installs the m3e-nav-bar component from the npm registry. It's a prerequisite for using the component in your project.

```bash
npm i @m3e/nav-bar
```

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

### Install m3e-toolbar using npm

Source: https://matraic.github.io/m3e/components/toolbar

Installs the m3e-toolbar component using npm. This is the first step to include the component in your project.

```bash
npm i @m3e/toolbar
```

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

### Browser Module Script Installation

Source: https://matraic.github.io/m3e/components/list

Instructions for directly using the m3e-list component in a browser without a bundler, using a module script tag.

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

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

### Install Textarea Autosize Component

Source: https://matraic.github.io/m3e/components/textarea-autosize

Install the m3e-textarea-autosize component using npm. This is the first step to integrate the autosizing functionality into your project.

```bash
npm i @m3e/textarea-autosize
```

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

### Browser Module Script for Tooltip

Source: https://matraic.github.io/m3e/components/tooltip

Example of how to use the m3e-tooltip component directly in a browser using a module script. This requires a module bundler or an import map for dependencies.

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

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

### Install m3e-tabs Component

Source: https://matraic.github.io/m3e/components/tabs

Installs the m3e-tabs component using npm. This is the first step to integrating the tab functionality into your project.

```bash
npm i @m3e/tabs
```

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

### Install m3e-drawer-container using npm

Source: https://matraic.github.io/m3e/components/drawer-container

Install the m3e-drawer-container package using npm. This is the first step to using the component in your project.

```bash
npm i @m3e/drawer-container
```

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

### Install m3e-radio-group using npm

Source: https://matraic.github.io/m3e/components/radio-group

This command installs the m3e-radio-group package, which provides the necessary components for creating radio button groups.

```bash
npm i @m3e/radio-group
```

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

### m3e-heading Component Usage Examples

Source: https://matraic.github.io/m3e/components/heading

Demonstrates how to use the m3e-heading component with different variant and size attributes to control its typescale. The default variant is 'display' and the default size is 'medium'.

```html
<m3e-heading variant="display" size="large">Display Large</m3e-heading>
<m3e-heading variant="display" size="medium">Display Medium</m3e-heading>
<m3e-heading variant="display" size="small">Display Small</m3e-heading>
```

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

### Native Module Support for M3E Chips

Source: https://matraic.github.io/m3e/components/chips

Provides code examples for using M3E chips directly in a browser without a bundler, utilizing JavaScript Modules and an import map for dependencies.

```html
<script type="module" src="/node_modules/@m3e/chips/dist/index.js"></script>
<script type="importmap">
  {
    "imports": {
      "lit": "https://cdn.jsdelivr.net/npm/lit@3.3.0/+esm"
    }
  }
</script>
```

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

### Using m3e-badge in a Browser with Module Script

Source: https://matraic.github.io/m3e/components/badge

Example of loading the m3e-badge component directly in a browser using a module script. Requires an import map for dependencies.

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

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

### Using Expansion Panel with Module Script

Source: https://matraic.github.io/m3e/components/expansion-panel

Demonstrates how to load the expansion panel components directly in a browser without a bundler using a type='module' script tag. This requires specifying the path to the distributed index.js file.

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

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

### Basic Segmented Button Usage

Source: https://matraic.github.io/m3e/components/segmented-button

Demonstrates the basic structure of a segmented button using m3e-segmented-button and m3e-button-segment components. Each m3e-button-segment represents an interactive option within the group. The example shows a simple setup with text labels.

```html
<m3e-segmented-button>
  <m3e-button-segment checked>8 oz</m3e-button-segment>
  <m3e-button-segment>12 oz</m3e-button-segment>
  <m3e-button-segment>16 oz</m3e-button-segment>
  <m3e-button-segment>20 oz</m3e-button-segment>
</m3e-segmented-button>
```

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

### VS Code Configuration for M3E Button Component

Source: https://matraic.github.io/m3e/getting-started/installation

Configures Visual Studio Code to provide editor tooling for the M3E button component. It explicitly references the Custom Elements Manifest JSON files for HTML and CSS.

```json
{
  "html.customData": ["./node_modules/@m3e/button/dist/html-custom-data.json"],
  "css.customData": ["./node_modules/@m3e/button/dist/css-custom-data.json"]
}
```

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

### Install m3e-segmented-button Component

Source: https://matraic.github.io/m3e/components/segmented-button

Install the m3e-segmented-button component using npm. This command downloads and installs the package into your project's node_modules directory.

```bash
npm i @m3e/segmented-button
```

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

### Expansion Panel Import Map Configuration

Source: https://matraic.github.io/m3e/components/expansion-panel

Provides an example of an import map configuration required when using the expansion panel components directly in the browser. This maps module specifiers to their actual locations, including dependencies like 'lit'.

```html
<script type="importmap">
  {
    "imports": {
      "lit": "https://cdn.jsdelivr.net/npm/lit@3.3.0/+esm",
      "@m3e/core": "/node_modules/@m3e/core/dist/index.js",
      "@m3e/core/bidi": "/node_modules/@m3e/core/dist/bidi.js"
    }
  }
</script>
```

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

### Basic m3e-fab-menu Usage with Icons and Labels

Source: https://matraic.github.io/m3e/components/fab-menu

Demonstrates the basic structure for using the m3e-fab-menu. It shows how to integrate it with a m3e-fab and m3e-fab-menu-trigger, and how to define menu items with icons and text.

```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>
```

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

### m3e-slider Installation

Source: https://matraic.github.io/m3e/components/slider

Installs the m3e-slider component using npm.

```APIDOC
## Installation

### Description
Installs the m3e-slider component using npm.

### Method
`npm install`

### Endpoint
`@m3e/slider`

### Request Example
```bash
npm i @m3e/slider
```

### Response
#### Success Response (200)
Package installed successfully.
```

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

### Install M3E Nav Rail with npm

Source: https://matraic.github.io/m3e/components/nav-rail

Installs the @m3e/nav-rail package using npm. This command fetches and installs the necessary package and its dependencies into your project's node_modules directory.

```bash
npm i @m3e/nav-rail
```

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

### Basic List with Custom Items

Source: https://matraic.github.io/m3e/components/list

Demonstrates creating a list using m3e-list and populating m3e-list-item components with content in various slots.

```html
<m3e-list>
  <m3e-list-item>
    <m3e-icon slot="leading-icon" name="person"></m3e-icon>
    <span slot="overline">Overline</span>
    Headline
    <span slot="supporting-text">Supporting text</span>
    <span slot="trailing-supporting-text">100+</span>
    <m3e-icon slot="trailing-icon" name="arrow_right"></m3e-icon>
  </m3e-list-item>
</m3e-list>
```

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

### Use m3e-nav-menu Directly in Browser

Source: https://matraic.github.io/m3e/components/nav-menu

This example demonstrates how to use the m3e-nav-menu component directly in a browser without a bundler by leveraging JavaScript Modules. It requires specifying the module script and using an import map for dependencies like Lit and other @m3e packages.

```html
<script type="module" src="/node_modules/@m3e/nav-menu/dist/index.js"></script>

<script type="importmap">
  {
    "imports": {
      "lit": "https://cdn.jsdelivr.net/npm/lit@3.3.0/+esm",
      "@m3e/core": "/node_modules/@m3e/core/dist/index.js",
      "@m3e/core/a11y": "/node_modules/@m3e/core/dist/a11y.js",
      "@m3e/core/bidi": "/node_modules/@m3e/core/dist/bidi.js"
    }
  }
</script>
```

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

### Basic m3e-tabs Usage Example

Source: https://matraic.github.io/m3e/components/tabs

Demonstrates the fundamental structure for creating tabbed views using m3e-tabs, m3e-tab, and m3e-tab-panel. It shows how to associate tabs with their corresponding panels using the 'for' and 'id' attributes, and how to set a selected tab using the 'selected' attribute. Icons can be included in tabs using the 'icon' slot.

```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>
```

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

### Install m3e-badge Component

Source: https://matraic.github.io/m3e/components/badge

Installs the m3e-badge component using npm. This is the primary method for adding the component to your project.

```bash
npm i @m3e/badge
```

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

### Install m3e-checkbox Component

Source: https://matraic.github.io/m3e/components/checkbox

Install the m3e-checkbox component using npm. This command adds the package to your project's dependencies.

```bash
npm i @m3e/checkbox
```

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

### Using M3E Menu with Native JavaScript Modules

Source: https://matraic.github.io/m3e/components/menu

Demonstrates how to include the M3E Menu component directly in a browser using a module script. It also shows the necessary import map configuration to manage dependencies like Lit and other M3E core modules. For production environments, minified files are recommended for improved performance.

```html
<script type="module" src="/node_modules/@m3e/menu/dist/index.js"></script>
<script type="importmap">
  {
    "imports": {
      "lit": "https://cdn.jsdelivr.net/npm/lit@3.3.0/+esm",
      "@m3e/core": "/node_modules/@m3e/core/dist/index.js",
      "@m3e/core/a11y": "/node_modules/@m3e/core/dist/a11y.js",
      "@m3e/core/anchoring": "/node_modules/@m3e/core/dist/anchoring.js",
      "@m3e/core/bidi": "/node_modules/@m3e/core/dist/bidi.js"
    }
  }
</script>
```

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

### Install m3e-slider Component

Source: https://matraic.github.io/m3e/components/slider

Installs the m3e-slider component using npm. This is the initial step to include the slider functionality in your project.

```bash
npm i @m3e/slider
```

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

### Native Module Support with Import Map

Source: https://matraic.github.io/m3e/components/fab

Shows how to use the m3e-fab component directly in a browser without a bundler using a module script and an import map for dependencies like Lit and @m3e/core.

```html
<script type="module" src="/node_modules/@m3e/fab/dist/index.js"></script>
<script type="importmap">
  {
    "imports": {
      "lit": "https://cdn.jsdelivr.net/npm/lit@3.3.0/+esm",
      "@m3e/core": "/node_modules/@m3e/core/dist/index.js"
    }
  }
</script>
```

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

### Using m3e-drawer-container with Native Modules

Source: https://matraic.github.io/m3e/components/drawer-container

Demonstrates how to include the m3e-drawer-container component directly in the browser using a module script, without a bundler. Requires an import map for dependencies.

```html
<script type="module" src="/node_modules/@m3e/drawer-container/dist/index.js"></script>
```

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

### Install m3e-shape Component

Source: https://matraic.github.io/m3e/components/shape

Installs the m3e-shape component using npm. This is the primary method for adding the component to your project.

```bash
npm i @m3e/shape
```

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

### Import M3E Core Modules (ESM)

Source: https://matraic.github.io/m3e/components/segmented-button

Demonstrates importing Lit and M3E Core modules using ES Module syntax. This setup is suitable for development environments. For production, it's recommended to use the minified versions of the M3E Core files for better performance.

```html
<script type="module">
    import { LitElement, html, css } from 'lit';
    import '@m3e/core';
    import '@m3e/core/a11y';
    import '@m3e/core/bidi';

    // Your component or application logic here
    export class MyComponent extends LitElement {
      // ... component definition ...
    }
  </script>
```

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

### Configure Import Map for m3e Components and Dependencies

Source: https://matraic.github.io/m3e/components/fab-menu

Provides an example of an import map required when using m3e components with native JavaScript modules. This map resolves module specifiers to their actual file paths or URLs, including dependencies like Lit and @m3e/core.

```html
<script type="importmap">
  {
    "imports": {
      "lit": "https://cdn.jsdelivr.net/npm/lit@3.3.0/+esm",
      "@m3e/core": "/node_modules/@m3e/core/dist/index.js",
      "@m3e/core/a11y": "/node_modules/@m3e/core/dist/a11y.js",
      "@m3e/core/anchoring": "/node_modules/@m3e/core/dist/anchoring.js",
      "@m3e/core/bidi": "/node_modules/@m3e/core/dist/bidi.js"
    }
  }
</script>
```

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

### m3e-accordion with Multiple Open Panels

Source: https://matraic.github.io/m3e/components/expansion-panel

Shows how to enable multiple expansion panels to be open simultaneously within an m3e-accordion by using the 'multi' attribute.

```html
<m3e-accordion multi>
  <m3e-expansion-panel open>
    <span slot="header">Panel 1</span>
    I am content for the first panel
  </m3e-expansion-panel>
  <!-- Additional panels omitted for brevity -->
</m3e-accordion>
```

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

### Install m3e-theme Component

Source: https://matraic.github.io/m3e/components/theme

Install the m3e-theme component using npm. This is the primary method for adding the theme component to your project.

```bash
npm i @m3e/theme
```

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

### Create a Multilevel Navigation Menu

Source: https://matraic.github.io/m3e/components/nav-menu

Demonstrates how to create a multilevel navigation menu using `m3e-nav-menu` and `m3e-nav-menu-item` components. It shows how to use slots for icons, labels, and badges, and how to nest items to create submenus. The `open` attribute can be used to initially expand a menu item.

```html
<m3e-nav-menu>
  <m3e-nav-menu-item open>
    <m3e-icon slot="icon" name="rocket_launch" aria-hidden="true"></m3e-icon>
    <span slot="label">Getting Started</span>
    <m3e-nav-menu-item>
      <m3e-icon slot="icon" name="widgets" aria-hidden="true"></m3e-icon>
      <span slot="label">Overview</span>
    </m3e-nav-menu-item>
    <!-- Additional items omitted for brevity -->;
  </m3e-nav-menu-item>
  <m3e-nav-menu-item>
    <span slot="label">Actions</span>
    <!-- Items omitted for brevity -->;
  </m3e-nav-menu-item>
</m3e-nav-menu>
```

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

### Install m3e-icon-button using npm

Source: https://matraic.github.io/m3e/components/icon-button

Install the m3e-icon-button component using npm. This command adds the package to your project's dependencies.

```bash
npm i @m3e/icon-button
```

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

### Linear Progress Indicator - Query Examples

Source: https://matraic.github.io/m3e/components/progress-indicator

Shows the query mode for linear progress indicators, used for pre-loading states. The `mode="query"` attribute is used, and `value`/`max` are ignored.

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

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

### Import Map for m3e-drawer-container Dependencies

Source: https://matraic.github.io/m3e/components/drawer-container

An example import map configuration required when using m3e-drawer-container with native modules directly in the browser. This maps package names to their respective module paths.

```html
<script type="importmap">
  {
    "imports": {
      "lit": "https://cdn.jsdelivr.net/npm/lit@3.3.0/+esm",
      "@m3e/core": "/node_modules/@m3e/core/dist/index.js",
      "@m3e/core/a11y": "/node_modules/@m3e/core/dist/a11y.js",
      "@m3e/core/layout": "/node_modules/@m3e/core/dist/layout.js"
    }
  }
</script>
```

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

### Install M3E Divider Component

Source: https://matraic.github.io/m3e/components/divider

Install the m3e-divider component using npm. This command downloads and adds the divider package to your project's dependencies.

```bash
npm i @m3e/divider
```

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

### Standard Button Group Example (HTML)

Source: https://matraic.github.io/m3e/components/button-group

Demonstrates the standard variant of the m3e-button-group component, which adds interaction between adjacent buttons. This example uses icon buttons.

```html
<m3e-button-group>
  <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-button-group>
```

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

### Linear Progress Indicator - Indeterminate Examples

Source: https://matraic.github.io/m3e/components/progress-indicator

Provides examples of the indeterminate mode for linear progress indicators. The `mode="indeterminate"` attribute is used, and `value`/`max` are ignored.

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