M3E

https://matraic.github.io/m3e
Admin
M3E is a Material 3 design system component library that provides expressive, customizable UI...
Tokens:63,326
Snippets:908
Trust Score:8.3
Update:2 months ago
Show doc for...
Tokens:
Raw
### Install M3E React package

Source: https://matraic.github.io/m3e/frameworks/react.html

Use npm to install the required package for React bindings.

```bash
npm i @m3e/react
```

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

### Basic Date and Time Input Configuration

Source: https://matraic.github.io/m3e/components/date-input.html

Examples of configuring time and datetime inputs with 24-hour format.

```html
<m3e-form-field variant="outlined">
  <label slot="label" for="field1">Time Field</label>
  <m3e-date-input id="field1" type="time" time-format="24" value="2026-01-01T23:30:00Z">
  </m3e-date-input>
  <span slot="hint">HH:MM</span>
</m3e-form-field>

<m3e-form-field variant="outlined">
  <label slot="label" for="field2">Date-time Field</label>
  <m3e-date-input id="field2" type="datetime" time-format="24" value="2026-01-01T23:30:00Z">
  </m3e-date-input>
  <span slot="hint">MM/DD/YYYY HH:MM</span>
</m3e-form-field>
```

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

### Set Start Date

Source: https://matraic.github.io/m3e/components/datepicker.html

Override the default opening date using the start-at attribute.

```html
<!-- Form field omitted for brevity -->
<m3e-datepicker id="datepicker" start-at="2026-01-01"></m3e-datepicker>
```

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

### Implement basic autocomplete

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

Basic setup for an autocomplete component linked to a form field input.

```html
<m3e-form-field>
  <label slot="label" for="fruit">Choose your favorite fruit</label>
  <input id="fruit" />
</m3e-form-field>
<m3e-autocomplete for="fruit" auto-activate>
  <!-- Options omitted for brevity -->
</m3e-autocomplete>
```

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

### Standard Button Group Examples

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

Examples of standard button groups using icon buttons, text buttons, and mixed content.

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

```html
<m3e-button-group>
  <m3e-button variant="tonal">
    <m3e-icon slot="icon" name="play_arrow"></m3e-icon>Start
  </m3e-button>
  <m3e-button variant="tonal">
    <m3e-icon slot="icon" name="directions_car"></m3e-icon>Directions
  </m3e-button>
  <m3e-button variant="tonal">
    <m3e-icon slot="icon" name="share"></m3e-icon>Share
  </m3e-button>
</m3e-button-group>
```

```html
<m3e-button-group>
  <m3e-icon-button variant="filled" width="wide">
    <m3e-icon name="fast_rewind"></m3e-icon>
  </m3e-icon-button>
  <m3e-button variant="filled">
    <m3e-icon slot="icon" name="play_arrow"></m3e-icon>Play
  </m3e-button>
  <m3e-icon-button variant="filled" width="wide">
    <m3e-icon name="fast_forward"></m3e-icon>
  </m3e-icon-button>
</m3e-button-group>
```

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

### Install M3E package

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

Use npm to add the M3E library to your project dependencies.

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

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

### Set size constraints

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

Use min and max attributes to restrict the percentage of space the start pane can occupy.

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

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

### Implement an Input Chip Set

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

An example of an input chip set within a form field, allowing users to manage keywords.

```html
<m3e-form-field>
  <label slot="label" for="keywords">Keywords</label>
  <m3e-input-chip-set aria-label="Enter keywords" disabled>
    <m3e-input-chip removable>Design</m3e-input-chip>
    <m3e-input-chip removable>Accessibility</m3e-input-chip>
    <m3e-input-chip removable>Motion</m3e-input-chip>
    <input id="keywords" slot="input" placeholder="New keyword..." />
  </m3e-input-chip-set>
</m3e-form-field>
```

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

### Configure Nav Rail Layout

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

Example of a nav-rail with a toggle button, a floating action button, and navigation items.

```html
<m3e-nav-rail id="nav-rail">
  <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>
```

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

### Basic Drawer Container Usage

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

Define start and end drawers using slots and control their visibility with attributes.

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

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

### Dialog Component Structure

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

Example of a dialog with a header, content, and action buttons using slots.

```html
<m3e-button variant="filled">
  <m3e-dialog-trigger for="dlg">Open Dialog</m3e-dialog-trigger>
</m3e-button>
<m3e-dialog id="dlg" dismissible>
  <span slot="header">Lorem ipsum dolor sit amet</span>
  <!-- Content omitted for brevity -->
  <div slot="actions" end>
    <m3e-button autofocus><m3e-dialog-action return-value="ok">Close</m3e-dialog-action></m3e-button>
  </div>
</m3e-dialog>
```

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

