open-index/open-npm huggingface dataset:
npm package: @limetech/material-components-web
Description: Modular and customizable Material Design UI components for the web
Latest version: 4.0.1-p4.0.0.1

# Material Components Web (MDC Web)

This package contains the master library for Material Components Web. It simply wraps all of its
sibling packages up into one comprehensive library for convenience.

## Installation

```
npm install material-components-web
```

## Usage

### Including the Sass

```scss
@import "material-components-web/material-components-web";
```

### Including the Javascript

```js
import * as mdc from 'material-components-web';
const checkbox = new mdc.checkbox.MDCCheckbox(document.querySelector('.mdc-checkbox'));
// OR
import {checkbox} from 'material-components-web';
const checkbox = new checkbox.MDCCheckbox(document.querySelector('.mdc-checkbox'));
```

> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.

> NOTE: Since switch is a reserved word in JS, switch is instead named `switchControl`. 

> NOTE: Built CSS files as well as UMD JS bundles will be available as part of the package.


### Auto-initialization of components

The `material-components-web` package automatically registers all MDC Web components with
[mdc-auto-init](../mdc-auto-init), making it dead simple to create and initialize components
with zero configuration or manual work.

For example, say you want to use an [icon button toggle](../mdc-icon-button). Simply render the necessary
DOM, and attach the `data-mdc-auto-init="MDCIconButtonToggle"` attribute.

```html
<button class="mdc-icon-button" 
   aria-label="Add to favorites"
   aria-pressed="false"
   data-mdc-auto-init="MDCIconButtonToggle">
  <i class="material-icons mdc-icon-button__icon mdc-icon-button__icon--on">favorite</i>
  <i class="material-icons mdc-icon-button__icon">favorite_border</i>
</button>
```

Then at the bottom of your html, insert this one-line script tag:

```html
<script>mdc.autoInit()</script>
```

This will automatically initialize the icon button toggle, as well as any other components marked with the
auto init data attribute. See [mdc-auto-init](../mdc-auto-init) for more info.
npm package: @limetech/mdc-dom
Description: DOM manipulation utilities for Material Components for the web
Latest version: 4.0.1-p4.0.0.1

<!--docs:
title: "DOM"
layout: detail
section: components
excerpt: "Provides commonly-used utilities for inspecting, traversing, and manipulating the DOM."
path: /catalog/dom/
-->

# DOM

MDC DOM provides commonly-used utilities for inspecting, traversing, and manipulating the DOM.

Most of the time, you shouldn't need to depend on `mdc-dom` directly. It is useful however if you'd like to write custom components that follow MDC Web's pattern and elegantly integrate with the MDC Web ecosystem.

## Installation

```
npm install @limetech/mdc-dom
```

## Basic Usage

```js
import * as ponyfill from '@limetech/mdc-dom/ponyfill';
```

> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.

## Ponyfill Functions

The `ponyfill` module provides the following functions:

Function Signature | Description
--- | ---
`closest(element: Element, selector: string) => ?Element` | Returns the ancestor of the given element matching the given selector (which may be the element itself if it matches), or `null` if no matching ancestor is found.
`matches(element: Element, selector: string) => boolean` | Returns true if the given element matches the given CSS selector.

### Event Functions

External frameworks and libraries can use the following event utility methods.

Method Signature | Description
--- | ---
`util.applyPassive(globalObj = window, forceRefresh = false) => object` | Determine whether the current browser supports passive event listeners

> _NOTE_: The function `util.applyPassive` cache its results; `forceRefresh` will force recomputation, but is used mainly for testing and should not be necessary in normal use.
npm package: @limetech/mdc-p2-dom
Description: DOM manipulation utilities for Material Components for the web
Latest version: 4.0.0

<!--docs:
title: "DOM"
layout: detail
section: components
excerpt: "Provides commonly-used utilities for inspecting, traversing, and manipulating the DOM."
path: /catalog/dom/
-->

# DOM

MDC DOM provides commonly-used utilities for inspecting, traversing, and manipulating the DOM.

Most of the time, you shouldn't need to depend on `mdc-dom` directly. It is useful however if you'd like to write custom components that follow MDC Web's pattern and elegantly integrate with the MDC Web ecosystem.

## Installation

```
npm install @limetech/mdc-p2-dom
```

## Basic Usage

```js
import * as ponyfill from '@limetech/mdc-p2-dom/ponyfill';
```

> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.

## Ponyfill Functions

The `ponyfill` module provides the following functions:

