open-index/open-npm huggingface dataset:
npm package: @ivanvanderbyl/ember-material-components
Description: Collection of Material Design components.
Author: James H. Hill
Latest version: 0.77.1-alpha.2

material-components-web
==============================================================================

[Short description of the addon.]

Installation
------------------------------------------------------------------------------

```
ember install material-components-web
```


Usage
------------------------------------------------------------------------------

[Longer description of how to use the addon in apps.]


Contributing
------------------------------------------------------------------------------

### Installation

* `git clone <repository-url>`
* `cd material-components-web`
* `npm install`

### Linting

* `npm run lint:js`
* `npm run lint:js -- --fix`

### Running tests

* `ember test` – Runs the test suite on the current Ember version
* `ember test --server` – Runs the test suite in "watch mode"
* `ember try:each` – Runs the test suite against multiple Ember versions

### Running the dummy application

* `ember serve`
* Visit the dummy application at [http://localhost:4200](http://localhost:4200).

For more information on using ember-cli, visit [https://ember-cli.com/](https://ember-cli.com/).

License
------------------------------------------------------------------------------

This project is licensed under the [MIT License](LICENSE.md).
npm package: @ivanvanderbyl/ember-material-components-animation
Description: ember-cli addon for @material/animation
Author: James H. Hill
Latest version: 0.77.1-alpha.2

@ivanvanderbyl/ember-material-components-animation
======================

ember-cli addon for [`@material/animation`](https://github.com/material-components/material-components-web/tree/master/packages/mdc-animation).

Installation
------------

    ember install @ivanvanderbyl/ember-material-components-animation

Usage
------

This package does not contain any top-level components. It is primarily a wrapper
for the [`@material/animation`](https://github.com/material-components/material-components-web/tree/master/packages/mdc-animation).
package so it integrates into your Ember application.
npm package: @ivanvanderbyl/ember-material-components-base
Description: ember-cli addon for @material/base
Author: James H. Hill
Latest version: 0.77.1-alpha.2

@ivanvanderbyl/ember-material-components-base
======================

ember-cli addon for [`@material/base`](https://github.com/material-components/material-components-web/tree/master/packages/mdc-base).

Installation
------------

    ember install @ivanvanderbyl/ember-material-components-base

Usage
------

This package does not contain any top-level components. It is primarily a wrapper
for the [`@material/base`](https://github.com/material-components/material-components-web/tree/master/packages/mdc-base)
package so it integrates into your Ember application.
npm package: @ivanvanderbyl/ember-material-components-bottom-navigation
Description: Polyfill for the mdc-bottom-navigation component
Author: James H. Hill
Latest version: 0.77.1-alpha.2

@ivanvanderbyl/ember-material-components-bottom-navigation
================================

Polyfill ember-cli addon for [`@material/bottom-navigation`](https://github.com/material-components/material-components-web/tree/master/packages/mdc-bottom-navigation).

> `@ivanvanderbyl/ember-material-components-bottom-navigation` package is meant to be a placeholder until the
> [bottom navigation component from material components web](https://github.com/material-components/material-components-web/tree/master/packages/mdc-bottom-navigation)
> is complete. It is implemented to serve our needs on existing projects, and does
> not implement all features of the [bottom navigation component](https://material.io/design/components/bottom-navigation.html).

Installation
------------

    ember install @ivanvanderbyl/ember-material-components-bottom-navigation

Components
-----------

This package contains the following top-level components.

* [`{{mdc-bottom-navigation}}`](#mdc-bottom-navigation)

mdc-bottom-navigation
---------------------

### Description

Adds a bottom navigation component to a page

### Usage

```handlebars
{{#mdc-bottom-navigation spaceEvenly=[false|true]}}
  <!-- links go here -->
{{/mdc-bottom-navigation}}
```

### Attributes

* `spaceEvenly` - Space the buttons evenly as opposed to centered. Default is `false`.

### Adding links to the bottom navigation

Use the `{{mdc-bottom-navigation-link-to}}` component to add links to the bottom
navigation component.

```handlebars
{{#mdc-bottom-navigation spaceEvenly=[false|true]}}
  {{mdc-bottom-navigation-link-to "Favorites" routeName icon="favorites" label="Favorites"}}
{{/mdc-bottom-navigation}}
```

The `mdc-bottom-navigation-link-to` extends the `LinkComponent`. When using the `mdc-bottom-navigation-link-to`
in inline form, the first parameter is the link title and the second parameter is the target route. The
`label` attribute is optional.
npm package: @ivanvanderbyl/ember-material-components-button
Description: ember-cli addon for @material/button
Author: James H. Hill
Latest version: 0.77.1-alpha.2

@ivanvanderbyl/ember-material-components-button
======================

ember-cli addon for [`@material/button`](https://github.com/material-components/material-components-web/tree/master/packages/mdc-button).

Installation
------------

    ember install @ivanvanderbyl/ember-material-components-button

Components
-----------

This package contains the following top-level components.

* [`{{mdc-button}}`](#mdc-button)
* [`{{mdc-button-linkto}}`](#mdc-button-linkto)

mdc-button
---------------------

### Description

Add a button element to the parent.

### Usage

```handlebars
{{mdc-button style=[raised|unelevated|outlined]
             dense=[true|false]
             disabled=[true|false]
             type=type
}}
```

### Attributes

* `style` - The button style. Must either be one of the following string values: `raised`, `unelevated`, or `outlined`
* `dense` - The button is dense.
* `disabled` - The button is in a disabled state.
* `type` - The type of button (*e.g.*, submit or reset).

### Examples

```handlebars
{{#mdc-button style="raised"}}Button{{/mdc-button}}
{{#mdc-button style="outlined"}}Button{{/mdc-button}}
```

### Listening for Button Clicks

Use the `click` attribute and the `action` helper to listen for button clicks.

```handlebars
{{#mdc-button style="raised" click=(action "clicked")}}Button{{/mdc-button}}
```

### Adding Icons to Buttons

Use `{{mdc-button-icon}}`, which extends the
[`{{mdc-icon}}`](https://github.com/onehilltech/ember-cli-mdc/tree/master/packages/mdc-icon)
component, to add an icon to the button.

```handlebars
{{#mdc-button style="raised"}}{{mdc-button-icon "event"}}Button{{/mdc-button}}
```

mdc-button-linkto
---------------------

The `{{mdc-button-linkto}}` components will bind the button to a route, which means you
do not have to create an action that routes to a new location when clicked. The
does this by extending the [`LinkComponent`](https://emberjs.com/api/ember/3.3/classes/LinkComponent)
component, and applying the [`Button`](https://github.com/onehilltech/ember-cli-mdc/blob/master/packages/mdc-button/addon/mixins/button.js) mixin
exported from this module.

> Because `{{mdc-button-linkto}}` extends [`LinkComponent`](https://emberjs.com/api/ember/3.3/classes/LinkComponent),
> all properties and methods available on [`LinkComponent`](https://emberjs.com/api/ember/3.3/classes/LinkComponent)
> are available on `{{mdc-button-linkto}}`.

```handlebars
{{#mdc-button-linkto "contact" style="unelevated"}}Contact Us{{/mdc-button-linkto}}
{{#mdc-button-linkto "user" user.id style="raised"}}Contact Us{{/mdc-button-linkto}}
```
npm package: @ivanvanderbyl/ember-material-components-card
Description: ember-cli addon for @material/card
Author: James H. Hill
Latest version: 0.77.1-alpha.2

@ivanvanderbyl/ember-material-components-card
======================

ember-cli addon for [`@material/card`](https://github.com/material-components/material-components-web/tree/master/packages/mdc-card).

Installation
------------

    ember install @ivanvanderbyl/ember-material-components-card

Components
-----------

This package contains the following top-level components.

* [`{{mdc-card}}`](#mdc-card)

mdc-card
---------------------

### Description

The `{{mdc-card}}` is a component that implements the
[Material Design card component](https://github.com/material-components/material-components-web/tree/master/packages/mdc-card).

### Usage

```handlebars
{{#mdc-card outlined=[true|false]}}

  <!-- ... content ... -->

{{/mdc-card}}
```

### Attributes

* `outlined` - The card is outlined, and not elevated.

Adding Media to the Card
---------------------------

Use the `{{mdc-card-media}}` component to add an optional media component to the card. The
`{{mdc-card-media}}` also contains the `{{mdc-card-media-content}}`, which is optional content
displayed over the media, like a title.

```handlebars
{{#mdc-card}}
  {{#mdc-card-media scale=["square"|"16-9"]}}
    {{#mdc-card-media-content}}Title{{/mdc-card-media-content}}
  {{/mdc-card-media}}

  <!-- ... content ... -->

{{/mdc-card}}
```

### Attributes

* `scale` - Sets the scale of the media to either square (_i.e._, width equal height), or 16x9 aspect ratio.

Adding Actions to the Card
----------------------------

Actions typically appear at the bottom of the card. The actions can either be a button or
an icon button. Use the `{{mdc-card-actions}}` component, and its child components, to add
actions to a `{{mdc-card}}` component.

```handlebars
{{#mdc-card}}
  <!-- ... content ... -->

  {{#mdc-card-actions}}
    {{#mdc-card-action-buttons}}
      {{#mdc-card-action-button}}Action 1{{/mdc-card-action-button}}
      {{#mdc-card-action-button}}Action 2{{/mdc-card-action-button}}
    {{/mdc-card-action-buttons}}

    {{#mdc-card-action-icons}}
      {{mdc-card-action-icon "share" title="Share"}}
      {{mdc-card-action-icon "more_vert" title="More options"}}
    {{/mdc-card-action-icons}}
  {{/mdc-card-actions}}
{{/mdc-card}}
```

### Types of Actions

* `{{mdc-card-action-button}}` - Standard button as a card action.
* `{{mdc-card-action-button-link-to}}` - A link component as a card action.
* `{{mdc-card-action-icon}}` - A ``{{mdc-icon}}`` component as a card action.
* `{{mdc-card-action-icon-toggle}}` - A ``{{mdc-icon-button-toggle}}`` as a card action.
npm package: @ivanvanderbyl/ember-material-components-checkbox
Description: ember-cli addons for @material/checkbox.
Author: James H. Hill
Latest version: 0.77.1-alpha.2

@ivanvanderbyl/ember-material-components-checkbox
======================

ember-cli addon for [`@material/checkbox`](https://github.com/material-components/material-components-web/tree/master/packages/mdc-checkbox).

Installation
------------

    ember install @ivanvanderbyl/ember-material-components-checkbox

Components
-----------

This package contains the following top-level components.

* [`{{mdc-checkbox}}`](#mdc-checkbox)
* [`{{mdc-checkbox-with-label}}`](#mdc-checkbox-with-label)

mdc-checkbox
---------------------

### Description

A standalone checkbox input element that does not contain a label.

### Usage

```handlebars
{{mdc-checkbox checked=checked disabled=disabled}}
```

### Attributes

* **`checked`** - The checkbox is checked.
* **`disabled`** - The checkbox is disabled.

mdc-checkbox-with-label
------------------------------

### Description

A checkbox input element that contains a label.

### Usage

```handlebars
{{#mdc-checkbox-with-label checked=checked disabled=disabled alignEnd=true}}
  This is a checkbox that contains a label. You can add HTML styling
  tags here to make a more complex label.
{{/mdc-checkbox-with-label}}
```

### Attributes

* **`checked`** - The checkbox is checked.
* **`disabled`** - The checkbox is disabled.
* **`alignEnd`** - Align the checkbox after the label.
npm package: @ivanvanderbyl/ember-material-components-chips
Description: ember-cli addon for @material/chips.
Author: James H. Hill
Latest version: 0.77.1-alpha.2

@ivanvanderbyl/ember-material-components-chips
======================

ember-cli addon for [`@material/chips`](https://github.com/material-components/material-components-web/tree/master/packages/mdc-chips).

Installation
------------

    ember install @ivanvanderbyl/ember-material-components-chips

Example Code
---------------

Please see example code in `tests/dummy/app/templates` while we work on documenting how to
use the components in this add-on.
npm package: @ivanvanderbyl/ember-material-components-datepicker-dialog
Description: Polyfill component for a date picker dialog.
Author: James H. Hill
Latest version: 0.77.1-alpha.2

@ivanvanderbyl/ember-material-components-datepicker-dialog
==============================================================================

Polyfill implementation of Material Design date picker dialog

Installation
------------------------------------------------------------------------------


    ember install @ivanvanderbyl/ember-material-components-datepicker-dialog


Components
-----------

This package contains the following top-level components.

* [`{{mdc-datepicker-dialog}}`](#mdc-datepicker-dialog)


mdc-datepicker-dialog
------------------------------

### Description

A dialog for picking a single date.


### Usage

```handlebars
{{mdc-datepicker-dialog value=value
                        accept=(action "accept")
                        close=(action "close")}}
```

### Attributes

* **`value`** - The value selected when closing the dialog.
* **`accept`** - The action invoked when the accept button is pressed.
* **`close`** - The action invoked when the close button is pressed.
npm package: @ivanvanderbyl/ember-material-components-dialog
Description: ember-cli addon for @material/dialog
Author: James H. Hill
Latest version: 0.77.1-alpha.2

@ivanvanderbyl/ember-material-components-dialog
======================

ember-cli addon for [`@material/dialog`](https://github.com/material-components/material-components-web/tree/master/packages/mdc-dialog).

Installation
------------

    ember install @ivanvanderbyl/ember-material-components-dialog

Components
-----------

This package contains the following top-level components.

* [`{{mdc-dialog}}`](#mdc-dialog)

mdc-dialog
---------------------

### Description

Adds a dialog to the document.

### Usage

```handlebars
{{#mdc-dialog title="Use Google's location service?"
              accept=(action "accept")
              acceptButtonText="Accept"
              close=(action "close")
              closeButtonText="Decline"
              default=["accept"|"close"]
              show=[true|false]
              scrollable=[true|false]}}
  Let Google help apps determine location. This means sending anonymous
  location data to Google, even when no apps are running.
{{/mdc-dialog}}
```

### Attributes

* `title` - Optional title for the dialog.
* `accept` - Action called with the accept button is pressed.
* `acceptButtonText` - Text for the accept button.
* `close` - Action called with the close button is pressed.
* `closeButtonText` - Text for the close button.
* `default` - Which button is the default button.
* `show` - Show the dialog.
* `scrollable` - Optional mark the dialog content as scrollable.
npm package: @ivanvanderbyl/ember-material-components-dom
Description: ember-cli addon for @material/dom
Author: James H. Hill
Latest version: 0.77.1-alpha.2

@ivanvanderbyl/ember-material-components-dom
======================

ember-cli addon for [`@material/dom`](https://github.com/material-components/material-components-web/tree/master/packages/mdc-dom).

Installation
------------

    ember install @ivanvanderbyl/ember-material-components-dom

Usage
------

This package does not contain any top-level components. It is primarily a wrapper
for the [`@material/dom`](https://github.com/material-components/material-components-web/tree/master/packages/mdc-dom)
package so it integrates into your Ember application.
npm package: @ivanvanderbyl/ember-material-components-elevation
Description: ember-cli addon for @material/elevation
Author: James H. Hill
Latest version: 0.77.1-alpha.2

@ivanvanderbyl/ember-material-components-elevation
======================

ember-cli addon for [`@material/elevation`](https://github.com/material-components/material-components-web/tree/master/packages/mdc-elevation).

Installation
------------

    ember install @ivanvanderbyl/ember-material-components-elevation

Components and Mixins
-----------------------

### Components

none

### Mixins

* [Elevation](#elevation)

Elevation
-----------

### Description

The elevation mixin allows you to programmatically change the elevation of a
component by adding the elevation class to the HTML element.

### Usage

```javascript
import Component from '@ember/component';
import Elevation from '@ivanvanderbyl/ember-material-components-elevation/mixins/elevation';

export default Component.extend (Elevation, {
  elevation: 4              // add mdc-elevation--z4 class to element
});

```

### Attributes

* `elevation` - Sets the elevation for the component. Acceptable values are 1 - 12.
npm package: @ivanvanderbyl/ember-material-components-fab
Description: ember-cli addon for @material/fab
Author: James H. Hill
Latest version: 0.77.1-alpha.2

@ivanvanderbyl/ember-material-components-fab
======================

ember-cli addon for [`@material/fab`](https://github.com/material-components/material-components-web/tree/master/packages/mdc-fab).

Installation
------------

    ember install @ivanvanderbyl/ember-material-components-fab

Components and Mixins
-----------------------

### Components

* [`{{mdc-fab}}`](#mdc-fab)
* [`{{mdc-fab-link-to}}`](#mdc-fab-link-to)

### Mixins

* [`Fab`](#fab)

{{mdc-fab}}
---------------

### Description

Add a floating action button component to the page.

### Usage

```handlebars
{{mdc-fab icon="add"}}
{{mdc-fab icon="add" mini=[true|false]}}

<!-- extended floating action buttons -->

{{mdc-fab icon="add" label="Create"}}
{{mdc-fab icon="add" label="Create" labelPosition="left"}}
{{mdc-fab label="Create"}}
```

### Attributes

* `icon` - The icon to display on the floating action button.
* `mini` - Make it a mini floating action button.
* `label` - Label displayed on the extended floating action button.
* `labelPosition` - The position of the label in relation to the icon; default is `right`.

{{mdc-fab-link-to}}
---------------------

### Description

Add a link component that displays as a floating action button.

### Usage

```handlebars
{{mdc-fab-link-to "" "index" icon="add" label="Create"}}
```

For the time being, the first parameter must be a string, which will be ignored. We hope
to have this requirement removed in the near future.

Fab
-----------

### Description

The `Fab` mixin allows you to convert any component into a floating action button.

### Usage

```javascript
import Fab from '@ivanvanderbyl/ember-material-components-fab';
import Component from '@ember/component';

export default Component.extend (Fab, {

});
```
npm package: @ivanvanderbyl/ember-material-components-floating-label
Description: ember-cli addon for @material/floating-label
Author: James H. Hill
Latest version: 0.77.1-alpha.2

@ivanvanderbyl/ember-material-components-floating-label
======================

ember-cli addon for [`@material/floating-label`](https://github.com/material-components/material-components-web/tree/master/packages/mdc-floating-label).

Installation
------------

    ember install @ivanvanderbyl/ember-material-components-floating-label

Components
-----------

This package contains the following top-level components.

* [`{{mdc-floating-label}}`](#mdc-floating-label)

mdc-floating-label
---------------------

### Description

Add a floating label to the page. This component is typically used in conjunction
with text field and select fields.

### Usage

```handlebars
{{#mdc-floating-label for="my-text-field-id"}}Hint text{{/mdc-floating-label}}
```

### Attributes

* **`for`** - Id of associated input field.
npm package: @ivanvanderbyl/ember-material-components-form
Description: ember-cli addon for material component forms
Author: James H. Hill
Latest version: 0.77.1-alpha.2

@ivanvanderbyl/ember-material-components-form
======================

ember-cli addon that is a polyfill for &lt;form&gt; elements

Installation
------------

    ember install @ivanvanderbyl/ember-material-components-form

Components
-------------

This package contains the following top-level components.

* [`mdc-form`](#mdc-form)


mdc-form
-------------

### Description

A component version of the HTML `<form>` element. The `{{mdc-form}}` component allows
its parent to react to changes to the form, such as disabling the submit button when an
input is invalid.

The `{{mdc-form}}` element will gather all child input elements and listen to changes
in its [validity state](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState).
When the validity state of an input changes, the `{{mdc-form}}` component will call the
`invalid` action. The `invalid` action can then mutate a variable that enables/disables
the submit button. The `{{mdc-form}}` does not automatically enable/disable the submit button,
if present, because the parent may have other criteria outside of the `{{mdc-form}}` knowledge
that determines if the submit button should be enabled/disabled.

### Usage

```handlebars
{{#mdc-form submit=(action "submit")
            validity=(action (mut valid))}}
  {{!-- add input components here --}}

  {{#mdc-button type="submit"}}Submit{{/mdc-button}}
{{/mdc-form}}
```

### Attributes

* **`submit`** - The action `f()` called when a button with `type=submit` is clicked and all inputs are valid.
* **`validity`** - The action `f(state)` when the form's validity changes.

### Form Validity

The `{{mdc-form}}` element will yield the form's state (`{isValid, isInvalid}`). The
yielded values can then be used to modify elements inside the form. For example,
it can be use to enable/disable a button.

```handlebars
{{#mdc-form submit=(action "submit")
            validity=(action (mut valid)) as |form|}}
  {{!-- add input components here --}}

  {{#mdc-button type="submit" disabled=form.isInvalid}}Submit{{/mdc-button}}
{{/mdc-form}}
```
npm package: @ivanvanderbyl/ember-material-components-form-field
Description: ember-cli addon for @material/form-field.
Author: James H. Hill
Latest version: 0.77.1-alpha.2

@ivanvanderbyl/ember-material-components-form-field
======================

ember-cli addon for [`@material/form-field`](https://github.com/material-components/material-components-web/tree/master/packages/mdc-form-field).

Installation
------------

    ember install @ivanvanderbyl/ember-material-components-form-field

Components & Mixins
-------------------

This package contains the following top-level components.

* [`{{mdc-form-field}}`](#mdc-form-field)

This package contains the following mixins:

* `FormFieldMixin`

mdc-form-field
---------------------

### Description

Aligns a web form field with its label and makes it RTL-aware. It also activates a ripple effect
upon interacting with the label.

### Usage

```handlebars
{{#mdc-form-field alignEnd=true}}
  {{!-- add input here --}}
{{/mdc-form-field}}
```

### Attributes

* **`alignEnd`** - Position the input after the label. (optional)
npm package: @ivanvanderbyl/ember-material-components-htmlbars
Description: ember-cli addon for basic html elements for Material Design
Author: James H. Hill
Latest version: 0.77.1-alpha.2

@ivanvanderbyl/ember-material-components-htmlbars
======================

Componentizes standard HTML text elements and adds attributes for typography, theme, and rtl support

Installation
------------

    ember install @ivanvanderbyl/ember-material-components-htmlbars
npm package: @ivanvanderbyl/ember-material-components-icon
Description: ember-cli addon for Material Icons
Author: James H. Hill
Latest version: 0.77.1-alpha.2

@ivanvanderbyl/ember-material-components-icon
======================

ember-cli addon for [Material Icons](https://material.io/tools/icons/)

Installation
------------

    ember install @ivanvanderbyl/ember-material-components-icon

Components
-----------

This package contains the following top-level components.

* [`{{mdc-icon}}`](#mdc-icon)

mdc-icon
---------------------

### Description

Adds a Material Icon element.

The icon is described by its name, which is the same name that appears in the icon
font for the corresponding icon. The easiest method to locate the icon name is to
search for the icon at [Material Icons](https://material.io/tools/icons/).

### Usage

```handlebars
{{mdc-icon name}}
```

### Positional Parameters

* **`name`** - Name of the icon

### Examples

```handlebars
{{mdc-icon "delete"}}     {{!-- create a delete icon --}}
{{mdc-icon "wifi"}}       {{!-- create a wifi icon --}}
{{mdc-icon "close"}}      {{!-- create a close icon --}}
```

## Coloring Icons

### Using CSS Styles

You color an icon using the `color` CSS style. For example, if you want to color the
delete icon red, then we first create a CSS class that has the property `color:red`.

```css
.red-icon {
  color: red;
}
```

Then, assign the CSS class to the icon.

```handlebars
{{mdc-icon "delete" class="red-icon"}}
```

Now, the delete icon will render in red.

### Using Themes

The `{{mdc-icon}}` component supports the
[TextTheme](https://github.com/onehilltech/ember-cli-mdc/blob/master/packages/mdc-theme/addon/mixins/text-theme.js)
mixin. This exposes the `themeTextColor`, `theme`, and `themeTextStyle` attributes on the `{{mdc-icon}}`
component.

```handlebars
{{mdc-icon "favorite" themeText="primary"}}
{{mdc-icon "favorite" theme="light" themeTextStyle="disabled"}}
```
npm package: @ivanvanderbyl/ember-material-components-icon-button
Description: ember-cli addon for @material/icon-button
Author: James H. Hill
Latest version: 0.77.1-alpha.2

@ivanvanderbyl/ember-material-components-icon-button
======================

ember-cli addon for [`@material/icon-button`](https://github.com/material-components/material-components-web/tree/master/packages/mdc-icon-button).

Installation
------------

    ember install @ivanvanderbyl/ember-material-components-icon-button

Components
-----------

This package contains the following top-level components.

* [`{{mdc-icon-button}}`](#mdc-icon-button)
* [`{{mdc-icon-button-toggle}}`](#mdc-icon-button-toggle)

mdc-icon-button
---------------------

### Description

An icon that behaves like a button.

### Usage

```handlebars
{{mdc-icon-button name disabled=[true|false]}}
```

### Attributes

* `name` - Name of an icon.
* `disabled` - The button is in a disabled state.

### Examples

```handlebars
{{mdc-icon-button "favorite"}}
{{mdc-icon-button "favorite" disabled=true}}
```

### Listening for Button Clicks

Use the `click` attribute and the `action` helper to listen for button clicks.

```handlebars
{{mdc-icon-button "favorite" click=(action "favorited")}}
```

mdc-icon-button-toggle
--------------------------

### Description

An icon button with toggle states.

### Usage

```handlebars
{{mdc-icon-button-toggle iconOn iconOff
                         on=on
                         label=label
                         toggle=toggle}}
```

### Attributes

* `iconOn` - Name of the icon shown when toggle is on.
* `iconOff` - Name of the icon shown when the toggle is off.
* `on` - Attribute the gets/sets the toggle state.
* `label` - ARIA label for accessibility.
* `toggle` - Action called when the button is toggled.

### Examples

```handlebars
{{mdc-icon-button-toggle "favorite" "favorite_border"
                         on=on
                         label="Add to favorites"
                         toggle=(action (mut state))}}
```
npm package: @ivanvanderbyl/ember-material-components-layout
Description: Support package for responsible layout design.
Author: James H. Hill
Latest version: 0.77.1-alpha.2

@ivanvanderbyl/ember-material-components-layout
======================

ember-cli addon for [`@material/layout`](https://github.com/material-components/material-components-web/tree/master/packages/mdc-layout).

Installation
------------

    ember install @ivanvanderbyl/ember-material-components-layout

Example Code
---------------

Please see example code in `tests/dummy/app/templates` while we work on documenting how to
use the components in this add-on.
npm package: @ivanvanderbyl/ember-material-components-layout-grid
Description: ember-cli addon for @material/layout-grid.
Author: James H. Hill
Latest version: 0.77.1-alpha.2

@ivanvanderbyl/ember-material-components-layout-grid
======================

ember-cli addon for [`@material/layout-grid`](https://github.com/material-components/material-components-web/tree/master/packages/mdc-layout-grid).

Installation
------------

    ember install @ivanvanderbyl/ember-material-components-layout-grid

Example Code
---------------

Please see example code in `tests/dummy/app/templates` while we work on documenting how to
use the components in this add-on.
npm package: @ivanvanderbyl/ember-material-components-line-ripple
Description: ember-cli addons for @material/line-ripple
Author: James H. Hill
Latest version: 0.77.1-alpha.2

@ivanvanderbyl/ember-material-components-ripple
======================

ember-cli addon for [`@material/ripple`](https://github.com/material-components/material-components-web/tree/master/packages/mdc-ripple).

Installation
------------

    ember install @ivanvanderbyl/ember-material-components-ripple

Example Code
---------------

Please see example code in `tests/dummy/app/templates` while we work on documenting how to
use the components in this add-on.
npm package: @ivanvanderbyl/ember-material-components-linear-progress
Description: ember-cli addon for @material/linear-progress.
Author: James H. Hill
Latest version: 0.77.1-alpha.2

@ivanvanderbyl/ember-material-components-form
======================

ember-cli addon for [@material/linear-progress](https://github.com/material-components/material-components-web/tree/master/packages/mdc-linear-progress).

Installation
------------

    ember install @ivanvanderbyl/ember-material-components-linear-progress

Components
-------------

This package contains the following top-level components.

* [`mdc-linear-progress`](#mdc-linear-progress)

mdc-linear-progress
--------------------

### Description

Add a [Material Linear Progress](https://material.io/design/components/sliders.html) component to
the parent element.

### Usage

```handlebars
{{mdc-linear-progress indeterminate=[true|false]
                      progress=value
                      buffer=value
                      reversed=[true|false]
                      closed=[true|false]
}}
```

### Attributes

* `indeterminate` - Run the linear progress in indeterminate mode.
* `progress` - The current progress value, must be between 0 and 1.
* `buffer` - The current value of the buffer, must be between 0 and 1.
* `reversed` - Reverse the display of the linear progress.
* `closed` - Hide the linear progress on the page.

### Examples

```handlebars
{{mdc-linear-progress progess=0.66}}
{{mdc-linear-progress progess=0.35 buffer=89.5}}
{{mdc-linear-progress indeterminate=true reversed=true}}
```
npm package: @ivanvanderbyl/ember-material-components-list
Description: ember-cli addon for @material/list.
Author: James H. Hill
Latest version: 0.77.1-alpha.2

@ivanvanderbyl/ember-material-components-list
======================

ember-cli addon for [`@material/list`](https://github.com/material-components/material-components-web/tree/master/packages/mdc-list).

Installation
------------

    ember install @ivanvanderbyl/ember-material-components-list

Example Code
---------------

Please see example code in `tests/dummy/app/templates` while we work on documenting how to
use the components in this add-on.
npm package: @ivanvanderbyl/ember-material-components-menu
Description: ember-cli addon for @material/menu.
Author: James H. Hill
Latest version: 0.77.1-alpha.2

@ivanvanderbyl/ember-material-components-menu
===========================

ember-cli addon for [`@material/menu`](https://github.com/material-components/material-components-web/tree/master/packages/mdc-menu).

Installation
------------

    ember install @ivanvanderbyl/ember-material-components-menu

Components and Mixins
-----------------------

### Components

* [`{{mdc-menu}}`](#mdc-menu)


{{mdc-menu}}
---------------

### Description

Add a menu component to the page.

### Usage

```handlebars
{{#mdc-menu open=[true|false]
            anchor=["parent"|"body"]
            quickOpen=[true|false]
            position=[null|"fixed"|"absolute"]
            positionLeft=number
            positionTop=number}}

  <!-- menu items -->

{{/mdc-menu}}
```

### Attributes

* `open` - Trigger the surface to open; sets to `false` when closed.
* `anchor` - Optional anchor point for the menu surface. Default is `"parent"`, but can also be `"body"`.
* `quickOpen` - Enable quick open.
* `position` - Optional position of the menu surface.
* `positionLeft` - Left position of the menu (works only in absolute mode).
* `positionTop` - Top position of the menu (works only in absolute mode).

### Menu Items

Use the `{{mdc-menu-list}}` to add items to the menu.

```handlebars
{{#mdc-menu-list}}
  <!-- example of an inline menu item -->
  {{mdc-menu-item "Add space before paragraph"}}

  <!-- example of a block menu item -->
  {{#mdc-menu-item}}{{#mdc-menu-item-text}}Add space after paragraph{{/mdc-menu-item-text}}{{/mdc-menu-item}}
{{/mdc-menu-list}}
```

### Dividers

The `{{mdc-list-divider}}` component is used to a divider between menu items.

```handlebars
{{#mdc-menu-list}}
  {{mdc-menu-item "Add space before paragraph"}}

  {{mdc-list-divider}}

  {{mdc-menu-item "Add space after paragraph"}}
{{/mdc-menu-list}}
```

### Group Selections

The `{{mdc-menu-selection-group}}` block component is used to select between
a group of menu items.

```handlebars
{{#mdc-menu open=open}}
  {{#mdc-menu-list}}
    <li>
      {{#mdc-menu-selection-group}}
        {{#mdc-menu-item}}
          {{#mdc-menu-selection-group-icon}}...{{/mdc-menu-selection-group-icon}}
          {{#mdc-menu-item-text}}Single{{/mdc-menu-item-text}}
        {{/mdc-menu-item}}

        {{#mdc-menu-item}}
          {{#mdc-menu-selection-group-icon}}...{{/mdc-menu-selection-group-icon}}
          {{#mdc-menu-item-text}}1.15{{/mdc-menu-item-text}}
        {{/mdc-menu-item}}
      {{/mdc-menu-selection-group}}
    </li>
  {{/mdc-menu-list}}
{{/mdc-menu}}
```
npm package: @ivanvanderbyl/ember-material-components-menu-surface
Description: ember-cli addon for @material/menu-surface.
Author: James H. Hill
Latest version: 0.77.1-alpha.2

@ivanvanderbyl/ember-material-components-menu-surface
===========================

ember-cli addon for [`@material/menu-surface`](https://github.com/material-components/material-components-web/tree/master/packages/mdc-menu-surface).

Installation
------------

    ember install @ivanvanderbyl/ember-material-components-menu-surface

Components and Mixins
-----------------------

### Components

* [`{{mdc-menu-surface}}`](#mdc-menu-surface)

### Mixins

* [`MenuSurface`](#menusurface)

{{mdc-menu-surface}}
---------------

### Description

Add a menu surface component to the page.

### Usage

```handlebars
{{mdc-menu-surface open=[true|false]
                   anchor=["parent"|"body"]
                   quickOpen=[true|false]
                   position=[null|"fixed"|"absolute"]
                   positionLeft=number
                   positionTop=number
}}
```

### Attributes

* `open` - Trigger the surface to open.
* `anchor` - Optional anchor point for the menu surface. Default is `"parent"`, but can also be `"body"`.
* `quickOpen` - Enable quick open.
* `position` - Optional position of the menu surface.
* `positionLeft` - Left position of the menu (works only in absolute mode).
* `positionTop` - Top position of the menu (works only in absolute mode).

MenuSurface
---------------------

### Description

Convert an existing component into a menu surface.

### Usage

```javascript
import MenuSurface from '@ivanvanderbyl/ember-material-components-menu-surface/mixins/menu-surface';
import Component from '@ember/component';

export default Component.extend (MenuSurface, {

});
```

### Methods

The component must implement the following methods:

* `setAbsolutePosition (x, y)`
* `hoistMenuToBody ()`
* `doOpen (open)`
* `doQuickOpen`
npm package: @ivanvanderbyl/ember-material-components-notched-outline
Description: ember-cli addon for @material/notched-outline
Author: James H. Hill
Latest version: 0.77.1-alpha.2

@ivanvanderbyl/ember-material-components-notched-outline
======================

ember-cli addon for [`@material/notched-outline`](https://github.com/material-components/material-components-web/tree/master/packages/mdc-notched-outline).

Installation
------------

    ember install @ivanvanderbyl/ember-material-components-notched-outline

Example Code
---------------

Please see example code in `tests/dummy/app/templates` while we work on documenting how to
use the components in this add-on.
npm package: @ivanvanderbyl/ember-material-components-ripple
Description: ember-cli addon for @material/ripple
Author: James H. Hill
Latest version: 0.77.1-alpha.2

@ivanvanderbyl/ember-material-components-ripple
======================

ember-cli addon for [`@material/ripple`](https://github.com/material-components/material-components-web/tree/master/packages/mdc-ripple).

Installation
------------

    ember install @ivanvanderbyl/ember-material-components-ripple

Example Code
---------------

Please see example code in `tests/dummy/app/templates` while we work on documenting how to
use the components in this add-on.
npm package: @ivanvanderbyl/ember-material-components-rtl
Description: ember-cli addon for @material/rtl
Author: James H. Hill
Latest version: 0.77.1-alpha.2

@ivanvanderbyl/ember-material-components-rtl
======================

ember-cli addon for [`@material/rtl`](https://github.com/material-components/material-components-web/tree/master/packages/mdc-rtl).

Installation
------------

    ember install @ivanvanderbyl/ember-material-components-rtl

Example Code
---------------

Please see example code in `tests/dummy/app/templates` while we work on documenting how to
use the components in this add-on.
npm package: @ivanvanderbyl/ember-material-components-sass
Description: ember-cli addon for integrating SASS into ember-cli-mdc.
Author: James H. Hill
Latest version: 0.77.1-alpha.2

@ivanvanderbyl/ember-material-components-sass
===================

ember-cli addon for integrating SASS into `ember-cli-mdc`.

Installation
------------------------------------------------------------------------------

    ember install @ivanvanderbyl/ember-material-components-sass
npm package: @ivanvanderbyl/ember-material-components-select
Description: ember-cli addon for @material/select.
Author: James H. Hill
Latest version: 0.77.1-alpha.2

@ivanvanderbyl/ember-material-components-select
======================

ember-cli addon for [`@material/select`](https://github.com/material-components/material-components-web/tree/master/packages/mdc-select).

Installation
------------

    ember install @ivanvanderbyl/ember-material-components-select

Example Code
---------------

Please see example code in `tests/dummy/app/templates` while we work on documenting how to
use the components in this add-on.
npm package: @ivanvanderbyl/ember-material-components-selection-control
Description: ember-cli addon for @material/selection-control.
Author: James H. Hill
Latest version: 0.77.1-alpha.2

@ivanvanderbyl/ember-material-components-selection-control
======================

ember-cli addon for [`@material/selection-control`](https://github.com/material-components/material-components-web/tree/master/packages/mdc-selection-control).

Installation
------------

    ember install @ivanvanderbyl/ember-material-components-selection-control

Example Code
---------------

Please see example code in `tests/dummy/app/templates` while we work on documenting how to
use the components in this add-on.
npm package: @ivanvanderbyl/ember-material-components-shape
Description: ember-cli addons for @material/shape.
Author: James H. Hill
Latest version: 0.77.1-alpha.2

@ivanvanderbyl/ember-material-components-shape
======================

ember-cli addon for [`@material/shape`](https://github.com/material-components/material-components-web/tree/master/packages/mdc-shape).

Installation
------------

    ember install @ivanvanderbyl/ember-material-components-shape

Example Code
---------------

Please see example code in `tests/dummy/app/templates` while we work on documenting how to
use the components in this add-on.
npm package: @ivanvanderbyl/ember-material-components-snackbar
Description: ember-cli addon for @material/snackbar
Author: James H. Hill
Latest version: 0.77.1-alpha.2

@ivanvanderbyl/ember-material-components-snackbar
======================

ember-cli addon for [`@material/snackbar`](https://github.com/material-components/material-components-web/tree/master/packages/mdc-snackbar).

Installation
------------

    ember install @ivanvanderbyl/ember-material-components-snackbar

Components and Mixins
-----------------------

### Components

* [`{{mdc-snackbar}}`](#mdc-snackbar)


{{mdc-snackbar}}
---------------------

### Description

Display a snackbar on the page.

### Usage

```handlebars
{{mdc-snackbar message=[string]
               timeout=[number]
               actionHandler=action
               actionText=[string]
               multiline=[true|false]
               actionOnBottom=[true|false]
               dismissesOnAction=[true|false]}}
```

### Attributes

* `message` - The message to display in the snackbar. Changing the message automatically shows the snackbar.
* `timeout` - Optional timeout for the snackbar.
* `actionHandler` - Callback invoked when the action is clicked.
* `actionText` - The text to display for the action.
* `multiline` - The snackbar is multiple lines.
* `actionOnBottom` - Align the action to the bottom of a multi-line message.
* `dismissesOnAction`  Dismiss in the snackbar after the action is clicked.
npm package: @ivanvanderbyl/ember-material-components-stepper
Description: The default blueprint for ember-cli addons.
Author: James H. Hill
Latest version: 0.77.1-alpha.2

@ivanvanderbyl/ember-material-components-stepper
======================

ember-cli addon for [`@material/stepper`](https://github.com/material-components/material-components-web/tree/master/packages/mdc-stepper).

Installation
------------

    ember install @ivanvanderbyl/ember-material-components-stepper

Example Code
---------------

Please see example code in `tests/dummy/app/templates` while we work on documenting how to
use the components in this add-on.

``
npm package: @ivanvanderbyl/ember-material-components-switch
Description: ember-cli addon for @material/switch.
Author: James H. Hill
Latest version: 0.77.1-alpha.2

@ivanvanderbyl/ember-material-components-switch
======================

ember-cli addon for [`@material/switch`](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch).

Installation
------------

    ember install @ivanvanderbyl/ember-material-components-switch

Example Code
---------------

Please see example code in `tests/dummy/app/templates` while we work on documenting how to
use the components in this add-on.

``
npm package: @ivanvanderbyl/ember-material-components-tab
Description: ember-cli addon for @material/tab.
Author: James H. Hill
Latest version: 0.77.1-alpha.2

@ivanvanderbyl/ember-material-components-tab
======================

ember-cli addon for [`@material/tab`](https://github.com/material-components/material-components-web/tree/master/packages/mdc-tab).

Installation
------------

    ember install @ivanvanderbyl/ember-material-components-tab

Example Code
---------------

Please see example code in `tests/dummy/app/templates` while we work on documenting how to
use the components in this add-on.

``
npm package: @ivanvanderbyl/ember-material-components-tab-bar
Description: The default blueprint for ember-cli addons.
Author: James H. Hill
Latest version: 0.77.1-alpha.2

@ivanvanderbyl/ember-material-components-tab-bar
======================

ember-cli addon for [`@material/tab-bar`](https://github.com/material-components/material-components-web/tree/master/packages/mdc-tab-bar).

Installation
------------

    ember install @ivanvanderbyl/ember-material-components-tab-bar

Example Code
---------------

Please see example code in `tests/dummy/app/templates` while we work on documenting how to
use the components in this add-on.

``
npm package: @ivanvanderbyl/ember-material-components-tab-indicator
Description: ember-cli addons for @material/tab-indicator
Author: James H. Hill
Latest version: 0.77.1-alpha.2

@ivanvanderbyl/ember-material-components-tab-indicator
======================

ember-cli addon for [`@material/tab-indicator`](https://github.com/material-components/material-components-web/tree/master/packages/mdc-tab-indicator).

Installation
------------

    ember install @ivanvanderbyl/ember-material-components-tab-indicator

Example Code
---------------

Please see example code in `tests/dummy/app/templates` while we work on documenting how to
use the components in this add-on.

``
npm package: @ivanvanderbyl/ember-material-components-tab-scroller
Description: ember-cli addon for @material/tab-scroller
Author: James H. Hill
Latest version: 0.77.1-alpha.2

@ivanvanderbyl/ember-material-components-tab-scroller
======================

ember-cli addon for [`@material/tab-scroller`](https://github.com/material-components/material-components-web/tree/master/packages/mdc-tab-scroller).

Installation
------------

    ember install @ivanvanderbyl/ember-material-components-tab-scroller

Example Code
---------------

Please see example code in `tests/dummy/app/templates` while we work on documenting how to
use the components in this add-on.

``
npm package: @ivanvanderbyl/ember-material-components-tabs
Description: The default blueprint for ember-cli addons.
Author: James H. Hill
Latest version: 0.77.1-alpha.2

@ivanvanderbyl/ember-material-components-tabs
======================

ember-cli addon for [`@material/tabs`](https://github.com/material-components/material-components-web/tree/master/packages/mdc-tabs).

Installation
------------

    ember install @ivanvanderbyl/ember-material-components-tabs

Example Code
---------------

Please see example code in `tests/dummy/app/templates` while we work on documenting how to
use the components in this add-on.

``
npm package: @ivanvanderbyl/ember-material-components-textfield
Description: ember-cli addon for @material/textfield
Author: James H. Hill
Latest version: 0.77.1-alpha.2

@ivanvanderbyl/ember-material-components-textfield
========================

ember-cli addon for [`@material/textfield`](https://github.com/material-components/material-components-web/tree/master/packages/mdc-textfield).

Installation
------------

    ember install @ivanvanderbyl/ember-material-components-textfield

Example Code
---------------

Please see example code in `tests/dummy/app/templates` while we work on documenting how to
use the components in this add-on.

``
npm package: @ivanvanderbyl/ember-material-components-theme
Description: ember-cli addon for @material/theme
Author: James H. Hill
Latest version: 0.77.1-alpha.2

@ivanvanderbyl/ember-material-components-theme
======================

ember-cli addon for [`@material/theme`](https://github.com/material-components/material-components-web/tree/master/packages/mdc-theme).

Installation
------------

    ember install @ivanvanderbyl/ember-material-components-theme

Example Code
---------------

Please see example code in `tests/dummy/app/templates` while we work on documenting how to
use the components in this add-on.

``