### Button Group Sizing

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

Example of applying a size attribute to control spacing between buttons.

```html
<m3e-button-group size="large">
  <m3e-icon-button size="large">
    <m3e-icon name="arrow_back"></m3e-icon>
  </m3e-icon-button>
  <m3e-icon-button size="large">
    <m3e-icon name="arrow_forward"></m3e-icon>
  </m3e-icon-button>
  <m3e-icon-button size="large" width="wide" variant="filled">
    <m3e-icon name="add"></m3e-icon>
  </m3e-icon-button>
  <m3e-icon-button size="large">
    <m3e-icon name="picture_in_picture"></m3e-icon>
  </m3e-icon-button>
  <m3e-icon-button size="large">
    <m3e-icon name="more_vert"></m3e-icon>
  </m3e-icon-button>
</m3e-button-group>
```

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

### Basic Stepper Implementation

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

Construct a wizard-like workflow using m3e-stepper, m3e-step, and m3e-step-panel. Ensure m3e-step and m3e-step-panel are direct children of m3e-stepper.

```html
<m3e-stepper>
  <m3e-step for="step1">Fill out your name</m3e-step>
  <m3e-step for="step2">Fill out your address</m3e-step>
  <m3e-step for="step3">Done</m3e-step>
  <m3e-step-panel id="step1">
    <form>
      <m3e-form-field>
        <label slot="label" for="name">Name</label>
        <input name="name" id="name" required />
      </m3e-form-field>
    </form>
    <div slot="actions">
      <m3e-button><m3e-stepper-next>Next</m3e-stepper-next></m3e-button>
    </div>
  </m3e-step-panel>
  <m3e-step-panel id="step2">
    <form>
      <m3e-form-field>
        <label slot="label" for="address">Address</label>
        <input name="address" id="address" required />
      </m3e-form-field>
    </form>
    <div slot="actions">
      <m3e-button><m3e-stepper-previous>Back</m3e-stepper-previous></m3e-button>
      <m3e-button><m3e-stepper-next>Next</m3e-stepper-next></m3e-button>
    </div>
  </m3e-step-panel>
  <m3e-step-panel id="step3">
    Done
    <div slot="actions">
      <m3e-button><m3e-stepper-previous>Back</m3e-stepper-previous></m3e-button>
      <m3e-button><m3e-stepper-reset>Reset</m3e-stepper-reset></m3e-button>
    </div>
  </m3e-step-panel>
</m3e-stepper>
```

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

### Apply Density Scaling to Chips

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

Demonstrates how to adjust chip density using CSS custom properties.

```html
<m3e-assist-chip class="density-3">
  <m3e-icon slot="icon" name="stars"></m3e-icon>
  Density -3
</m3e-assist-chip>
<!-- Additional chips omitted for brevity -->
```

```css
.density-3 {
  --md-sys-density-scale: -3;
}
/* Additional classes omitted for brevity */
```

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

### Import Map Configuration

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

Define dependency mappings for browser-based module loading.

```json
<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/bidi": "/node_modules/@m3e/web/dist/core-bidi.js"
    }
  }
</script>
```

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

### Loading FAB via module script

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

Use a module script to load the component directly in the browser.

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

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

### Native module and import map configuration

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

Load the component directly in the browser using a module script and define dependency locations via an import map.

```html
<script type="module" src="/node_modules/@m3e/web/dist/menu.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",
      "@m3e/web/core/a11y": "/node_modules/@m3e/web/dist/core-a11y.js",
      "@m3e/web/core/anchoring": "/node_modules/@m3e/web/dist/core-anchoring.js",
      "@m3e/web/core/bidi": "/node_modules/@m3e/web/dist/core-bidi.js"
    }
  }
</script>
```

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

### Disable Suggestion Chips

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

Examples of standard disabled state versus interactive disabled state for suggestion chips.

```html
<m3e-suggestion-chip disabled>Disabled</m3e-suggestion-chip>
<m3e-suggestion-chip disabled-interactive>Disabled Interactive</m3e-suggestion-chip>
```

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

### Native Module Support

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

Load the component directly in the browser using a module script and an import map for dependencies.

