### Tooltip HTML Examples

Source: https://context7.com/materializecss/materialize/llms.txt

Provides HTML examples for Materialize Tooltips, showcasing different positions and trigger elements.

```html
<a class="btn tooltipped" data-position="bottom" data-tooltip="I am a tooltip">
  Hover me
</a>

<button class="btn tooltipped" data-position="top" data-tooltip="Top tooltip">
  Top
</button>

<span class="tooltipped" data-position="left" data-tooltip="Left tooltip">
  Left tooltip text
</span>
```

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

### Installation

Source: https://context7.com/materializecss/materialize/llms.txt

Instructions on how to install Materialize CSS via npm, CDN, or as an ES Module.

```APIDOC
## Installation

### Install Materialize via npm

```bash
npm install @materializecss/materialize
```

### Include via CDN

```html
<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@materializecss/materialize@2.3.3/dist/css/materialize.min.css">

<!-- JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/@materializecss/materialize@2.3.3/dist/js/materialize.min.js"></script>
```

### Import as ES Module

```javascript
import {
  AutoInit,
  Modal,
  Dropdown,
  Tabs,
  Carousel,
  Collapsible,
  Toast,
  Tooltip,
  Sidenav,
  Datepicker,
  Autocomplete,
  Chips,
  Parallax
} from '@materializecss/materialize';
```
```

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

### Install Materialize via npm

Source: https://context7.com/materializecss/materialize/llms.txt

Install the Materialize CSS framework using npm. This is the recommended method for project integration.

```bash
npm install @materializecss/materialize
```

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

### Install Materialize via npm

Source: https://github.com/materializecss/materialize/blob/main/README.md

Install the Materialize CSS framework using npm. Use the '@next' tag for the beta version.

```bash
npm install @materializecss/materialize
```

```bash
npm install @materializecss/materialize@next
```

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

### Run Materialize Demo

Source: https://github.com/materializecss/materialize/blob/main/README.md

For quick testing and development, install the 'live-server' node package globally and run the demo command.

```bash
npm run demo
```

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

### Basic Chip Examples

Source: https://github.com/materializecss/materialize/blob/main/components/chip/readme.md

These examples demonstrate the basic structure of Materialize CSS chips, including chips with images for contacts, simple text tags, and chips with both icons and close buttons.

```html
<div class="chip">
  <img src="images/yuna.jpg" alt="Contact Person"> Jane Doe
</div>
```

```html
<div class="chip">
  Tag
  <i class="close material-icons">close</i>
</div>
```

```html
<div class="chip">
  <i class="material-icons">check</i>
  Filter
  <i class="close material-icons">close</i>
</div>
```

```html
<div class="chip outlined">Information</div>
```

```html
<div class="chip outlined">
  <i class="material-icons">check</i>
  Filter
  <i class="close material-icons">close</i>
</div>
```

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

### Create and Render a Counter App Widget

Source: https://github.com/materializecss/materialize/blob/main/index.html

Shows how to create a nested component, render it as HTML, and then manipulate its elements and event listeners. This example involves creating a counter widget with increment and decrement buttons.

```javascript
import { createCounterApp } from '/components/button/examples.iso.js';

const app = createCounterApp();
const appHtml = app.toHTML();
console.log(appHtml);

// html => element
const template = document.createElement('template');
template.innerHTML = appHtml;
const appElem = template.content.firstElementChild;
document.querySelector('.app').replaceChildren(appElem);

function count(input) {
    const value = input.value + input.increment;
    return { value }
}

const state = { value: 12 };
const numberEl = appElem.querySelector('.mw-number'); // output
const btns = appElem.querySelectorAll('.btn'); // input

numberEl.innerHTML = state.value;

btns[0].addEventListener('click', e => {
    state.value = count({ value: state.value , increment: 1 }).value;
    numberEl.innerHTML = state.value;
})

btns[1].addEventListener('click', e => {
    state.value = count({ value: state.value , increment: -1 }).value;
    numberEl.innerHTML = state.value;
})

M.AutoInit();
```

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

### Get Chips Instance

Source: https://github.com/materializecss/materialize/blob/main/components/chip/readme.md

Retrieve the plugin instance for a given element to interact with its methods.

```javascript
const instance = M.Chips.getInstance(elem);
```

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

### Clone Materialize Repository

Source: https://github.com/materializecss/materialize/blob/main/README.md

Clone the Materialize CSS framework repository from GitHub to get the latest source code.

```bash
git clone https://github.com/materializecss/materialize.git
```

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

### Default Checkbox Example

Source: https://github.com/materializecss/materialize/blob/main/components/checkbox/checkbox.mdx

Standard checkbox implementation. Ensure the 'for' attribute of the label matches the 'id' of the input for correct functionality.

```html
<label>
  <input type="checkbox" />
  <span>Unchecked</span>
</label>
```

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

### Filled-in Checkbox Example

Source: https://github.com/materializecss/materialize/blob/main/components/checkbox/checkbox.mdx

A filled-in checkbox variant. This style is applied when the checkbox is checked.

```html
<label>
  <input type="checkbox" checked="checked" />
  <span>Filled in</span>
</label>
```

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

### Include Materialize via CDN

Source: https://context7.com/materializecss/materialize/llms.txt

Include Materialize CSS and JavaScript files directly from a CDN. Useful for quick setup or projects not using a package manager.

```html
<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@materializecss/materialize@2.3.3/dist/css/materialize.min.css">

<!-- JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/@materializecss/materialize@2.3.3/dist/js/materialize.min.js"></script>
```

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

### Indeterminate Checkbox Example

Source: https://github.com/materializecss/materialize/blob/main/components/checkbox/checkbox.mdx

An indeterminate checkbox state. This is typically used when a group of sub-items has mixed states.

```html
<label>
  <input type="checkbox" class="indeterminate" />
  <span>Indeterminate</span>
</label>
```

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

### Disabled Radio Button Example