Function Signature | Description
--- | ---
`closest(element: Element, selector: string) => ?Element` | Returns the ancestor of the given element matching the given selector (which may be the element itself if it matches), or `null` if no matching ancestor is found.
`matches(element: Element, selector: string) => boolean` | Returns true if the given element matches the given CSS selector.

### Event Functions

External frameworks and libraries can use the following event utility methods.

Method Signature | Description
--- | ---
`util.applyPassive(globalObj = window, forceRefresh = false) => object` | Determine whether the current browser supports passive event listeners

> _NOTE_: The function `util.applyPassive` cache its results; `forceRefresh` will force recomputation, but is used mainly for testing and should not be necessary in normal use.
npm package: @limetech/mdc-p2-touch-target
Description: Touch target mixins and variables for Material Components for the web
Latest version: 4.0.0

<!--docs:
title: "Touch Target"
layout: detail
section: components
excerpt: "Increased touch targets for components"
path: /catalog/touchtarget/
-->

# Touch Target

Touch targets are the parts of the screen that respond to user input. They extend beyond the visual bounds of an element.
For example, a button may appear to be 48 x 36 px, but the padding surrounding it comprises the full 48 x 48 px touch target.

Material Design spec states that touch targets should be at least 48 x 48 px.
The MDC Web library provides mixins and guidance on adding an increased touch target for the following components:
* Button
* Chips
* Checkbox
* Radio
* Mini FAB

## Design & API Documentation

<ul class="icon-list">
  <li class="icon-list-item icon-list-item--spec">
    <a href="https://material.io/design/usability/accessibility.html#layout-typography">Material Design guidelines: Touch Targets</a>
  </li>
</ul>

## Installation

```
npm install @limetech/mdc-p2-touch-target
```

## Basic Usage

### HTML Structure

For a given button component:

```html
<button class="mdc-button">
  <div class="mdc-button__ripple"></div>
  <span class="mdc-button__label">My Inaccessible Button</span>
</button>
```

You would add an increased touch target as follows:

```html
<div class="mdc-touch-target-wrapper>
  <button class="mdc-button mdc-button--touch">
    <div class="mdc-button__ripple"></div>
    <span class="mdc-button__label">My Accessible Button</span>
    <div class="mdc-button__touch"></div>
  </button>
</div>
```

Note that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).

### Styles

```css
@import "@limetech/mdc-p2-touch-target/mdc-touch-target";
```

## Style Customization

### Sass Mixins

Mixin | Description
--- | ---
`mdc-touch-target-wrapper` | Applied to the wrapper touch target element.
`mdc-touch-target` | Applied to the inner touch target element.
`mdc-touch-target-component` | Applied to the component root element. Adds margin to compensate for the increased touch target.
npm package: @limetech/mdc-touch-target
Description: Touch target mixins and variables for Material Components for the web
Latest version: 4.0.1-p4.0.0.1

<!--docs:
title: "Touch Target"
layout: detail
section: components
excerpt: "Increased touch targets for components"
path: /catalog/touchtarget/
-->

# Touch Target

Touch targets are the parts of the screen that respond to user input. They extend beyond the visual bounds of an element.
For example, a button may appear to be 48 x 36 px, but the padding surrounding it comprises the full 48 x 48 px touch target.

Material Design spec states that touch targets should be at least 48 x 48 px.
The MDC Web library provides mixins and guidance on adding an increased touch target for the following components:
* Button
* Chips
* Checkbox
* Radio
* Mini FAB

## Design & API Documentation

<ul class="icon-list">
  <li class="icon-list-item icon-list-item--spec">
    <a href="https://material.io/design/usability/accessibility.html#layout-typography">Material Design guidelines: Touch Targets</a>
  </li>
</ul>

## Installation

```
npm install @limetech/mdc-touch-target
```

## Basic Usage

### HTML Structure

For a given button component:

```html
<button class="mdc-button">
  <div class="mdc-button__ripple"></div>
  <span class="mdc-button__label">My Inaccessible Button</span>
</button>
```

You would add an increased touch target as follows:

```html
<div class="mdc-touch-target-wrapper>
  <button class="mdc-button mdc-button--touch">
    <div class="mdc-button__ripple"></div>
    <span class="mdc-button__label">My Accessible Button</span>
    <div class="mdc-button__touch"></div>
  </button>
</div>
```

Note that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).

### Styles

```css
@import "@limetech/mdc-touch-target/mdc-touch-target";
```

## Style Customization

### Sass Mixins

Mixin | Description
--- | ---
`mdc-touch-target-wrapper` | Applied to the wrapper touch target element.
`mdc-touch-target` | Applied to the inner touch target element.
`mdc-touch-target-component` | Applied to the component root element. Adds margin to compensate for the increased touch target.