```html
<script type="module" src="/node_modules/@m3e/web/dist/badge.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",
      "@m3e/web/core/bidi": "/node_modules/@m3e/web/dist/core-bidi.js",
      "@m3e/web/core/anchoring": "/node_modules/@m3e/web/dist/core-anchoring.js"

    }
  }
</script>
```

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

### Import FAB Menu

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

Include the component in your project by importing the package.

```javascript
import "@m3e/web/fab-menu";
```

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

### Basic Split Pane usage

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

Define a split pane with start and end slots, defaulting to a 50% split.

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

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

### Native Module Loading

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

Load the tooltip component directly in the browser using a module script.

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

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

### Enable First and Last Buttons

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

Use the show-first-last-buttons attribute to display navigation controls for the start and end of the data set.

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

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

### Import Snackbar Module

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

Include the snackbar module to enable the M3eSnackbar service.

```javascript
import "@m3e/web/snackbar";
```

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

### Density-Adjusted Selection List

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

Example of applying a -3 density scale to a segmented multi-select list using CSS custom properties.

```html
<m3e-selection-list class="density-3" variant="segmented" multi>
  <!-- Options omitted for brevity -->
</m3e-selection-list>
```

```css
.density-3 {
  --md-sys-density-scale: -3;
}
```

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

### Native Module Import

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

How to include the M3E list component directly in a browser using a module script.

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

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

### Load Toolbar via Module Script

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

Include the component directly in the browser using a module script.

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

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

### Import all M3E React components

Source: https://matraic.github.io/m3e/frameworks/react.html

Load all available React bindings at once for rapid prototyping.

```javascript
import "@m3e/react/all";
```

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

### Configure Time and Datetime Input Modes

Source: https://matraic.github.io/m3e/components/date-input.html

Demonstrates how to use the type attribute to switch between time and datetime editing modes.

```html
<m3e-form-field variant="outlined">
  <label slot="label" for="field1">Time Field</label>
  <m3e-date-input id="field1" type="time" value="2026-01-01T23:30:00Z"></m3e-date-input>
  <span slot="hint">HH:MM</span>
</m3e-form-field>

<m3e-form-field variant="outlined">
  <label slot="label" for="field2">Date-time Field</label>
  <m3e-date-input id="field2" type="datetime" value="2026-01-01T23:30:00Z"></m3e-date-input>
  <span slot="hint">MM/DD/YYYY HH:MM</span>
</m3e-form-field>
```

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

### Import M3E components

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

Import individual components or the entire library suite.

```javascript
import "@m3e/web/button";
```

```javascript
import "@m3e/web/all";
```

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

### Importing the Tooltip Module

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

Include the tooltip module in your project to enable component functionality.

```javascript
import "@m3e/web/tooltip";
```

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

### Native Module Loading

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

Load the components directly in the browser using module scripts.

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

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

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

### Basic Skeleton Usage

Source: https://matraic.github.io/m3e/components/skeleton.html

Wrap content in m3e-skeleton to display a loading placeholder.

```html
<m3e-skeleton>
  <m3e-card>
    <m3e-heading slot="header" variant="display" size="small">Card Header</m3e-heading>
    <div slot="content">Card Content</div>
    <div slot="actions">
      <m3e-button variant="filled">Action</m3e-button>
    </div>
    <div slot="footer">Card Footer</div>
  </m3e-card>
</m3e-skeleton>
```

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

### Import m3e-menu

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

Include the component in your project by importing the module.

```javascript
import "@m3e/web/menu";
```

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

### Import m3e-switch

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

Import the switch component into your project.

```javascript
import "@m3e/web/switch";
```

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

### Native Module Loading

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

Load the icon component directly in the browser using a module script and an import map for dependencies.

```html
<script type="module" src="/node_modules/@m3e/web/dist/icon.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>
```

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

### Import M3E Chips Module

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

Include the module in your project to enable chip components.

```javascript
import "@m3e/web/chips";
```

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

### Configure Assist Chip as Link

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

Use the href attribute to make the chip behave like an anchor tag.

```html
<m3e-assist-chip href="https://www.google.com" target="_blank">
  Google<
</m3e-assist-chip>
```

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

### Import M3E List Module

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

Include the list module in your project to enable the components.

```javascript
import "@m3e/web/list";
```

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

### Import m3e-heading

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

Include the component in your project by importing the module.

```javascript
import "@m3e/web/heading";
```

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

### Importing the Nav Menu

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

Include the component in your project by importing the package.

```javascript
import "@m3e/web/nav-menu";
```

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

### Import Drawer Container

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

Import the component into your project.

```javascript
import "@m3e/web/drawer-container";
```

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