Source: https://github.com/materializecss/materialize/blob/main/components/radio-button/radio-buttons.mdx

Create disabled radio buttons by adding the `disabled` attribute to the input element.

```html
<label>
  <input type="radio" name="group1" disabled="disabled" />
  <span>Disabled</span>
</label>
```

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

### Default Radio Button Example

Source: https://github.com/materializecss/materialize/blob/main/components/radio-button/radio-buttons.mdx

Standard radio button implementation. Ensure the `for` attribute of the label matches the `id` of the input for proper functionality.

```html
<label>
  <input type="radio" name="group1" />
  <span>Red</span>
</label>
```

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

### Initialize Parallax Component

Source: https://context7.com/materializecss/materialize/llms.txt

Use this to initialize the parallax effect on an element. You can set a responsive threshold to disable the effect on smaller screens. To get an instance, use Parallax.getInstance().

```javascript
import { Parallax } from '@materializecss/materialize';

// Initialize parallax
const parallaxEl = document.querySelector('.parallax');
const parallaxInstance = Parallax.init(parallaxEl, {
  responsiveThreshold: 0      // Min screen width for parallax effect
});

// Initialize all parallax elements
const allParallax = document.querySelectorAll('.parallax');
Parallax.init(allParallax);

// Disable parallax on mobile (screens < 600px)
Parallax.init(document.querySelector('.parallax'), {
  responsiveThreshold: 600
});

// Get instance
const instance = Parallax.getInstance(parallaxEl);

// Destroy
parallaxInstance.destroy();
```

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

### Materialize CSS Utility Functions

Source: https://context7.com/materializecss/materialize/llms.txt

Provides utility functions for generating unique IDs, getting scroll positions, throttling function calls, handling keyboard events with key code maps, and checking keyboard focus states.

```javascript
import { Utils } from '@materializecss/materialize';

// Generate unique ID
const uniqueId = Utils.guid();
console.log('Unique ID:', uniqueId);  // e.g., "a1b2c3d4-e5f6-g7h8-i9j0-k1l2m3n4o5p6"

// Get document scroll position
const scrollTop = Utils.getDocumentScrollTop();
const scrollLeft = Utils.getDocumentScrollLeft();

// Throttle function calls
const throttledHandler = Utils.throttle(function() {
  console.log('Scroll event throttled');
}, 100);
window.addEventListener('scroll', throttledHandler);

// Key code maps for keyboard events
document.addEventListener('keydown', function(e) {
  if (Utils.keys.ENTER.includes(e.key)) {
    console.log('Enter pressed');
  }
  if (Utils.keys.ESC.includes(e.key)) {
    console.log('Escape pressed');
  }
  if (Utils.keys.ARROW_UP.includes(e.key)) {
    console.log('Arrow up pressed');
  }
  if (Utils.keys.ARROW_DOWN.includes(e.key)) {
    console.log('Arrow down pressed');
  }
  if (Utils.keys.TAB.includes(e.key)) {
    console.log('Tab pressed');
  }
});

// Check keyboard focus state
console.log('Tab pressed:', Utils.tabPressed);
console.log('Key down:', Utils.keyDown);

// Get target ID from trigger element
const triggerId = Utils.getIdFromTrigger(document.querySelector('[data-target]'));
console.log('Target ID:', triggerId);
```

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

### Initialize Appbar Component

Source: https://github.com/materializecss/materialize/blob/main/index.html

Demonstrates how to create and render an Appbar component using Materialize CSS. Ensure the Appbar component is imported and the target DOM element exists.

```javascript
import { TextField } from "@materializecss/materialize/components/textfield/textfield.mjs";
import { AppBar } from "@materializecss/materialize/components/appbar/appbar.mjs";

const appBar = new AppBar().setTitle('My App');
document.querySelector('.appbar').innerHTML = appBar.toHTML();
```

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

### Initialize and Control Materialize Dropdown Component

Source: https://context7.com/materializecss/materialize/llms.txt

Shows how to initialize the Dropdown component with various options like alignment, auto-focus, width constraints, and callbacks for opening and closing. Also demonstrates programmatic control and state checking.

```javascript
import { Dropdown } from '@materializecss/materialize';

// Initialize dropdown
const dropdownEl = document.querySelector('.dropdown-trigger');
const dropdownInstance = Dropdown.init(dropdownEl, {
  alignment: 'left',          // 'left' or 'right'
  autoFocus: true,            // Auto-focus first item
  constrainWidth: true,       // Match trigger width
  coverTrigger: true,         // Cover or below trigger
  closeOnClick: true,         // Close on item click
  hover: false,               // Open on hover
  inDuration: 150,
  outDuration: 250,
  onOpenStart: function(el) {
    console.log('Dropdown opening');
  },
  onOpenEnd: function(el) {
    console.log('Dropdown opened');
  },
  onCloseStart: function(el) {
    console.log('Dropdown closing');
  },
  onCloseEnd: function(el) {
    console.log('Dropdown closed');
  },
  onItemClick: function(el) {
    console.log('Item clicked:', el.textContent);
  }
});

// Programmatic control
dropdownInstance.open();
dropdownInstance.close();
dropdownInstance.recalculateDimensions();

// Check state
console.log('Is open:', dropdownInstance.isOpen);
console.log('Dropdown element:', dropdownInstance.dropdownEl);
```

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

### Initialize and Control Tooltip with JavaScript

Source: https://context7.com/materializecss/materialize/llms.txt

Initializes Materialize Tooltips with various options, demonstrates programmatic control, and custom HTML tooltips.

