akyral-modal.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="akyral-modal-behavior.html">

<!--
A responsive modal element.

## Using the element
### Nested content
Using the element is as simple as defining a `akyral-modal` element and nesting content

Example:

    <akyral-modal>
        I am content...
    </akyral-modal>


### As a Behavior
You can use `akyral-modal` as a behavior

Example:

    <dom-module name="new-modal">
        <template>
            <content></content>
        </template>
        <script>
            Polymer({
              is: 'demo-modal',
              behaviors: [window.AkyralModalBehavior]
            });
        </script>
    </dom-module>

## Configuration
### Type
Setting a type allows you to define a visual effect to the modal. You can
choose from the following types: `drop`, `flip`, `lift`, `slide`, `swing` and
`takeover`.

Example:

    <akyral-modal type="flip"></akyral-modal>

### Position
Setting a position will set the visual effect's starting position. You can
choose from the following position: `top`, `left`, `bottom`, and `right`.
A modal with a type of `takeover` is not affected by position.

Example:

    <akyral-modal type="slide" position="top"></akyral-modal>


### Pinned location
Setting the `pinned` attribute will pin the element to that side on the viewport.
This will override the position attribute. Only types of `swing` and `slide` support the pinned
attribute.

Example:

    <akyral-modal type="slide" position="top" pinned="top"></akyral-modal>

## Accessiblity (a11y)

## Tab ordering
By default `akyral-modal` will allow tabbing into accessible items with it. It will maintain tab
focus within the modal until the escape key has been pressed or the modal has been closed.

## Suggestions
When marking up `akyral-modal`, it is recommended that the following standards are followed.


@element akyral-modal
@blurb Web component which allows for easy modal creation
@demo http://filaraujo.github.io/akyral.io/modal/index.html
@homepage https://github.com/filaraujo/akyral-modal
-->

<dom-module id="akyral-modal">

  <link rel="import" type="css" href="akyral-modal.css">

  <template>
    <div
      id="content"
      role="dialog"
      tabindex="-1">
      <slot></slot>
    </div>
  </template>

</dom-module>

<script src="akyral-modal.js"></script>