### Import m3e-toc

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

Include the component in your project by importing the module.

```javascript
import "@m3e/web/toc";
```

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

### Import Expansion Panel Module

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

Include the module in your project to register the custom elements.

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

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

### Importing the component

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

Include the component in your project by importing the module.

```javascript
import "@m3e/web/textarea-autosize";
```

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

### Import native module

Source: https://matraic.github.io/m3e/components/timepicker.html

Loads the timepicker component directly in the browser using a module script.

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

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

### Import m3e-tabs

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

Import the component into your project.

```javascript
import "@m3e/web/tabs";
```

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

### Implement a basic App Bar

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

Use named slots to define the leading navigation, title, subtitle, and trailing actions.

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

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

### Create Assist Chips

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

Use assist chips for automated actions.

```html
<m3e-assist-chip>Outlined Assist</m3e-assist-chip>
<m3e-assist-chip variant="elevated">Elevated Assist</m3e-assist-chip>
```

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

### Import m3e-toolbar

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

Include the component in your project by importing the module.

```javascript
import "@m3e/web/toolbar";
```

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

### Native Module Script Import

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

Include the component directly in a browser using a module script.

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

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

### Implement input chips

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

Use m3e-input-chip-set with an input slot to manage collections of values. Prepopulate using m3e-input-chip components.

```html
<m3e-form-field>
  <label slot="label" for="keywords">Keywords</label>
  <m3e-input-chip-set aria-label="Enter keywords">
    <input id="keywords" slot="input" placeholder="New keyword..." />
  </m3e-input-chip-set>
</m3e-form-field>
```

```html
<m3e-form-field>
  <label slot="label" for="keywords">Keywords</label>
  <m3e-input-chip-set aria-label="Enter keywords">
    <m3e-input-chip removable>Design</m3e-input-chip>
    <m3e-input-chip removable>Accessibility</m3e-input-chip>
    <m3e-input-chip removable>Motion</m3e-input-chip>
    <input id="keywords" slot="input" placeholder="New keyword..." />
  </m3e-input-chip-set>
</m3e-form-field>
```

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

### Load the component via module script

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

Use a module script to load the component directly in the browser without a bundler.

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

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

### Import Timepicker

Source: https://matraic.github.io/m3e/components/timepicker.html

Include the timepicker component in your project.

```javascript
import "@m3e/web/timepicker";
```

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

### Set initial calendar view

Source: https://matraic.github.io/m3e/components/datepicker.html

Configures the initial view of the calendar using the start-view attribute.

```html
<!-- Form field omitted for brevity -->
<m3e-datepicker id="datepicker" start-view="multi-year"></m3e-datepicker>
```

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

### Basic FAB Menu Implementation

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

Use m3e-fab-menu-trigger inside a m3e-fab to link to a m3e-fab-menu via the for attribute.

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

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

### Import button dependencies

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

Include required button and icon-button modules for full functionality.

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

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

### Import m3e-skeleton

Source: https://matraic.github.io/m3e/components/skeleton.html

Import the skeleton component into your project.

```javascript
import "@m3e/web/skeleton";
```

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

### Native Module Script Import

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

Load the dialog component directly in the browser using a module script.

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

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

### Load search component via module script

Source: https://matraic.github.io/m3e/components/search.html

Include the component directly in the browser using a module script tag.

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

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

### Add hint labels

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

Use the hint slot for descriptive text and configure subscript visibility with hide-subscript.

```html
<m3e-form-field hide-subscript="never">
  <label slot="label" for="fld">Field w/ hint</label>
  <input id="fld" />
  <span slot="hint">Hint text</span>
</m3e-form-field>
```

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

### Linear Progress Indicator Query

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

Use the query mode to indicate pre-loading activity.

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

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

### Configure Suggestion Chip Variants

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

Demonstrates the use of outlined and elevated variants for suggestion chips.

```html
<m3e-suggestion-chip>Outlined Suggestion</m3e-suggestion-chip>
<m3e-suggestion-chip variant="elevated">Elevated Suggestion</m3e-suggestion-chip>
```

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

### Expanded Expansion Panel

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

Use the open attribute to set the initial state of the panel to expanded.

```html
<m3e-expansion-panel open>
  <span slot="header">Panel header</span>
  Panel contents
</m3e-expansion-panel>
```

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

### Import Autocomplete Component

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

Include the autocomplete component in your project.

```javascript
import "@m3e/web/autocomplete";
```

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

### Implement Date Selection