```javascript
import { Tooltip } from '@materializecss/materialize';

// Initialize tooltip
const tooltipEl = document.querySelector('.tooltipped');
const tooltipInstance = Tooltip.init(tooltipEl, {
  position: 'bottom',         // 'top', 'right', 'bottom', 'left'
  text: 'Tooltip text',       // Overrides data-tooltip attribute
  enterDelay: 0,              // Delay before showing (ms)
  exitDelay: 200,             // Delay before hiding (ms)
  margin: 5,                  // Distance from element
  inDuration: 250,
  outDuration: 200,
  transitionMovement: 10,     // Animation movement in px
  opacity: 1
});

// Initialize all tooltips
const allTooltips = document.querySelectorAll('.tooltipped');
Tooltip.init(allTooltips);

// Programmatic control
tooltipInstance.open(true);   // Show tooltip (true = manual trigger)
tooltipInstance.close();      // Hide tooltip

// Check state
console.log('Is open:', tooltipInstance.isOpen);
console.log('Tooltip element:', tooltipInstance.tooltipEl);

// Using custom HTML tooltip via template
// HTML: <div id="tooltip-content" style="display:none">Custom <b>HTML</b> tooltip</div>
// <button class="tooltipped" data-tooltip-id="tooltip-content">Hover</button>
Tooltip.init(document.querySelector('[data-tooltip-id]'), {
  tooltipId: 'tooltip-content'
});
```

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

### Clone and Set Up Repository Remotes

Source: https://github.com/materializecss/materialize/blob/main/docs/CONTRIBUTING.md

Clone your fork of the Materialize repository and set the upstream remote to the main project repository.

```bash
git clone https://github.com/<your-username>/materialize.git
cd materialize
git remote add upstream https://github.com/materializecss/materialize.git
```

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

### AutoInit - Automatic Component Initialization

Source: https://context7.com/materializecss/materialize/llms.txt

The AutoInit function automatically initializes all Materialize components found in the DOM based on their CSS classes.

```APIDOC
## AutoInit - Automatic Component Initialization

The `AutoInit` function automatically initializes all Materialize components found in the DOM based on their CSS classes. This is the simplest way to enable all components on a page without manually initializing each one.

```javascript
import { AutoInit } from '@materializecss/materialize';

// Initialize all components with default options
document.addEventListener('DOMContentLoaded', function() {
  AutoInit();
});

// Initialize with custom options for specific components
AutoInit(document.body, {
  Modal: {
    opacity: 0.7,
    inDuration: 300,
    outDuration: 200
  },
  Dropdown: {
    coverTrigger: false,
    constrainWidth: false
  },
  Tooltip: {
    position: 'top',
    enterDelay: 200
  }
});

// Initialize only within a specific container
const container = document.getElementById('my-container');
AutoInit(container);
```
```

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

### Initialize and Control Sidenav with JavaScript

Source: https://context7.com/materializecss/materialize/llms.txt

Initializes a Materialize Sidenav with various options and demonstrates programmatic control and state checking.

```javascript
import { Sidenav } from '@materializecss/materialize';

// Initialize sidenav
const sidenavEl = document.querySelector('.sidenav');
const sidenavInstance = Sidenav.init(sidenavEl, {
  edge: 'left',               // 'left' or 'right'
  draggable: true,            // Enable swipe gestures
  dragTargetWidth: '10px',    // Swipe target width
  inDuration: 250,
  outDuration: 200,
  preventScrolling: true,     // Prevent body scroll when open
  onOpenStart: function(el) {
    console.log('Sidenav opening');
  },
  onOpenEnd: function(el) {
    console.log('Sidenav opened');
  },
  onCloseStart: function(el) {
    console.log('Sidenav closing');
  },
  onCloseEnd: function(el) {
    console.log('Sidenav closed');
  }
});

// Programmatic control
sidenavInstance.open();
sidenavInstance.close();

// Check state
console.log('Is open:', sidenavInstance.isOpen);
console.log('Is fixed:', sidenavInstance.isFixed);

// Right-side sidenav
Sidenav.init(document.querySelector('.sidenav-right'), {
  edge: 'right'
});
```

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

### AutoInit - Automatic Component Initialization

Source: https://context7.com/materializecss/materialize/llms.txt

Automatically initialize all Materialize components on the page. Can be used with default options, custom options, or restricted to a specific DOM container.

```javascript
import { AutoInit } from '@materializecss/materialize';

// Initialize all components with default options
document.addEventListener('DOMContentLoaded', function() {
  AutoInit();
});

// Initialize with custom options for specific components
AutoInit(document.body, {
  Modal: {
    opacity: 0.7,
    inDuration: 300,
    outDuration: 200
  },
  Dropdown: {
    coverTrigger: false,
    constrainWidth: false
  },
  Tooltip: {
    position: 'top',
    enterDelay: 200
  }
});

// Initialize only within a specific container
const container = document.getElementById('my-container');
AutoInit(container);
```

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

### Initialize and Control Materialize Tabs Component

Source: https://context7.com/materializecss/materialize/llms.txt

Demonstrates initializing the Tabs component with options for transition duration and swipeable behavior. Includes methods for programmatically selecting tabs, updating the indicator, and destroying the instance.

```javascript
import { Tabs } from '@materializecss/materialize';

// Initialize tabs
const tabsEl = document.querySelector('.tabs');
const tabsInstance = Tabs.init(tabsEl, {
  duration: 300,              // Transition duration in ms
  swipeable: false,           // Enable swipe on touch devices
  responsiveThreshold: Infinity,  // Max width for swipeable
  onShow: function(newContent) {
    console.log('Tab shown:', newContent.id);
  }
});

// Programmatically select a tab
tabsInstance.select('tab2');

// Get current tab index
console.log('Current tab index:', tabsInstance.index);

// Update indicator position (useful after dynamic content changes)
tabsInstance.updateTabIndicator();

// Destroy instance
tabsInstance.destroy();
```

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

### Default Chips Initialization

Source: https://github.com/materializecss/materialize/blob/main/components/chip/chips.mdx

Use this for a basic chips component with no initial tags.

```html
<div class="chips"></div>
```

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

### Initialize and Use Materialize Toast Component

Source: https://context7.com/materializecss/materialize/llms.txt

