Project import generated by Copybara.
GitOrigin-RevId: 63746295f1a5ab5a619056791995793d65529e62
diff --git a/node_modules/mdl-ext/src/accordion/_accordion.scss b/node_modules/mdl-ext/src/accordion/_accordion.scss
new file mode 100644
index 0000000..6109194
--- /dev/null
+++ b/node_modules/mdl-ext/src/accordion/_accordion.scss
@@ -0,0 +1,395 @@
+@charset "UTF-8";
+
+/**
+ * @license
+ * Copyright 2016 Leif Olsen. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * This code is built with Google Material Design Lite,
+ * which is Licensed under the Apache License, Version 2.0
+ */
+
+.mdlext-aria-toggle-plus-minus {
+ @include mdlext-aria-expanded-toggle($font-family: inherit, $font-size: 1.4em);
+}
+
+.mdlext-aria-toggle-material-icons {
+ @include mdlext-aria-expanded-toggle($font-size: 1.3em, $icon: 'expand_more', $icon-expanded: 'expand_less', $icon-offset: -$mdlext-accordion-header-padding);
+}
+
+.mdlext-accordion {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ display: flex;
+
+ * {
+ box-sizing: border-box;
+ }
+
+ &__panel {
+ box-sizing: border-box;
+ position: relative;
+ overflow: hidden;
+ display: flex;
+ flex-wrap: nowrap;
+ }
+
+ &__tab {
+ @include typo-title();
+
+ font-weight: 400;
+ line-height: 1.1;
+ box-sizing: border-box;
+ position: relative;
+ margin: 0;
+ padding: 0; // $mdlext-accordion-header-padding;
+ min-width: $mdlext-accordion-header-height;
+ min-height: $mdlext-accordion-header-height;
+ display: flex;
+ align-items: center;
+ align-self: stretch;
+ user-select: none;
+ color: $mdlext-accordion-header-secondary-color;
+ background-color: $mdlext-accordion-header-background-color;
+ cursor: pointer;
+ overflow: hidden;
+
+ &:focus {
+ outline-offset: -2px;
+ outline-color: $mdlext-accordion-header-focus-outline-color;
+ outline-width: 2px;
+ }
+
+ &[aria-expanded='true'] {
+ background-color: $mdlext-accordion-header-background-open-color;
+ }
+
+ &[aria-selected='true'] {
+ background-color: $mdlext-accordion-header-background-active-color;
+ }
+
+ &[disabled] {
+ background-color: $mdlext-accordion-header-disabled-color;
+ color: $mdlext-accordion-header-secondary-color-disabled;
+ pointer-events: none;
+
+ > * {
+ color: $mdlext-accordion-header-secondary-color-disabled;
+ }
+ }
+
+ &:hover:not([disabled]) {
+ background-color: $mdlext-accordion-header-background-hover-color;
+ }
+
+ > * {
+ margin: 0;
+ padding: 0;
+ }
+
+ &__caption {
+ padding-left: $mdlext-accordion-header-padding;
+ padding-right: $mdlext-accordion-header-padding;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ > *:first-child {
+ padding-left: 0;
+ }
+
+ &--ripple {
+ &[aria-selected='true']::before {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ background: $mdlext-accordion-ripple-color;
+ opacity: 0;
+ border-radius: 100%;
+ transform: scale(1, 1) translate(-50%);
+ transform-origin: 50% 50%;
+ }
+ &[aria-selected='true']:focus:not(:active)::before {
+ // http://easings.net/
+ animation: mdlext-accordion-tab-ripple 1s cubic-bezier(0.4, 0.0, 0.4, 1) 0.01s alternate forwards; // cubic-bezier(0.4, 0.0, 1, 1); //cubic-bezier(0.4, 0.0, 0.4, 1) 0.01s alternate forwards; //ease-out;
+ }
+ }
+ }
+
+ &__tabpanel {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0 $mdlext-accordion-content-padding;
+ color: $mdlext-accordion-content-color;
+ background-color: $mdlext-accordion-content-background-color;
+ display: block;
+ overflow: auto;
+ flex-grow: 1;
+
+ &[hidden] {
+ @include mdlext-visually-hidden;
+ }
+ }
+}
+
+// Vertical layout
+.mdlext-accordion {
+
+ &--vertical {
+ flex-direction: column;
+ flex-wrap: nowrap;
+
+ .mdlext-accordion__panel {
+ min-height: $mdlext-accordion-header-height;
+ flex-direction: column;
+ }
+
+ .mdlext-accordion__tab {
+ height: $mdlext-accordion-header-height;
+ border-top: 1px solid $mdlext-accordion-header-border-color;
+ padding-left: $mdlext-accordion-header-padding;
+ padding-right: $mdlext-accordion-header-padding;
+
+ &[aria-selected='true']::after {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ height: 1px;
+ width: 100%;
+ display: block;
+ content: " ";
+ background-color: $mdlext-accordion-header-highlight-color;
+ animation: border-expand 0.2s cubic-bezier(0.4, 0.0, 0.4, 1) 0.01s alternate forwards;
+ transition: all 1s cubic-bezier(0.4, 0.0, 1, 1);
+ }
+
+ > * {
+ padding-left: $mdlext-accordion-header-padding;
+ }
+
+ > *:first-child {
+ padding-left: 0;
+ }
+
+ > *:last-child:not(:only-child):not(.mdlext-accordion__tab__caption) {
+ margin-left: auto; // If more than one element, push last element to the right
+ }
+
+ &--ripple {
+ &[aria-selected='true']::before {
+ width: 5%;
+ height: 10%;
+ }
+ }
+
+ }
+
+ .mdlext-accordion__tabpanel {
+ border-top: 1px solid $mdlext-accordion-header-border-color;
+
+ &--animation {
+ transform: scaleY(1);
+ animation: mdlext-accordion-show-tabpanel-y 0.2s ease-in-out;
+
+ &[hidden] {
+ transform: scaleY(0);
+ animation: mdlext-accordion-hide-tabpanel-y 0.2s ease-out;
+ animation-delay: 0.1s;
+ }
+ }
+ }
+ }
+}
+
+// Horizontal layout
+.mdlext-accordion {
+
+ &--horizontal {
+
+ .mdlext-accordion__panel {
+ min-width: $mdlext-accordion-header-height;
+ width: $mdlext-accordion-header-height;
+ }
+
+ &[aria-multiselectable='true'] .mdlext-accordion__panel.is-expanded {
+ width: 100%;
+ }
+
+ .mdlext-accordion__tab {
+ flex-direction: column-reverse;
+ width: $mdlext-accordion-header-height;
+ white-space: nowrap;
+ border-left: 1px solid $mdlext-accordion-header-border-color;
+
+ &[aria-selected='true']::after {
+ position: absolute;
+ top: 0;
+ right: 0;
+ height: 100%;
+ width: 1px;
+ display: block;
+ content: " ";
+ background-color: $mdlext-accordion-header-highlight-color;
+
+ // Figure out how to animate a vertical line
+ //animation: border-expand 0.2s cubic-bezier(0.4, 0.0, 0.4, 1) 0.01s alternate forwards;
+ //transition: all 1s cubic-bezier(0.4, 0.0, 1, 1);
+ }
+
+ > * {
+ //transform: rotate(-90deg) translateX(50%);
+ transform: rotate(-90deg) translateX($mdlext-accordion-header-padding);
+ }
+
+ > *:last-child:not(:only-child):not(.mdlext-accordion__tab__caption) {
+ // If more than one element, push last element to top
+ margin-bottom: auto;
+ transform: rotate(-90deg) translateX(0);
+ }
+
+ &__caption {
+ transform: rotate(-90deg) translateX(50%);
+ padding-right: $mdlext-accordion-header-padding + 8px;
+ }
+
+ &--ripple {
+ &[aria-selected='true']::before {
+ width: 10%;
+ height: 5%;
+ }
+ }
+ }
+
+ .mdlext-accordion__tabpanel {
+ border-left: 1px solid $mdlext-accordion-header-border-color;
+
+ &--animation {
+ transform: scaleX(1);
+ animation: mdlext-accordion-show-tabpanel-x 0.2s ease-in-out;
+
+ &[hidden] {
+ transform: scaleX(0);
+ animation: mdlext-accordion-hide-tabpanel-x 0.2s ease-out;
+ }
+ }
+ }
+ }
+}
+
+.mdlext-accordion {
+
+ &__panel:first-child > &__tab {
+ // Use container to set outer borders
+ border-top-color: transparent;
+ border-left-color: transparent;
+ }
+
+ &[aria-multiselectable="false"] {
+ .mdlext-accordion__panel.is-expanded {
+ flex-grow: 1;
+ }
+ }
+}
+
+// Making accordion appear disabled.
+// Note: does not prevent tabbing into a disabled accordion
+.mdlext-accordion[disabled] {
+ * {
+ pointer-events: none;
+ }
+ .mdlext-accordion__tab {
+ background-color: $mdlext-accordion-header-disabled-color;
+ color: $mdlext-accordion-header-secondary-color-disabled;
+
+ > * {
+ color: $mdlext-accordion-header-secondary-color-disabled;
+ }
+ }
+ .mdlext-accordion__tabpanel {
+ opacity: 0.8;
+ filter: blur(1px) grayscale(80%);
+ }
+}
+
+
+@keyframes mdlext-accordion-tab-ripple {
+ 0% {
+ transform: scale(0, 0);
+ opacity: 1;
+ }
+ 20% {
+ transform: scale(25, 25);
+ opacity: 1;
+ }
+ 100% {
+ opacity: 0;
+ transform: scale(40, 40);
+ }
+}
+
+/*
+@keyframes mdlext-accordion-show-tabpanel-y {
+ 0% { transform: scaleY(0.1); }
+ 40% { transform: scaleY(1.03); }
+ 60% { transform: scaleY(0.98); }
+ 80% { transform: scaleY(1.03); }
+ 100% { transform: scaleY(0.98); }
+ 80% { transform: scaleY(1.01); }
+ 100% { transform: scaleY(1); }
+}
+*/
+
+@keyframes mdlext-accordion-show-tabpanel-y {
+ 0% { transform: scaleY(0); }
+ 60% { transform: scaleY(1.01); }
+ 80% { transform: scaleY(0.98); }
+ 100% { transform: scaleY(1); }
+}
+
+@keyframes mdlext-accordion-hide-tabpanel-y {
+ 0% { transform: scaleY(1); }
+ 60% { transform: scaleY(0.98); }
+ 80% { transform: scaleY(1.01); }
+ 100% { transform: scaleY(0); }
+}
+
+/*
+@keyframes mdlext-accordion-show-tabpanel-x {
+ 0% { transform: scaleX(0.1); }
+ 40% { transform: scaleX(1.03); }
+ 60% { transform: scaleX(0.98); }
+ 80% { transform: scaleX(1.03); }
+ 100% { transform: scaleX(0.98); }
+ 80% { transform: scaleX(1.01); }
+ 100% { transform: scaleX(1); }
+}
+*/
+
+@keyframes mdlext-accordion-show-tabpanel-x {
+ 0% { transform: scaleX(0); }
+ 60% { transform: scaleX(1.01); }
+ 80% { transform: scaleX(0.98); }
+ 100% { transform: scaleX(1); }
+}
+
+@keyframes mdlext-accordion-hide-tabpanel-x {
+ 0% { transform: scaleX(1); }
+ 60% { transform: scaleX(0.98); }
+ 80% { transform: scaleX(1.01); }
+ 100% { transform: scaleX(0); }
+}
diff --git a/node_modules/mdl-ext/src/accordion/accordion.js b/node_modules/mdl-ext/src/accordion/accordion.js
new file mode 100644
index 0000000..0ef7bef
--- /dev/null
+++ b/node_modules/mdl-ext/src/accordion/accordion.js
@@ -0,0 +1,549 @@
+/**
+ * @license
+ * Copyright 2016 Leif Olsen. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * This code is built with Google Material Design Lite,
+ * which is Licensed under the Apache License, Version 2.0
+ */
+
+/**
+ * A WAI-ARIA friendly accordion component.
+ * An accordion is a collection of expandable panels associated with a common outer container. Panels consist
+ * of a header and an associated content region or tabpanel. The primary use of an Accordion is to present multiple sections
+ * of content on a single page without scrolling, where all of the sections are peers in the application or object hierarchy.
+ * The general look is similar to a tree where each root tree node is an expandable accordion header. The user navigates
+ * and makes the contents of each panel visible (or not) by interacting with the Accordion Header
+ */
+
+import {
+ VK_ENTER,
+ VK_SPACE,
+ VK_END,
+ VK_HOME,
+ VK_ARROW_LEFT,
+ VK_ARROW_UP,
+ VK_ARROW_RIGHT,
+ VK_ARROW_DOWN,
+ IS_EXPANDED,
+ IS_UPGRADED,
+ ARIA_MULTISELECTABLE,
+ ARIA_EXPANDED,
+ ARIA_HIDDEN,
+ ARIA_SELECTED
+} from '../utils/constants';
+
+
+(function() {
+ 'use strict';
+ const ACCORDION = 'mdlext-accordion';
+ const ACCORDION_VERTICAL = 'mdlext-accordion--vertical';
+ const ACCORDION_HORIZONTAL = 'mdlext-accordion--horizontal';
+ const PANEL = 'mdlext-accordion__panel';
+ const PANEL_ROLE = 'presentation';
+ const TAB = 'mdlext-accordion__tab';
+ const TAB_CAPTION = 'mdlext-accordion__tab__caption';
+ const TAB_ROLE = 'tab';
+ const TABPANEL = 'mdlext-accordion__tabpanel';
+ const TABPANEL_ROLE = 'tabpanel';
+ const RIPPLE_EFFECT = 'mdlext-js-ripple-effect';
+ const RIPPLE = 'mdlext-accordion__tab--ripple';
+ const ANIMATION_EFFECT = 'mdlext-js-animation-effect';
+ const ANIMATION = 'mdlext-accordion__tabpanel--animation';
+
+ /**
+ * @constructor
+ * @param {Element} element The element that will be upgraded.
+ */
+ const MaterialExtAccordion = function MaterialExtAccordion( element ) {
+
+ // Stores the Accordion HTML element.
+ this.element_ = element;
+
+ // Initialize instance.
+ this.init();
+ };
+ window['MaterialExtAccordion'] = MaterialExtAccordion;
+
+
+ // Helpers
+ const accordionPanelElements = ( element ) => {
+ if(!element) {
+ return {
+ panel: null,
+ tab: null,
+ tabpanel: null
+ };
+ }
+ else if (element.classList.contains(PANEL)) {
+ return {
+ panel: element,
+ tab: element.querySelector(`.${TAB}`),
+ tabpanel: element.querySelector(`.${TABPANEL}`)
+ };
+ }
+ else {
+ return {
+ panel: element.parentNode,
+ tab: element.parentNode.querySelector(`.${TAB}`),
+ tabpanel: element.parentNode.querySelector(`.${TABPANEL}`)
+ };
+ }
+ };
+
+
+ // Private methods.
+
+ /**
+ * Handles custom command event, 'open', 'close', 'toggle' or upgrade
+ * @param event. A custom event
+ * @private
+ */
+ MaterialExtAccordion.prototype.commandHandler_ = function( event ) {
+ event.preventDefault();
+ event.stopPropagation();
+
+ if(event && event.detail) {
+ this.command(event.detail);
+ }
+ };
+
+ /**
+ * Dispatch toggle event
+ * @param {string} state
+ * @param {Element} tab
+ * @param {Element} tabpanel
+ * @private
+ */
+ MaterialExtAccordion.prototype.dispatchToggleEvent_ = function ( state, tab, tabpanel ) {
+ const ce = new CustomEvent('toggle', {
+ bubbles: true,
+ cancelable: true,
+ detail: { state: state, tab: tab, tabpanel: tabpanel }
+ });
+ this.element_.dispatchEvent(ce);
+ };
+
+ /**
+ * Open tab
+ * @param {Element} panel
+ * @param {Element} tab
+ * @param {Element} tabpanel
+ * @private
+ */
+ MaterialExtAccordion.prototype.openTab_ = function( panel, tab, tabpanel ) {
+ panel.classList.add(IS_EXPANDED);
+ tab.setAttribute(ARIA_EXPANDED, 'true');
+ tabpanel.removeAttribute('hidden');
+ tabpanel.setAttribute(ARIA_HIDDEN, 'false');
+ this.dispatchToggleEvent_('open', tab, tabpanel);
+ };
+
+ /**
+ * Close tab
+ * @param {Element} panel
+ * @param {Element} tab
+ * @param {Element} tabpanel
+ * @private
+ */
+ MaterialExtAccordion.prototype.closeTab_ = function( panel, tab, tabpanel ) {
+ panel.classList.remove(IS_EXPANDED);
+ tab.setAttribute(ARIA_EXPANDED, 'false');
+ tabpanel.setAttribute('hidden', '');
+ tabpanel.setAttribute(ARIA_HIDDEN, 'true');
+ this.dispatchToggleEvent_('close', tab, tabpanel);
+ };
+
+ /**
+ * Toggle tab
+ * @param {Element} panel
+ * @param {Element} tab
+ * @param {Element} tabpanel
+ * @private
+ */
+ MaterialExtAccordion.prototype.toggleTab_ = function( panel, tab, tabpanel ) {
+ if( !(this.element_.hasAttribute('disabled') || tab.hasAttribute('disabled')) ) {
+ if (tab.getAttribute(ARIA_EXPANDED).toLowerCase() === 'true') {
+ this.closeTab_(panel, tab, tabpanel);
+ }
+ else {
+ if (this.element_.getAttribute(ARIA_MULTISELECTABLE).toLowerCase() !== 'true') {
+ this.closeTabs_();
+ }
+ this.openTab_(panel, tab, tabpanel);
+ }
+ }
+ };
+
+ /**
+ * Open tabs
+ * @private
+ */
+ MaterialExtAccordion.prototype.openTabs_ = function() {
+ if (this.element_.getAttribute(ARIA_MULTISELECTABLE).toLowerCase() === 'true') {
+ [...this.element_.querySelectorAll(`.${ACCORDION} > .${PANEL}`)]
+ .filter(panel => !panel.classList.contains(IS_EXPANDED))
+ .forEach(closedItem => {
+ const tab = closedItem.querySelector(`.${TAB}`);
+ if (!tab.hasAttribute('disabled')) {
+ this.openTab_(closedItem, tab, closedItem.querySelector(`.${TABPANEL}`));
+ }
+ });
+ }
+ };
+
+ /**
+ * Close tabs
+ * @private
+ */
+ MaterialExtAccordion.prototype.closeTabs_ = function() {
+ [...this.element_.querySelectorAll(`.${ACCORDION} > .${PANEL}.${IS_EXPANDED}`)]
+ .forEach( panel => {
+ const tab = panel.querySelector(`.${TAB}`);
+ if(!tab.hasAttribute('disabled')) {
+ this.closeTab_(panel, tab, panel.querySelector(`.${TABPANEL}`));
+ }
+ });
+ };
+
+
+ // Public methods.
+
+ /**
+ * Upgrade an individual accordion tab
+ * @public
+ * @param {Element} tabElement The HTML element for the accordion panel.
+ */
+ MaterialExtAccordion.prototype.upgradeTab = function( tabElement ) {
+
+ const { panel, tab, tabpanel } = accordionPanelElements( tabElement );
+
+ const disableTab = () => {
+ panel.classList.remove(IS_EXPANDED);
+ tab.setAttribute('tabindex', '-1');
+ tab.setAttribute(ARIA_EXPANDED, 'false');
+ tabpanel.setAttribute('hidden', '');
+ tabpanel.setAttribute(ARIA_HIDDEN, 'true');
+ };
+
+ const enableTab = () => {
+ if(!tab.hasAttribute(ARIA_EXPANDED)) {
+ tab.setAttribute(ARIA_EXPANDED, 'false');
+ }
+
+ tab.setAttribute('tabindex', '0');
+
+ if(tab.getAttribute(ARIA_EXPANDED).toLowerCase() === 'true') {
+ panel.classList.add(IS_EXPANDED);
+ tabpanel.removeAttribute('hidden');
+ tabpanel.setAttribute(ARIA_HIDDEN, 'false');
+ }
+ else {
+ panel.classList.remove(IS_EXPANDED);
+ tabpanel.setAttribute('hidden', '');
+ tabpanel.setAttribute(ARIA_HIDDEN, 'true');
+ }
+ };
+
+ // In horizontal layout, caption must have a max-width defined to prevent pushing elements to the right of the caption out of view.
+ // In JsDom, offsetWidth and offsetHeight properties do not work, so this function is not testable.
+ /* istanbul ignore next */
+ const calcMaxTabCaptionWidth = () => {
+
+ const tabCaption = tab.querySelector(`.${TAB_CAPTION}`);
+ if(tabCaption !== null) {
+ const w = [...tab.children]
+ .filter( el => el.classList && !el.classList.contains(TAB_CAPTION) )
+ .reduce( (v, el) => v + el.offsetWidth, 0 );
+
+ const maxWidth = tab.clientHeight - w;
+ if(maxWidth > 0) {
+ tabCaption.style['max-width'] = `${maxWidth}px`;
+ }
+ }
+ };
+
+ const selectTab = () => {
+ if( !tab.hasAttribute(ARIA_SELECTED) ) {
+ [...this.element_.querySelectorAll(`.${TAB}[aria-selected="true"]`)].forEach(
+ selectedTab => selectedTab.removeAttribute(ARIA_SELECTED)
+ );
+ tab.setAttribute(ARIA_SELECTED, 'true');
+ }
+ };
+
+ const tabClickHandler = () => {
+ this.toggleTab_(panel, tab, tabpanel);
+ selectTab();
+ };
+
+ const tabFocusHandler = () => {
+ selectTab();
+ };
+
+ const tabpanelClickHandler = () => {
+ selectTab();
+ };
+
+ const tabpanelFocusHandler = () => {
+ selectTab();
+ };
+
+ const tabKeydownHandler = e => {
+
+ if(this.element_.hasAttribute('disabled')) {
+ return;
+ }
+
+ if ( e.keyCode === VK_END || e.keyCode === VK_HOME
+ || e.keyCode === VK_ARROW_UP || e.keyCode === VK_ARROW_LEFT
+ || e.keyCode === VK_ARROW_DOWN || e.keyCode === VK_ARROW_RIGHT ) {
+
+ let nextTab = null;
+ let keyCode = e.keyCode;
+
+ if (keyCode === VK_HOME) {
+ nextTab = this.element_.querySelector(`.${PANEL}:first-child > .${TAB}`);
+ if(nextTab && nextTab.hasAttribute('disabled')) {
+ nextTab = null;
+ keyCode = VK_ARROW_DOWN;
+ }
+ }
+ else if (keyCode === VK_END) {
+ nextTab = this.element_.querySelector(`.${PANEL}:last-child > .${TAB}`);
+ if(nextTab && nextTab.hasAttribute('disabled')) {
+ nextTab = null;
+ keyCode = VK_ARROW_UP;
+ }
+ }
+
+ if(!nextTab) {
+ let nextPanel = panel;
+
+ do {
+ if (keyCode === VK_ARROW_UP || keyCode === VK_ARROW_LEFT) {
+ nextPanel = nextPanel.previousElementSibling;
+ if(!nextPanel) {
+ nextPanel = this.element_.querySelector(`.${PANEL}:last-child`);
+ }
+ if (nextPanel) {
+ nextTab = nextPanel.querySelector(`.${PANEL} > .${TAB}`);
+ }
+ }
+ else if (keyCode === VK_ARROW_DOWN || keyCode === VK_ARROW_RIGHT) {
+ nextPanel = nextPanel.nextElementSibling;
+ if(!nextPanel) {
+ nextPanel = this.element_.querySelector(`.${PANEL}:first-child`);
+ }
+ if (nextPanel) {
+ nextTab = nextPanel.querySelector(`.${PANEL} > .${TAB}`);
+ }
+ }
+
+ if(nextTab && nextTab.hasAttribute('disabled')) {
+ nextTab = null;
+ }
+ else {
+ break;
+ }
+ }
+ while(nextPanel !== panel);
+ }
+
+ if (nextTab) {
+ e.preventDefault();
+ e.stopPropagation();
+ nextTab.focus();
+
+ // Workaround for JSDom testing:
+ // In JsDom 'element.focus()' does not trigger any focus event
+ if(!nextTab.hasAttribute(ARIA_SELECTED)) {
+
+ [...this.element_.querySelectorAll(`.${TAB}[aria-selected="true"]`)]
+ .forEach( selectedTab => selectedTab.removeAttribute(ARIA_SELECTED) );
+
+ nextTab.setAttribute(ARIA_SELECTED, 'true');
+ }
+ }
+ }
+ else if (e.keyCode === VK_ENTER || e.keyCode === VK_SPACE) {
+ e.preventDefault();
+ e.stopPropagation();
+ this.toggleTab_(panel, tab, tabpanel);
+ }
+ };
+
+ if(tab === null) {
+ throw new Error('There must be a tab element for each accordion panel.');
+ }
+
+ if(tabpanel === null) {
+ throw new Error('There must be a tabpanel element for each accordion panel.');
+ }
+
+ panel.setAttribute('role', PANEL_ROLE);
+ tab.setAttribute('role', TAB_ROLE);
+ tabpanel.setAttribute('role', TABPANEL_ROLE);
+
+ if(tab.hasAttribute('disabled')) {
+ disableTab();
+ }
+ else {
+ enableTab();
+ }
+
+ if( this.element_.classList.contains(ACCORDION_HORIZONTAL)) {
+ calcMaxTabCaptionWidth();
+ }
+
+ if (this.element_.classList.contains(RIPPLE_EFFECT)) {
+ tab.classList.add(RIPPLE);
+ }
+
+ if (this.element_.classList.contains(ANIMATION_EFFECT)) {
+ tabpanel.classList.add(ANIMATION);
+ }
+
+ // Remove listeners, just in case ...
+ tab.removeEventListener('click', tabClickHandler);
+ tab.removeEventListener('focus', tabFocusHandler);
+ tab.removeEventListener('keydown', tabKeydownHandler);
+ tabpanel.removeEventListener('click', tabpanelClickHandler);
+ tabpanel.removeEventListener('focus', tabpanelFocusHandler);
+
+ tab.addEventListener('click', tabClickHandler);
+ tab.addEventListener('focus', tabFocusHandler);
+ tab.addEventListener('keydown', tabKeydownHandler);
+ tabpanel.addEventListener('click', tabpanelClickHandler, true);
+ tabpanel.addEventListener('focus', tabpanelFocusHandler, true);
+ };
+ MaterialExtAccordion.prototype['upgradeTab'] = MaterialExtAccordion.prototype.upgradeTab;
+
+
+ /**
+ * Execute command
+ * @param detail
+ */
+ MaterialExtAccordion.prototype.command = function( detail ) {
+
+ const openTab = tabElement => {
+
+ if(tabElement === undefined) {
+ this.openTabs_();
+ }
+ else if(tabElement !== null) {
+ const { panel, tab, tabpanel } = accordionPanelElements( tabElement );
+ if(tab.getAttribute(ARIA_EXPANDED).toLowerCase() !== 'true') {
+ this.toggleTab_(panel, tab, tabpanel);
+ }
+ }
+ };
+
+ const closeTab = tabElement => {
+ if(tabElement === undefined) {
+ this.closeTabs_();
+ }
+ else if(tabElement !== null) {
+ const { panel, tab, tabpanel } = accordionPanelElements( tabElement );
+
+ if(tab.getAttribute(ARIA_EXPANDED).toLowerCase() === 'true') {
+ this.toggleTab_(panel, tab, tabpanel);
+ }
+ }
+ };
+
+ const toggleTab = tabElement => {
+ if(tabElement) {
+ const { panel, tab, tabpanel } = accordionPanelElements( tabElement );
+ this.toggleTab_(panel, tab, tabpanel);
+ }
+ };
+
+
+ if(detail && detail.action) {
+ const { action, target } = detail;
+
+ switch (action.toLowerCase()) {
+ case 'open':
+ openTab(target);
+ break;
+ case 'close':
+ closeTab(target);
+ break;
+ case 'toggle':
+ toggleTab(target);
+ break;
+ case 'upgrade':
+ if(target) {
+ this.upgradeTab(target);
+ }
+ break;
+ default:
+ throw new Error(`Unknown action "${action}". Action must be one of "open", "close", "toggle" or "upgrade"`);
+ }
+ }
+ };
+ MaterialExtAccordion.prototype['command'] = MaterialExtAccordion.prototype.command;
+
+
+ /**
+ * Initialize component
+ */
+ MaterialExtAccordion.prototype.init = function() {
+ if (this.element_) {
+ // Do the init required for this component to work
+ if( !(this.element_.classList.contains(ACCORDION_HORIZONTAL) || this.element_.classList.contains(ACCORDION_VERTICAL))) {
+ throw new Error(`Accordion must have one of the classes "${ACCORDION_HORIZONTAL}" or "${ACCORDION_VERTICAL}"`);
+ }
+
+ this.element_.setAttribute('role', 'tablist');
+
+ if(!this.element_.hasAttribute(ARIA_MULTISELECTABLE)) {
+ this.element_.setAttribute(ARIA_MULTISELECTABLE, 'false');
+ }
+
+ this.element_.removeEventListener('command', this.commandHandler_);
+ this.element_.addEventListener('command', this.commandHandler_.bind(this), false);
+
+ [...this.element_.querySelectorAll(`.${ACCORDION} > .${PANEL}`)].forEach( panel => this.upgradeTab(panel) );
+
+ // Set upgraded flag
+ this.element_.classList.add(IS_UPGRADED);
+ }
+ };
+
+
+ /*
+ * Downgrade component
+ * E.g remove listeners and clean up resources
+ *
+ * Nothing to downgrade
+ *
+ MaterialExtAccordion.prototype.mdlDowngrade_ = function() {
+ 'use strict';
+ console.log('***** MaterialExtAccordion.mdlDowngrade');
+ };
+ */
+
+
+ // The component registers itself. It can assume componentHandler is available
+ // in the global scope.
+ /* eslint no-undef: 0 */
+ componentHandler.register({
+ constructor: MaterialExtAccordion,
+ classAsString: 'MaterialExtAccordion',
+ cssClass: 'mdlext-js-accordion',
+ widget: true
+ });
+})();
diff --git a/node_modules/mdl-ext/src/accordion/readme.md b/node_modules/mdl-ext/src/accordion/readme.md
new file mode 100644
index 0000000..e8ddd3a
--- /dev/null
+++ b/node_modules/mdl-ext/src/accordion/readme.md
@@ -0,0 +1,384 @@
+# Accordion
+
+
+A WAI-ARIA friendly accordion component.
+
+>**Note:** The accordion has been refactored and is not compatible with accordion prior to version 0.9.13
+
+## Introduction
+An accordion component is a collection of expandable panels associated with a common outer container. Panels consist
+of a tab header and an associated content region or panel. The primary use of an Accordion is to present multiple sections
+of content on a single page without scrolling, where all of the sections are peers in the application or object hierarchy.
+The general look is similar to a tree where each root tree node is an expandable accordion header. The user navigates
+and makes the contents of each panel visible (or not) by interacting with the Accordion tab header.
+
+### Features:
+* The accordion component relates to the guidelines given in [WAI-ARIA Authoring Practices 1.1, Accordion](https://www.w3.org/TR/wai-aria-practices-1.1/#accordion)
+* User interactions via keyboard or mouse
+* Toggle a particular tab using enter or space key, or by clicking a tab
+* Client can interact with accordion using a public api og by dispatching a custom action event
+* The accordion emits a custom toggle events reflecting the tab toggled
+
+
+### To include a MDLEXT **accordion** component:
+
+ 1. Code a `<ul>` element with `class="mdlext-accordion mdlext-js-accordion mdlext-accordion--horizontal"` to hold the accordion with horizontal layout.
+```html
+<ul class="mdlext-accordion mdlext-js-accordion mdlext-accordion--horizontal">
+</ul>
+```
+
+ 2. Code a `<li>` element with `class="mdlext-accordion__panel"` to hold an individual accordion panel.
+```html
+<ul class="mdlext-accordion mdlext-js-accordion mdlext-accordion--horizontal">
+ <li class="mdlext-accordion__panel">
+ </li>
+</ul>
+```
+
+ 3. Code a `<header>` element with `class="mdlext-accordion__tab"` to hold the accordion tab header.
+```html
+<ul class="mdlext-accordion mdlext-js-accordion mdlext-accordion--horizontal">
+ <li class="mdlext-accordion__panel">
+ <header class="mdlext-accordion__tab">
+ </header>
+ </li>
+</ul>
+```
+
+ 4. Code a `<span>` element with `class="mdlext-accordion__tab__caption"` to hold the accordion tab header caption.
+```html
+<ul class="mdlext-accordion mdlext-js-accordion mdlext-accordion--horizontal">
+ <li class="mdlext-accordion__panel">
+ <header class="mdlext-accordion__tab">
+ <span class="mdlext-accordion__tab__caption">A tab caption</span>
+ </header>
+ </li>
+</ul>
+```
+
+ 5. Code a `<section>` element with `class="mdlext-accordion__tabpanel"` to hold the tab content.
+```html
+<ul class="mdlext-accordion mdlext-js-accordion mdlext-accordion--horizontal">
+ <li class="mdlext-accordion__panel">
+ <header class="mdlext-accordion__tab">
+ <span class="mdlext-accordion__tab__caption">A tab caption</span>
+ </header>
+ <section class="mdlext-accordion__tabpanel">
+ <p>Content goes here ...</p>
+ </section>
+ </li>
+</ul>
+```
+
+ 6. Repeat steps 2..5 for each accordion panel required.
+
+### Example
+Multiselectable vertical accordion with three panels, aria attributes, ripple effect on each tab header, decorated with
+a glyph left and a state icon right. Tab #1 is open at page load (aria-expanded="true"). Subscribes to accordion toggle event.
+
+```html
+<ul id="my-accordion"
+ class="mdlext-accordion mdlext-js-accordion mdlext-accordion--vertical mdlext-js-ripple-effect"
+ role="tablist" aria-multiselectable="true">
+
+ <li class="mdlext-accordion__panel" role="presentation">
+ <header class="mdlext-accordion__tab" role="tab" aria-expanded="true">
+ <i class="material-icons">dns</i>
+ <span class="mdlext-accordion__tab__caption">First section. A long caption should not push the state icon</span>
+ <i class="mdlext-aria-toggle-material-icons"></i>
+ </header>
+ <section class="mdlext-accordion__tabpanel" role="tabpanel" aria-hidden="false">
+ <h5>Content #1 goes here</h5>
+ <p>Some content <a href="#">with an anchor</a> as a focusable element.</p>
+ </section>
+ </li>
+ <li class="mdlext-accordion__panel" role="presentation">
+ <header class="mdlext-accordion__tab" role="tab" aria-expanded="false">
+ <i class="material-icons">all_inclusive</i>
+ <span class="mdlext-accordion__tab__caption">Tab #2</span>
+ <i class="mdlext-aria-toggle-material-icons"></i>
+ </header>
+ <section class="mdlext-accordion__tabpanel" role="tabpanel" aria-hidden="true" hidden>
+ <h5>Content #2 goes here</h5>
+ <p>Some content....</p>
+ </section>
+ </li>
+ <li class="mdlext-accordion__panel" role="presentation">
+ <header class="mdlext-accordion__tab" role="tab" aria-expanded="false">
+ <i class="material-icons">build</i>
+ <span class="mdlext-accordion__tab__caption">Tab #3</span>
+ <i class="mdlext-aria-toggle-material-icons"></i>
+ </header>
+ <section class="mdlext-accordion__tabpanel" role="tabpanel" aria-hidden="true" hidden>
+ <h5>Content #3 goes here</h5>
+ </section>
+ </li>
+</ul>
+
+<script>
+ 'use strict';
+ window.addEventListener('load', function() {
+ var accordion = document.querySelector('#my-accordion');
+ accordion.addEventListener('toggle', function(e) {
+ console.log('Accordion toggled. State:', e.detail.state, 'Source:', e.detail.tab);
+ });
+ });
+</script>
+
+```
+>**Note:** All required aria attributes will be added by the accordion component during initialization - so it is not
+strictly necessary to apply the attributes in markup.
+
+### More examples
+* The [snippets/accordion.html](./snippets/accordion.html) and the [tests](../../test/accordion/accordion.spec.js) provides more detailed examples.
+* Try out the [live demo](http://leifoolsen.github.io/mdl-ext/demo/accordion.html)
+
+
+## Keyboard interaction
+The accordion interacts with the following keyboard keys.
+
+* <kbd>Tab</kbd> - When focus is on an accordion (tab)header, pressing the <kbd>Tab</kbd> key moves focus in the following manner:
+ 1. If interactive glyphs or menus are present in the accordion header, focus moves to each in order.
+ 2. When the corresponding tab panel is expanded (its [aria-expanded](http://www.w3.org/TR/wai-aria-1.1/#aria-expanded) state is 'true'), then focus moves to the first focusable element in the panel.
+ 3. If the panel is collapsed (its aria-expanded state is 'false'), OR, when the last interactive element of a panel is reached, the next <kbd>Tab</kbd> key press moves focus as follows:
+ * Moves focus to the next logical accordion header.
+ * When focus reaches the last header, focus moves to the first focusable element outside the accordion component.
+* <kbd>Left arrow</kbd>
+ * When focus is on the accordion header, a press of <kbd>up</kbd>/<kbd>left</kbd> arrow keys moves focus to the previous logical accordion header.
+ * When focus reaches the first header, further <kbd>up</kbd>/<kbd>left</kbd> arrow key presses optionally wrap to the first header.
+* <kbd>Right arrow</kbd>
+ * When focus is on the accordion header, a press of <kbd>down</kbd>/<kbd>right</kbd> arrow key moves focus to the next logical accordion header.
+ * When focus reaches the last header, further <kbd>down</kbd>/<kbd>right</kbd> arrow key presses optionally wrap to the first header
+* <kbd>Up arrow</kbd> - behaves the same as left arrow
+* <kbd>Down arrow</kbd> - behaves the same as <kbd>right arrow</kbd>
+* <kbd>End</kbd> - When focus is on the accordion header, an <kbd>End</kbd> key press moves focus to the last accordion header.
+* <kbd>Home</kbd> - When focus is on the accordion header, a <kbd>Home</kbd> key press moves focus to the first accordion header.
+* <kbd>Enter</kbd> or <kbd>Space</kbd> - When focus is on an accordion header, pressing <kbd>Enter</kbd> ir <kbd>Space</kbd> toggles the expansion of the corresponding panel.
+ * If collapsed, the panel is expanded, and its aria-expanded state is set to 'true'.
+ * If expanded, the panel is collapsed and its aria-expanded state is set to 'false'.
+* <kbd>Shift+Tab</kbd> - Generally the reverse of <kbd>Tab</kbd>.
+
+
+## Events
+Interaction with the component programmatically is performed receiving events from the component or by sending events to
+the component (or by using the public api).
+
+### Events the component listenes to
+A client can send a `command` custom event to the accordion. The command event holds a detail object defining the action
+to perform and a target for the action.
+
+The detail object has the following structure:
+```javascript
+detail: {
+ action, // "open", "close", "toggle" or "upgrade"
+ target // Target, panel or tab, of action, "undefined" if all panels should be targeted.
+ // Note: If you send a null target, the action is cancelled
+}
+```
+
+Possible actions are:
+
+#### open
+Open a targeted tab and it's corresponding tabpanel.
+
+```javascript
+myAccrdion = document.querySelector('#my-accordion');
+target = myAccordion.querySelector('#my-accordion .mdlext-accordion__panel:nth-child(3)');
+ce = new CustomEvent('command', { detail: { action : 'open', target: target } });
+```
+If `target` is undefined, the action will open all panels.
+**Note**: Opening all panels only makes sense if the accordion has the aria attribute `aria-multiselectable` set to `true`,
+and will be cancelled otherwise.
+
+#### close
+Close a targeted tab and its corresponding tabpanel.
+
+```javascript
+myAccrdion = document.querySelector('#my-accordion');
+target = myAccordion.querySelector('#my-accordion .mdlext-accordion__panel:nth-child(3)');
+ce = new CustomEvent('command', { detail: { action : 'close', target: target } });
+```
+If `target` is undefined, the action will close all panels.
+**Note**: Closing all panels only makes sense if the accordion has the aria attribute `aria-multiselectable` set to `true`,
+and will be cancelled otherwise.
+
+#### toggle
+Toggle a targeted tab. Open or close a targeted tab and it's corresponding tabpanel.
+
+```javascript
+myAccrdion = document.querySelector('#my-accordion');
+target = myAccordion.querySelector('#my-accordion .mdlext-accordion__panel:nth-child(3)');
+ce = new CustomEvent('command', { detail: { action : 'toggle', target: target } });
+```
+If `target` is undefined, the action will be cancelled.
+
+#### upgrade
+Upgrade a targeted panel. If you add a panel to the accordion after the page has loaded, you must call `upgrade` to
+notify the accordion component about the new panel.
+
+```javascript
+myAccrdion = document.querySelector('#my-accordion');
+addedPanel = myAccordion.querySelector('#my-accordion .mdlext-accordion__panel:nth-child(4)');
+ce = new CustomEvent('command', { detail: { action : 'upgrade', target: addedPanel } });
+```
+If `target` is undefined, the action will be cancelled.
+
+#### Example: Expand all panels.
+```javascript
+var ce = new CustomEvent( 'command', {
+ detail: {
+ action: 'open'
+ }
+});
+document.querySelector('#my-accordion').dispatchEvent(ce);
+```
+
+#### Example: Toggle a spesific tab.
+```javascript
+var panel3 = document.querySelector('#my-accordion .mdlext-accordion__panel:nth-child(3) .mdlext-accordion__tab');
+var ce = new CustomEvent('command', {
+ detail: {
+ action: 'toggle',
+ target: panel3
+ }
+});
+document.querySelector('#my-accordion').dispatchEvent(ce);
+```
+
+#### Example: Append a new panel.
+```javascript
+var panel =
+ '<li class="mdlext-accordion__panel">'
+ + '<header class="mdlext-accordion__tab" aria-expanded="true">'
+ + '<span class="mdlext-accordion__tab__caption">New Tab</span>'
+ + '<i class="mdlext-aria-toggle-material-icons"></i>'
+ + '</header>'
+ + '<section class="mdlext-accordion__tabpanel">'
+ + '<h5>New tab content</h5>'
+ + '<p>Some content</p>'
+ + '</section>'
+ +'</li>';
+
+var accordion = document.querySelector('#my-accordion');
+accordion.insertAdjacentHTML('beforeend', panel);
+
+var theNewPanel = document.querySelector('#my-accordion .mdlext-accordion__panel:last-child');
+var ce = new CustomEvent('command', { detail: { action : 'upgrade', target: theNewPanel } });
+document.querySelector('#my-accordion').dispatchEvent(ce);
+```
+
+Refer to [snippets/accordion.html](./snippets/accordion.html) or the [tests](../../test/accordion/accordion.spec.js) for detailed usage.
+
+
+### Events emitted from the component
+The accordion emits a custom `toggle` event when a panel opens or closes. The event has a detail object with the following structure:
+
+```javascript
+detail: {
+ state, // "open" or "close"
+ tab, // the haeder tab element instance that caused the event
+ tabpanel // the cooresponding tabpanel element instance
+}
+```
+
+Set up an event listener to receive the toggle event.
+```javascript
+document.querySelector('#my-accordion').addEventListener('toggle', function(e) {
+ console.log('Accordion toggled. State:', e.detail.state, 'Source:', e.detail.source);
+});
+```
+Refer to [snippets/accordion.html](./snippets/accordion.html) or the [tests](../../test/accordion/accordion.spec.js) for detailed usage.
+
+
+## Public methods
+
+### upgradeTab(tabOrPanelElement)
+Upgrade a targeted panel with aria attributes and ripple effects. If you add a panel to the accordion after the page has
+loaded, you must call `upgrade` to notify the accordion component about the newly added panel.
+
+```javascript
+var accordion = document.querySelector('#my-accordion');
+var panel3 = document.querySelector('#my-accordion .mdlext-accordion__panel:nth-child(3)');
+accordion.MaterialExtAccordion.upgradeTab( panel3 );
+```
+
+### command(detail)
+Executes an action, targeting a specific tab. The actions corresponds to the custom events defined for this component.
+
+The detail object parameter has the following structure:
+```javascript
+detail: {
+ action, // "open", "close", "toggle" or "upgrade"
+ target // Target, panel or tab, of action, "undefined" if all panels should be targeted.
+ // Note: If you send a null target, the action is cancelled
+}
+```
+
+#### open: command( {action: 'open', target: tabOrPanelElement } )
+Open a targeted tab and it's corresponding tabpanel.
+
+#### close: command( {action: 'close', target: tabOrPanelElement } )
+Close a targeted tab and it's corresponding tabpanel.
+
+#### toggle: command( {action: 'toggle', target: tabOrPanelElement } )
+Toggle a targeted tab. Open or close a targeted tab and it's corresponding tabpanel.
+
+#### upgrade: command( {action: 'upgrade', target: tabOrPanelElement } )
+Upgrade a targeted panel with aria attributes and ripple effects. If you add a panel to the accordion after the page has
+loaded, you must call `upgrade` to notify the accordion component about the newly added panel.
+
+#### Example: Expand all panels.
+```javascript
+var accordion = document.querySelector('#my-accordion');
+accordion.MaterialExtAccordion.command( {action: 'open'} );
+```
+
+#### Example: Toggle panel.
+```javascript
+var accordion = document.querySelector('#my-accordion');
+var panel3 = document.querySelector('#my-accordion .mdlext-accordion__panel:nth-child(3) .mdlext-accordion__tab');
+accordion.MaterialExtAccordion.command( {action: 'toggle', target: panel3} );
+```
+
+Refer to [snippets/accordion.html](./snippets/accordion.html) or the [tests](../../test/accordion/accordion.spec.js) for detailed usage.
+
+
+## Configuration options
+
+The MDLEXT CSS classes apply various predefined visual and behavioral enhancements to the accordion.
+The table below lists the available classes and their effects.
+
+| MDLEXT class | Effect | Remarks |
+|--------------|--------|---------|
+|`mdlext-accordion`| Defines container as an MDL component | Required on "outer" `<div>` or `<ul>` element |
+|`mdlext-js-accordion`| Assigns basic MDL behavior to accordion | Required on "outer" `<div>` or `<ul>` element |
+|`mdlext-accordion--horizontal`| Horizontal layot of an accordion | Required. The accordion must have one of `mdlext-accordion--horizontal` or `mdlext-accordion--vertical` defined |
+|`mdlext-accordion--vertical`| Vertical layot of an accordion | Required. The accordion must have one of `mdlext-accordion--horizontal` or `mdlext-accordion--vertical` defined |
+|`mdlext-js-ripple-effect`| Applies ripple click effect to accordion tab header | Optional. Goes on "outer" `<ul>` or `<div>` element |
+|`mdlext-js-animation-effect`| Applies animation effect to accordion tab panel | Optional. Goes on "outer" `<ul>` or `<div>` element |
+|`mdlext-accordion__panel`| Defines a container for each section of the accordion - the tab and tabpanel element | Required on first inner `<div>` element or `<li>` element |
+|`mdlext-accordion__tab`| Defines a tab header for a corresponding tabpanel | Required on `<header>` or `<div>` element |
+|`mdlext-accordion__tabpanel`| The content | Required on `<section>` or `<div>` element |
+
+
+The table below lists available attributes and their effects.
+
+| Attribute | Description | Remarks |
+|-----------|-------------|---------|
+|`aria-multiselectable`| If true, multiple panels may be open simultaneously | Required. Add `aria-multiselectable="true"` to the `mdlext-accordion` element to keep multiple panels open at the same time. If not present, the component will set `aria-multiselectable="false"` during initialization.|
+|`role=tablist`| Component role | Required. Added by component during initialization if not present. |
+|`role=presentation`| Accordion panel role | Required. Added by component during initialization if not present. |
+|`role=tab`| Accordion tab header role | Required. Added by component during initialization if not present. |
+|`aria-expanded`| Accordion tab header attribute. An accordion should manage the expanded/collapsed state of each tab by maintain its aria-expanded state. | Required. Defaults to `aria-expanded="false"`. Set `aria-expanded="true"` if you want a tab to open during page load. |
+|`aria-selected`| Accordion tab header attribute. An accordion should manage the selected state of each tab by maintaining its aria-selected state | Optional. Added by component. |
+|`disabled`| Accordion tab header attribute. Indicates a disabled tab and tabpanel | Optional. If this attribute is present, the tabpanel will not open or close. |
+|`role=tabpanel`| Accordion tabpanel role. | Required. Added by component during initialization if not present. |
+|`aria-hidden`| Accordion tabpanel attribute. An accordion should convey the visibility of each tabpanel by maintaining its aria-hidden state | Required. Added by component. |
+|`hidden`| Accordion tabpanel attribute. | Required. Added by component if `aria-hidden="true"`. |
+
+
+## Other examples
+* The Accordion component is based on / inspired by this [CodePen](http://codepen.io/aann/pen/dPqBML)
+* [Open Ajax, Tab Panel: Accordian1](http://www.oaa-accessibility.org/examplep/accordian1/)
+* [www3 Accordion Example](https://www.w3.org/TR/wai-aria-practices/examples/accordion/accordion1.html)
diff --git a/node_modules/mdl-ext/src/accordion/snippets/accordion.html b/node_modules/mdl-ext/src/accordion/snippets/accordion.html
new file mode 100644
index 0000000..fae785c
--- /dev/null
+++ b/node_modules/mdl-ext/src/accordion/snippets/accordion.html
@@ -0,0 +1,1072 @@
+<p>A Collection of panels within a common outer pane.</p>
+<p><strong>Note:</strong> The accordion has been refactored and is not compatible with the accordion prior to version 0.9.13</p>
+
+
+<h4>Horizontal accordion, ripple effect, animated tabpanel, aria-multiselectable="false"</h4>
+
+<style>
+ .demo-accordion-1 {
+ height: 300px; /* In horizontal layout, the accordion must have a height */
+ }
+ .demo-accordion-1 .mdlext-accordion__tabpanel {
+ background-color: rgba(239, 154, 154, 0.4); /* Just a trace color */
+ }
+</style>
+
+<ul class="mdlext-accordion mdlext-js-accordion mdlext-accordion--horizontal mdlext-js-ripple-effect mdlext-js-animation-effect demo-accordion-1"
+ role="tablist" aria-multiselectable="false">
+
+ <li class="mdlext-accordion__panel" role="presentation">
+ <header class="mdlext-accordion__tab" aria-expanded="true" role="tab">
+ <i class="material-icons">info</i>
+ <span class="mdlext-accordion__tab__caption">First tab. A long caption should not push the state icon</span>
+ <i class="mdlext-aria-toggle-material-icons"></i>
+ </header>
+ <section class="mdlext-accordion__tabpanel" role="tabpanel" aria-hidden="false">
+ <h5>Content #1 goes here</h5>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique eget augue eget gravida.
+ Etiam eget imperdiet massa. Aliquam nisi eros, molestie a vulputate quis, tempor nec quam. Ut at libero
+ in sem pellentesque imperdiet. Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+ ac dignissim odio tortor nec quam.Fusce tincidunt leo in est <a href="#">venenatis porta</a>.
+ </p>
+ <p>Maecenas eu vestibulum orci. Ut eget nisi a est sagittis euismod a vel
+ justo. Quisque at dui urna. Duis vel velit leo. Nulla nunc sem, rutrum at aliquet in, aliquet id velit. Duis
+ mattis placerat erat, a aliquam leo rhoncus vel. Sed nec diam ex. Praesent convallis purus lorem, vel porttitor
+ neque gravida quis. Etiam et malesuada dui. Nunc vitae viverra dui. Suspendisse feugiat efficitur augue, quis
+ blandit leo ullamcorper vel.
+ </p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique eget augue eget gravida.
+ Etiam eget imperdiet massa. Aliquam nisi eros, molestie a vulputate quis, tempor nec quam. Ut at libero
+ in sem pellentesque imperdiet. Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+ ac dignissim odio tortor nec quam.Fusce tincidunt leo in est <a href="#">venenatis porta</a>.
+ </p>
+ <p>Maecenas eu vestibulum orci. Ut eget nisi a est sagittis euismod a vel
+ justo. Quisque at dui urna. Duis vel velit leo. Nulla nunc sem, rutrum at aliquet in, aliquet id velit. Duis
+ mattis placerat erat, a aliquam leo rhoncus vel. Sed nec diam ex. Praesent convallis purus lorem, vel porttitor
+ neque gravida quis. Etiam et malesuada dui. Nunc vitae viverra dui. Suspendisse feugiat efficitur augue, quis
+ blandit leo ullamcorper vel.
+ </p>
+ </section>
+ </li>
+ <li class="mdlext-accordion__panel" role="presentation">
+ <header class="mdlext-accordion__tab" aria-expanded="false" role="tab">
+ <span class="mdlext-accordion__tab__caption">Tab #2</span>
+ <i class="mdlext-aria-toggle-material-icons"></i>
+ </header>
+ <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
+ <h5>Content #2 goes here</h5>
+ <p>Curabitur malesuada placerat nunc, id dapibus justo tempor in. Ut molestie
+ arcu justo, id volutpat eros vestibulum eget. Fusce tincidunt leo in est venenatis porta.
+ </p>
+ </section>
+ </li>
+ <li class="mdlext-accordion__panel" role="presentation">
+ <header class="mdlext-accordion__tab" aria-expanded="false" role="tab" disabled tabindex="0">
+ <i class="material-icons">warning</i>
+ <span class="mdlext-accordion__tab__caption">Tab #3, disabled</span>
+ <i class="mdlext-aria-toggle-material-icons"></i>
+ </header>
+ <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
+ <h5>Content #3 goes here</h5>
+ <p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+ ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
+ maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.
+ </p>
+ </section>
+ </li>
+ <li class="mdlext-accordion__panel" role="presentation">
+ <header class="mdlext-accordion__tab" aria-expanded="false" role="tab">
+ <i class="material-icons">accessibility</i>
+ <i class="material-icons">help_outline</i>
+ <i class="material-icons">radio</i>
+ <span class="mdlext-accordion__tab__caption">Tab #4</span>
+ <i class="mdlext-aria-toggle-material-icons"></i>
+ </header>
+ <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
+ <h5>Content #4 goes here</h5>
+ <p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+ ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
+ maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.
+ </p>
+ </section>
+ </li>
+ <li class="mdlext-accordion__panel" role="presentation">
+ <header class="mdlext-accordion__tab" aria-expanded="false" role="tab">
+ <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">favorite</i></button>
+ <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">share</i></button>
+ <span class="mdlext-accordion__tab__caption">Tab #5, with icon buttons</span>
+ <i class="mdlext-aria-toggle-material-icons"></i>
+ </header>
+ <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
+ <h5>Content #5 goes here</h5>
+ <p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+ ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
+ maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.
+ </p>
+ </section>
+ </li>
+</ul>
+
+
+
+<h4>Horizontal accordion, aria-multiselectable="true"</h4>
+<p><strong>Hint:</strong> Use a container to draw outer borders</p>
+
+<style>
+ .demo-accordion-2-container {
+ border: 1px solid #00b0ff;
+ }
+ .demo-accordion-2 {
+ height: 313px;
+ }
+ .demo-accordion-2 .mdlext-accordion__tabpanel {
+ background-color: rgba(206, 147, 216, 0.4);
+ }
+</style>
+
+<div class="demo-accordion-2-container">
+ <ul class="mdlext-accordion mdlext-js-accordion mdlext-accordion--horizontal demo-accordion-2" role="tablist" aria-multiselectable="true">
+
+ <li class="mdlext-accordion__panel" role="presentation">
+ <header class="mdlext-accordion__tab" aria-expanded="true" role="tab">
+ <i class="material-icons">info</i>
+ <span class="mdlext-accordion__tab__caption">First section. A long caption should not push the state icon</span>
+ <i class="mdlext-aria-toggle-material-icons"></i>
+ </header>
+ <section class="mdlext-accordion__tabpanel" role="tabpanel" aria-hidden="false">
+ <h5>Content #1 goes here</h5>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique eget augue eget gravida.
+ Etiam eget imperdiet massa. Aliquam nisi eros, molestie a vulputate quis, tempor nec quam. Ut at libero
+ in sem pellentesque imperdiet. Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+ ac dignissim odio tortor nec quam.Fusce tincidunt leo in est <a href="#">venenatis porta</a>.
+ </p>
+ <p>Maecenas eu vestibulum orci. Ut eget nisi a est sagittis euismod a vel
+ justo. Quisque at dui urna. Duis vel velit leo. Nulla nunc sem, rutrum at aliquet in, aliquet id velit. Duis
+ mattis placerat erat, a aliquam leo rhoncus vel. Sed nec diam ex. Praesent convallis purus lorem, vel porttitor
+ neque gravida quis. Etiam et malesuada dui. Nunc vitae viverra dui. Suspendisse feugiat efficitur augue, quis
+ blandit leo ullamcorper vel.
+ </p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique eget augue eget gravida.
+ Etiam eget imperdiet massa. Aliquam nisi eros, molestie a vulputate quis, tempor nec quam. Ut at libero
+ in sem pellentesque imperdiet. Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+ ac dignissim odio tortor nec quam.Fusce tincidunt leo in est <a href="#">venenatis porta</a>.
+ </p>
+ <p>Maecenas eu vestibulum orci. Ut eget nisi a est sagittis euismod a vel
+ justo. Quisque at dui urna. Duis vel velit leo. Nulla nunc sem, rutrum at aliquet in, aliquet id velit. Duis
+ mattis placerat erat, a aliquam leo rhoncus vel. Sed nec diam ex. Praesent convallis purus lorem, vel porttitor
+ neque gravida quis. Etiam et malesuada dui. Nunc vitae viverra dui. Suspendisse feugiat efficitur augue, quis
+ blandit leo ullamcorper vel.
+ </p>
+ </section>
+ </li>
+ <li class="mdlext-accordion__panel" role="presentation">
+ <header class="mdlext-accordion__tab" aria-expanded="true" role="tab">
+ <span class="mdlext-accordion__tab__caption">Tab #2</span>
+ <i class="mdlext-aria-toggle-material-icons"></i>
+ </header>
+ <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
+ <h5>Content #2 goes here</h5>
+ <p>Curabitur malesuada placerat nunc, id dapibus justo tempor in. Ut molestie
+ arcu justo, id volutpat eros vestibulum eget. Fusce tincidunt leo in est venenatis porta.
+ </p>
+ </section>
+ </li>
+ <li class="mdlext-accordion__panel" role="presentation">
+ <header class="mdlext-accordion__tab" aria-expanded="false" role="tab" disabled tabindex="0">
+ <i class="material-icons">warning</i>
+ <span class="mdlext-accordion__tab__caption">Tab #3, disabled</span>
+ <i class="mdlext-aria-toggle-material-icons"></i>
+ </header>
+ <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
+ <h5>Content #3 goes here</h5>
+ <p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+ ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
+ maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.
+ </p>
+ </section>
+ </li>
+ <li class="mdlext-accordion__panel" role="presentation">
+ <header class="mdlext-accordion__tab" aria-expanded="false" role="tab">
+ <i class="material-icons">accessibility</i>
+ <i class="material-icons">help_outline</i>
+ <i class="material-icons">radio</i>
+ <span class="mdlext-accordion__tab__caption">Tab #4, no toggle icon</span>
+ </header>
+ <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
+ <h5>Content #4 goes here</h5>
+ <p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+ ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
+ maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.
+ </p>
+ </section>
+ </li>
+ <li class="mdlext-accordion__panel" role="presentation">
+ <header class="mdlext-accordion__tab" aria-expanded="false" role="tab">
+ <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">favorite</i></button>
+ <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">share</i></button>
+ <span class="mdlext-accordion__tab__caption">Tab #5, with icon buttons</span>
+ <i class="mdlext-aria-toggle-material-icons"></i>
+ </header>
+ <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
+ <h5>Content #5 goes here</h5>
+ <p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+ ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
+ maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.
+ </p>
+ </section>
+ </li>
+ </ul>
+</div>
+
+
+
+<h4>Vertical accordion, ripple effect, animated tabpanel, aria-multiselectable="true"</h4>
+
+<style>
+ .demo-accordion-3 .mdlext-accordion__tabpanel {
+ background-color: rgba(144, 202, 249, 0.4);
+ }
+</style>
+
+<ul class="mdlext-accordion mdlext-js-accordion mdlext-accordion--vertical mdlext-js-ripple-effect mdlext-js-animation-effect demo-accordion-3"
+ role="tablist" aria-multiselectable="true">
+
+ <li class="mdlext-accordion__panel" role="presentation">
+ <header class="mdlext-accordion__tab" aria-expanded="true" role="tab">
+ <i class="material-icons">info</i>
+ <span class="mdlext-accordion__tab__caption">First section. A long caption should not push the state icon</span>
+ <i class="mdlext-aria-toggle-material-icons"></i>
+ </header>
+ <section class="mdlext-accordion__tabpanel" role="tabpanel" aria-hidden="false">
+ <h5>Content #1 goes here</h5>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique eget augue eget gravida.
+ Etiam eget imperdiet massa. Aliquam nisi eros, molestie a vulputate quis, tempor nec quam. Ut at libero
+ in sem pellentesque imperdiet. Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+ ac dignissim odio tortor nec quam.Fusce tincidunt leo in est <a href="#">venenatis porta</a>.
+ </p>
+ <p>Maecenas eu vestibulum orci. Ut eget nisi a est sagittis euismod a vel
+ justo. Quisque at dui urna. Duis vel velit leo. Nulla nunc sem, rutrum at aliquet in, aliquet id velit. Duis
+ mattis placerat erat, a aliquam leo rhoncus vel. Sed nec diam ex. Praesent convallis purus lorem, vel porttitor
+ neque gravida quis. Etiam et malesuada dui. Nunc vitae viverra dui. Suspendisse feugiat efficitur augue, quis
+ blandit leo ullamcorper vel.
+ </p>
+ </section>
+ </li>
+ <li class="mdlext-accordion__panel" role="presentation">
+ <header class="mdlext-accordion__tab" aria-expanded="false" role="tab">
+ <span class="mdlext-accordion__tab__caption">Tab #2</span>
+ <i class="mdlext-aria-toggle-material-icons"></i>
+ </header>
+ <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
+ <h5>Content #2 goes here</h5>
+ <p>Curabitur malesuada placerat nunc, id dapibus justo tempor in. Ut molestie
+ arcu justo, id volutpat eros vestibulum eget. Fusce tincidunt leo in est venenatis porta.
+ </p>
+ </section>
+ </li>
+ <li class="mdlext-accordion__panel" role="presentation">
+ <header class="mdlext-accordion__tab" aria-expanded="false" role="tab" disabled tabindex="0">
+ <i class="material-icons">warning</i>
+ <span class="mdlext-accordion__tab__caption">Tab #3, disabled</span>
+ <i class="mdlext-aria-toggle-material-icons"></i>
+ </header>
+ <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
+ <h5>Content #3 goes here</h5>
+ <p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+ ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
+ maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.
+ </p>
+ </section>
+ </li>
+ <li class="mdlext-accordion__panel" role="presentation">
+ <header class="mdlext-accordion__tab" aria-expanded="false" role="tab">
+ <i class="material-icons">accessibility</i>
+ <i class="material-icons">help_outline</i>
+ <i class="material-icons">radio</i>
+ <span class="mdlext-accordion__tab__caption">Tab #4, no toggle icon</span>
+ </header>
+ <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
+ <h5>Content #4 goes here</h5>
+ <p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+ ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
+ maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.
+ </p>
+ </section>
+ </li>
+ <li class="mdlext-accordion__panel" role="presentation">
+ <header class="mdlext-accordion__tab" aria-expanded="true" role="tab">
+ <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">favorite</i></button>
+ <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">share</i></button>
+ <span class="mdlext-accordion__tab__caption">Tab #5, with icon buttons</span>
+ <i class="mdlext-aria-toggle-material-icons"></i>
+ </header>
+ <section class="mdlext-accordion__tabpanel" role="tabpanel">
+ <h5>Content #5 goes here</h5>
+ <p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+ ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
+ maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.
+ </p>
+ </section>
+ </li>
+</ul>
+
+
+<h4>Vertical accordion, aria-multiselectable="false"</h4>
+<p><strong>Hint:</strong> Use a container to draw outer borders</p>
+
+<style>
+ .demo-accordion-4 {
+ height: 500px;
+ border: 1px solid #00b0ff;
+ }
+ .demo-accordion-4 .mdlext-accordion__tabpanel {
+ background-color: rgba(165, 214, 167, 0.4);
+ }
+</style>
+
+<ul class="mdlext-accordion mdlext-js-accordion mdlext-accordion--vertical demo-accordion-4" role="tablist" aria-multiselectable="false">
+
+ <li class="mdlext-accordion__panel" role="presentation">
+ <header class="mdlext-accordion__tab" aria-expanded="false" role="tab">
+ <i class="material-icons">info</i>
+ <span class="mdlext-accordion__tab__caption">First section. A long caption should not push the state icon</span>
+ <i class="mdlext-aria-toggle-material-icons"></i>
+ </header>
+ <section class="mdlext-accordion__tabpanel" role="tabpanel">
+ <h5>Content #1 goes here</h5>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique eget augue eget gravida.
+ Etiam eget imperdiet massa. Aliquam nisi eros, molestie a vulputate quis, tempor nec quam. Ut at libero
+ in sem pellentesque imperdiet. Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+ ac dignissim odio tortor nec quam.Fusce tincidunt leo in est <a href="#">venenatis porta</a>.
+ </p>
+ <p>Maecenas eu vestibulum orci. Ut eget nisi a est sagittis euismod a vel
+ justo. Quisque at dui urna. Duis vel velit leo. Nulla nunc sem, rutrum at aliquet in, aliquet id velit. Duis
+ mattis placerat erat, a aliquam leo rhoncus vel. Sed nec diam ex. Praesent convallis purus lorem, vel porttitor
+ neque gravida quis. Etiam et malesuada dui. Nunc vitae viverra dui. Suspendisse feugiat efficitur augue, quis
+ blandit leo ullamcorper vel.
+ </p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique eget augue eget gravida.
+ Etiam eget imperdiet massa. Aliquam nisi eros, molestie a vulputate quis, tempor nec quam. Ut at libero
+ in sem pellentesque imperdiet. Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+ ac dignissim odio tortor nec quam.Fusce tincidunt leo in est <a href="#">venenatis porta</a>.
+ </p>
+ </section>
+ </li>
+ <li class="mdlext-accordion__panel" role="presentation">
+ <header class="mdlext-accordion__tab" aria-expanded="true" role="tab">
+ <span class="mdlext-accordion__tab__caption">Tab #2</span>
+ <i class="mdlext-aria-toggle-material-icons"></i>
+ </header>
+ <section class="mdlext-accordion__tabpanel" role="tabpanel">
+ <h5>Content #2 goes here</h5>
+ <p>Curabitur malesuada placerat nunc, id dapibus justo tempor in. Ut molestie
+ arcu justo, id volutpat eros vestibulum eget. Fusce tincidunt leo in est venenatis porta.
+ </p>
+ </section>
+ </li>
+ <li class="mdlext-accordion__panel" role="presentation">
+ <header class="mdlext-accordion__tab" aria-expanded="false" role="tab" disabled>
+ <i class="material-icons">warning</i>
+ <span class="mdlext-accordion__tab__caption">Tab #3, disabled</span>
+ <i class="mdlext-aria-toggle-material-icons"></i>
+ </header>
+ <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
+ <h5>Content #3 goes here</h5>
+ <p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+ ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
+ maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.
+ </p>
+ </section>
+ </li>
+ <li class="mdlext-accordion__panel" role="presentation">
+ <header class="mdlext-accordion__tab" aria-expanded="false" role="tab">
+ <i class="material-icons">accessibility</i>
+ <i class="material-icons">help_outline</i>
+ <i class="material-icons">radio</i>
+ <span class="mdlext-accordion__tab__caption">Tab #4</span>
+ <i class="mdlext-aria-toggle-material-icons"></i>
+ </header>
+ <section class="mdlext-accordion__tabpanel" role="tabpanel">
+ <h5>Content #4 goes here</h5>
+ <p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+ ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
+ maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.
+ </p>
+ </section>
+ </li>
+ <li class="mdlext-accordion__panel" role="presentation">
+ <header class="mdlext-accordion__tab" aria-expanded="false" role="tab">
+ <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">favorite</i></button>
+ <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">share</i></button>
+ <span class="mdlext-accordion__tab__caption">Tab #5, with icon buttons</span>
+ <i class="mdlext-aria-toggle-material-icons"></i>
+ </header>
+ <section class="mdlext-accordion__tabpanel" role="tabpanel">
+ <h5>Content #5 goes here</h5>
+ <p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+ ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
+ maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.
+ </p>
+ </section>
+ </li>
+</ul>
+
+
+<h4>Disabled accordion</h4>
+<ul class="mdlext-accordion mdlext-js-accordion mdlext-accordion--horizontal demo-accordion-1"
+ role="tablist" aria-multiselectable="false" disabled>
+
+ <li class="mdlext-accordion__panel" role="presentation">
+ <header class="mdlext-accordion__tab" aria-expanded="true" role="tab">
+ <i class="material-icons">info</i>
+ <span class="mdlext-accordion__tab__caption">First section. A long caption should not push the state icon</span>
+ <i class="mdlext-aria-toggle-material-icons"></i>
+ </header>
+ <section class="mdlext-accordion__tabpanel" role="tabpanel" aria-hidden="false">
+ <h5>Content goes here</h5>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique eget augue eget gravida.
+ Etiam eget imperdiet massa. Aliquam nisi eros, molestie a vulputate quis, tempor nec quam. Ut at libero
+ in sem pellentesque imperdiet. Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+ ac dignissim odio tortor nec quam.Fusce tincidunt leo in est <a href="#">venenatis porta</a>.
+ </p>
+ <p>Maecenas eu vestibulum orci. Ut eget nisi a est sagittis euismod a vel
+ justo. Quisque at dui urna. Duis vel velit leo. Nulla nunc sem, rutrum at aliquet in, aliquet id velit. Duis
+ mattis placerat erat, a aliquam leo rhoncus vel. Sed nec diam ex. Praesent convallis purus lorem, vel porttitor
+ neque gravida quis. Etiam et malesuada dui. Nunc vitae viverra dui. Suspendisse feugiat efficitur augue, quis
+ blandit leo ullamcorper vel.
+ </p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique eget augue eget gravida.
+ Etiam eget imperdiet massa. Aliquam nisi eros, molestie a vulputate quis, tempor nec quam. Ut at libero
+ in sem pellentesque imperdiet. Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+ ac dignissim odio tortor nec quam.Fusce tincidunt leo in est <a href="#">venenatis porta</a>.
+ </p>
+ <p>Maecenas eu vestibulum orci. Ut eget nisi a est sagittis euismod a vel
+ justo. Quisque at dui urna. Duis vel velit leo. Nulla nunc sem, rutrum at aliquet in, aliquet id velit. Duis
+ mattis placerat erat, a aliquam leo rhoncus vel. Sed nec diam ex. Praesent convallis purus lorem, vel porttitor
+ neque gravida quis. Etiam et malesuada dui. Nunc vitae viverra dui. Suspendisse feugiat efficitur augue, quis
+ blandit leo ullamcorper vel.
+ </p>
+ </section>
+ </li>
+ <li class="mdlext-accordion__panel" role="presentation">
+ <header class="mdlext-accordion__tab" aria-expanded="false" role="tab">
+ <span class="mdlext-accordion__tab__caption">Tab #2</span>
+ <i class="mdlext-aria-toggle-material-icons"></i>
+ </header>
+ <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
+ </section>
+ </li>
+ <li class="mdlext-accordion__panel" role="presentation">
+ <header class="mdlext-accordion__tab" aria-expanded="false" role="tab" disabled tabindex="0">
+ <i class="material-icons">warning</i>
+ <span class="mdlext-accordion__tab__caption">Tab #3, disabled</span>
+ <i class="mdlext-aria-toggle-material-icons"></i>
+ </header>
+ <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
+ </section>
+ </li>
+ <li class="mdlext-accordion__panel" role="presentation">
+ <header class="mdlext-accordion__tab" aria-expanded="false" role="tab">
+ <i class="material-icons">accessibility</i>
+ <i class="material-icons">help_outline</i>
+ <i class="material-icons">radio</i>
+ <span class="mdlext-accordion__tab__caption">Tab #4</span>
+ <i class="mdlext-aria-toggle-material-icons"></i>
+ </header>
+ <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
+ </section>
+ </li>
+ <li class="mdlext-accordion__panel" role="presentation">
+ <header class="mdlext-accordion__tab" aria-expanded="false" role="tab">
+ <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">favorite</i></button>
+ <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">share</i></button>
+ <span class="mdlext-accordion__tab__caption">Tab #5, with icon buttons</span>
+ <i class="mdlext-aria-toggle-material-icons"></i>
+ </header>
+ <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
+ </section>
+ </li>
+</ul>
+
+
+
+
+<h4>Accordion API</h4>
+
+<style>
+ .cmd-button {
+ min-width: 140px;
+ }
+ .demo-accordion-6 .mdlext-accordion__tabpanel {
+ background: rgba(255, 224, 130, 0.4);
+ }
+</style>
+
+<h5>Public methods</h5>
+
+<section style="margin-bottom: 16px">
+ <button id="btn-api-expand-all" class="cmd-button mdl-button mdl-js-button mdl-button--raised">
+ Expand all
+ </button>
+ <button id="btn-api-collapse-all" class="cmd-button mdl-button mdl-js-button mdl-button--raised">
+ Collapse all
+ </button>
+ <button id="btn-api-open-tab2" class="cmd-button mdl-button mdl-js-button mdl-button--raised">
+ Open tab #2
+ </button>
+ <button id="btn-api-close-tab2" class="cmd-button mdl-button mdl-js-button mdl-button--raised">
+ Close tab #2
+ </button>
+ <button id="btn-api-toggle-tab2" class="cmd-button mdl-button mdl-js-button mdl-button--raised">
+ Toggle tab #2
+ </button>
+ <button id="btn-api-new-tab" class="cmd-button mdl-button mdl-js-button mdl-button--raised">
+ Add a new tab
+ </button>
+</section>
+
+<h5>Custom events</h5>
+
+<section style="margin-bottom: 16px">
+ <button id="btn-event-expand-all" class="cmd-button mdl-button mdl-js-button mdl-button--raised">
+ Expand all
+ </button>
+ <button id="btn-event-collapse-all" class="cmd-button mdl-button mdl-js-button mdl-button--raised">
+ Collapse all
+ </button>
+ <button id="btn-event-open-tab2" class="cmd-button mdl-button mdl-js-button mdl-button--raised">
+ Open tab #2
+ </button>
+ <button id="btn-event-close-tab2" class="cmd-button mdl-button mdl-js-button mdl-button--raised">
+ Close tab #2
+ </button>
+ <button id="btn-event-toggle-tab2" class="cmd-button mdl-button mdl-js-button mdl-button--raised">
+ Toggle tab #2
+ </button>
+ <button id="btn-event-new-tab" class="cmd-button mdl-button mdl-js-button mdl-button--raised">
+ Add a new tab
+ </button>
+</section>
+
+
+<ul id="demo-accordion-6" class="mdlext-accordion mdlext-js-accordion mdlext-accordion--vertical demo-accordion-6"
+ role="tablist" aria-multiselectable="true">
+
+ <li class="mdlext-accordion__panel" role="presentation">
+ <header class="mdlext-accordion__tab" aria-expanded="true" role="tab">
+ <i class="material-icons">info</i>
+ <span class="mdlext-accordion__tab__caption">Tab #1</span>
+ <i class="mdlext-aria-toggle-material-icons"></i>
+ </header>
+ <section class="mdlext-accordion__tabpanel" role="tabpanel" aria-hidden="false">
+ <h5>Content #1 goes here</h5>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique eget augue eget gravida.
+ Etiam eget imperdiet massa. Aliquam nisi eros, molestie a vulputate quis, tempor nec quam. Ut at libero
+ in sem pellentesque imperdiet. Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+ ac dignissim odio tortor nec quam.Fusce tincidunt leo in est <a href="#">venenatis porta</a>.
+ </p>
+ <p>Maecenas eu vestibulum orci. Ut eget nisi a est sagittis euismod a vel
+ justo. Quisque at dui urna. Duis vel velit leo. Nulla nunc sem, rutrum at aliquet in, aliquet id velit. Duis
+ mattis placerat erat, a aliquam leo rhoncus vel. Sed nec diam ex. Praesent convallis purus lorem, vel porttitor
+ neque gravida quis. Etiam et malesuada dui. Nunc vitae viverra dui. Suspendisse feugiat efficitur augue, quis
+ blandit leo ullamcorper vel.
+ </p>
+ </section>
+ </li>
+ <li class="mdlext-accordion__panel" role="presentation">
+ <header class="mdlext-accordion__tab" aria-expanded="false" role="tab">
+ <span class="mdlext-accordion__tab__caption">Tab #2</span>
+ <i class="mdlext-aria-toggle-material-icons"></i>
+ </header>
+ <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
+ <h5>Content #2 goes here</h5>
+ <p>Curabitur malesuada placerat nunc, id dapibus justo tempor in. Ut molestie
+ arcu justo, id volutpat eros vestibulum eget. Fusce tincidunt leo in est venenatis porta.
+ </p>
+ </section>
+ </li>
+ <li class="mdlext-accordion__panel" role="presentation">
+ <header class="mdlext-accordion__tab" aria-expanded="false" role="tab" disabled tabindex="0">
+ <i class="material-icons">warning</i>
+ <span class="mdlext-accordion__tab__caption">Tab #3, disabled</span>
+ <i class="mdlext-aria-toggle-material-icons"></i>
+ </header>
+ <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
+ <h5>Content #3 goes here</h5>
+ <p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+ ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
+ maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.
+ </p>
+ </section>
+ </li>
+ <li class="mdlext-accordion__panel" role="presentation">
+ <header class="mdlext-accordion__tab" aria-expanded="false" role="tab">
+ <i class="material-icons">accessibility</i>
+ <i class="material-icons">help_outline</i>
+ <i class="material-icons">radio</i>
+ <span class="mdlext-accordion__tab__caption">Tab #4</span>
+ <i class="mdlext-aria-toggle-material-icons"></i>
+ </header>
+ <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
+ <h5>Content #4 goes here</h5>
+ <p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+ ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
+ maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.
+ </p>
+ </section>
+ </li>
+ <li class="mdlext-accordion__panel" role="presentation">
+ <header class="mdlext-accordion__tab" aria-expanded="false" role="tab">
+ <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">favorite</i></button>
+ <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">share</i></button>
+ <span class="mdlext-accordion__tab__caption">Tab #5, with icon buttons</span>
+ <i class="mdlext-aria-toggle-material-icons"></i>
+ </header>
+ <section class="mdlext-accordion__tabpanel" role="tabpanel">
+ <h5>Content #5 goes here</h5>
+ <p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+ ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
+ maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.
+ </p>
+ </section>
+ </li>
+</ul>
+
+
+
+<h4>Styling the accordion</h4>
+
+<style>
+ .demo-accordion-7 {
+ height: 300px;
+ }
+ .demo-accordion-7 .mdlext-accordion__panel,
+ .demo-accordion-7 .mdlext-accordion__tab {
+ min-width: 40px;
+ min-height: 40px;
+ width: 40px;
+ }
+ .colored-panel:nth-child(1) {
+ background: rgba(239, 154, 154, 0.4);
+ }
+ .colored-panel:nth-child(2) {
+ background: rgba(206, 147, 216, 0.4);
+ }
+ .colored-panel:nth-child(3) {
+ background: rgba(144, 202, 249, 0.4);
+ }
+ .colored-panel:nth-child(4) {
+ background: rgba(165, 214, 167, 0.4);
+ }
+ .colored-panel:nth-child(5) {
+ background: rgba(255, 224, 130, 0.4);
+ }
+ .mdlext-aria-toggle-plus-minus {
+ font-size: 20px;
+ }
+ .img-box {
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+ }
+ .img-box--6 {
+ background-image: url(./images/_D806374.jpg);
+ background-image: linear-gradient(to bottom, rgba(255,255,255,0.2) 0%,rgba(255,255,255,0.2) 100%), url(./images/_D806374.jpg);
+ }
+ .img-box--7 {
+ background-image: url('./images/_D802478.jpg');
+ background-image: linear-gradient(to bottom, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.1) 100%), url(./images/_D802478.jpg);
+ }
+ .img-box--8 {
+ background-image: url('./images/_D803221.jpg');
+ background-image: linear-gradient(to bottom, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.5) 100%), url(./images/_D803221.jpg);
+ }
+ .img-box--9 {
+ background-image: url('./images/_D802143-2.jpg');
+ background-image: linear-gradient(to bottom, rgba(255,255,255,0.2) 0%,rgba(255,255,255,0.2) 100%), url(./images/_D802143-2.jpg);
+ }
+ .img-box--10 {
+ background-image: url('./images/_D809758-2.jpg');
+ background-image: linear-gradient(to bottom, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.1) 100%), url(./images/_D809758-2.jpg);
+ }
+</style>
+
+<ul id="demo-accordion-7" class="mdlext-accordion mdlext-js-accordion mdlext-accordion--horizontal mdlext-js-ripple-effect mdlext-js-animation-effect demo-accordion-7">
+ <li class="mdlext-accordion__panel colored-panel">
+ <header class="mdlext-accordion__tab" aria-expanded="true">
+ <i class="material-icons md-16">dns</i>
+ <span class="mdlext-accordion__tab__caption mdl-typography--subhead-color-contrast">Accordion</span>
+ <i class="mdlext-aria-toggle-plus-minus"></i>
+ </header>
+ <section class="mdlext-accordion__tabpanel img-box img-box--6">
+ <h5>Introduction</h5>
+ <p>An accordion component is a collection of expandable panels associated with a common outer container. Panels consist
+ of a header and an associated content region or panel. The primary use of an Accordion is to present multiple sections
+ of content on a single page without scrolling, where all of the sections are peers in the application or object hierarchy.
+ The general look is similar to a tree where each root tree node is an expandable accordion header. The user navigates
+ and makes the contents of each panel visible (or not) by interacting with the Accordion Header.</p>
+ </section>
+ </li>
+ <li class="mdlext-accordion__panel colored-panel">
+ <header class="mdlext-accordion__tab">
+ <i class="material-icons md-16">all_inclusive</i>
+ <span class="mdlext-accordion__tab__caption mdl-typography--subhead-color-contrast">Include Component</span>
+ <i class="mdlext-aria-toggle-plus-minus"></i>
+ </header>
+ <section class="mdlext-accordion__tabpanel img-box img-box--7">
+ <p style = "margin-top:128px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique eget augue eget gravida.
+ Etiam eget imperdiet massa. Aliquam nisi eros, molestie a vulputate quis, tempor nec quam. Ut at libero
+ in sem pellentesque imperdiet. Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+ ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
+ maximus massa felis quis quam. Curabitur malesuada placerat nunc, id dapibus justo tempor in. Ut molestie
+ arcu justo, id volutpat eros vestibulum eget. Fusce tincidunt leo in est venenatis porta.</p>
+ <p>Maecenas eu vestibulum orci. Ut eget nisi a est sagittis euismod a vel
+ justo. Quisque at dui urna. Duis vel velit leo. Nulla nunc sem, rutrum at aliquet in, aliquet id velit. Duis
+ mattis placerat erat, a aliquam leo rhoncus vel. Sed nec diam ex. Praesent convallis purus lorem, vel porttitor
+ neque gravida quis. Etiam et malesuada dui. Nunc vitae viverra dui. Suspendisse feugiat efficitur augue, quis
+ blandit leo ullamcorper vel.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique eget augue eget gravida.
+ Etiam eget imperdiet massa. Aliquam nisi eros, molestie a vulputate quis, tempor nec quam. Ut at libero
+ in sem pellentesque imperdiet. Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+ ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
+ maximus massa felis quis quam. Curabitur malesuada placerat nunc, id dapibus justo tempor in. Ut molestie
+ arcu justo, id volutpat eros vestibulum eget. Fusce tincidunt leo in est venenatis porta.</p>
+ </section>
+ </li>
+ <li class="mdlext-accordion__panel colored-panel">
+ <header class="mdlext-accordion__tab">
+ <i class="material-icons md-16">build</i>
+ <span class="mdlext-accordion__tab__caption mdl-typography--subhead-color-contrast">Configuration Options</span>
+ <i class="mdlext-aria-toggle-plus-minus"></i>
+ </header>
+ <section class="mdlext-accordion__tabpanel img-box img-box--8">
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique eget augue eget gravida.
+ Etiam eget imperdiet massa. Aliquam nisi eros, molestie a vulputate quis, tempor nec quam. Ut at libero
+ in sem pellentesque imperdiet. Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+ ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
+ maximus massa felis quis quam. Curabitur malesuada placerat nunc, id dapibus justo tempor in. Ut molestie
+ arcu justo, id volutpat eros vestibulum eget. Fusce tincidunt leo in est venenatis porta.</p>
+ </section>
+ </li>
+ <li class="mdlext-accordion__panel colored-panel">
+ <header class="mdlext-accordion__tab">
+ <i class="material-icons md-16">public</i>
+ <span class="mdlext-accordion__tab__caption mdl-typography--subhead-color-contrast">Fourth section</span>
+ <i class="mdlext-aria-toggle-plus-minus"></i>
+ </header>
+ <section class="mdlext-accordion__tabpanel img-box img-box--9">
+ <p>Maecenas eu vestibulum orci. Ut eget nisi a est sagittis euismod a vel
+ justo. Quisque at dui urna. Duis vel velit leo. Nulla nunc sem, rutrum at aliquet in, aliquet id velit. Duis
+ mattis placerat erat, a aliquam leo rhoncus vel. Sed nec diam ex. Praesent convallis purus lorem, vel porttitor
+ neque gravida quis. Etiam et malesuada dui. Nunc vitae viverra dui. Suspendisse feugiat efficitur augue, quis
+ blandit leo ullamcorper vel.</p>
+ </section>
+ </li>
+ <li class="mdlext-accordion__panel colored-panel">
+ <header class="mdlext-accordion__tab">
+ <i class="material-icons md-16">public</i>
+ <span class="mdlext-accordion__tab__caption mdl-typography--subhead-color-contrast">Fifth</span>
+ <i class="mdlext-aria-toggle-plus-minus"></i>
+ </header>
+ <section class="mdlext-accordion__tabpanel img-box img-box--10">
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique eget augue eget gravida.
+ Etiam eget imperdiet massa. Aliquam nisi eros, molestie a vulputate quis, tempor nec quam. Ut at libero
+ in sem pellentesque imperdiet. Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+ ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
+ maximus massa felis quis quam. Curabitur malesuada placerat nunc, id dapibus justo tempor in. Ut molestie
+ arcu justo, id volutpat eros vestibulum eget. Fusce tincidunt leo in est venenatis porta.</p>
+ </section>
+ </li>
+</ul>
+
+
+
+<h4>Color themes</h4>
+
+<div class="mdl-grid">
+ <div class="mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-cell--2-col-phone mdlext-dark-color-theme">
+
+ <ul class="mdlext-accordion mdlext-js-accordion mdlext-accordion--vertical mdlext-js-ripple-effect mdlext-js-animation-effect"
+ role="tablist" aria-multiselectable="true">
+
+ <li class="mdlext-accordion__panel" role="presentation">
+ <header class="mdlext-accordion__tab" aria-expanded="true" role="tab">
+ <i class="material-icons">info</i>
+ <span class="mdlext-accordion__tab__caption">First section. A long caption should not push the state icon</span>
+ <i class="mdlext-aria-toggle-material-icons"></i>
+ </header>
+ <section class="mdlext-accordion__tabpanel" role="tabpanel" aria-hidden="false">
+ <h5>Content #1 goes here</h5>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique eget augue eget gravida.
+ Etiam eget imperdiet massa. Aliquam nisi eros, molestie a vulputate quis, tempor nec quam. Ut at libero
+ in sem pellentesque imperdiet. Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+ ac dignissim odio tortor nec quam.Fusce tincidunt leo in est <a href="#">venenatis porta</a>.
+ </p>
+ <p>Maecenas eu vestibulum orci. Ut eget nisi a est sagittis euismod a vel
+ justo. Quisque at dui urna. Duis vel velit leo. Nulla nunc sem, rutrum at aliquet in, aliquet id velit. Duis
+ mattis placerat erat, a aliquam leo rhoncus vel. Sed nec diam ex. Praesent convallis purus lorem, vel porttitor
+ neque gravida quis. Etiam et malesuada dui. Nunc vitae viverra dui. Suspendisse feugiat efficitur augue, quis
+ blandit leo ullamcorper vel.
+ </p>
+ </section>
+ </li>
+ <li class="mdlext-accordion__panel" role="presentation">
+ <header class="mdlext-accordion__tab" aria-expanded="false" role="tab">
+ <span class="mdlext-accordion__tab__caption">Tab #2</span>
+ <i class="mdlext-aria-toggle-material-icons"></i>
+ </header>
+ <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
+ <h5>Content #2 goes here</h5>
+ <p>Curabitur malesuada placerat nunc, id dapibus justo tempor in. Ut molestie
+ arcu justo, id volutpat eros vestibulum eget. Fusce tincidunt leo in est venenatis porta.
+ </p>
+ </section>
+ </li>
+ <li class="mdlext-accordion__panel" role="presentation">
+ <header class="mdlext-accordion__tab" aria-expanded="false" role="tab" disabled tabindex="0">
+ <i class="material-icons">warning</i>
+ <span class="mdlext-accordion__tab__caption">Tab #3, disabled</span>
+ <i class="mdlext-aria-toggle-material-icons"></i>
+ </header>
+ <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
+ <h5>Content #3 goes here</h5>
+ <p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+ ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
+ maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.
+ </p>
+ </section>
+ </li>
+ <li class="mdlext-accordion__panel" role="presentation">
+ <header class="mdlext-accordion__tab" aria-expanded="false" role="tab">
+ <i class="material-icons">accessibility</i>
+ <i class="material-icons">help_outline</i>
+ <i class="material-icons">radio</i>
+ <span class="mdlext-accordion__tab__caption">Tab #4, no toggle icon</span>
+ </header>
+ <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
+ <h5>Content #4 goes here</h5>
+ <p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+ ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
+ maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.
+ </p>
+ </section>
+ </li>
+ <li class="mdlext-accordion__panel" role="presentation">
+ <header class="mdlext-accordion__tab" role="tab">
+ <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">favorite</i></button>
+ <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">share</i></button>
+ <span class="mdlext-accordion__tab__caption">Tab #5, with icon buttons</span>
+ <i class="mdlext-aria-toggle-material-icons"></i>
+ </header>
+ <section class="mdlext-accordion__tabpanel" role="tabpanel">
+ <h5>Content #5 goes here</h5>
+ <p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+ ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
+ maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.
+ </p>
+ </section>
+ </li>
+ </ul>
+ </div> <!-- mdl-cell -->
+
+ <div class="mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-cell--2-col-phone">
+ <ul class="mdlext-accordion mdlext-js-accordion mdlext-accordion--vertical mdlext-js-ripple-effect mdlext-js-animation-effect mdlext-light-color-theme"
+ role="tablist" aria-multiselectable="true">
+
+ <li class="mdlext-accordion__panel" role="presentation">
+ <header class="mdlext-accordion__tab" aria-expanded="true" role="tab">
+ <i class="material-icons">info</i>
+ <span class="mdlext-accordion__tab__caption">First section. A long caption should not push the state icon</span>
+ <i class="mdlext-aria-toggle-material-icons"></i>
+ </header>
+ <section class="mdlext-accordion__tabpanel" role="tabpanel" aria-hidden="false">
+ <h5>Content #1 goes here</h5>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique eget augue eget gravida.
+ Etiam eget imperdiet massa. Aliquam nisi eros, molestie a vulputate quis, tempor nec quam. Ut at libero
+ in sem pellentesque imperdiet. Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+ ac dignissim odio tortor nec quam.Fusce tincidunt leo in est <a href="#">venenatis porta</a>.
+ </p>
+ <p>Maecenas eu vestibulum orci. Ut eget nisi a est sagittis euismod a vel
+ justo. Quisque at dui urna. Duis vel velit leo. Nulla nunc sem, rutrum at aliquet in, aliquet id velit. Duis
+ mattis placerat erat, a aliquam leo rhoncus vel. Sed nec diam ex. Praesent convallis purus lorem, vel porttitor
+ neque gravida quis. Etiam et malesuada dui. Nunc vitae viverra dui. Suspendisse feugiat efficitur augue, quis
+ blandit leo ullamcorper vel.
+ </p>
+ </section>
+ </li>
+ <li class="mdlext-accordion__panel" role="presentation">
+ <header class="mdlext-accordion__tab" aria-expanded="false" role="tab">
+ <span class="mdlext-accordion__tab__caption">Tab #2</span>
+ <i class="mdlext-aria-toggle-material-icons"></i>
+ </header>
+ <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
+ <h5>Content #2 goes here</h5>
+ <p>Curabitur malesuada placerat nunc, id dapibus justo tempor in. Ut molestie
+ arcu justo, id volutpat eros vestibulum eget. Fusce tincidunt leo in est venenatis porta.
+ </p>
+ </section>
+ </li>
+ <li class="mdlext-accordion__panel" role="presentation">
+ <header class="mdlext-accordion__tab" aria-expanded="false" role="tab" disabled tabindex="0">
+ <i class="material-icons">warning</i>
+ <span class="mdlext-accordion__tab__caption">Tab #3, disabled</span>
+ <i class="mdlext-aria-toggle-material-icons"></i>
+ </header>
+ <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
+ <h5>Content #3 goes here</h5>
+ <p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+ ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
+ maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.
+ </p>
+ </section>
+ </li>
+ <li class="mdlext-accordion__panel" role="presentation">
+ <header class="mdlext-accordion__tab" aria-expanded="false" role="tab">
+ <i class="material-icons">accessibility</i>
+ <i class="material-icons">help_outline</i>
+ <i class="material-icons">radio</i>
+ <span class="mdlext-accordion__tab__caption">Tab #4, no toggle icon</span>
+ </header>
+ <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
+ <h5>Content #4 goes here</h5>
+ <p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+ ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
+ maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.
+ </p>
+ </section>
+ </li>
+ <li class="mdlext-accordion__panel" role="presentation">
+ <header class="mdlext-accordion__tab" role="tab">
+ <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">favorite</i></button>
+ <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">share</i></button>
+ <span class="mdlext-accordion__tab__caption">Tab #5, with icon buttons</span>
+ <i class="mdlext-aria-toggle-material-icons"></i>
+ </header>
+ <section class="mdlext-accordion__tabpanel" role="tabpanel">
+ <h5>Content #5 goes here</h5>
+ <p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+ ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
+ maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.
+ </p>
+ </section>
+ </li>
+ </ul>
+ </div> <!-- mdl-cell -->
+</div> <!-- mdl-grid -->
+
+
+
+<p class="mdl-typography--caption" style="margin-top: 64px;">
+ All images appearing in this page are the exclusive property of Leif Olsen and are protected under the United States and International Copyright laws.
+ The images may not be reproduced or manipulated without the written permission of Leif Olsen.
+ Use of any image as the basis for another photographic concept or illustration (digital, artist rendering or alike) is a violation of the United States and International Copyright laws.
+ All images are copyrighted © Leif Olsen, 2016.
+</p>
+
+<script>
+ (function() {
+ 'use strict';
+
+ function insertPanel() {
+ var panel =
+ '<li class="mdlext-accordion__panel">'
+ + '<header class="mdlext-accordion__tab" aria-expanded="true">'
+ + '<span class="mdlext-accordion__tab__caption">New Tab</span>'
+ + '<i class="mdlext-aria-toggle-material-icons"></i>'
+ + '</header>'
+ + '<section class="mdlext-accordion__tabpanel">'
+ + '<h5>New tab content</h5>'
+ + '<p>Curabitur malesuada placerat nunc, id dapibus justo tempor in. Ut molestie'
+ + 'arcu justo, id volutpat eros vestibulum eget. Fusce tincidunt leo in est venenatis porta.'
+ + '</p>'
+ + '</section>'
+ +'</li>';
+
+ var accordion = document.querySelector('#demo-accordion-6');
+ accordion.insertAdjacentHTML('beforeend', panel);
+ }
+
+ window.addEventListener('load', function() {
+
+ // Listen to accordion toggle event
+ document.querySelector('#demo-accordion-6').addEventListener('toggle', function(e) {
+ //console.log('Accordion tab toggled. New state:', e.detail.state, 'Tab:', e.detail.tab, 'Tabpanel:', e.detail.tabpanel);
+ console.log('Accordion tab toggled. New state:', e.detail.state);
+ });
+
+ // Interact with accordion using public methods
+ document.querySelector('#btn-api-expand-all').addEventListener('click', function(e) {
+ var accordion = document.querySelector('#demo-accordion-6');
+ accordion.MaterialExtAccordion.command( {action: 'open'} );
+ });
+
+ document.querySelector('#btn-api-collapse-all').addEventListener('click', function(e) {
+ var accordion = document.querySelector('#demo-accordion-6');
+ accordion.MaterialExtAccordion.command( {action: 'close'} );
+ });
+
+ document.querySelector('#btn-api-open-tab2').addEventListener('click', function(e) {
+ var accordion = document.querySelector('#demo-accordion-6');
+ var tab2 = document.querySelector('#demo-accordion-6 .mdlext-accordion__panel:nth-child(2) .mdlext-accordion__tab');
+ accordion.MaterialExtAccordion.command( {action: 'open', target: tab2} );
+ });
+
+ document.querySelector('#btn-api-close-tab2').addEventListener('click', function(e) {
+ var accordion = document.querySelector('#demo-accordion-6');
+ var tab2 = document.querySelector('#demo-accordion-6 .mdlext-accordion__panel:nth-child(2)');
+ accordion.MaterialExtAccordion.command( {action: 'close', target: tab2} );
+ });
+
+ document.querySelector('#btn-api-toggle-tab2').addEventListener('click', function(e) {
+ var accordion = document.querySelector('#demo-accordion-6');
+ var tab2 = document.querySelector('#demo-accordion-6 .mdlext-accordion__panel:nth-child(2)');
+ accordion.MaterialExtAccordion.command( {action: 'toggle', target: tab2} );
+ });
+
+ document.querySelector('#btn-api-new-tab').addEventListener('click', function(e) {
+ insertPanel();
+ var accordion = document.querySelector('#demo-accordion-6');
+ var panelElement = document.querySelector('#demo-accordion-6 .mdlext-accordion__panel:last-child');
+ accordion.MaterialExtAccordion.command( {action: 'upgrade', target: panelElement} );
+ });
+
+ // Interact with accordion using custom event
+ var eventButtons = document.querySelectorAll('button[id^="btn-event-"]');
+ for (var i = 0, n = eventButtons.length; i < n; i++) {
+ eventButtons[i].addEventListener('click', function(e) {
+ var ce;
+ var tab2 = document.querySelector('#demo-accordion-6 .mdlext-accordion__panel:nth-child(2)');
+
+ switch (e.target.id) {
+ case 'btn-event-expand-all':
+ ce = new CustomEvent('command', { detail: { action : 'open' } });
+ break;
+ case 'btn-event-collapse-all':
+ ce = new CustomEvent('command', { detail: { action : 'close' } });
+ break;
+ case 'btn-event-open-tab2':
+ ce = new CustomEvent('command', { detail: { action : 'open', target: tab2 } });
+ break;
+ case 'btn-event-close-tab2':
+ ce = new CustomEvent('command', { detail: { action : 'close', target: tab2 } });
+ break;
+ case 'btn-event-toggle-tab2':
+ ce = new CustomEvent('command', { detail: { action : 'toggle', target: tab2 } });
+ break;
+ case 'btn-event-new-tab':
+ insertPanel();
+ var panelElement = document.querySelector('#demo-accordion-6 .mdlext-accordion__panel:last-child');
+ ce = new CustomEvent('command', { detail: { action : 'upgrade', target: panelElement } });
+ break;
+ default:
+ return;
+ }
+ var accordion = document.querySelector('#demo-accordion-6');
+ accordion.dispatchEvent(ce);
+ });
+ }
+ });
+
+ }());
+
+</script>