Source: https://matraic.github.io/m3e/components/calendar.html

Define the initial date using the date attribute and handle user selection via the change event.

```html
<m3e-calendar id="calendar" date="2026-01-01"></m3e-calendar>
<div id="selected-date"></div>
```

```javascript
const calendar = document.querySelector("#calendar");
const selectedDate = document.querySelector("#selected-date");
selectedDate.textContent = "Selected Date:" + toLocaleDateString(calendar.date);
calendar.addEventListener("change", () => {
  selectedDate.textContent = "Selected Date:" + toLocaleDateString(calendar.date);
});
```

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

### Open Snackbar with Action

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

Include an action button and a callback function when opening a snackbar.

```javascript
M3eSnackbar.open("File deleted", "Undo", {
  actionCallback: () => {
    // Undo logic here
  },
});
```

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

### Import Select and Option Modules

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

Load the required JavaScript modules directly in the browser for the select component and its option dependency.

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

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

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

### Load M3E Module in Browser

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

Include the component script as a module and define an import map for dependencies when not using a bundler.

```html
<script type="module" src="/node_modules/@m3e/web/dist/radio-group.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",
      "@m3e/web/core/a11y": "/node_modules/@m3e/web/dist/core-a11y.js",
      "@m3e/web/core/bidi": "/node_modules/@m3e/web/dist/core-bidi.js"
    }
  }
</script>
```

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

### Load Module Script

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

Include the icon button component directly in the browser using a module script.

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

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

### Add Icons to Suggestion Chips

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

Shows how to include an icon in a suggestion chip using the icon slot.

```html
<m3e-suggestion-chip>
  <m3e-icon slot="icon" name="lightbulb"></m3e-icon>
  Try budget planner
</m3e-suggestion-chip>
```

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

### Import M3E Search

Source: https://matraic.github.io/m3e/components/search.html

Import the search component package into your project.

```javascript
import "@m3e/web/search";
```

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

### Construct basic tabbed views

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

Use m3e-tabs, m3e-tab, and m3e-tab-panel to create a tabbed interface. Associate tabs with panels using the for attribute.

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

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

### Import Progress Indicator

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

Import the progress indicator components into your project.

```javascript
import "@m3e/web/progress-indicator";
```

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

### Import Stepper Component

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

Include the stepper component in your project.

```javascript
import "@m3e/web/stepper";
```

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

### Basic Icon Usage

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

Render an icon by specifying its name via the name attribute.

```html
<m3e-icon name="home"></m3e-icon>
```

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

### Configure App Bar sizes

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

Apply the size attribute to switch between small, medium, and large variants.

```html
<m3e-app-bar size="medium">
  <!-- Content omitted for brevity -->
</m3e-app-bar>
<m3e-app-bar size="large">
  <!-- Content omitted for brevity -->
</m3e-app-bar>
```

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

### Import the Split Pane component

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

Include the component definition in your project.

```javascript
import "@m3e/web/split-pane";
```

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

### Load Stepper Module

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

Include the stepper component directly in the browser using a module script.

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

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

### Configure Drawer Width

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

Set custom widths for drawers using inline styles or CSS custom properties.

```html
<m3e-drawer-container start>
  <div slot="start" style="width: 200px;">Start drawer</div>
  <div>Main content</div>
</m3e-drawer-container>
```

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

### Configure Heading Variants and Sizes

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

Use the variant and size attributes to define the visual style of the heading.

```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>
<!-- Additional variants omitted for brevity -->
```

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

### Load Nav Menu via Module Script

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

Use a module script to load the nav-menu component directly in the browser without a bundler.

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

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

### Importing the FAB component

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

Include the component in your project by importing the package.

```javascript
import "@m3e/web/fab";
```

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

### Implement Search-as-you-type with Debouncing

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

Shows how to perform a debounced search with cancellation support and custom filtering.

```html
<m3e-form-field>
  <label slot="label" for="state">State</label>
  <input id="state" />
</m3e-form-field>
<m3e-autocomplete for="state" filter="none" class="search">
</m3e-autocomplete>
```