Demonstrates how to create and manage toast notifications. Includes basic usage, custom options for display length, duration, styling, and callbacks. Also shows how to dismiss all toasts or specific instances.

```javascript
import { Toast } from '@materializecss/materialize';

// Basic toast
new Toast({ text: 'I am a toast!' });

// Toast with custom options
new Toast({
  text: 'Operation completed successfully!',
  displayLength: 4000,        // Display duration in ms
  inDuration: 300,            // Fade-in duration
  outDuration: 375,           // Fade-out duration
  classes: 'green darken-1 rounded',  // Custom CSS classes
  activationPercent: 0.8,     // Swipe distance to dismiss (0-1)
  completeCallback: function() {
    console.log('Toast dismissed');
  }
});

// Toast with HTML content using a template
// HTML: <template id="toast-template"><span>Custom <strong>HTML</strong> content</span></template>
new Toast({
  toastId: 'toast-template',
  displayLength: 5000
});

// Dismiss all active toasts
Toast.dismissAll();

// Get toast instance from element
const toastEl = document.querySelector('.toast');
const toastInstance = Toast.getInstance(toastEl);
toa`stInstance.dismiss();
```

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

### Initialize Autocomplete with Static Data

Source: https://context7.com/materializecss/materialize/llms.txt

Use this for basic autocomplete functionality with a predefined list of options. Configure minimum characters for search and dropdown appearance.

```html
<div class="input-field">
  <input type="text" id="autocomplete-input" class="autocomplete">
  <label for="autocomplete-input">Search</label>
</div>
```

```javascript
import { Autocomplete } from '@materializecss/materialize';

// Basic autocomplete with static data
const autocompleteEl = document.querySelector('.autocomplete');
const autocompleteInstance = Autocomplete.init(autocompleteEl, {
  data: [
    { id: 'apple', text: 'Apple', image: 'apple.jpg', description: 'A red fruit' },
    { id: 'banana', text: 'Banana', description: 'A yellow fruit' },
    { id: 'cherry', text: 'Cherry' },
    { id: 'grape', text: 'Grape', image: 'grape.jpg' }
  ],
  minLength: 1,               // Min chars before search
  maxDropDownHeight: '300px',
  allowUnsafeHTML: false,
  isMultiSelect: false,
  dropdownOptions: {
    autoFocus: false,
    closeOnClick: false,
    coverTrigger: false
  },
  onAutocomplete: function(entries) {
    console.log('Selected:', entries);
  }
});
```

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

### Initialize and Control Collapsible with JavaScript

Source: https://context7.com/materializecss/materialize/llms.txt

Import the Collapsible class and initialize it. Set 'accordion: true' for accordion behavior or 'accordion: false' for expandable behavior. Use methods like 'open', 'close', and 'destroy' for programmatic control.

```javascript
import { Collapsible } from '@materializecss/materialize';

// Initialize as accordion
const collapsibleEl = document.querySelector('.collapsible');
const collapsibleInstance = Collapsible.init(collapsibleEl, {
  accordion: true,            // true = accordion, false = expandable
  inDuration: 300,
  outDuration: 300,
  onOpenStart: function(el) {
    console.log('Opening section:', el);
  },
  onOpenEnd: function(el) {
    console.log('Opened section:', el);
  },
  onCloseStart: function(el) {
    console.log('Closing section:', el);
  },
  onCloseEnd: function(el) {
    console.log('Closed section:', el);
  }
});

// Initialize as expandable (multiple open)
Collapsible.init(document.querySelector('.collapsible.expandable'), {
  accordion: false
});

// Programmatic control
collapsibleInstance.open(0);   // Open first section
collapsibleInstance.open(2);   // Open third section
collapsibleInstance.close(0);  // Close first section

// Destroy instance
collapsibleInstance.destroy();
```

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

### Chips with Placeholders and Custom Hints

Source: https://github.com/materializecss/materialize/blob/main/components/chip/chips.mdx

Customize the placeholder and hint texts for the chips input.

```html
<div class="chips chips-placeholder"></div>
```

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

### Initialize and Control Carousel with JavaScript

Source: https://context7.com/materializecss/materialize/llms.txt

Import the Carousel class and initialize it with desired options. Use navigation methods to control the carousel programmatically.

```javascript
import { Carousel } from '@materializecss/materialize';

// Initialize carousel
const carouselEl = document.querySelector('.carousel');
const carouselInstance = Carousel.init(carouselEl, {
  duration: 200,              // Transition duration
  dist: -100,                 // Perspective zoom (-100 = default 3D effect, 0 = flat)
  shift: 0,                   // Center item spacing
  padding: 0,                 // Item padding
  numVisible: 5,              // Number of visible items
  fullWidth: false,           // Full-width slider mode
  indicators: false,          // Show dot indicators
  noWrap: false,              // Disable infinite wrapping
  onCycleTo: function(current, dragged) {
    console.log('Cycled to:', current);
    console.log('Was dragged:', dragged);
  }
});

// Navigation methods
carouselInstance.next();      // Go to next slide
carouselInstance.next(2);     // Go forward 2 slides
carouselInstance.prev();      // Go to previous slide
carouselInstance.prev(3);     // Go back 3 slides
carouselInstance.set(2);      // Go to specific slide index

// Set with callback
carouselInstance.set(0, function(item, dragged) {
  console.log('Reached slide:', item);
});

