open-index/open-npm huggingface dataset:
npm package: @riot-material/app-bar-utils
Description: You can install it via nodejs ```sh npm install @riot-material/app-bar-utils ``` or download one of the bundled file ```js /* `dist/index.amd.js` or `dist/index.umd.js` */ requirejs.config({   paths: {     "@riot-material/app-bar-utils": "path/to
Author: Kal Aster
Latest version: 1.3.0

# app-bar utilities based on [Material Design](https://material.io/) for [riot-material](https://github.com/riot-material/riot-material)
## Installation
You can install it via nodejs
```sh
npm install @riot-material/app-bar-utils
```
or download one of the bundled file
```js
/* `dist/index.amd.js` or `dist/index.umd.js` */
requirejs.config({
  paths: {
    "@riot-material/app-bar-utils": "path/to/@riot-material/app-bar-utils",
  },
});

require(['@riot-material/app-bar-utils'], function (appBarUtils) {
    // ...
});

/* `dist/index.js` */
import * as appBarUtils from "@riot-material/app-bar-utils";

// or

import { ... } from "@riot-material/app-bar-utils";
```
otherwise you can include the script in your project html
```html
<script src="@riot-material/app-bar-utils/index.umd.js" />
```
and access it via
```js
window.riotMaterial.appBarUtils;
```
## Documentation
### getHeight(): number
returns `number`: the height of the app-bar

*Note: it internally calls [setup](#setup)*
### offChange<T>(listener: (this: T) => void, thisArg?: T): void
removes the listener

`listener: (this: T) => void` the listener to call when change in height happens  
`thisArg: T` the this argument to pass to the listener when called
### onceChange<T>(listener: (this: T) => void, thisArg?: T): void
adds a listener that will be called once when the height of the app bar changes

`listener: (this: T) => void` the listener to call when change in height happens  
`thisArg: T` the this argument to pass to the listener when called
### onChange<T>(listener: (this: T) => void, thisArg?: T): void
adds a listener that will be called when the height of the app bar changes

`listener: (this: T) => void` the listener to call when change in height happens  
`thisArg: T` the this argument to pass to the listener when called
### setup()
*Note: internally called by [getHeight](#getheight-number)*
npm package: @riot-material/before-focus-listener
Description: You can install it via nodejs ```sh npm install @riot-material/before-focus-listener ``` or download one of the bundled file ```js /* `dist/index.amd.js` or `dist/index.umd.js` */ requirejs.config({   paths: {     "@riot-material/before-focus-lis
Author: Kal Aster
Latest version: 2.0.0

# app-bar utilities based on [Material Design](https://material.io/) for [riot-material](https://github.com/riot-material/riot-material)
## Installation
You can install it via nodejs
```sh
npm install @riot-material/before-focus-listener
```
or download one of the bundled file
```js
/* `dist/index.amd.js` or `dist/index.umd.js` */
requirejs.config({
  paths: {
    "@riot-material/before-focus-listener": "path/to/@riot-material/before-focus-listener",
  },
});

require(['@riot-material/before-focus-listener'], function (beforeFocusListener) {
    // ...
});

/* `dist/index.js` */
import * as beforeFocusListener from "@riot-material/before-focus-listener";

// or

import { ... } from "@riot-material/before-focus-listener";
```
otherwise you can include the script in your project html
```html
<script src="@riot-material/before-focus-listener/index.umd.js" />
```
and access it via
```js
window.riotMaterial.beforeFocusListener;
```
## Documentation
### addListener\<T>(element: HTMLElement, handler: (this: T, event: TouchEvent | MouseEvent) => void, context?: T): void
`element: HTMLElement`  
`handler: (this: T, event: TouchEvent | MouseEvent) => void`  
`context?: T`
### removeListener(element: HTMLElement, handler: (event: TouchEvent | MouseEvent) => void): void
`element: HTMLElement`  
`handler: (event: TouchEvent | MouseEvent) => void`
npm package: @riot-material/focus-manager
Description: You can install it via nodejs ```sh npm install @riot-material/focus-manager ``` or download one of the bundled file ```js /**  * `dist/index.amd.js`  * `dist/index.umd.js`  */ requirejs.config({   paths: {     "@riot-material/focus-manager": 
Author: Kal Aster
Latest version: 1.2.0

# focus manager for [riot-material](https://github.com/riot-material/riot-material)
## Installation
You can install it via nodejs
```sh
npm install @riot-material/focus-manager
```
or download one of the bundled file
```js
/**
 * `dist/index.amd.js`
 * `dist/index.umd.js`
 */
requirejs.config({
  paths: {
    "@riot-material/focus-manager": "path/to/@riot-material/focus-manager",
  },
});

require(['@riot-material/focus-manager'], function (focusManager) {
    // ...
});

/**
 * `dist/index.js`
 */
import * as focusManager from "@riot-material/focus-manager";

// or

import { ... } from "@riot-material/focus-manager";
```
otherwise you can include the script in your project html
```html
<script src="@riot-material/focus-manager/index.umd.js" />
```
and access it via
```js
window.riotMaterial.focusManager;
```
## Methods
### `hold(options?: `[`IOptions`](#ioptions)`): void`
### `release(): void`
### `on<T extends keyof `[`IManageableEvent`](#imanageableevent)`>(type: T, listener: (event: HTMLElementEventMap[T]) => void): void
## Interfaces
### `IOptions`
`element?: HTMLElement`
`onFocusInside?: (element: Element) => boolean`
if returns `true` the focus is kept to the element and hold back when it blurs away
`onFocusOutside?: (element: Element) => boolean`
if returns `true` the focus-manager is `release`d
`onPrevious?: () => void`
`onNext?: () => void`
### `IManageableEvent`
`"keydown": KeyboardEvent`
`"keyup": KeyboardEvent`
npm package: @riot-material/new-props-wrapper
Description: You can install it via nodejs ```sh npm install @riot-material/rm-textfield-container ``` or download one of the bundled file ```js /**  * `dist/index.amd.js`,  * `dist/index.umd.js`  */ requirejs.config({   paths: {       "@riot-material/rm-t
Author: Kal Aster
Latest version: 1.0.0

# textfield container component based on [Material Design](https://material.io/components/text-fields) for [riot-material](https://github.com/riot-material/riot-material)
## Installation
You can install it via nodejs
```sh
npm install @riot-material/rm-textfield-container
```
or download one of the bundled file
```js
/**
 * `dist/index.amd.js`,
 * `dist/index.umd.js`
 */
requirejs.config({
  paths: {
      "@riot-material/rm-textfield-container": "path/to/@riot-material/rm-textfield-container",
   },
});

require(['@riot-material/rm-textfield-container'], function (TextfieldContainerComponent) {
    // ...
});

/**
 * `dist/index.js`,
 * `dist/index.es.js`,
 * npm installation
 */
import TextfieldContainerComponent from "@riot-material/rm-textfield-container";

```
otherwise you can include the script in your project html
```html
<script src="@riot-material/rm-textfield-container/index.umd.js" />
```
and access it via
```js
window.riotMaterial.components.textfieldContainer;
```
## Properties
### `disabled` *optional*
Any value will be result in the disabled state
### `helper-text` *optional*
### `label` *optional*
### `variant` *optional* (default: `flat`)
Possible values:  
- `flat`  
- `filled`  
- `outlined`
## Slots
### `default` or `input`
Will be mounted inside the textfield container
### `leading`
Will be mounted before the `default` or `input` slot
### `trailing`
Will be mounted after the `default` or `input` slot
npm package: @riot-material/position-controller
Description: You can install it via nodejs ```sh npm install @riot-material/position-controller ``` or download one of the bundled file ```js /**  * `dist/index.amd.js`  * `dist/index.umd.js`  */ requirejs.config({     paths: {         "@riot-material/posi
Author: Kal Aster
Latest version: 1.2.1

# position controller for [riot-material](https://github.com/riot-material/riot-material)
## Installation
You can install it via nodejs
```sh
npm install @riot-material/position-controller
```
or download one of the bundled file
```js
/**
 * `dist/index.amd.js`
 * `dist/index.umd.js`
 */
requirejs.config({
    paths: {
        "@riot-material/position-controller": "path/to/@riot-material/position-controller",
    },
});

require(['@riot-material/position-controller'], function (positionController) {
    // ...
});

/**
 * `dist/index.js`
 */
import positionController from "@riot-material/position-controller";

// or

import { default as positionController } from "@riot-material/position-controller";
```
otherwise you can include the script in your project html
```html
<script src="@riot-material/position-controller/index.umd.js" />
```
and access it via
```js
window.riotMaterial.positionController;
```
## Methods
### `<default export>(element: HTMLElement): `[`IPositionController`](#ipositioncontroller)
## Interfaces
### `IPositionController`
`getPosition(): number`

`getSelectedIndex(): number`

`setSelectedIndex(index: number): `[`IPositionController`](#ipositioncontroller)

`getLength(): number`

`setLength(length: number): `[`IPositionController`](#ipositioncontroller)

`on(type, callback): `[`IPositionController`](#ipositioncontroller)  
- type: `"positionchanged" | "positionapplied"`  
- callback: `(event: `[`PositionChangedEvent`](#positionchangedevent)` | `[`PositionAppliedEvent`](#positionappliedevent)`) => void`

`off(type, callback): `[`IPositionController`](#ipositioncontroller)  
- type: `"positionchanged" | "positionapplied"`  
- callback: `(event: `[`PositionChangedEvent`](#positionchangedevent)` | `[`PositionAppliedEvent`](#positionappliedevent)`) => void`
## Types
### `PositionChangedEvent`
`detail: { position: number }`
### `PositionAppliedEvent`
`detail: { previousIndex: number, currentIndex: number }`
npm package: @riot-material/ripple
Description: You can install it via nodejs ```sh npm install @riot-material/ripple ``` or download one of the bundled file ```js /**  * `dist/index.amd.js`  * `dist/index.amd+libs.js`  * `dist/index.umd.js`  * `dist/index.umd+libs.js`  */ requirejs.config(
Author: Kal Aster
Latest version: 1.2.0

# checkbox component based on [Material Design](https://material.io/components/selection-controls#checkboxes) for [riot-material](https://github.com/riot-material/riot-material)
## Installation
You can install it via nodejs
```sh
npm install @riot-material/ripple
```
or download one of the bundled file
```js
/**
 * `dist/index.amd.js`
 * `dist/index.amd+libs.js`
 * `dist/index.umd.js`
 * `dist/index.umd+libs.js`
 */
requirejs.config({
  paths: {
      "@riot-material/ripple": "path/to/@riot-material/ripple",
   },
});

require(['@riot-material/ripple'], function (ripple) {
    // ...
});

/**
 * `dist/index.js`
 * `dist/index.es.js`
 * npm installation
 */
import * as ripple from "@riot-material/ripple";

```
otherwise you can include the script in your project html
```html
<script src="@riot-material/ripple/index.umd.js" />
<!-- or -->
<script src="@riot-material/ripple/index.umd+libs.js" />
```
and access it via
```js
window.riotMaterial.ripple;
```
*Note: all the bundled file having `+libs` contain also the dependencies needed by the component, which, in this case, are:  
`what-input`  
Be sure to have them when installing manually or including via html*
## Methods
### `ripple(element: HTMLElement, options?: `[`IRippleOptions`](#irippleoptions)`): `[`IRipple`](#iripple)
### `isRipple(element: HTMLElement): boolean`
## Types
### IRipple
`highlight(): Ripple`

`start(x: number | null, y: number | null, event?: PointerEvent | FocusEvent, type?: TYPE): Ripple`

`set(options: IRippleOptions): IRipple`

`getOption(option: string): any`
### IRippleOptions
`radius: number` *optional*

`centered: boolean` *optional*

`unbounded: boolean` *optional*

`disabled: boolean` *optional*

`highlight: boolean` *optional*

`instantHighlight: boolean` *optional*

`unboundedFocus: boolean` *optional*

`focusTarget: HTMLElement` *optional*

`color: string` *optional*

`detectLabel: boolean` *optional*

`usePointerFocus: boolean` *optional*

`stopRippling: boolean` *optional*
npm package: @riot-material/rm-button
Description: You can install it via nodejs ```sh npm install @riot-material/rm-button ``` or download one of the bundled file ```js /**  * `dist/index.amd.js`,  * `dist/index.amd+libs.js`  * `dist/index.umd.js`,  * `dist/index.umd+libs.js`  */ requirejs.co
Author: Kal Aster
Latest version: 2.1.2

# button component based on [Material Design](https://material.io/components/buttons/) for [riot-material](https://github.com/riot-material/riot-material)
## Installation
You can install it via nodejs
```sh
npm install @riot-material/rm-button
```
or download one of the bundled file
```js
/**
 * `dist/index.amd.js`,
 * `dist/index.amd+libs.js`
 * `dist/index.umd.js`,
 * `dist/index.umd+libs.js`
 */
requirejs.config({
  paths: {
      "@riot-material/rm-button": "path/to/@riot-material/rm-button",
   },
});

require(['@riot-material/rm-button'], function (ButtonComponent) {
    // ...
});

/**
 * `dist/index.js`,
 * `dist/index.es.js`,
 * npm installation
 */
import ButtonComponent from "@riot-material/rm-button";

```
otherwise you can include the script in your project html
```html
<script src="@riot-material/rm-button/index.umd.js" />
<!-- or -->
<script src="@riot-material/rm-button/index.umd+libs.js" />
```
and access it via
```js
window.riotMaterial.components.button;
```
*Note: all the bundled file having `+libs` contain also the dependencies needed by the component, which, in this case, are:  
`@riot-material/before-focus-listener`  
`@riot-material/ripple`  
`@riot-material/rm-icon`  
`riot`  
Be sure to have them when installing manually or including via html*
## Properties
### `variant` (default: `flat`)
Possible values:  
- `flat`  
- `unelevated`  
- `raised`  
- `outlined`  
- `icon`
### `disabled` optional
Any value will be result in the disabled state
### `open-overlay` optional
The value should be a css selector for an overlay  
*Actually any element connected to a riot component with a `open` method will work*
### `ripple-*` optional
Any attribute starting with "ripple-" will be passed to the ripple options
*Note: `detectLabel` will be always `false` and `disabled` will be always matching the disabled state of the button
## Methods
### isDisabled(): boolean
### isFlat(): boolean
### isIcon(): boolean
### isOutlined(): boolean
### isRaised(): boolean
### isUnelevated(): boolean
### setDisabled(disabled: boolean): void
npm package: @riot-material/rm-checkbox
Description: You can install it via nodejs ```sh npm install @riot-material/rm-checkbox ``` or download one of the bundled file ```js /**  * `dist/index.js`  * `dist/index+libs.js`  */ requirejs.config({   paths: {       "@riot-material/rm-checkbox": "path
Author: Kal Aster
Latest version: 1.2.1

# checkbox component based on [Material Design](https://material.io/components/selection-controls#checkboxes) for [riot-material](https://github.com/riot-material/riot-material)
## Installation
You can install it via nodejs
```sh
npm install @riot-material/rm-checkbox
```
or download one of the bundled file
```js
/**
 * `dist/index.js`
 * `dist/index+libs.js`
 */
requirejs.config({
  paths: {
      "@riot-material/rm-checkbox": "path/to/@riot-material/rm-checkbox",
   },
});

require(['@riot-material/rm-checkbox'], function (CheckboxComponent) {
    // ...
});

/**
 * `dist/index.es.js`
 * npm installation
 */
import CheckboxComponent from "@riot-material/rm-checkbox";

```
otherwise you can include the script in your project html
```html
<script src="@riot-material/rm-checkbox/index.js" />
<!-- or -->
<script src="@riot-material/rm-checkbox/index+libs.js" />
```
and access it via
```js
window.riotMaterial.components.checkbox;
```
*Note: all the bundled file having `+libs` contain also the dependencies needed by the component, which, in this case, are:  
`@riot-material/ripple`  
`what-input`  
Be sure to have them when installing manually or including via html*
## Properties
### `checked` *optional*
### `disabled` *optional*
### `label` *optional*
### `name` *optional*
### `readonly` *optional*
## Methods
### `isChecked(): boolean`
### `isDisabled(): boolean`
### `isReadonly(): boolean`
npm package: @riot-material/rm-circular-avatar
Description: You can install it via nodejs ```sh npm install @riot-material/rm-circular-avatar ``` or download one of the bundled file ```js /**  * `dist/index.js`  */ requirejs.config({   paths: {       "@riot-material/rm-circular-avatar": "path/to/@riot-m
Author: Kal Aster
Latest version: 1.2.0

# circular avatar component based on [Material Design](https://material.io/) for [riot-material](https://github.com/riot-material/riot-material)
## Installation
You can install it via nodejs
```sh
npm install @riot-material/rm-circular-avatar
```
or download one of the bundled file
```js
/**
 * `dist/index.js`
 */
requirejs.config({
  paths: {
      "@riot-material/rm-circular-avatar": "path/to/@riot-material/rm-circular-avatar",
   },
});

require(['@riot-material/rm-circular-avatar'], function (CircularAvatarComponent) {
    // ...
});

/**
 * `dist/index.es.js`
 * npm installation
 */
import CircularAvatarComponent from "@riot-material/rm-circular-avatar";

```
otherwise you can include the script in your project html
```html
<script src="@riot-material/rm-circular-avatar/index.js" />
```
and access it via
```js
window.riotMaterial.components.circularAvatar;
```
## Properties
### `src`
npm package: @riot-material/rm-dialog
Description: You can install it via nodejs ```sh npm install @riot-material/rm-button ``` or download one of the bundled file ```js /**  * `dist/index.js`  */ requirejs.config({   paths: {       "@riot-material/rm-dialog": "path/to/@riot-material/rm-dialog"
Author: Kal Aster
Latest version: 1.3.0

# dialog component based on [Material Design](https://material.io/components/dialogs/) for [riot-material](https://github.com/riot-material/riot-material)
## Installation
You can install it via nodejs
```sh
npm install @riot-material/rm-button
```
or download one of the bundled file
```js
/**
 * `dist/index.js`
 */
requirejs.config({
  paths: {
      "@riot-material/rm-dialog": "path/to/@riot-material/rm-dialog",
   },
});

require(['@riot-material/rm-dialog'], function (DialogComponent) {
    // ...
});

/**
 * `dist/index.es.js`,
 * npm installation
 */
import DialogComponent from "@riot-material/rm-dialog";

```
otherwise you can include the script in your project html
```html
<script src="@riot-material/rm-dialog/index.js" />
```
and access it via
```js
window.riotMaterial.components.dialog;
```
## Properties
## Methods
### `open`
### `close`
## Slots
### `title`
### `content`
### `actions`
npm package: @riot-material/rm-floating-surface
Description: You can install it via nodejs ```sh npm install @riot-material/rm-floating-surface ``` or download one of the bundled file ```js /**  * `dist/index.js`  * `dist/index+libs.js`  */ requirejs.config({   paths: {       "@riot-material/rm-floating
Author: Kal Aster
Latest version: 2.0.0

# floating surface component based on [Material Design](https://material.io) for [riot-material](https://github.com/riot-material/riot-material)
## Installation
You can install it via nodejs
```sh
npm install @riot-material/rm-floating-surface
```
or download one of the bundled file
```js
/**
 * `dist/index.js`
 * `dist/index+libs.js`
 */
requirejs.config({
  paths: {
      "@riot-material/rm-floating-surface": "path/to/@riot-material/rm-floating-surface",
   },
});

require(['@riot-material/rm-floating-surface'], function (FloatingSurfaceComponent) {
    // ...
});

/**
 * `dist/index.es.js`
 * npm installation
 */
import FloatingSurfaceComponent from "@riot-material/rm-floating-surface";

```
otherwise you can include the script in your project html
```html
<script src="@riot-material/rm-floating-surface/index.js" />
<!-- or -->
<script src="@riot-material/rm-floating-surface/index+libs.js" />
```
and access it via
```js
window.riotMaterial.components.floatingSurface;
```
*Note: all the bundled file having `+libs` contain also the dependencies needed by the component, which, in this case, are:  
`@riot-material/ripple`  
`tabbable`  
Be sure to have them when installing manually or including via html*
## Properties
### `inherit-width` *optional*
### `surface` *optional*
### `variant` *optional*
## Slots
### `default`
npm package: @riot-material/rm-icon
Description: You can install it via nodejs ```sh npm install @riot-material/rm-icon ``` or download one of the bundled file ```js /**  * `dist/index.amd.js`  * `dist/index.umd.js`  */ requirejs.config({   paths: {       "@riot-material/rm-icon": "path/to/@
Author: Kal Aster
Latest version: 1.2.0

# icon set of [Material Design](https://material.io/components/icons/) for [riot-material](https://github.com/riot-material/riot-material)
## Installation
You can install it via nodejs
```sh
npm install @riot-material/rm-icon
```
or download one of the bundled file
```js
/**
 * `dist/index.amd.js`
 * `dist/index.umd.js`
 */
requirejs.config({
  paths: {
      "@riot-material/rm-icon": "path/to/@riot-material/rm-icon",
   },
});

require(['@riot-material/rm-icon'], function (IconComponent) {
    // ...
});

/**
 * `dist/index.js`
 * `dist/index.es.js`
 * npm installation
 */
import IconComponent from "@riot-material/rm-icon";

```
otherwise you can include the script in your project html
```html
<script src="@riot-material/rm-icon/index.umd.js" />
```
and access it via
```js
window.riotMaterial.components.icon;
```
## Documentation
Just write inside the tag the name of the chosen icon

Check the available icons [here](https://jossef.github.io/material-design-icons-iconfont/)
npm package: @riot-material/rm-list
Description: You can install it via nodejs ```sh npm install @riot-material/rm-list ``` or download one of the bundled file ```js /**  * `dist/index.js`  * `dist/index+libs.js`  */ requirejs.config({   paths: {       "@riot-material/rm-list": "path/to/@rio
Author: Kal Aster
Latest version: 1.2.0

# list container component based on [Material Design](https://material.io/components/selection-controls#list-itemes) for [riot-material](https://github.com/riot-material/riot-material)
## Installation
You can install it via nodejs
```sh
npm install @riot-material/rm-list
```
or download one of the bundled file
```js
/**
 * `dist/index.js`
 * `dist/index+libs.js`
 */
requirejs.config({
  paths: {
      "@riot-material/rm-list": "path/to/@riot-material/rm-list",
   },
});

require(['@riot-material/rm-list'], function (ListComponent) {
    // ...
});

/**
 * `dist/index.es.js`
 * npm installation
 */
import ListComponent from "@riot-material/rm-list";

```
otherwise you can include the script in your project html
```html
<script src="@riot-material/rm-list/index.js" />
<!-- or -->
<script src="@riot-material/rm-list/index+libs.js" />
```
and access it via
```js
window.riotMaterial.components.listItem;
```
*Note: all the bundled file having `+libs` contain also the dependencies needed by the component, which, in this case, are:  
`@riot-material/ripple`  
`tabbable`  
Be sure to have them when installing manually or including via html*
## Properties
### `keep-highlight` *optional*
### `prevent-focus` *optional*
### `prevent-highlight` *optional*
### `single-highlight` *optional*
## Slots
### `default`
npm package: @riot-material/rm-list-avatar
Description: You can install it via nodejs ```sh npm install @riot-material/rm-circular-avatar ``` or download one of the bundled file ```js /**  * `dist/index.js`  */ requirejs.config({   paths: {       "@riot-material/rm-circular-avatar": "path/to/@riot-m
Author: Kal Aster
Latest version: 1.2.0

# circular avatar component based on [Material Design](https://material.io/) for [riot-material](https://github.com/riot-material/riot-material)
## Installation
You can install it via nodejs
```sh
npm install @riot-material/rm-circular-avatar
```
or download one of the bundled file
```js
/**
 * `dist/index.js`
 */
requirejs.config({
  paths: {
      "@riot-material/rm-circular-avatar": "path/to/@riot-material/rm-circular-avatar",
   },
});

require(['@riot-material/rm-circular-avatar'], function (CircularAvatarComponent) {
    // ...
});

/**
 * `dist/index.es.js`
 * npm installation
 */
import CircularAvatarComponent from "@riot-material/rm-circular-avatar";

```
otherwise you can include the script in your project html
```html
<script src="@riot-material/rm-circular-avatar/index.js" />
```
and access it via
```js
window.riotMaterial.components.circularAvatar;
```
## Properties
### `src`
### `circular` *optional*
npm package: @riot-material/rm-list-group
Description: You can install it via nodejs ```sh npm install @riot-material/rm-list-group ``` or download one of the bundled file ```js /**  * `dist/index.js`  */ requirejs.config({   paths: {       "@riot-material/rm-list-group": "path/to/@riot-material/rm
Author: Kal Aster
Latest version: 1.2.1

# list group component based on [Material Design](https://material.io/) for [riot-material](https://github.com/riot-material/riot-material)
## Installation
You can install it via nodejs
```sh
npm install @riot-material/rm-list-group
```
or download one of the bundled file
```js
/**
 * `dist/index.js`
 */
requirejs.config({
  paths: {
      "@riot-material/rm-list-group": "path/to/@riot-material/rm-list-group",
   },
});

require(['@riot-material/rm-list-group'], function (ListGroupComponent) {
    // ...
});

/**
 * `dist/index.es.js`
 * npm installation
 */
import ListGroupComponent from "@riot-material/rm-list-group";

```
otherwise you can include the script in your project html
```html
<script src="@riot-material/rm-list-group/index.js" />
```
and access it via
```js
window.riotMaterial.components.listGroup;
```
## Properties
### `label`
## Slots
### `default`
npm package: @riot-material/rm-list-image
Description: You can install it via nodejs ```sh npm install @riot-material/rm-list-image ``` or download one of the bundled file ```js /**  * `dist/index.js`  */ requirejs.config({   paths: {       "@riot-material/rm-list-image": "path/to/@riot-material/rm
Author: Kal Aster
Latest version: 1.2.0

# list image component based on [Material Design](https://material.io/) for [riot-material](https://github.com/riot-material/riot-material)
## Installation
You can install it via nodejs
```sh
npm install @riot-material/rm-list-image
```
or download one of the bundled file
```js
/**
 * `dist/index.js`
 */
requirejs.config({
  paths: {
      "@riot-material/rm-list-image": "path/to/@riot-material/rm-list-image",
   },
});

require(['@riot-material/rm-list-image'], function (ListImageComponent) {
    // ...
});

/**
 * `dist/index.es.js`
 * npm installation
 */
import ListImageComponent from "@riot-material/rm-list-image";

```
otherwise you can include the script in your project html
```html
<script src="@riot-material/rm-list-image/index.js" />
```
and access it via
```js
window.riotMaterial.components.listImage;
```
## Properties
### `src`
### `large` *optional*
npm package: @riot-material/rm-list-item
Description: You can install it via nodejs ```sh npm install @riot-material/rm-list-item ``` or download one of the bundled file ```js /**  * `dist/index.js`  * `dist/index+libs.js`  */ requirejs.config({   paths: {       "@riot-material/rm-list-item": "pa
Author: Kal Aster
Latest version: 1.4.0

# list item component based on [Material Design](https://material.io/components/selection-controls#list-itemes) for [riot-material](https://github.com/riot-material/riot-material)
## Installation
You can install it via nodejs
```sh
npm install @riot-material/rm-list-item
```
or download one of the bundled file
```js
/**
 * `dist/index.js`
 * `dist/index+libs.js`
 */
requirejs.config({
  paths: {
      "@riot-material/rm-list-item": "path/to/@riot-material/rm-list-item",
   },
});

require(['@riot-material/rm-list-item'], function (ListItemComponent) {
    // ...
});

/**
 * `dist/index.es.js`
 * npm installation
 */
import ListItemComponent from "@riot-material/rm-list-item";

```
otherwise you can include the script in your project html
```html
<script src="@riot-material/rm-list-item/index.js" />
<!-- or -->
<script src="@riot-material/rm-list-item/index+libs.js" />
```
and access it via
```js
window.riotMaterial.components.listItem;
```
*Note: all the bundled file having `+libs` contain also the dependencies needed by the component, which, in this case, are:  
`@riot-material/ripple`  
Be sure to have them when installing manually or including via html*
## Properties
<!-- ### `disabled` -->
### `label` *optional*
### `passive` *optional*
### `selected` *optional*
### `value` *optional*
## Slots
### `default`
### `leading`
### `trailing`
npm package: @riot-material/rm-menu
Description: You can install it via nodejs ```sh npm install @riot-material/rm-menu ``` or download one of the bundled file ```js /**  * `dist/index.amd.js`  * `dist/index.amd+libs.js`  * `dist/index.umd.js`  * `dist/index.umd+libs.js`  */ requirejs.config
Author: Kal Aster
Latest version: 2.0.0

# menu component based on [Material Design](https://material.io/components/buttons/) for [riot-material](https://github.com/riot-material/riot-material)
## Installation
You can install it via nodejs
```sh
npm install @riot-material/rm-menu
```
or download one of the bundled file
```js
/**
 * `dist/index.amd.js`
 * `dist/index.amd+libs.js`
 * `dist/index.umd.js`
 * `dist/index.umd+libs.js`
 */
requirejs.config({
  paths: {
      "@riot-material/rm-menu": "path/to/@riot-material/rm-menu",
   },
});

require(['@riot-material/rm-menu'], function (MenuComponent) {
    // ...
});

/**
 * `dist/index.js`
 * `dist/index.es.js`
 * npm installation
 */
import MenuComponent from "@riot-material/rm-menu";

```
otherwise you can include the script in your project html
```html
<script src="@riot-material/rm-menu/index.umd.js" />
<!-- or -->
<script src="@riot-material/rm-menu/index.umd+libs.js" />
```
and access it via
```js
window.riotMaterial.components.menu;
```
*Note: all the bundled file having `+libs` contain also the dependencies needed by the component, which, in this case, are:  
`@riot-material/elevation`  
`@riot-material/focus-manager`  
`@riot-material/ripple`  
Be sure to have them when installing manually or including via html*
## Properties
### `keep-highlight`
### `opened`
### `prevent-auto-close`
### `prevent-focus`
### `selected`
### `variant`
npm package: @riot-material/rm-menu-item
Description: You can install it via nodejs ```sh npm install @riot-material/rm-menu-item ``` or download one of the bundled file ```js /**  * `dist/index.amd.js`  * `dist/index.amd+libs.js`  * `dist/index.umd.js`  * `dist/index.umd+libs.js`  */ requirejs.c
Author: Kal Aster
Latest version: 1.2.0

# menu item component based on [Material Design](https://material.io/components/buttons/) for [riot-material](https://github.com/riot-material/riot-material)
## Installation
You can install it via nodejs
```sh
npm install @riot-material/rm-menu-item
```
or download one of the bundled file
```js
/**
 * `dist/index.amd.js`
 * `dist/index.amd+libs.js`
 * `dist/index.umd.js`
 * `dist/index.umd+libs.js`
 */
requirejs.config({
  paths: {
      "@riot-material/rm-menu-item": "path/to/@riot-material/rm-menu-item",
   },
});

require(['@riot-material/rm-menu-item'], function (MenuItemComponent) {
    // ...
});

/**
 * `dist/index.js`
 * `dist/index.es.js`
 * npm installation
 */
import MenuItemComponent from "@riot-material/rm-menu-item";

```
otherwise you can include the script in your project html
```html
<script src="@riot-material/rm-menu-item/index.umd.js" />
<!-- or -->
<script src="@riot-material/rm-menu-item/index.umd+libs.js" />
```
and access it via
```js
window.riotMaterial.components.menuItem;
```
*Note: all the bundled file having `+libs` contain also the dependencies needed by the component, which, in this case, are:  
`@riot-material/ripple`  
Be sure to have them when installing manually or including via html*
## Properties
### `tabindex`
## Slots
### `default`
npm package: @riot-material/rm-radio
Description: You can install it via nodejs ```sh npm install @riot-material/rm-radio ``` or download one of the bundled file ```js /**  * `dist/index.js`  * `dist/index+libs.js`  */ requirejs.config({   paths: {       "@riot-material/rm-radio": "path/to/@r
Author: Kal Aster
Latest version: 1.2.0

# radio component based on [Material Design](https://material.io/) for [riot-material](https://github.com/riot-material/riot-material)
## Installation
You can install it via nodejs
```sh
npm install @riot-material/rm-radio
```
or download one of the bundled file
```js
/**
 * `dist/index.js`
 * `dist/index+libs.js`
 */
requirejs.config({
  paths: {
      "@riot-material/rm-radio": "path/to/@riot-material/rm-radio",
   },
});

require(['@riot-material/rm-radio'], function (RadioComponent) {
    // ...
});

/**
 * `dist/index.es.js`
 * npm installation
 */
import RadioComponent from "@riot-material/rm-radio";

```
otherwise you can include the script in your project html
```html
<script src="@riot-material/rm-radio/index.js" />
<!-- or -->
<script src="@riot-material/rm-radio/index+libs.js" />
```
and access it via
```js
window.riotMaterial.components.radio;
```
*Note: all the bundled file having `+libs` contain also the dependencies needed by the component, which, in this case, are:  
`@riot-material/ripple`  
Be sure to have them when installing manually or including via html*
## Properties
### `checked` optional
### `disabled` optional
Any value will be result in the disabled state
### `label` optional
### `name` optional
### `readonly` optional
## Methods
### `getName(): string|null`
### `isChecked(): boolean`
### `isDisabled(): boolean`
### `isReadonly(): boolean`
npm package: @riot-material/rm-select
Description: You can install it via nodejs ```sh npm install @riot-material/rm-select ``` or download one of the bundled file ```js /**  * `dist/index.amd.js`  * `dist/index.amd+libs.js`  * `dist/index.umd.js`  * `dist/index.umd+libs.js`  */ requirejs.conf
Author: Kal Aster
Latest version: 2.2.3

# select component based on [Material Design](https://material.io/components/selection-controls#selectes) for [riot-material](https://github.com/riot-material/riot-material)
## Installation
You can install it via nodejs
```sh
npm install @riot-material/rm-select
```
or download one of the bundled file
```js
/**
 * `dist/index.amd.js`
 * `dist/index.amd+libs.js`
 * `dist/index.umd.js`
 * `dist/index.umd+libs.js`
 */
requirejs.config({
  paths: {
      "@riot-material/rm-select": "path/to/@riot-material/rm-select",
   },
});

require(['@riot-material/rm-select'], function (SelectComponent) {
    // ...
});

/**
 * `dist/index.js`
 * `dist/index.es.js`
 * npm installation
 */
import SelectComponent from "@riot-material/rm-select";

```
otherwise you can include the script in your project html
```html
<script src="@riot-material/rm-select/index.umd.js" />
<!-- or -->
<script src="@riot-material/rm-select/index.umd+libs.js" />
```
and access it via
```js
window.riotMaterial.components.select;
```
*Note: all the bundled file having `+libs` contain also the dependencies needed by the component, which, in this case, are:  
`@riot-material/before-focus-listener`  
`@riot-material/ripple`  
`@riot-material/rm-button`  
`@riot-material/rm-menu`  
`@riot-material/rm-textfield-container`  
Be sure to have them when installing manually or including via html*
npm package: @riot-material/rm-tabbed-pages
Description: You can install it via nodejs ```sh npm install @riot-material/rm-tabbed-pages ``` or download one of the bundled file ```js /**  * `dist/index.amd.js`  * `dist/index.amd+libs.js`  * `dist/index.umd.js`  * `dist/index.umd+libs.js`  */ requirej
Author: Kal Aster
Latest version: 1.2.2

# tabbed pages component based on [Material Design](https://material.io/components/buttons/) for [riot-material](https://github.com/riot-material/riot-material)
## Installation
You can install it via nodejs
```sh
npm install @riot-material/rm-tabbed-pages
```
or download one of the bundled file
```js
/**
 * `dist/index.amd.js`
 * `dist/index.amd+libs.js`
 * `dist/index.umd.js`
 * `dist/index.umd+libs.js`
 */
requirejs.config({
  paths: {
      "@riot-material/rm-tabbed-pages": "path/to/@riot-material/rm-tabbed-pages",
   },
});

require(['@riot-material/rm-tabbed-pages'], function (TabbedPagesComponent) {
    // ...
});

/**
 * `dist/index.js`
 * `dist/index.es.js`
 * npm installation
 */
import TabbedPagesComponent from "@riot-material/rm-tabbed-pages";

```
otherwise you can include the script in your project html
```html
<script src="@riot-material/rm-tabbed-pages/index.umd.js" />
<!-- or -->
<script src="@riot-material/rm-tabbed-pages/index.umd+libs.js" />
```
and access it via
```js
window.riotMaterial.components.tabbedPages;
```
*Note: all the bundled file having `+libs` contain also the dependencies needed by the component, which, in this case, are:  
`@riot-material/position-controller`  
`@riot-material/ripple`  
Be sure to have them when installing manually or including via html the non-`+libs` files.
Be sure to have "riot" imported as well, because in any case it is consider external*
## Properties
### `selected-index` *optional*
## Methods
### `getLength(): number`
### `getPosition(): number`
### `getSelectedIndex(): number`
### `setSelectedIndex(index: number)`
## Slots
### `<tab-name>`
Every slot is a tab named as the slot and with the slot innerHTML as content.  
It is hidden if the slot "if" binding evaluates to false
npm package: @riot-material/rm-textfield
Description: You can install it via nodejs ```sh npm install @riot-material/rm-textfield ``` or download one of the bundled file ```js /**  * `dist/index.amd.js`  * `dist/index.amd+libs.js`  * `dist/index.umd.js`  * `dist/index.umd+libs.js`  */ requirejs.c
Author: Kal Aster
Latest version: 1.5.2

# textfield component based on [Material Design](https://material.io/components/text-fields) for [riot-material](https://github.com/riot-material/riot-material)
## Installation
You can install it via nodejs
```sh
npm install @riot-material/rm-textfield
```
or download one of the bundled file
```js
/**
 * `dist/index.amd.js`
 * `dist/index.amd+libs.js`
 * `dist/index.umd.js`
 * `dist/index.umd+libs.js`
 */
requirejs.config({
  paths: {
      "@riot-material/rm-textfield": "path/to/@riot-material/rm-textfield",
   },
});

require(['@riot-material/rm-textfield'], function (TextfieldComponent) {
    // ...
});

/**
 * `dist/index.js`
 * `dist/index.es.js`
 * npm installation
 */
import TextfieldComponent from "@riot-material/rm-textfield";

```
otherwise you can include the script in your project html
```html
<script src="@riot-material/rm-textfield/index.umd.js" />
<!-- or -->
<script src="@riot-material/rm-textfield/index.umd+libs.js" />
```
and access it via
```js
window.riotMaterial.components.textfield;
```
*Note: all the bundled file having `+libs` contain also the dependencies needed by the component, which, in this case, are:  
`@riot-material/rm-textfield-container`  
Be sure to have them when installing manually or including via html*
## Properties
### `clearable` *optional*
### `disabled` *optional*
Any value will be result in the disabled state
### `full-width` *optional*
### `label` *optional*
### `name` *optional*
### `placeholder` *optional*
### `readonly` *optional*
### `type` *optional* (default: `text`)
Valid values:
- `email`
- `number`
- `password`
- `search`
- `tel`
- `url`
- `text`
### `value` *optional*
### `variant` *optional* (default: `flat`)
Valid values:  
- `flat`  
- `filled`  
- `outlined`
## Methods
### `clear(): void`
### `getType(): string`
### `isClearable(): boolean`
### `isDisabled(): boolean`
### `isFullWidth(): boolean`
### `isReadonly(): boolean`
## Slots
### `leading`
Will be mounted before the input tag
### `trailing`
Will be mounted after the input tag
npm package: @riot-material/rm-textfield-container
Description: You can install it via nodejs ```sh npm install @riot-material/rm-textfield-container ``` or download one of the bundled file ```js /**  * `dist/index.amd.js`,  * `dist/index.umd.js`  */ requirejs.config({   paths: {       "@riot-material/rm-t
Author: Kal Aster
Latest version: 1.3.1

# textfield container component based on [Material Design](https://material.io/components/text-fields) for [riot-material](https://github.com/riot-material/riot-material)
## Installation
You can install it via nodejs
```sh
npm install @riot-material/rm-textfield-container
```
or download one of the bundled file
```js
/**
 * `dist/index.amd.js`,
 * `dist/index.umd.js`
 */
requirejs.config({
  paths: {
      "@riot-material/rm-textfield-container": "path/to/@riot-material/rm-textfield-container",
   },
});

require(['@riot-material/rm-textfield-container'], function (TextfieldContainerComponent) {
    // ...
});

/**
 * `dist/index.js`,
 * `dist/index.es.js`,
 * npm installation
 */
import TextfieldContainerComponent from "@riot-material/rm-textfield-container";

```
otherwise you can include the script in your project html
```html
<script src="@riot-material/rm-textfield-container/index.umd.js" />
```
and access it via
```js
window.riotMaterial.components.textfieldContainer;
```
## Properties
### `disabled` *optional*
Any value will be result in the disabled state
### `helper-text` *optional*
### `label` *optional*
### `variant` *optional* (default: `flat`)
Possible values:  
- `flat`  
- `filled`  
- `outlined`
## Slots
### `default` or `input`
Will be mounted inside the textfield container
### `leading`
Will be mounted before the `default` or `input` slot
### `trailing`
Will be mounted after the `default` or `input` slot
npm package: @riot-material/rm-visibility-trigger
Description: You can install it via nodejs ```sh npm install @riot-material/rm-visibility-trigger ``` or download one of the bundled file ```js /**  * `dist/index.js`  */ requirejs.config({   paths: {       "@riot-material/rm-visibility-trigger": "path/to/@
Author: Kal Aster
Latest version: 1.0.1

# visibility trigger utility
## Installation
You can install it via nodejs
```sh
npm install @riot-material/rm-visibility-trigger
```
or download one of the bundled file
```js
/**
 * `dist/index.js`
 */
requirejs.config({
  paths: {
      "@riot-material/rm-visibility-trigger": "path/to/@riot-material/rm-visibility-trigger",
   },
});

require(['@riot-material/rm-visibility-trigger'], function (RmVisibilityTrigger) {
    // ...
});

/**
 * `dist/index.es.js`
 * npm installation
 */
import RmVisibilityTrigger from "@riot-material/rm-visibility-trigger";

```
otherwise you can include the script in your project html
```html
<script src="@riot-material/rm-visibility-trigger/index.js"></script>
<!-- or -->
<script src="@riot-material/rm-visibility-trigger/index+libs.js"></script>
```
and access it via
```js
window.riotMaterial.components.visibilityTrigger;
```
## Events
### `visible`
### `hidden`
npm package: @riot-tools/sak
Description: Swiss army knife toolkit for Riotjs
Author: Danilo Alonso
Latest version: 2.1.1

# Riot Tools - SAK

Swiss Army Knife of Riot Tools

## Documentation

- [documentation website](https://riot-tools.github.io/sak/getting-started)
- [classes and interfaces](https://github.com/riot-tools/sak/tree/master/docs)
npm package: @riot-tools/tori
Description: Tori - Opinionated Riot component generator
Author: Niklas Lepistö
Latest version: 2.0.0

# tori - Opinionated [Riot](https://riot.js.org) component generator
tori CLI tool, inspired by [hpal](https://hapipal.com)

## !!! BREAKING CHANGE WITH V2 !!!
With version 2, the package was moved to a different organization (`@graundsco -> @riot-tools`). Please check the updated installation instruction below to use the latest version. There are no other new changes to the functionalities whatsoever.

## Installation and usage
> **Note:** tori was developed with **nodejs v12+**, it hasn't been tested in earlier versions

Recommended way:
```
npm i @riot-tools/tori -D
npx tori path/to/component
```

## How it works

By default `tori` will take in the whole path structure where you want to create the component. It will use **the last part of the path as the name of the component**.

Running `npx tori src/components/my-component` will generate `my-component` directory under `src/components/` with all the files defined in [the templates](./templates). Note that **you don't have to create the parent directories** as tori will recursively create them for you if they don't exist.

Tori assumes that alongside using [riot](https://riot.js.org), you will use [Jest](https://jestjs.io/) as the testing framework.

Some of the code has been commented out in the template files to make it more convenient for you to enable them.

### Customization

You can extend tori's component generation by defining paths to your desired directories in `package.json`.

**package.json example**
```
"tori": {
  "basePath": "src",             // The root of your source code. Note that the key MUST BE "basePath"
  "components": "components"     // Key defines the command you can use with tori and the value is the path based on "basePath" value
  "common": "components/common" 
},

```

Now, if you want to create a component under `src/components/common`, you can run `npx tori common my-component`.

> **Note:** the keys don't have to match the directory names: they can be anything! Just remember that they will be the commands you will use with tori, e.g. key named `x` will become `npx tori x component-name`.

## Dependencies
- [@hapi/somever](https://www.npmjs.com/package/@hapi/somever)
- [bin-v8-flags-filter](https://www.npmjs.com/package/bin-v8-flags-filter)

## TODO
- [ ] Support defining your own templates in your work directory
- [ ] More command line options for the tool?
  - e.g. `help`
  
- Something else? Let us know!