```javascript
const search = document.querySelector("m3e-autocomplete.search");

let debounceTimer = -1;
let activeRequest = null;

search.addEventListener("query", (e) => {
  const term = e.detail.term?.trim().toLowerCase();

  // User is typing → reset debounce, but do NOT show loading yet
  clearTimeout(debounceTimer);

  // If user cleared the field
  if (!term) {
    // Cancel any in‑flight request
    if (activeRequest) activeRequest.abort();

    // Reset UI
    search.querySelectorAll("m3e-option").forEach((x) => x.remove());
    search.hideNoData = true;
    search.loading = false;
    return;
  }

  // Now a real search is happening → show loading
  search.loading = true;
  search.hideNoData = false;

  // If a request is already loading, keep showing loading
  // but cancel the old request
  if (activeRequest) activeRequest.abort();

  // Start debounce
  debounceTimer = setTimeout(() => {
    // Clear old results (so we don't show stale data)
    search.querySelectorAll("m3e-option").forEach((x) => x.remove());

    // Create a cancellable "request"
    const controller = new AbortController();
    activeRequest = controller;

    // Simulate async search
    setTimeout(() => {
      // If canceled, do nothing
      if (controller.signal.aborted) return;

      // Populate results
      usStates
        .filter((x) => x.toLowerCase().includes(term))
        .forEach((state) => {
          const option = document.createElement("m3e-option");
          option.innerText = state;
          search.appendChild(option);
        });

      search.loading = false;

      activeRequest = null;
    }, 2000);
  }, 300); // debounce delay
});
```

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

### Importing the Theme Component

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

Include the theme component in your project by importing the package.

```javascript
import "@m3e/web/theme";
```

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

### Load M3E theme module

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

Include the theme component directly in the browser using a module script.

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

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

### Create action lists

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

Use m3e-action-list and m3e-list-action for lists where items trigger actions. Supports standard and segmented variants.

```html
<m3e-action-list>
  <m3e-list-action>Action 1</m3e-list-action>
  <!-- Additional actions omitted for brevity -->
</m3e-action-list>
```

```html
<m3e-action-list variant="segmented">
  <m3e-list-action>Action 1</m3e-list-action>
  <!-- Additional actions omitted for brevity -->
</m3e-action-list>
```

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

### Basic m3e-menu implementation

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

Use m3e-menu-trigger with the for attribute to link a button to a menu.

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

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

### Import m3e-tree

Source: https://matraic.github.io/m3e/components/tree.html

Include the component in your project by importing the module.

```javascript
import "@m3e/web/tree";
```

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

### Configuring m3e-switch icons

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

Use the icons attribute to display selected or both icons.

```html
<m3e-switch icons="selected" checked></m3e-switch>
<m3e-switch icons="both"></m3e-switch>
```

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

### Basic Split Button Implementation

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

Structure a split button using leading-button and trailing-button slots, paired with an m3e-menu.

```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="menu"></m3e-menu-trigger>
  </m3e-icon-button>
</m3e-split-button>
<m3e-menu id="menu" position-x="before">
  <m3e-menu-item>Rename</m3e-menu-item>
  <m3e-menu-item>Copy</m3e-menu-item>
  <m3e-menu-item>Delete</m3e-menu-item>
</m3e-menu>
```

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

### Load M3E Card Module

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

Include the component directly in the browser using a module script tag.

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

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

### Implement Search Bar

Source: https://matraic.github.io/m3e/components/search.html

Create a search bar with a leading icon and clearable functionality.

```html
<m3e-search-bar clearable>
  <m3e-icon name="search" slot="leading"></m3e-icon>
  <input slot="input" placeholder="Search..." />
</m3e-search-bar>
```

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

### Implementing Toggle Buttons

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

Enable binary selection using the toggle attribute and manage state with the selected attribute.

```html
<m3e-button variant="elevated" toggle>Elevated Toggle</m3e-button>
<!-- Additional variants omitted for brevity -->
```

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

### Implement Lazy Loading for Autocomplete

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

Demonstrates lazy loading initial data on input focus with a loading indicator.

```html
<m3e-form-field>
  <label slot="label" for="state">State</label>
  <input id="state" />
</m3e-form-field>
<m3e-autocomplete for="state" class="lazy">
</m3e-autocomplete>
```

```javascript
const lazy = document.querySelector("m3e-autocomplete.lazy");
lazy.addEventListener("query", () => {
  if (!lazy.querySelector("m3e-option")) {
    lazy.loading = true;
    setTimeout(() => {
      usStates.forEach((state) => {
        const option = document.createElement("m3e-option");
        option.innerText = state;
        lazy.appendChild(option);
      });
      lazy.loading = false;
    }, 2000);
  }
});
```

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

### Configure Page Sizes

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

Define available page size options using the page-sizes attribute.

```html
<m3e-paginator length="100" page-sizes="10,50,all" page-size="all"></m3e-paginator>
```
Tokens:
Raw