// Get current center index
console.log('Current slide:', carouselInstance.center);
```

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

### Login to npm Registry

Source: https://github.com/materializecss/materialize/blob/main/docs/FOR_MAINTAINERS.md

If you haven't logged into the npm registry before, use 'npm login' to authenticate with your npmjs credentials. This is required before publishing.

```bash
npm login
```

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

### Initialize Autocomplete with Async Data and Custom Search

Source: https://context7.com/materializecss/materialize/llms.txt

Load autocomplete suggestions dynamically from an API. Implement a custom 'onSearch' function to fetch and display results based on user input.

```javascript
Autocomplete.init(document.querySelector('#async-autocomplete'), {
  data: [],
  minLength: 2,
  onSearch: async function(text, autocomplete) {
    // Fetch data from API
    const response = await fetch(`/api/search?q=${encodeURIComponent(text)}`);
    const results = await response.json();
    // Update menu items
    autocomplete.setMenuItems(results.map(item => ({
      id: item.id,
      text: item.name,
      description: item.description
    })));
  },
  onAutocomplete: function(entries) {
    console.log('Selected from API:', entries);
  }
});
```

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

### Checkout and Pull Development Branch

Source: https://github.com/materializecss/materialize/blob/main/docs/FOR_MAINTAINERS.md

Before releasing a new version, ensure your local repository is up-to-date by checking out and pulling the latest changes from the 'v2-dev' branch. Run tests to confirm stability.

```bash
git checkout v2-dev
git pull origin v2-dev
```

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

### Initialize Multi-select Autocomplete

Source: https://context7.com/materializecss/materialize/llms.txt

Configure Autocomplete to allow users to select multiple items from the suggestions. Pre-select items using the 'selected' option.

```javascript
Autocomplete.init(document.querySelector('#multi-autocomplete'), {
  data: [
    { id: 1, text: 'Tag 1' },
    { id: 2, text: 'Tag 2' },
    { id: 3, text: 'Tag 3' }
  ],
  isMultiSelect: true,
  selected: [1],  // Pre-selected IDs
  onAutocomplete: function(entries) {
    console.log('Selected items:', entries);
  }
});
```

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

### Chips Options

Source: https://github.com/materializecss/materialize/blob/main/components/chip/readme.md

Configuration options available when initializing the Materialize CSS Chips component.

```APIDOC
## Options

This table lists the available options for configuring the Materialize CSS Chips component.

| Name | Type | Default | Description |
|---|---|---|---|
| data | Array | [] | Set the chip data (look at the Chip data object) |
| placeholder | String | '' | Set first placeholder when there are no tags. |
| secondaryPlaceholder | String | '' | Set second placeholder when adding additional tags. |
| closeIconClass | String | 'material-icons' | Specifies class to be used in "close" button (useful when working with Material Symbols icon set). |
| allowUserInput | Boolean | false | Specifies option to render user input field |
| autocompleteOptions | Object | {} | Set autocomplete options. |
| autocompleteOnly | Boolean | false | Toggles ability to add custom value not in autocomplete list. |
| limit | Integer | Infinity | Set chips limit. |
| onChipAdd | Function | null | Callback for chip add. |
| onChipSelect | Function | null | Callback for chip select. |
| onChipDelete | Function | null | Callback for chip delete. |
```

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

### Create a New Topic Branch

Source: https://github.com/materializecss/materialize/blob/main/docs/CONTRIBUTING.md

Create a new branch for your specific feature or bug fix.

```bash
git checkout -b <topic-branch-name>
```

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

### Push Tags to Server

Source: https://github.com/materializecss/materialize/blob/main/docs/FOR_MAINTAINERS.md

After updating the version and verifying file changes, push all tags to the remote server to include the new version tag.

```bash
git push --tags
```

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

### Chips with Initial Tags

Source: https://github.com/materializecss/materialize/blob/main/components/chip/chips.mdx

Set initial tags for the chips component. Ensure data format is updated for version 2.0.0.

```html
<div class="chips chips-initial"></div>
```

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

### Programmatically Control Datepicker Instance

Source: https://context7.com/materializecss/materialize/llms.txt

Demonstrates how to programmatically set the date and navigate the calendar view of an initialized Datepicker instance, and retrieve its string representation.

```javascript
// Set date programmatically
datepickerInstance.setDate(new Date(2024, 5, 15));
datepickerInstance.gotoDate(new Date(2024, 11, 1));

// Get formatted date string
console.log('Date string:', datepickerInstance.toString());
console.log('Selected date:', datepickerInstance.date);
```

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

### Initialize Basic and Range Datepickers with Options

Source: https://context7.com/materializecss/materialize/llms.txt

Initializes the Materialize CSS Datepicker with various configuration options, including date formatting, min/max dates, disabling weekends, internationalization, and setting up a date range.

```javascript
import { Datepicker } from '@materializecss/materialize';

// Basic datepicker
const datepickerEl = document.querySelector('.datepicker');
const datepickerInstance = Datepicker.init(datepickerEl, {
  format: 'mmm dd, yyyy',
  defaultDate: new Date(),
  setDefaultDate: true,
  firstDay: 0,
  minDate: new Date(2020, 0, 1),
  maxDate: new Date(2030, 11, 31),
  yearRange: 10,
  disableWeekends: false,
  disableDayFn: function(date) {
    return date.getDay() === 0;
  },
  showClearBtn: true,
  autoSubmit: true,
  i18n: {
    cancel: 'Cancel',
    clear: 'Clear',
    done: 'Ok',
    months: ['January', 'February', 'March', 'April', 'May', 'June',
             'July', 'August', 'September', 'October', 'November', 'December'],
    monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                  'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    weekdays: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
    weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
    weekdaysAbbrev: ['S', 'M', 'T', 'W', 'T', 'F', 'S']
  },
  onSelect: function(selectedDate) {
    console.log('Selected:', selectedDate);
  },
  onDraw: function() {
    console.log('Calendar redrawn');
  }
});

// Date range picker
Datepicker.init(document.querySelector('#start-date'), {
  isDateRange: true,
  dateRangeEndEl: '#end-date',
  format: 'yyyy-mm-dd',
  onSelect: function(date) {
    console.log('Range start:', this.date);
    console.log('Range end:', this.endDate);
  }
});
```

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

### Publish Release to npmjs

Source: https://github.com/materializecss/materialize/blob/main/docs/FOR_MAINTAINERS.md

Once the dry run is successful, publish the new version to the npmjs registry using the 'npm publish' command. Follow any on-screen instructions.

```bash
npm publish
```

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

### Chips Methods

Source: https://github.com/materializecss/materialize/blob/main/components/chip/readme.md

Methods available to interact with an initialized Materialize CSS Chips instance.

```APIDOC
## Methods

Use these methods to interact with chips. All the methods are called on the plugin instance.

### .addChip()
Add chip to input.

#### Arguments
<b>Chip:</b> Chip data object.

```javascript
instance.addChip({
  id: 1337,
  text: 'John Doe', // optional
  image: '', // optional
});
```

### .deleteChip()
Delete nth chip.

#### Arguments
<b>Integer:</b> Index of chip.

```javascript
instance.deleteChip(3); // Delete 3rd chip.
```

### .selectChip()
Select nth chip.

#### Arguments
<b>Integer:</b> Index of chip.

```javascript
instance.selectChip(2); // Select 2nd chip
```
```

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

### Push Topic Branch to Fork

Source: https://github.com/materializecss/materialize/blob/main/docs/CONTRIBUTING.md

Upload your local topic branch to your forked repository on GitHub.

```bash
git push origin <topic-branch-name>
```

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

### Basic Chips with User Input and Autocomplete Integration

Source: https://context7.com/materializecss/materialize/llms.txt

Create interactive tag input fields using the Chips component. Configure placeholders, allow user input, and integrate with autocomplete for suggestions.

```html
<!-- Input chips -->
<div class="chips chips-input" id="my-chips"></div>

<!-- Chips with autocomplete -->
<div class="chips chips-autocomplete" id="autocomplete-chips"></div>
```

```javascript
import { Chips } from '@materializecss/materialize';

// Basic chips with user input
const chipsEl = document.querySelector('#my-chips');
const chipsInstance = Chips.init(chipsEl, {
  data: [
    { id: 'tag1', text: 'Tag 1' },
    { id: 'tag2', text: 'Tag 2', image: 'avatar.jpg' }
  ],
  placeholder: 'Enter a tag',
  secondaryPlaceholder: '+Tag',
  allowUserInput: true,
  limit: 10,                  // Max number of chips
  closeIconClass: 'material-icons',
  onChipAdd: function(el, chip) {
    console.log('Chip added:', chip);
  },
  onChipSelect: function(el, chip) {
    console.log('Chip selected:', chip);
  },
  onChipDelete: function(el, chip) {
    console.log('Chip deleted:', chip);
  }
});

// Chips with autocomplete
Chips.init(document.querySelector('#autocomplete-chips'), {
  placeholder: 'Add tags',
  allowUserInput: true,
  autocompleteOnly: true,     // Only allow autocomplete selections
  autocompleteOptions: {
    data: [
      { id: 'html', text: 'HTML' },
      { id: 'css', text: 'CSS' },
      { id: 'javascript', text: 'JavaScript' },
      { id: 'typescript', text: 'TypeScript' }
    ],
    minLength: 1
  },
  onChipAdd: function(el, chip) {
    console.log('Tag added:', this.chipsData);
  }
});
```

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

### Chips with Autocomplete

Source: https://github.com/materializecss/materialize/blob/main/components/chip/chips.mdx

Enable autocomplete functionality for the chips component.

```html
<div class="chips chips-autocomplete"></div>
```

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

### Run Materialize Tests

Source: https://github.com/materializecss/materialize/blob/main/README.md

Execute the test suite for Materialize. For detailed feedback, run the Jasmine browser runner and navigate to the specified URL.

```bash
npm test
```

```bash
npx jasmine-browser-runner
```

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

### Initialize and Control Materialize Modal

Source: https://context7.com/materializecss/materialize/llms.txt

Initialize a Materialize modal instance and control its behavior programmatically. Supports various options and lifecycle callbacks. You can also retrieve an instance from an element or destroy it.

```javascript
import { Modal } from '@materializecss/materialize';

// Initialize modal
const modalEl = document.querySelector('#modal1');
const modalInstance = Modal.init(modalEl, {
  opacity: 0.5,
  inDuration: 250,
  outDuration: 250,
  preventScrolling: true,
  dismissible: true,
  startingTop: '4%',
  endingTop: '10%',
  onOpenStart: function(el) {
    console.log('Modal opening:', el.id);
  },
  onOpenEnd: function(el) {
    console.log('Modal opened:', el.id);
  },
  onCloseStart: function(el) {
    console.log('Modal closing:', el.id);
  },
  onCloseEnd: function(el) {
    console.log('Modal closed:', el.id);
  }
});

// Programmatically control modal
modalInstance.open();
modalInstance.close();

// Get instance from element
const instance = Modal.getInstance(modalEl);
instance.open();

// Destroy instance
modalInstance.destroy();
```

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

### Initialize Chips with JavaScript

Source: https://github.com/materializecss/materialize/blob/main/components/chip/readme.md

This JavaScript code initializes the Materialize CSS chips component. It configures options such as autocomplete data, placeholder text, and secondary placeholder text for the input.

```javascript
document.addEventListener('DOMContentLoaded', function() {
  const elems = document.querySelectorAll('.chips');
  const instances = M.Chips.init(elems, {
    // specify options here
    autocompleteOptions: {
      data: [
        {id: 12, text: "Apple"},
        {id: 13, text: "Microsoft"},
        {id: 42, text: "Google", image: 'http://placehold.it/250x250'}
      ]
    },
    placeholder: 'Enter a tag',
    secondaryPlaceholder: '+Tag',
  });
});
```

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

### Basic Assertions in Tests

Source: https://github.com/materializecss/materialize/blob/main/docs/CONTRIBUTING.md

Use expect statements to assert the expected behavior of components. Ensure clear messages are provided for failed tests.

```javascript
expect(toast.first('span').text()).toBe('I am toast content');
expect(toast.first('span').text()).not.toBe('I am toast');
```

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

### Chips Properties

Source: https://github.com/materializecss/materialize/blob/main/components/chip/readme.md

Properties available on an initialized Materialize CSS Chips instance.

```APIDOC
## Properties

This table lists the properties available on an initialized Materialize CSS Chips instance.

| Name | Type | Description |
|---|---|---|
| el | Element | The DOM element the plugin was initialized with. |
| options | Object | The options the instance was initialized with. |
| chipsData | Array | Array of the current chips data. |
| hasAutocomplete | Boolean | If the chips has autocomplete enabled. |
| autocomplete | Object | Autocomplete instance, if any. |
```

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

### HTML Structure for Chips Plugin

Source: https://github.com/materializecss/materialize/blob/main/components/chip/readme.md

This HTML demonstrates the various configurations for the Materialize CSS chips component when using the JavaScript plugin. It includes default, pre-filled, placeholder, and autocomplete variants.

```html
<!-- Default with no input (automatically generated)  -->
<div class="chips"></div>
<div class="chips chips-initial"></div>
<div class="chips chips-placeholder"></div>
<div class="chips chips-autocomplete"></div>
<!-- Customizable input  -->
<div class="chips">
  <input class="custom-class">
</div>
```

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

### Running Specific Tests with Filter

Source: https://github.com/materializecss/materialize/blob/main/docs/CONTRIBUTING.md

Utilize the --filter flag with the npm test command to run only tests matching a specific keyword, useful for isolating issues.

```bash
npm test -- --filter=tabs
```

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

### Initialize FormSelect Component

Source: https://context7.com/materializecss/materialize/llms.txt

Initialize the FormSelect component on a select element. Options include custom classes and dropdown configurations. You can retrieve the selected value(s) or destroy the instance.

```javascript
import { FormSelect } from '@materializecss/materialize';

// Initialize select
const selectEl = document.querySelector('select');
const selectInstance = FormSelect.init(selectEl, {
  classes: 'custom-class',
  dropdownOptions: {
    container: document.body,
    constrainWidth: false
  }
});

// Initialize all selects
const allSelects = document.querySelectorAll('select');
FormSelect.init(allSelects);

// Get selected value(s)
console.log('Selected value:', selectEl.value);

// For multiple select
const multiSelect = document.querySelector('#multi-select');
const selectedOptions = Array.from(multiSelect.selectedOptions).map(opt => opt.value);
console.log('Selected values:', selectedOptions);

// Destroy and reinitialize (after dynamic changes)
selectInstance.destroy();
FormSelect.init(selectEl);
```

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

### Basic Accordion HTML Structure

Source: https://context7.com/materializecss/materialize/llms.txt

Use a `<ul>` with the 'collapsible' class for an accordion. Add 'active' class to the first `<li>` to make it open by default.

```html
<!-- Accordion (default) -->
<ul class="collapsible">
  <li class="active">
    <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
    <div class="collapsible-body"><span>First content goes here.</span></div>
  </li>
  <li>
    <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
    <div class="collapsible-body"><span>Second content goes here.</span></div>
  </li>
  <li>
    <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
    <div class="collapsible-body"><span>Third content goes here.</span></div>
  </li>
</ul>
```

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

### Chips Programmatic Control and Data Retrieval

Source: https://context7.com/materializecss/materialize/llms.txt

Manage Chips programmatically by adding, deleting, or selecting individual chips. Retrieve all chip data or specific chip properties using instance methods.

```javascript
// Programmatic control
chipsInstance.addChip({ id: 'newtag', text: 'New Tag' });
chipsInstance.deleteChip(0);  // Delete first chip
chipsInstance.selectChip(1);  // Select second chip

// Get chip data
console.log('All chips:', chipsInstance.getData());
console.log('Chips data:', chipsInstance.chipsData);
```

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

### Select Chip by Index

Source: https://github.com/materializecss/materialize/blob/main/components/chip/readme.md

Select a specific chip by its index using the selectChip method. This is useful for highlighting or triggering actions on a particular chip.

```javascript
instance.selectChip(2); // Select 2nd chip
```

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

### Import Materialize Components as ES Module

Source: https://context7.com/materializecss/materialize/llms.txt

Import specific Materialize components into your JavaScript project when using ES modules. This allows for selective loading of components.

```javascript
import {
  AutoInit,
  Modal,
  Dropdown,
  Tabs,
  Carousel,
  Collapsible,
  Toast,
  Tooltip,
  Sidenav,
  Datepicker,
  Autocomplete,
  Chips,
  Parallax
} from '@materializecss/materialize';
```

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

### HTML Structure for Datepicker Inputs

Source: https://context7.com/materializecss/materialize/llms.txt

Defines the HTML structure for basic and date range pickers using Materialize CSS classes.

```html
<div class="input-field">
  <input type="text" class="datepicker" id="birthdate">
  <label for="birthdate">Date of Birth</label>
</div>

<!-- Date Range -->
<div class="input-field">
  <input type="text" class="datepicker" id="start-date">
  <label for="start-date">Start Date</label>
</div>
<div class="input-field">
  <input type="text" class="datepicker" id="end-date">
  <label for="end-date">End Date</label>
</div>
```

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

### Dropdown - Expandable Menus

Source: https://context7.com/materializecss/materialize/llms.txt

The Dropdown component creates expandable menu overlays triggered by buttons or other elements. It supports hover activation, keyboard navigation, custom alignment, and animation options.

```APIDOC
## Dropdown - Expandable Menus

### Description
The Dropdown component creates expandable menu overlays triggered by buttons or other elements. It supports hover activation, keyboard navigation, custom alignment, and animation options.

### HTML Structure
```html
<!-- Dropdown Trigger -->
<a class="dropdown-trigger btn" href="#" data-target="dropdown1">
  Dropdown
  <i class="material-icons right">arrow_drop_down</i>
</a>

<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
  <li><a href="#!">Option 1</a></li>
  <li><a href="#!">Option 2</a></li>
  <li class="divider" tabindex="-1"></li>
  <li><a href="#!">Option 3</a></li>
  <li><a href="#!" class="disabled">Disabled Option</a></li>
</ul>
```

### Initialization
```javascript
import { Dropdown } from '@materializecss/materialize';

// Initialize dropdown
const dropdownEl = document.querySelector('.dropdown-trigger');
const dropdownInstance = Dropdown.init(dropdownEl, {
  alignment: 'left',          // 'left' or 'right'
  autoFocus: true,            // Auto-focus first item
  constrainWidth: true,       // Match trigger width
  coverTrigger: true,         // Cover or below trigger
  closeOnClick: true,         // Close on item click
  hover: false,               // Open on hover
  inDuration: 150,
  outDuration: 250,
  onOpenStart: function(el) {
    console.log('Dropdown opening');
  },
  onOpenEnd: function(el) {
    console.log('Dropdown opened');
  },
  onCloseStart: function(el) {
    console.log('Dropdown closing');
  },
  onCloseEnd: function(el) {
    console.log('Dropdown closed');
  },
  onItemClick: function(el) {
    console.log('Item clicked:', el.textContent);
  }
});
```

### Methods
```javascript
// Programmatic control
dropdownInstance.open();
dropdownInstance.close();
dropdownInstance.recalculateDimensions();

// Check state
console.log('Is open:', dropdownInstance.isOpen);
console.log('Dropdown element:', dropdownInstance.dropdownEl);
```
```

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

### Basic Carousel HTML Structure

Source: https://context7.com/materializecss/materialize/llms.txt

Use this HTML structure to create a basic carousel. Ensure images are appropriately sized.

```html
<div class="carousel">
  <a class="carousel-item" href="#one!"><img src="image1.jpg"></a>
  <a class="carousel-item" href="#two!"><img src="image2.jpg"></a>
  <a class="carousel-item" href="#three!"><img src="image3.jpg"></a>
  <a class="carousel-item" href="#four!"><img src="image4.jpg"></a>
</div>
```

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

### Update Local Development Branch

Source: https://github.com/materializecss/materialize/blob/main/docs/CONTRIBUTING.md

Fetch the latest changes from the upstream development branch and merge them into your local development branch.

```bash
git checkout v2-dev
git pull upstream v2-dev
```

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

### Dry Run npm Publish

Source: https://github.com/materializecss/materialize/blob/main/docs/FOR_MAINTAINERS.md

Before the final publication, perform a dry run using 'npm publish --dry-run'. This command checks if all intended files, including JavaScript and Sass files in the dist directory, are included correctly.

```bash
npm publish --dry-run
```

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

### Customizable Chips Input

Source: https://github.com/materializecss/materialize/blob/main/components/chip/chips.mdx

Apply custom classes to the input element within the chips component.

```html
<div class="chips">
  <input class="custom-class">
</div>
```

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

### Pull Changes into Topic Branch

Source: https://github.com/materializecss/materialize/blob/main/docs/CONTRIBUTING.md

Integrate changes from the upstream development branch into your current topic branch. Use `--rebase` for a cleaner history if preferred.

```bash
git pull [--rebase] upstream v2-dev
```

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

### Modal - Dialog Windows

Source: https://context7.com/materializecss/materialize/llms.txt

The Modal component creates dialog overlays for displaying content that requires user interaction. Modals support customizable animations, dismissible behavior, and callback functions for open/close events.

```APIDOC
## Modal - Dialog Windows

The Modal component creates dialog overlays for displaying content that requires user interaction. Modals support customizable animations, dismissible behavior, and callback functions for open/close events.

### HTML Structure

```html
<!-- Modal Trigger Button -->
<button data-target="modal1" class="btn modal-trigger">Open Modal</button>

<!-- Modal Structure -->
<div id="modal1" class="modal">
  <div class="modal-content">
    <h4>Modal Header</h4>
    <p>Modal content goes here. You can include any HTML content.</p>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
    <a href="#!" class="modal-close waves-effect waves-red btn-flat">Cancel</a>
  </div>
</div>
```

### JavaScript Initialization and Usage

```javascript
import { Modal } from '@materializecss/materialize';

// Initialize modal
const modalEl = document.querySelector('#modal1');
const modalInstance = Modal.init(modalEl, {
  opacity: 0.5,
  inDuration: 250,
  outDuration: 250,
  preventScrolling: true,
  dismissible: true,
  startingTop: '4%',
  endingTop: '10%',
  onOpenStart: function(el) {
    console.log('Modal opening:', el.id);
  },
  onOpenEnd: function(el) {
    console.log('Modal opened:', el.id);
  },
  onCloseStart: function(el) {
    console.log('Modal closing:', el.id);
  },
  onCloseEnd: function(el) {
    console.log('Modal closed:', el.id);
  }
});

// Programmatically control modal
modalInstance.open();
modalInstance.close();

// Get instance from element
const instance = Modal.getInstance(modalEl);
instance.open();

// Destroy instance
modalInstance.destroy();
```
```

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

### Contact Chip Structure

Source: https://github.com/materializecss/materialize/blob/main/components/chip/readme.md

To create a contact chip, include an `img` tag within the chip element. This is used for representing people or entities.

```html
<div class="chip">
  <img src="images/yuna.jpg" alt="Contact Person">
  Jane Doe
</div>
```

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

### Horizontal Divider

Source: https://github.com/materializecss/materialize/blob/main/components/divider/readme.md

Use the 'divider' class for a standard horizontal rule. This is for demonstration purposes only.

```html
<div class="divider"></div>
```

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

### Update Package Version

Source: https://github.com/materializecss/materialize/blob/main/docs/FOR_MAINTAINERS.md

Use npm to update the package version. Replace '<change-type>' with 'patch', 'minor', or 'major' based on the nature of the release. This command also generates necessary files.

```bash
npm version <change-type>
```