@patternfly/pfe-accordion - npm Package Compare versions

Comparing version 1.0.0-prerelease.10 to 1.0.0-prerelease.11

demo/pfe-accordion.story.js

@@ -23,3 +23,16 @@ import { storiesOf } from "@storybook/polymer";
   // const slots = PfeAccordion.slots;
+  const props = {
+    on: {
+      title: "Theme",
+      type: "string",
+      enum: [
+        "light",
+        "dark"
+      ],
+      default: "light"
+    }
+  };
 
+  config.prop = tools.autoPropKnobs(props, storybookBridge);
+
   //-- Add content to light DOM
@@ -26,0 +39,0 @@ config.slots = [];

package.json

@@ -7,3 +7,3 @@ {
   },
-  "version": "1.0.0-prerelease.10",
+  "version": "1.0.0-prerelease.11",
   "publishConfig": {
@@ -28,7 +28,7 @@ "access": "public"
   "dependencies": {
-    "@patternfly/pfe-sass": "^1.0.0-prerelease.10",
-    "@patternfly/pfelement": "^1.0.0-prerelease.10"
+    "@patternfly/pfe-sass": "^1.0.0-prerelease.11",
+    "@patternfly/pfelement": "^1.0.0-prerelease.11"
   },
   "generator-pfelement-version": "0.5.5",
-  "gitHead": "b49b74a24aebabbf0987be9e694f119d63e1246e"
+  "gitHead": "95d307853357cfffe6afb7970d707a005f924f23"
 }

pfe-accordion.js

 import PFElement from '../pfelement/pfelement.js';
 
 /*
+ * @license
  * Copyright 2019 Red Hat, Inc.
@@ -78,26 +79,6 @@ *
 class PfeAccordion extends PFElement {
+
   get html() {
-    return `<style>:host {
-  display: block;
-  position: relative;
-  overflow: hidden;
-  margin: 0;
-  color: var(--pfe-broadcasted--color--text); }
-
-:host([on="dark"]) {
-  --pfe-broadcasted--color--text:               var(--pfe-theme--color--text--on-dark, #fff);
-  --pfe-broadcasted--color--ui-link:            var(--pfe-theme--color--ui-link--on-dark, #99ccff);
-  --pfe-broadcasted--color--ui-link--visited:   var(--pfe-theme--color--ui-link--on-dark--visited, #b38cd9);
-  --pfe-broadcasted--color--ui-link--hover:     var(--pfe-theme--color--ui-link--on-dark--hover, #cce6ff);
-  --pfe-broadcasted--color--ui-link--focus:     var(--pfe-theme--color--ui-link--on-dark--focus, #cce6ff); }
-
-:host([on="light"]) {
-  --pfe-broadcasted--color--text:               var(--pfe-theme--color--text, #333);
-  --pfe-broadcasted--color--ui-link:            var(--pfe-theme--color--ui-link, #06c);
-  --pfe-broadcasted--color--ui-link--visited:   var(--pfe-theme--color--ui-link--visited, rebeccapurple);
-  --pfe-broadcasted--color--ui-link--hover:     var(--pfe-theme--color--ui-link--hover, #003366);
-  --pfe-broadcasted--color--ui-link--focus:     var(--pfe-theme--color--ui-link--focus, #003366); }</style>
-<slot></slot>`;
+    return `<style>:host{display:block;position:relative;overflow:hidden;margin:0;color:var(--pfe-broadcasted--color--text)}:host([on=dark]){--pfe-broadcasted--color--text:var(--pfe-theme--color--text--on-dark, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--ui-link--on-dark, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--ui-link--on-dark--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--ui-link--on-dark--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--ui-link--on-dark--focus, #cce6ff)}:host([on=light]){--pfe-broadcasted--color--text:var(--pfe-theme--color--text, #333);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--ui-link, #06c);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--ui-link--visited, rebeccapurple);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--ui-link--hover, #003366);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--ui-link--focus, #003366)}</style><slot></slot>`;
   }
-
   static get tag() {
@@ -396,103 +377,6 @@ return "pfe-accordion";
 class PfeAccordionHeader extends PFElement {
+
   get html() {
-    return `<style>:host {
-  display: block; }
-  :host > * {
-    margin: 0; }
-  :host button {
-    --pfe-accordion--main:         transparent;
-    --pfe-accordion--aux:          var(--pfe-theme--color--surface--lightest--text, #333);
-    --pfe-accordion--BorderLeft:  var(--pfe-theme--surface--border-width-heavy, ) var(--pfe-theme--surface--border-style, solid) transparent;
-    --pfe-accordion--BorderRight: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) transparent;
-    --pfe-accordion--BorderBottom: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border--lightest, #ececec);
-    --pfe-accordion--BorderLeftColor--focus: var(--pfe-theme--color--surface--lightest--link, #06c);
-    -webkit-appearance: button;
-    margin: 0;
-    width: 100%;
-    height: auto;
-    font-family: inherit;
-    font-weight: var(--pfe-theme--font-weight--bold, 700);
-    text-align: left;
-    cursor: pointer;
-    z-index: 1;
-    position: relative;
-    font-size: calc(var(--pfe-theme--font-size, 16px) * 1.1);
-    line-height: var(--pfe-theme--line-height, 1.5);
-    color: var(--pfe-accordion--aux);
-    background-color: var(--pfe-accordion--main);
-    border-left: var(--pfe-accordion--BorderLeft);
-    border-right: var(--pfe-accordion--BorderRight);
-    border-bottom: var(--pfe-accordion--BorderBottom);
-    border-top: 0;
-    padding: var(--pfe-theme--container-spacer, 1rem) 50px var(--pfe-theme--container-spacer, 1rem) calc(var(--pfe-theme--container-spacer, 1rem) * 1.5); }
-    :host button:hover {
-      outline: none;
-      border-left-color: var(--pfe-accordion--BorderLeftColor--focus);
-      z-index: 2; }
-    :host button:focus {
-      outline: none;
-      z-index: 2;
-      text-decoration: underline;
-      text-decoration-color: var(--pfe-theme--color--surface--border--darker, #c6c6c6); }
-    :host button::-moz-focus-inner {
-      border: 0; }
-    :host button[aria-expanded="true"] {
-      --pfe-accordion--main:              var(--pfe-theme--color--surface--lightest, #fff);
-      --pfe-accordion--aux:               var(--pfe-theme--color--surface--lightest--text, #333);
-      --pfe-accordion--focus:             var(--pfe-theme--color--surface--lightest--link, #06c);
-      --pfe-accordion--BorderLeft:        var(--pfe-theme--surface--border-width-heavy, ) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--lightest--link, #06c);
-      --pfe-accordion--BorderRight:       var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border--lightest, #ececec);
-      position: relative;
-      display: block;
-      border-bottom: 0; }
-      :host button[aria-expanded="true"]::after {
-        content: "";
-        position: absolute;
-        top: calc((var(--pfe-theme--container-spacer, 1rem) * 0.75) + 0.55em);
-        display: block;
-        border-style: var(--pfe-theme--surface--border-style, solid);
-        height: 0.4em;
-        width: 0.4em;
-        text-align: center;
-        transition: transform 0.15s;
-        border-width: 0.1em 0.1em 0 0;
-        border-bottom: 0;
-        transform: rotate(-45deg);
-        right: calc(var(--pfe-theme--container-spacer, 1rem) * 1.5); }
-    :host button[aria-expanded="false"]::after {
-      content: "";
-      position: absolute;
-      top: calc((var(--pfe-theme--container-spacer, 1rem) * 0.75) + 0.55em);
-      display: block;
-      border-style: var(--pfe-theme--surface--border-style, solid);
-      height: 0.4em;
-      width: 0.4em;
-      text-align: center;
-      transition: transform 0.15s;
-      border-width: 0 0.1em 0.1em 0;
-      transform: rotate(45deg);
-      right: calc(var(--pfe-theme--container-spacer, 1rem) * 1.5); }
-
-:host(:first-child) button {
-  border-top: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border--lightest, #ececec); }
-
-:host(:last-of-type) button[aria-expanded="false"] {
-  border-bottom: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border--lightest, #ececec); }
-
-:host(.animating) {
-  transition: transform 0.3s var(--pfe-theme--animation-timing, cubic-bezier(0.465, 0.183, 0.153, 0.946)); }
-
-:host([on="dark"]) button {
-  --pfe-accordion--main:         transparent;
-  --pfe-accordion--aux:          var(--pfe-theme--color--surface--darkest--text, #fff);
-  --pfe-accordion--BorderLeftColor--focus: var(--pfe-theme--color--surface--lightest, #fff); }
-  :host([on="dark"]) button[aria-expanded="true"] {
-    --pfe-accordion--main:         var(--pfe-theme--color--surface--darker, #464646);
-    --pfe-accordion--aux:          var(--pfe-theme--color--surface--darkest--text, #fff);
-    --pfe-accordion--BorderLeft:   var(--pfe-theme--surface--border-width-heavy, ) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border-darkest, );
-    --pfe-accordion--BorderRight:  var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border-darkest, );
-    --pfe-accordion--BorderLeftColor--focus: var(--pfe-theme--color--surface--lightest, #fff); }</style>
-<button aria-expanded="false" role="tab"></button>`;
+    return `<style>:host{display:block}:host>*{margin:0}:host button{--pfe-accordion--main:transparent;--pfe-accordion--aux:var(--pfe-theme--color--surface--lightest--text, #333);--pfe-accordion--BorderLeft:var(--pfe-theme--surface--border-width-heavy, ) var(--pfe-theme--surface--border-style, solid) transparent;--pfe-accordion--BorderRight:var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) transparent;--pfe-accordion--BorderBottom:var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border--lightest, #ececec);--pfe-accordion--BorderLeftColor--focus:var(--pfe-theme--color--surface--lightest--link, #06c);-webkit-appearance:button;margin:0;width:100%;height:auto;font-family:inherit;font-weight:700;font-weight:var(--pfe-theme--font-weight--bold,700);text-align:left;cursor:pointer;z-index:1;position:relative;font-size:calc(16px * 1.1);font-size:calc(var(--pfe-theme--font-size,16px) * 1.1);line-height:1.5;line-height:var(--pfe-theme--line-height,1.5);color:var(--pfe-accordion--aux);background-color:var(--pfe-accordion--main);border-left:var(--pfe-accordion--BorderLeft);border-right:var(--pfe-accordion--BorderRight);border-bottom:var(--pfe-accordion--BorderBottom);border-top:0;padding:1rem 50px 1rem calc(1rem * 1.5);padding:var(--pfe-theme--container-spacer,1rem) 50px var(--pfe-theme--container-spacer,1rem) calc(var(--pfe-theme--container-spacer,1rem) * 1.5)}:host button:hover{outline:0;border-left-color:var(--pfe-accordion--BorderLeftColor--focus);z-index:2}:host button:focus{outline:0;z-index:2;text-decoration:underline;-webkit-text-decoration-color:#c6c6c6;text-decoration-color:#c6c6c6;-webkit-text-decoration-color:var(--pfe-theme--color--surface--border--darker,#c6c6c6);text-decoration-color:var(--pfe-theme--color--surface--border--darker,#c6c6c6)}:host button::-moz-focus-inner{border:0}:host button[aria-expanded=true]{--pfe-accordion--main:var(--pfe-theme--color--surface--lightest, #fff);--pfe-accordion--aux:var(--pfe-theme--color--surface--lightest--text, #333);--pfe-accordion--focus:var(--pfe-theme--color--surface--lightest--link, #06c);--pfe-accordion--BorderLeft:var(--pfe-theme--surface--border-width-heavy, ) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--lightest--link, #06c);--pfe-accordion--BorderRight:var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border--lightest, #ececec);position:relative;display:block;border-bottom:0}:host button[aria-expanded=true]::after{content:"";position:absolute;top:calc((1rem * .75) + .55em);top:calc((var(--pfe-theme--container-spacer,1rem) * .75) + .55em);display:block;border-style:solid;border-style:var(--pfe-theme--surface--border-style,solid);height:.4em;width:.4em;text-align:center;-webkit-transition:-webkit-transform .15s;transition:-webkit-transform .15s;transition:transform .15s;transition:transform .15s,-webkit-transform .15s;border-width:.1em .1em 0 0;border-bottom:0;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);right:calc(1rem * 1.5);right:calc(var(--pfe-theme--container-spacer,1rem) * 1.5)}:host button[aria-expanded=false]::after{content:"";position:absolute;top:calc((1rem * .75) + .55em);top:calc((var(--pfe-theme--container-spacer,1rem) * .75) + .55em);display:block;border-style:solid;border-style:var(--pfe-theme--surface--border-style,solid);height:.4em;width:.4em;text-align:center;-webkit-transition:-webkit-transform .15s;transition:-webkit-transform .15s;transition:transform .15s;transition:transform .15s,-webkit-transform .15s;border-width:0 .1em .1em 0;-webkit-transform:rotate(45deg);transform:rotate(45deg);right:calc(1rem * 1.5);right:calc(var(--pfe-theme--container-spacer,1rem) * 1.5)}:host(:first-child) button{border-top:1px solid #ececec;border-top:var(--pfe-theme--surface--border-width,1px) var(--pfe-theme--surface--border-style,solid) var(--pfe-theme--color--surface--border--lightest,#ececec)}:host(:last-of-type) button[aria-expanded=false]{border-bottom:1px solid #ececec;border-bottom:var(--pfe-theme--surface--border-width,1px) var(--pfe-theme--surface--border-style,solid) var(--pfe-theme--color--surface--border--lightest,#ececec)}:host(.animating){-webkit-transition:-webkit-transform .3s cubic-bezier(.465,.183,.153,.946);transition:-webkit-transform .3s cubic-bezier(.465,.183,.153,.946);transition:transform .3s cubic-bezier(.465,.183,.153,.946);transition:transform .3s cubic-bezier(.465,.183,.153,.946),-webkit-transform .3s cubic-bezier(.465,.183,.153,.946);-webkit-transition:-webkit-transform .3s var(--pfe-theme--animation-timing,cubic-bezier(.465,.183,.153,.946));transition:-webkit-transform .3s var(--pfe-theme--animation-timing,cubic-bezier(.465,.183,.153,.946));transition:transform .3s var(--pfe-theme--animation-timing,cubic-bezier(.465,.183,.153,.946));transition:transform .3s var(--pfe-theme--animation-timing,cubic-bezier(.465,.183,.153,.946)),-webkit-transform .3s var(--pfe-theme--animation-timing,cubic-bezier(.465,.183,.153,.946))}:host([on=dark]) button{--pfe-accordion--main:transparent;--pfe-accordion--aux:var(--pfe-theme--color--surface--darkest--text, #fff);--pfe-accordion--BorderLeftColor--focus:var(--pfe-theme--color--surface--lightest, #fff)}:host([on=dark]) button[aria-expanded=true]{--pfe-accordion--main:var(--pfe-theme--color--surface--darker, #464646);--pfe-accordion--aux:var(--pfe-theme--color--surface--darkest--text, #fff);--pfe-accordion--BorderLeft:var(--pfe-theme--surface--border-width-heavy, ) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border-darkest, );--pfe-accordion--BorderRight:var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border-darkest, );--pfe-accordion--BorderLeftColor--focus:var(--pfe-theme--color--surface--lightest, #fff)}</style><button aria-expanded="false" role="tab"></button>`;
   }
-
   static get tag() {
@@ -610,45 +494,5 @@ return "pfe-accordion-header";
 class PfeAccordionPanel extends PFElement {
+
   get html() {
-    return `<style>:host {
-  display: none;
-  overflow: hidden;
-  will-change: height;
-  border-color: transparent; }
-
-:host([expanded]) {
-  display: block;
-  position: relative;
-  border-right: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) transparent;
-  border-left: var(--pfe-theme--surface--border-width--heavy, 3px) var(--pfe-theme--surface--border-style, solid) transparent;
-  box-shadow: 0 5px var(--pfe-theme--surface--border-width--heavy, 3px) rgba(140, 140, 140, 0.35);
-  border-left-color: var(--pfe-theme--color--surface--lightest--link, #06c);
-  background-color: var(--pfe-theme--color--surface--lightest, #fff);
-  border-right-color: var(--pfe-theme--color--surface--border--lightest, #ececec);
-  border-bottom: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border--lightest, #ececec); }
-
-:host([on="dark"][expanded]) {
-  --pfe-broadcasted--color--text:               var(--pfe-theme--color--text--on-dark, #fff);
-  --pfe-broadcasted--color--ui-link:            var(--pfe-theme--color--ui-link--on-dark, #99ccff);
-  --pfe-broadcasted--color--ui-link--visited:   var(--pfe-theme--color--ui-link--on-dark--visited, #b38cd9);
-  --pfe-broadcasted--color--ui-link--hover:     var(--pfe-theme--color--ui-link--on-dark--hover, #cce6ff);
-  --pfe-broadcasted--color--ui-link--focus:     var(--pfe-theme--color--ui-link--on-dark--focus, #cce6ff);
-  border-right: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) transparent;
-  border-left: var(--pfe-theme--surface--border-width--heavy, 3px) var(--pfe-theme--surface--border-style, solid) transparent;
-  box-shadow: none;
-  background-color: var(--pfe-theme--color--surface--darker, #464646);
-  border-left-color: var(--pfe-theme--color--surface--darkest--text, #fff);
-  border-right-color: var(--pfe-theme--color--surface--darkest--text, #fff); }
-
-:host(.animating) {
-  display: block;
-  transition: height 0.3s ease-in-out; }
-
-.container {
-  box-sizing: border-box;
-  width: 100%;
-  padding: 0 3em var(--pfe-theme--container-spacer, 1rem) calc(var(--pfe-theme--container-spacer, 1rem) * 1.5); }
-
-:host(:last-of-type[expanded]) {
-  margin-bottom: 0; }</style>
-<div tabindex="-1" role="tabpanel">
+    return `<style>:host{display:none;overflow:hidden;will-change:height;border-color:transparent}:host([expanded]){display:block;position:relative;border-right:1px solid transparent;border-right:var(--pfe-theme--surface--border-width,1px) var(--pfe-theme--surface--border-style,solid) transparent;border-left:3px solid transparent;border-left:var(--pfe-theme--surface--border-width--heavy,3px) var(--pfe-theme--surface--border-style,solid) transparent;-webkit-box-shadow:0 5px 3px rgba(140,140,140,.35);box-shadow:0 5px 3px rgba(140,140,140,.35);-webkit-box-shadow:0 5px var(--pfe-theme--surface--border-width--heavy,3px) rgba(140,140,140,.35);box-shadow:0 5px var(--pfe-theme--surface--border-width--heavy,3px) rgba(140,140,140,.35);border-left-color:#06c;border-left-color:var(--pfe-theme--color--surface--lightest--link,#06c);background-color:#fff;background-color:var(--pfe-theme--color--surface--lightest,#fff);border-right-color:#ececec;border-right-color:var(--pfe-theme--color--surface--border--lightest,#ececec);border-bottom:1px solid #ececec;border-bottom:var(--pfe-theme--surface--border-width,1px) var(--pfe-theme--surface--border-style,solid) var(--pfe-theme--color--surface--border--lightest,#ececec)}:host([on=dark][expanded]){--pfe-broadcasted--color--text:var(--pfe-theme--color--text--on-dark, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--ui-link--on-dark, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--ui-link--on-dark--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--ui-link--on-dark--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--ui-link--on-dark--focus, #cce6ff);border-right:1px solid transparent;border-right:var(--pfe-theme--surface--border-width,1px) var(--pfe-theme--surface--border-style,solid) transparent;border-left:3px solid transparent;border-left:var(--pfe-theme--surface--border-width--heavy,3px) var(--pfe-theme--surface--border-style,solid) transparent;-webkit-box-shadow:none;box-shadow:none;background-color:#464646;background-color:var(--pfe-theme--color--surface--darker,#464646);border-left-color:#fff;border-left-color:var(--pfe-theme--color--surface--darkest--text,#fff);border-right-color:#fff;border-right-color:var(--pfe-theme--color--surface--darkest--text,#fff)}:host(.animating){display:block;-webkit-transition:height .3s ease-in-out;transition:height .3s ease-in-out}.container{-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;padding:0 3em 1rem calc(1rem * 1.5);padding:0 3em var(--pfe-theme--container-spacer,1rem) calc(var(--pfe-theme--container-spacer,1rem) * 1.5)}:host(:last-of-type[expanded]){margin-bottom:0}</style><div tabindex="-1" role="tabpanel">
   <div class="container">
@@ -659,3 +503,2 @@ <slot></slot>
   }
-
   static get tag() {
@@ -662,0 +505,0 @@ return "pfe-accordion-panel";

pfe-accordion.min.js

@@ -1,2 +0,26 @@
-import e from"../pfelement/pfelement.min.js";function t(){return Math.random().toString(36).substr(2,9)}Array.prototype.findIndex||Object.defineProperty(Array.prototype,"findIndex",{value:function(e){if(null==this)throw new TypeError('"this" is null or not defined');var t=Object(this),r=t.length>>>0;if("function"!=typeof e)throw new TypeError("predicate must be a function");for(var a=arguments[1],n=0;n<r;){var o=t[n];if(e.call(a,o,n,t))return n;n++}return-1}});class r extends e{get html(){return'<style>:host {\n  display: block;\n  position: relative;\n  overflow: hidden;\n  margin: 0;\n  color: var(--pfe-broadcasted--color--text); }\n\n:host([on="dark"]) {\n  --pfe-broadcasted--color--text:               var(--pfe-theme--color--text--on-dark, #fff);\n  --pfe-broadcasted--color--ui-link:            var(--pfe-theme--color--ui-link--on-dark, #99ccff);\n  --pfe-broadcasted--color--ui-link--visited:   var(--pfe-theme--color--ui-link--on-dark--visited, #b38cd9);\n  --pfe-broadcasted--color--ui-link--hover:     var(--pfe-theme--color--ui-link--on-dark--hover, #cce6ff);\n  --pfe-broadcasted--color--ui-link--focus:     var(--pfe-theme--color--ui-link--on-dark--focus, #cce6ff); }\n\n:host([on="light"]) {\n  --pfe-broadcasted--color--text:               var(--pfe-theme--color--text, #333);\n  --pfe-broadcasted--color--ui-link:            var(--pfe-theme--color--ui-link, #06c);\n  --pfe-broadcasted--color--ui-link--visited:   var(--pfe-theme--color--ui-link--visited, rebeccapurple);\n  --pfe-broadcasted--color--ui-link--hover:     var(--pfe-theme--color--ui-link--hover, #003366);\n  --pfe-broadcasted--color--ui-link--focus:     var(--pfe-theme--color--ui-link--focus, #003366); }</style>\n<slot></slot>'}static get tag(){return"pfe-accordion"}get styleUrl(){return"pfe-accordion.scss"}get templateUrl(){return"pfe-accordion.html"}static get observedAttributes(){return["theme","color","on"]}static get cascadingAttributes(){return{color:"pfe-accordion-header, pfe-accordion-panel",on:"pfe-accordion-header, pfe-accordion-panel"}}constructor(){super(r)}connectedCallback(){super.connectedCallback(),this.setAttribute("role","presentation"),this.setAttribute("defined",""),this.addEventListener(`${r.tag}:change`,this._changeHandler),this.addEventListener("keydown",this._keydownHandler),Promise.all([customElements.whenDefined(a.tag),customElements.whenDefined(n.tag)]).then(this._linkPanels())}disconnectedCallback(){this.removeEventListener(`${r.tag}:change`,this._changeHandler),this.removeEventListener("keydown",this._keydownHandler)}attributeChangedCallback(e,t,r){if(super.attributeChangedCallback(e,t,r),"color"===e){const e=this.querySelectorAll(a.tag);"striped"===r?[...e].forEach((e,t)=>{const r=t%2?"even":"odd";e.classList.add(r)}):[...e].forEach((e,t)=>{e.classList.remove("even","odd")})}}toggle(e){const t=this._allHeaders(),r=this._allPanels(),a=t[e],n=r[e];a&&n&&(a.expanded?(this._collapseHeader(a),this._collapsePanel(n)):(this._expandHeader(a),this._expandPanel(n)))}expand(e){const t=this._allHeaders(),r=this._allPanels(),a=t[e],n=r[e];a&&n&&(this._expandHeader(a),this._expandPanel(n))}expandAll(){const e=this._allHeaders(),t=this._allPanels();e.forEach(e=>this._expandHeader(e)),t.forEach(e=>this._expandPanel(e))}collapse(e){const t=this._allHeaders(),r=this._allPanels(),a=t[e],n=r[e];a&&n&&(this._collapseHeader(a),this._collapsePanel(n))}collapseAll(){const e=this._allHeaders(),t=this._allPanels();e.forEach(e=>this._collapseHeader(e)),t.forEach(e=>this._collapsePanel(e))}_linkPanels(){this._allHeaders().forEach(e=>{const t=this._panelForHeader(e);e.setAttribute("aria-controls",t.pfeId),t.setAttribute("aria-labelledby",e.pfeId)})}_changeHandler(e){if(this.classList.contains("animating"))return;const t=e.target,r=e.target.nextElementSibling;e.detail.expanded?(this._expandHeader(t),this._expandPanel(r)):(this._collapseHeader(t),this._collapsePanel(r))}_toggle(e,t){}_expandHeader(e){e.expanded=!0}_expandPanel(e){if(e.expanded)return;e.expanded=!0;const t=e.getBoundingClientRect().height;this._animate(e,0,t)}_collapseHeader(e){e.expanded=!1}_collapsePanel(e){if(!e.expanded)return;const t=e.getBoundingClientRect().height;e.expanded=!1,this._animate(e,t,0)}_animate(e,t,r){e.classList.add("animating"),e.style.height=`${t}px`,requestAnimationFrame(()=>{requestAnimationFrame(()=>{e.style.height=`${r}px`,e.classList.add("animating"),e.addEventListener("transitionend",this._transitionEndHandler)})})}_keydownHandler(e){const t=e.target;if(!this._isHeader(t))return;let r;switch(e.key){case"ArrowDown":case"Down":case"ArrowRight":case"Right":r=this._nextHeader();break;case"ArrowUp":case"Up":case"ArrowLeft":case"Left":r=this._previousHeader();break;case"Home":r=this._firstHeader();break;case"End":r=this._lastHeader();break;default:return}r.shadowRoot.querySelector("button").focus()}_transitionEndHandler(e){e.target.style.height="",e.target.classList.remove("animating"),e.target.removeEventListener("transitionend",this._transitionEndHandler)}_allHeaders(){return[...this.querySelectorAll(a.tag)]}_allPanels(){return[...this.querySelectorAll(n.tag)]}_panelForHeader(e){const t=e.nextElementSibling;if(t.tagName.toLowerCase()===n.tag)return t;console.error(`${r.tag}: Sibling element to a header needs to be a panel`)}_previousHeader(){const e=this._allHeaders();let t=e.findIndex(e=>e===document.activeElement)-1;return e[(t+e.length)%e.length]}_nextHeader(){const e=this._allHeaders();let t=e.findIndex(e=>e===document.activeElement)+1;return e[t%e.length]}_firstHeader(){return this._allHeaders()[0]}_lastHeader(){const e=this._allHeaders();return e[e.length-1]}_isHeader(e){return e.tagName.toLowerCase()===a.tag}}class a extends e{get html(){return'<style>:host {\n  display: block; }\n  :host > * {\n    margin: 0; }\n  :host button {\n    --pfe-accordion--main:         transparent;\n    --pfe-accordion--aux:          var(--pfe-theme--color--surface--lightest--text, #333);\n    --pfe-accordion--BorderLeft:  var(--pfe-theme--surface--border-width-heavy, ) var(--pfe-theme--surface--border-style, solid) transparent;\n    --pfe-accordion--BorderRight: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) transparent;\n    --pfe-accordion--BorderBottom: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border--lightest, #ececec);\n    --pfe-accordion--BorderLeftColor--focus: var(--pfe-theme--color--surface--lightest--link, #06c);\n    -webkit-appearance: button;\n    margin: 0;\n    width: 100%;\n    height: auto;\n    font-family: inherit;\n    font-weight: var(--pfe-theme--font-weight--bold, 700);\n    text-align: left;\n    cursor: pointer;\n    z-index: 1;\n    position: relative;\n    font-size: calc(var(--pfe-theme--font-size, 16px) * 1.1);\n    line-height: var(--pfe-theme--line-height, 1.5);\n    color: var(--pfe-accordion--aux);\n    background-color: var(--pfe-accordion--main);\n    border-left: var(--pfe-accordion--BorderLeft);\n    border-right: var(--pfe-accordion--BorderRight);\n    border-bottom: var(--pfe-accordion--BorderBottom);\n    border-top: 0;\n    padding: var(--pfe-theme--container-spacer, 1rem) 50px var(--pfe-theme--container-spacer, 1rem) calc(var(--pfe-theme--container-spacer, 1rem) * 1.5); }\n    :host button:hover {\n      outline: none;\n      border-left-color: var(--pfe-accordion--BorderLeftColor--focus);\n      z-index: 2; }\n    :host button:focus {\n      outline: none;\n      z-index: 2;\n      text-decoration: underline;\n      text-decoration-color: var(--pfe-theme--color--surface--border--darker, #c6c6c6); }\n    :host button::-moz-focus-inner {\n      border: 0; }\n    :host button[aria-expanded="true"] {\n      --pfe-accordion--main:              var(--pfe-theme--color--surface--lightest, #fff);\n      --pfe-accordion--aux:               var(--pfe-theme--color--surface--lightest--text, #333);\n      --pfe-accordion--focus:             var(--pfe-theme--color--surface--lightest--link, #06c);\n      --pfe-accordion--BorderLeft:        var(--pfe-theme--surface--border-width-heavy, ) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--lightest--link, #06c);\n      --pfe-accordion--BorderRight:       var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border--lightest, #ececec);\n      position: relative;\n      display: block;\n      border-bottom: 0; }\n      :host button[aria-expanded="true"]::after {\n        content: "";\n        position: absolute;\n        top: calc((var(--pfe-theme--container-spacer, 1rem) * 0.75) + 0.55em);\n        display: block;\n        border-style: var(--pfe-theme--surface--border-style, solid);\n        height: 0.4em;\n        width: 0.4em;\n        text-align: center;\n        transition: transform 0.15s;\n        border-width: 0.1em 0.1em 0 0;\n        border-bottom: 0;\n        transform: rotate(-45deg);\n        right: calc(var(--pfe-theme--container-spacer, 1rem) * 1.5); }\n    :host button[aria-expanded="false"]::after {\n      content: "";\n      position: absolute;\n      top: calc((var(--pfe-theme--container-spacer, 1rem) * 0.75) + 0.55em);\n      display: block;\n      border-style: var(--pfe-theme--surface--border-style, solid);\n      height: 0.4em;\n      width: 0.4em;\n      text-align: center;\n      transition: transform 0.15s;\n      border-width: 0 0.1em 0.1em 0;\n      transform: rotate(45deg);\n      right: calc(var(--pfe-theme--container-spacer, 1rem) * 1.5); }\n\n:host(:first-child) button {\n  border-top: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border--lightest, #ececec); }\n\n:host(:last-of-type) button[aria-expanded="false"] {\n  border-bottom: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border--lightest, #ececec); }\n\n:host(.animating) {\n  transition: transform 0.3s var(--pfe-theme--animation-timing, cubic-bezier(0.465, 0.183, 0.153, 0.946)); }\n\n:host([on="dark"]) button {\n  --pfe-accordion--main:         transparent;\n  --pfe-accordion--aux:          var(--pfe-theme--color--surface--darkest--text, #fff);\n  --pfe-accordion--BorderLeftColor--focus: var(--pfe-theme--color--surface--lightest, #fff); }\n  :host([on="dark"]) button[aria-expanded="true"] {\n    --pfe-accordion--main:         var(--pfe-theme--color--surface--darker, #464646);\n    --pfe-accordion--aux:          var(--pfe-theme--color--surface--darkest--text, #fff);\n    --pfe-accordion--BorderLeft:   var(--pfe-theme--surface--border-width-heavy, ) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border-darkest, );\n    --pfe-accordion--BorderRight:  var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border-darkest, );\n    --pfe-accordion--BorderLeftColor--focus: var(--pfe-theme--color--surface--lightest, #fff); }</style>\n<button aria-expanded="false" role="tab"></button>'}static get tag(){return"pfe-accordion-header"}get styleUrl(){return"pfe-accordion-header.scss"}get templateUrl(){return"pfe-accordion-header.html"}get pfeId(){return this.getAttribute("pfe-id")}set pfeId(e){e&&this.setAttribute("pfe-id",e)}static get observedAttributes(){return["aria-expanded"]}constructor(){super(a),this._clickHandler=this._clickHandler.bind(this)}connectedCallback(){super.connectedCallback(),this.hasAttribute("role")||this.setAttribute("role","header"),this.pfeId||(this.pfeId=`${a.tag}-${t()}`),this.button=this.shadowRoot.querySelector("button");const e=this.children[0];let r=!1;if(e){switch(e.tagName){case"H1":case"H2":case"H3":case"H4":case"H5":case"H6":r=!0}const t=document.createElement(e.tagName);this.button.innerText=e.innerText,t.appendChild(this.button),this.shadowRoot.appendChild(t)}else this.button.innerText=this.textContent.trim();r||console.warn(`${a.tag}: The first child in the light DOM must be a Header level tag (h1, h2, h3, h4, h5, or h6)`),this.addEventListener("click",this._clickHandler)}disconnectedCallback(){this.removeEventListener("click",this._clickHandler)}get expanded(){return this.hasAttribute("aria-expanded")}set expanded(e){(e=Boolean(e))?(this.setAttribute("aria-expanded",!0),this.button.setAttribute("aria-expanded",!0)):(this.removeAttribute("aria-expanded"),this.button.setAttribute("aria-expanded",!1))}_clickHandler(e){this.dispatchEvent(new CustomEvent(`${r.tag}:change`,{detail:{expanded:!this.expanded},bubbles:!0}))}}class n extends e{get html(){return'<style>:host {\n  display: none;\n  overflow: hidden;\n  will-change: height;\n  border-color: transparent; }\n\n:host([expanded]) {\n  display: block;\n  position: relative;\n  border-right: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) transparent;\n  border-left: var(--pfe-theme--surface--border-width--heavy, 3px) var(--pfe-theme--surface--border-style, solid) transparent;\n  box-shadow: 0 5px var(--pfe-theme--surface--border-width--heavy, 3px) rgba(140, 140, 140, 0.35);\n  border-left-color: var(--pfe-theme--color--surface--lightest--link, #06c);\n  background-color: var(--pfe-theme--color--surface--lightest, #fff);\n  border-right-color: var(--pfe-theme--color--surface--border--lightest, #ececec);\n  border-bottom: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border--lightest, #ececec); }\n\n:host([on="dark"][expanded]) {\n  --pfe-broadcasted--color--text:               var(--pfe-theme--color--text--on-dark, #fff);\n  --pfe-broadcasted--color--ui-link:            var(--pfe-theme--color--ui-link--on-dark, #99ccff);\n  --pfe-broadcasted--color--ui-link--visited:   var(--pfe-theme--color--ui-link--on-dark--visited, #b38cd9);\n  --pfe-broadcasted--color--ui-link--hover:     var(--pfe-theme--color--ui-link--on-dark--hover, #cce6ff);\n  --pfe-broadcasted--color--ui-link--focus:     var(--pfe-theme--color--ui-link--on-dark--focus, #cce6ff);\n  border-right: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) transparent;\n  border-left: var(--pfe-theme--surface--border-width--heavy, 3px) var(--pfe-theme--surface--border-style, solid) transparent;\n  box-shadow: none;\n  background-color: var(--pfe-theme--color--surface--darker, #464646);\n  border-left-color: var(--pfe-theme--color--surface--darkest--text, #fff);\n  border-right-color: var(--pfe-theme--color--surface--darkest--text, #fff); }\n\n:host(.animating) {\n  display: block;\n  transition: height 0.3s ease-in-out; }\n\n.container {\n  box-sizing: border-box;\n  width: 100%;\n  padding: 0 3em var(--pfe-theme--container-spacer, 1rem) calc(var(--pfe-theme--container-spacer, 1rem) * 1.5); }\n\n:host(:last-of-type[expanded]) {\n  margin-bottom: 0; }</style>\n<div tabindex="-1" role="tabpanel">\n  <div class="container">\n    <slot></slot>\n  </div>\n</div>'}static get tag(){return"pfe-accordion-panel"}get styleUrl(){return"pfe-accordion-panel.scss"}get templateUrl(){return"pfe-accordion-panel.html"}get pfeId(){return this.getAttribute("pfe-id")}set pfeId(e){e&&this.setAttribute("pfe-id",e)}constructor(){super(n)}connectedCallback(){super.connectedCallback(),this.hasAttribute("role")||this.setAttribute("role","region"),this.pfeId||(this.pfeId=`${n.tag}-${t()}`)}get expanded(){return this.hasAttribute("expanded")}set expanded(e){Boolean(e)?this.setAttribute("expanded",""):this.removeAttribute("expanded")}}e.create(a),e.create(n),e.create(r);export default r;
+import e from"../pfelement/pfelement.min.js";function t(){return Math.random().toString(36).substr(2,9)}
+/*
+ * @license
+ * Copyright 2019 Red Hat, Inc.
+ * 
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ * 
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * 
+*/
+Array.prototype.findIndex||Object.defineProperty(Array.prototype,"findIndex",{value:function(e){if(null==this)throw new TypeError('"this" is null or not defined');var t=Object(this),r=t.length>>>0;if("function"!=typeof e)throw new TypeError("predicate must be a function");for(var a=arguments[1],o=0;o<r;){var i=t[o];if(e.call(a,i,o,t))return o;o++}return-1}});class r extends e{get html(){return"<style>:host{display:block;position:relative;overflow:hidden;margin:0;color:var(--pfe-broadcasted--color--text)}:host([on=dark]){--pfe-broadcasted--color--text:var(--pfe-theme--color--text--on-dark, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--ui-link--on-dark, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--ui-link--on-dark--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--ui-link--on-dark--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--ui-link--on-dark--focus, #cce6ff)}:host([on=light]){--pfe-broadcasted--color--text:var(--pfe-theme--color--text, #333);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--ui-link, #06c);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--ui-link--visited, rebeccapurple);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--ui-link--hover, #003366);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--ui-link--focus, #003366)}</style><slot></slot>"}static get tag(){return"pfe-accordion"}get styleUrl(){return"pfe-accordion.scss"}get templateUrl(){return"pfe-accordion.html"}static get observedAttributes(){return["theme","color","on"]}static get cascadingAttributes(){return{color:"pfe-accordion-header, pfe-accordion-panel",on:"pfe-accordion-header, pfe-accordion-panel"}}constructor(){super(r)}connectedCallback(){super.connectedCallback(),this.setAttribute("role","presentation"),this.setAttribute("defined",""),this.addEventListener(`${r.tag}:change`,this._changeHandler),this.addEventListener("keydown",this._keydownHandler),Promise.all([customElements.whenDefined(a.tag),customElements.whenDefined(o.tag)]).then(this._linkPanels())}disconnectedCallback(){this.removeEventListener(`${r.tag}:change`,this._changeHandler),this.removeEventListener("keydown",this._keydownHandler)}attributeChangedCallback(e,t,r){if(super.attributeChangedCallback(e,t,r),"color"===e){const e=this.querySelectorAll(a.tag);"striped"===r?[...e].forEach((e,t)=>{const r=t%2?"even":"odd";e.classList.add(r)}):[...e].forEach((e,t)=>{e.classList.remove("even","odd")})}}toggle(e){const t=this._allHeaders(),r=this._allPanels(),a=t[e],o=r[e];a&&o&&(a.expanded?(this._collapseHeader(a),this._collapsePanel(o)):(this._expandHeader(a),this._expandPanel(o)))}expand(e){const t=this._allHeaders(),r=this._allPanels(),a=t[e],o=r[e];a&&o&&(this._expandHeader(a),this._expandPanel(o))}expandAll(){const e=this._allHeaders(),t=this._allPanels();e.forEach(e=>this._expandHeader(e)),t.forEach(e=>this._expandPanel(e))}collapse(e){const t=this._allHeaders(),r=this._allPanels(),a=t[e],o=r[e];a&&o&&(this._collapseHeader(a),this._collapsePanel(o))}collapseAll(){const e=this._allHeaders(),t=this._allPanels();e.forEach(e=>this._collapseHeader(e)),t.forEach(e=>this._collapsePanel(e))}_linkPanels(){this._allHeaders().forEach(e=>{const t=this._panelForHeader(e);e.setAttribute("aria-controls",t.pfeId),t.setAttribute("aria-labelledby",e.pfeId)})}_changeHandler(e){if(this.classList.contains("animating"))return;const t=e.target,r=e.target.nextElementSibling;e.detail.expanded?(this._expandHeader(t),this._expandPanel(r)):(this._collapseHeader(t),this._collapsePanel(r))}_toggle(e,t){}_expandHeader(e){e.expanded=!0}_expandPanel(e){if(e.expanded)return;e.expanded=!0;const t=e.getBoundingClientRect().height;this._animate(e,0,t)}_collapseHeader(e){e.expanded=!1}_collapsePanel(e){if(!e.expanded)return;const t=e.getBoundingClientRect().height;e.expanded=!1,this._animate(e,t,0)}_animate(e,t,r){e.classList.add("animating"),e.style.height=`${t}px`,requestAnimationFrame(()=>{requestAnimationFrame(()=>{e.style.height=`${r}px`,e.classList.add("animating"),e.addEventListener("transitionend",this._transitionEndHandler)})})}_keydownHandler(e){const t=e.target;if(!this._isHeader(t))return;let r;switch(e.key){case"ArrowDown":case"Down":case"ArrowRight":case"Right":r=this._nextHeader();break;case"ArrowUp":case"Up":case"ArrowLeft":case"Left":r=this._previousHeader();break;case"Home":r=this._firstHeader();break;case"End":r=this._lastHeader();break;default:return}r.shadowRoot.querySelector("button").focus()}_transitionEndHandler(e){e.target.style.height="",e.target.classList.remove("animating"),e.target.removeEventListener("transitionend",this._transitionEndHandler)}_allHeaders(){return[...this.querySelectorAll(a.tag)]}_allPanels(){return[...this.querySelectorAll(o.tag)]}_panelForHeader(e){const t=e.nextElementSibling;if(t.tagName.toLowerCase()===o.tag)return t;console.error(`${r.tag}: Sibling element to a header needs to be a panel`)}_previousHeader(){const e=this._allHeaders();let t=e.findIndex(e=>e===document.activeElement)-1;return e[(t+e.length)%e.length]}_nextHeader(){const e=this._allHeaders();let t=e.findIndex(e=>e===document.activeElement)+1;return e[t%e.length]}_firstHeader(){return this._allHeaders()[0]}_lastHeader(){const e=this._allHeaders();return e[e.length-1]}_isHeader(e){return e.tagName.toLowerCase()===a.tag}}class a extends e{get html(){return'<style>:host{display:block}:host>*{margin:0}:host button{--pfe-accordion--main:transparent;--pfe-accordion--aux:var(--pfe-theme--color--surface--lightest--text, #333);--pfe-accordion--BorderLeft:var(--pfe-theme--surface--border-width-heavy, ) var(--pfe-theme--surface--border-style, solid) transparent;--pfe-accordion--BorderRight:var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) transparent;--pfe-accordion--BorderBottom:var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border--lightest, #ececec);--pfe-accordion--BorderLeftColor--focus:var(--pfe-theme--color--surface--lightest--link, #06c);-webkit-appearance:button;margin:0;width:100%;height:auto;font-family:inherit;font-weight:700;font-weight:var(--pfe-theme--font-weight--bold,700);text-align:left;cursor:pointer;z-index:1;position:relative;font-size:calc(16px * 1.1);font-size:calc(var(--pfe-theme--font-size,16px) * 1.1);line-height:1.5;line-height:var(--pfe-theme--line-height,1.5);color:var(--pfe-accordion--aux);background-color:var(--pfe-accordion--main);border-left:var(--pfe-accordion--BorderLeft);border-right:var(--pfe-accordion--BorderRight);border-bottom:var(--pfe-accordion--BorderBottom);border-top:0;padding:1rem 50px 1rem calc(1rem * 1.5);padding:var(--pfe-theme--container-spacer,1rem) 50px var(--pfe-theme--container-spacer,1rem) calc(var(--pfe-theme--container-spacer,1rem) * 1.5)}:host button:hover{outline:0;border-left-color:var(--pfe-accordion--BorderLeftColor--focus);z-index:2}:host button:focus{outline:0;z-index:2;text-decoration:underline;-webkit-text-decoration-color:#c6c6c6;text-decoration-color:#c6c6c6;-webkit-text-decoration-color:var(--pfe-theme--color--surface--border--darker,#c6c6c6);text-decoration-color:var(--pfe-theme--color--surface--border--darker,#c6c6c6)}:host button::-moz-focus-inner{border:0}:host button[aria-expanded=true]{--pfe-accordion--main:var(--pfe-theme--color--surface--lightest, #fff);--pfe-accordion--aux:var(--pfe-theme--color--surface--lightest--text, #333);--pfe-accordion--focus:var(--pfe-theme--color--surface--lightest--link, #06c);--pfe-accordion--BorderLeft:var(--pfe-theme--surface--border-width-heavy, ) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--lightest--link, #06c);--pfe-accordion--BorderRight:var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border--lightest, #ececec);position:relative;display:block;border-bottom:0}:host button[aria-expanded=true]::after{content:"";position:absolute;top:calc((1rem * .75) + .55em);top:calc((var(--pfe-theme--container-spacer,1rem) * .75) + .55em);display:block;border-style:solid;border-style:var(--pfe-theme--surface--border-style,solid);height:.4em;width:.4em;text-align:center;-webkit-transition:-webkit-transform .15s;transition:-webkit-transform .15s;transition:transform .15s;transition:transform .15s,-webkit-transform .15s;border-width:.1em .1em 0 0;border-bottom:0;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);right:calc(1rem * 1.5);right:calc(var(--pfe-theme--container-spacer,1rem) * 1.5)}:host button[aria-expanded=false]::after{content:"";position:absolute;top:calc((1rem * .75) + .55em);top:calc((var(--pfe-theme--container-spacer,1rem) * .75) + .55em);display:block;border-style:solid;border-style:var(--pfe-theme--surface--border-style,solid);height:.4em;width:.4em;text-align:center;-webkit-transition:-webkit-transform .15s;transition:-webkit-transform .15s;transition:transform .15s;transition:transform .15s,-webkit-transform .15s;border-width:0 .1em .1em 0;-webkit-transform:rotate(45deg);transform:rotate(45deg);right:calc(1rem * 1.5);right:calc(var(--pfe-theme--container-spacer,1rem) * 1.5)}:host(:first-child) button{border-top:1px solid #ececec;border-top:var(--pfe-theme--surface--border-width,1px) var(--pfe-theme--surface--border-style,solid) var(--pfe-theme--color--surface--border--lightest,#ececec)}:host(:last-of-type) button[aria-expanded=false]{border-bottom:1px solid #ececec;border-bottom:var(--pfe-theme--surface--border-width,1px) var(--pfe-theme--surface--border-style,solid) var(--pfe-theme--color--surface--border--lightest,#ececec)}:host(.animating){-webkit-transition:-webkit-transform .3s cubic-bezier(.465,.183,.153,.946);transition:-webkit-transform .3s cubic-bezier(.465,.183,.153,.946);transition:transform .3s cubic-bezier(.465,.183,.153,.946);transition:transform .3s cubic-bezier(.465,.183,.153,.946),-webkit-transform .3s cubic-bezier(.465,.183,.153,.946);-webkit-transition:-webkit-transform .3s var(--pfe-theme--animation-timing,cubic-bezier(.465,.183,.153,.946));transition:-webkit-transform .3s var(--pfe-theme--animation-timing,cubic-bezier(.465,.183,.153,.946));transition:transform .3s var(--pfe-theme--animation-timing,cubic-bezier(.465,.183,.153,.946));transition:transform .3s var(--pfe-theme--animation-timing,cubic-bezier(.465,.183,.153,.946)),-webkit-transform .3s var(--pfe-theme--animation-timing,cubic-bezier(.465,.183,.153,.946))}:host([on=dark]) button{--pfe-accordion--main:transparent;--pfe-accordion--aux:var(--pfe-theme--color--surface--darkest--text, #fff);--pfe-accordion--BorderLeftColor--focus:var(--pfe-theme--color--surface--lightest, #fff)}:host([on=dark]) button[aria-expanded=true]{--pfe-accordion--main:var(--pfe-theme--color--surface--darker, #464646);--pfe-accordion--aux:var(--pfe-theme--color--surface--darkest--text, #fff);--pfe-accordion--BorderLeft:var(--pfe-theme--surface--border-width-heavy, ) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border-darkest, );--pfe-accordion--BorderRight:var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border-darkest, );--pfe-accordion--BorderLeftColor--focus:var(--pfe-theme--color--surface--lightest, #fff)}</style><button aria-expanded="false" role="tab"></button>'}static get tag(){return"pfe-accordion-header"}get styleUrl(){return"pfe-accordion-header.scss"}get templateUrl(){return"pfe-accordion-header.html"}get pfeId(){return this.getAttribute("pfe-id")}set pfeId(e){e&&this.setAttribute("pfe-id",e)}static get observedAttributes(){return["aria-expanded"]}constructor(){super(a),this._clickHandler=this._clickHandler.bind(this)}connectedCallback(){super.connectedCallback(),this.hasAttribute("role")||this.setAttribute("role","header"),this.pfeId||(this.pfeId=`${a.tag}-${t()}`),this.button=this.shadowRoot.querySelector("button");const e=this.children[0];let r=!1;if(e){switch(e.tagName){case"H1":case"H2":case"H3":case"H4":case"H5":case"H6":r=!0}const t=document.createElement(e.tagName);this.button.innerText=e.innerText,t.appendChild(this.button),this.shadowRoot.appendChild(t)}else this.button.innerText=this.textContent.trim();r||console.warn(`${a.tag}: The first child in the light DOM must be a Header level tag (h1, h2, h3, h4, h5, or h6)`),this.addEventListener("click",this._clickHandler)}disconnectedCallback(){this.removeEventListener("click",this._clickHandler)}get expanded(){return this.hasAttribute("aria-expanded")}set expanded(e){(e=Boolean(e))?(this.setAttribute("aria-expanded",!0),this.button.setAttribute("aria-expanded",!0)):(this.removeAttribute("aria-expanded"),this.button.setAttribute("aria-expanded",!1))}_clickHandler(e){this.dispatchEvent(new CustomEvent(`${r.tag}:change`,{detail:{expanded:!this.expanded},bubbles:!0}))}}class o extends e{get html(){return'<style>:host{display:none;overflow:hidden;will-change:height;border-color:transparent}:host([expanded]){display:block;position:relative;border-right:1px solid transparent;border-right:var(--pfe-theme--surface--border-width,1px) var(--pfe-theme--surface--border-style,solid) transparent;border-left:3px solid transparent;border-left:var(--pfe-theme--surface--border-width--heavy,3px) var(--pfe-theme--surface--border-style,solid) transparent;-webkit-box-shadow:0 5px 3px rgba(140,140,140,.35);box-shadow:0 5px 3px rgba(140,140,140,.35);-webkit-box-shadow:0 5px var(--pfe-theme--surface--border-width--heavy,3px) rgba(140,140,140,.35);box-shadow:0 5px var(--pfe-theme--surface--border-width--heavy,3px) rgba(140,140,140,.35);border-left-color:#06c;border-left-color:var(--pfe-theme--color--surface--lightest--link,#06c);background-color:#fff;background-color:var(--pfe-theme--color--surface--lightest,#fff);border-right-color:#ececec;border-right-color:var(--pfe-theme--color--surface--border--lightest,#ececec);border-bottom:1px solid #ececec;border-bottom:var(--pfe-theme--surface--border-width,1px) var(--pfe-theme--surface--border-style,solid) var(--pfe-theme--color--surface--border--lightest,#ececec)}:host([on=dark][expanded]){--pfe-broadcasted--color--text:var(--pfe-theme--color--text--on-dark, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--ui-link--on-dark, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--ui-link--on-dark--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--ui-link--on-dark--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--ui-link--on-dark--focus, #cce6ff);border-right:1px solid transparent;border-right:var(--pfe-theme--surface--border-width,1px) var(--pfe-theme--surface--border-style,solid) transparent;border-left:3px solid transparent;border-left:var(--pfe-theme--surface--border-width--heavy,3px) var(--pfe-theme--surface--border-style,solid) transparent;-webkit-box-shadow:none;box-shadow:none;background-color:#464646;background-color:var(--pfe-theme--color--surface--darker,#464646);border-left-color:#fff;border-left-color:var(--pfe-theme--color--surface--darkest--text,#fff);border-right-color:#fff;border-right-color:var(--pfe-theme--color--surface--darkest--text,#fff)}:host(.animating){display:block;-webkit-transition:height .3s ease-in-out;transition:height .3s ease-in-out}.container{-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;padding:0 3em 1rem calc(1rem * 1.5);padding:0 3em var(--pfe-theme--container-spacer,1rem) calc(var(--pfe-theme--container-spacer,1rem) * 1.5)}:host(:last-of-type[expanded]){margin-bottom:0}</style><div tabindex="-1" role="tabpanel">\n  <div class="container">\n    <slot></slot>\n  </div>\n</div>'}static get tag(){return"pfe-accordion-panel"}get styleUrl(){return"pfe-accordion-panel.scss"}get templateUrl(){return"pfe-accordion-panel.html"}get pfeId(){return this.getAttribute("pfe-id")}set pfeId(e){e&&this.setAttribute("pfe-id",e)}constructor(){super(o)}connectedCallback(){super.connectedCallback(),this.hasAttribute("role")||this.setAttribute("role","region"),this.pfeId||(this.pfeId=`${o.tag}-${t()}`)}get expanded(){return this.hasAttribute("expanded")}set expanded(e){Boolean(e)?this.setAttribute("expanded",""):this.removeAttribute("expanded")}}e.create(a),e.create(o),e.create(r);export default r;
 //# sourceMappingURL=pfe-accordion.min.js.map

pfe-accordion.umd.js

@@ -93,2 +93,3 @@ (function (global, factory) {
   /*
+   * @license
    * Copyright 2019 Red Hat, Inc.
@@ -170,3 +171,3 @@ *
       get: function get$$1() {
-        return '<style>:host {\n  display: block;\n  position: relative;\n  overflow: hidden;\n  margin: 0;\n  color: var(--pfe-broadcasted--color--text); }\n\n:host([on="dark"]) {\n  --pfe-broadcasted--color--text:               var(--pfe-theme--color--text--on-dark, #fff);\n  --pfe-broadcasted--color--ui-link:            var(--pfe-theme--color--ui-link--on-dark, #99ccff);\n  --pfe-broadcasted--color--ui-link--visited:   var(--pfe-theme--color--ui-link--on-dark--visited, #b38cd9);\n  --pfe-broadcasted--color--ui-link--hover:     var(--pfe-theme--color--ui-link--on-dark--hover, #cce6ff);\n  --pfe-broadcasted--color--ui-link--focus:     var(--pfe-theme--color--ui-link--on-dark--focus, #cce6ff); }\n\n:host([on="light"]) {\n  --pfe-broadcasted--color--text:               var(--pfe-theme--color--text, #333);\n  --pfe-broadcasted--color--ui-link:            var(--pfe-theme--color--ui-link, #06c);\n  --pfe-broadcasted--color--ui-link--visited:   var(--pfe-theme--color--ui-link--visited, rebeccapurple);\n  --pfe-broadcasted--color--ui-link--hover:     var(--pfe-theme--color--ui-link--hover, #003366);\n  --pfe-broadcasted--color--ui-link--focus:     var(--pfe-theme--color--ui-link--focus, #003366); }</style>\n<slot></slot>';
+        return '<style>:host{display:block;position:relative;overflow:hidden;margin:0;color:var(--pfe-broadcasted--color--text)}:host([on=dark]){--pfe-broadcasted--color--text:var(--pfe-theme--color--text--on-dark, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--ui-link--on-dark, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--ui-link--on-dark--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--ui-link--on-dark--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--ui-link--on-dark--focus, #cce6ff)}:host([on=light]){--pfe-broadcasted--color--text:var(--pfe-theme--color--text, #333);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--ui-link, #06c);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--ui-link--visited, rebeccapurple);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--ui-link--hover, #003366);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--ui-link--focus, #003366)}</style><slot></slot>';
       }
@@ -520,3 +521,3 @@ }, {
       get: function get$$1() {
-        return '<style>:host {\n  display: block; }\n  :host > * {\n    margin: 0; }\n  :host button {\n    --pfe-accordion--main:         transparent;\n    --pfe-accordion--aux:          var(--pfe-theme--color--surface--lightest--text, #333);\n    --pfe-accordion--BorderLeft:  var(--pfe-theme--surface--border-width-heavy, ) var(--pfe-theme--surface--border-style, solid) transparent;\n    --pfe-accordion--BorderRight: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) transparent;\n    --pfe-accordion--BorderBottom: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border--lightest, #ececec);\n    --pfe-accordion--BorderLeftColor--focus: var(--pfe-theme--color--surface--lightest--link, #06c);\n    -webkit-appearance: button;\n    margin: 0;\n    width: 100%;\n    height: auto;\n    font-family: inherit;\n    font-weight: var(--pfe-theme--font-weight--bold, 700);\n    text-align: left;\n    cursor: pointer;\n    z-index: 1;\n    position: relative;\n    font-size: calc(var(--pfe-theme--font-size, 16px) * 1.1);\n    line-height: var(--pfe-theme--line-height, 1.5);\n    color: var(--pfe-accordion--aux);\n    background-color: var(--pfe-accordion--main);\n    border-left: var(--pfe-accordion--BorderLeft);\n    border-right: var(--pfe-accordion--BorderRight);\n    border-bottom: var(--pfe-accordion--BorderBottom);\n    border-top: 0;\n    padding: var(--pfe-theme--container-spacer, 1rem) 50px var(--pfe-theme--container-spacer, 1rem) calc(var(--pfe-theme--container-spacer, 1rem) * 1.5); }\n    :host button:hover {\n      outline: none;\n      border-left-color: var(--pfe-accordion--BorderLeftColor--focus);\n      z-index: 2; }\n    :host button:focus {\n      outline: none;\n      z-index: 2;\n      text-decoration: underline;\n      text-decoration-color: var(--pfe-theme--color--surface--border--darker, #c6c6c6); }\n    :host button::-moz-focus-inner {\n      border: 0; }\n    :host button[aria-expanded="true"] {\n      --pfe-accordion--main:              var(--pfe-theme--color--surface--lightest, #fff);\n      --pfe-accordion--aux:               var(--pfe-theme--color--surface--lightest--text, #333);\n      --pfe-accordion--focus:             var(--pfe-theme--color--surface--lightest--link, #06c);\n      --pfe-accordion--BorderLeft:        var(--pfe-theme--surface--border-width-heavy, ) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--lightest--link, #06c);\n      --pfe-accordion--BorderRight:       var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border--lightest, #ececec);\n      position: relative;\n      display: block;\n      border-bottom: 0; }\n      :host button[aria-expanded="true"]::after {\n        content: "";\n        position: absolute;\n        top: calc((var(--pfe-theme--container-spacer, 1rem) * 0.75) + 0.55em);\n        display: block;\n        border-style: var(--pfe-theme--surface--border-style, solid);\n        height: 0.4em;\n        width: 0.4em;\n        text-align: center;\n        transition: transform 0.15s;\n        border-width: 0.1em 0.1em 0 0;\n        border-bottom: 0;\n        transform: rotate(-45deg);\n        right: calc(var(--pfe-theme--container-spacer, 1rem) * 1.5); }\n    :host button[aria-expanded="false"]::after {\n      content: "";\n      position: absolute;\n      top: calc((var(--pfe-theme--container-spacer, 1rem) * 0.75) + 0.55em);\n      display: block;\n      border-style: var(--pfe-theme--surface--border-style, solid);\n      height: 0.4em;\n      width: 0.4em;\n      text-align: center;\n      transition: transform 0.15s;\n      border-width: 0 0.1em 0.1em 0;\n      transform: rotate(45deg);\n      right: calc(var(--pfe-theme--container-spacer, 1rem) * 1.5); }\n\n:host(:first-child) button {\n  border-top: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border--lightest, #ececec); }\n\n:host(:last-of-type) button[aria-expanded="false"] {\n  border-bottom: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border--lightest, #ececec); }\n\n:host(.animating) {\n  transition: transform 0.3s var(--pfe-theme--animation-timing, cubic-bezier(0.465, 0.183, 0.153, 0.946)); }\n\n:host([on="dark"]) button {\n  --pfe-accordion--main:         transparent;\n  --pfe-accordion--aux:          var(--pfe-theme--color--surface--darkest--text, #fff);\n  --pfe-accordion--BorderLeftColor--focus: var(--pfe-theme--color--surface--lightest, #fff); }\n  :host([on="dark"]) button[aria-expanded="true"] {\n    --pfe-accordion--main:         var(--pfe-theme--color--surface--darker, #464646);\n    --pfe-accordion--aux:          var(--pfe-theme--color--surface--darkest--text, #fff);\n    --pfe-accordion--BorderLeft:   var(--pfe-theme--surface--border-width-heavy, ) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border-darkest, );\n    --pfe-accordion--BorderRight:  var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border-darkest, );\n    --pfe-accordion--BorderLeftColor--focus: var(--pfe-theme--color--surface--lightest, #fff); }</style>\n<button aria-expanded="false" role="tab"></button>';
+        return '<style>:host{display:block}:host>*{margin:0}:host button{--pfe-accordion--main:transparent;--pfe-accordion--aux:var(--pfe-theme--color--surface--lightest--text, #333);--pfe-accordion--BorderLeft:var(--pfe-theme--surface--border-width-heavy, ) var(--pfe-theme--surface--border-style, solid) transparent;--pfe-accordion--BorderRight:var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) transparent;--pfe-accordion--BorderBottom:var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border--lightest, #ececec);--pfe-accordion--BorderLeftColor--focus:var(--pfe-theme--color--surface--lightest--link, #06c);-webkit-appearance:button;margin:0;width:100%;height:auto;font-family:inherit;font-weight:700;font-weight:var(--pfe-theme--font-weight--bold,700);text-align:left;cursor:pointer;z-index:1;position:relative;font-size:calc(16px * 1.1);font-size:calc(var(--pfe-theme--font-size,16px) * 1.1);line-height:1.5;line-height:var(--pfe-theme--line-height,1.5);color:var(--pfe-accordion--aux);background-color:var(--pfe-accordion--main);border-left:var(--pfe-accordion--BorderLeft);border-right:var(--pfe-accordion--BorderRight);border-bottom:var(--pfe-accordion--BorderBottom);border-top:0;padding:1rem 50px 1rem calc(1rem * 1.5);padding:var(--pfe-theme--container-spacer,1rem) 50px var(--pfe-theme--container-spacer,1rem) calc(var(--pfe-theme--container-spacer,1rem) * 1.5)}:host button:hover{outline:0;border-left-color:var(--pfe-accordion--BorderLeftColor--focus);z-index:2}:host button:focus{outline:0;z-index:2;text-decoration:underline;-webkit-text-decoration-color:#c6c6c6;text-decoration-color:#c6c6c6;-webkit-text-decoration-color:var(--pfe-theme--color--surface--border--darker,#c6c6c6);text-decoration-color:var(--pfe-theme--color--surface--border--darker,#c6c6c6)}:host button::-moz-focus-inner{border:0}:host button[aria-expanded=true]{--pfe-accordion--main:var(--pfe-theme--color--surface--lightest, #fff);--pfe-accordion--aux:var(--pfe-theme--color--surface--lightest--text, #333);--pfe-accordion--focus:var(--pfe-theme--color--surface--lightest--link, #06c);--pfe-accordion--BorderLeft:var(--pfe-theme--surface--border-width-heavy, ) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--lightest--link, #06c);--pfe-accordion--BorderRight:var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border--lightest, #ececec);position:relative;display:block;border-bottom:0}:host button[aria-expanded=true]::after{content:"";position:absolute;top:calc((1rem * .75) + .55em);top:calc((var(--pfe-theme--container-spacer,1rem) * .75) + .55em);display:block;border-style:solid;border-style:var(--pfe-theme--surface--border-style,solid);height:.4em;width:.4em;text-align:center;-webkit-transition:-webkit-transform .15s;transition:-webkit-transform .15s;transition:transform .15s;transition:transform .15s,-webkit-transform .15s;border-width:.1em .1em 0 0;border-bottom:0;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);right:calc(1rem * 1.5);right:calc(var(--pfe-theme--container-spacer,1rem) * 1.5)}:host button[aria-expanded=false]::after{content:"";position:absolute;top:calc((1rem * .75) + .55em);top:calc((var(--pfe-theme--container-spacer,1rem) * .75) + .55em);display:block;border-style:solid;border-style:var(--pfe-theme--surface--border-style,solid);height:.4em;width:.4em;text-align:center;-webkit-transition:-webkit-transform .15s;transition:-webkit-transform .15s;transition:transform .15s;transition:transform .15s,-webkit-transform .15s;border-width:0 .1em .1em 0;-webkit-transform:rotate(45deg);transform:rotate(45deg);right:calc(1rem * 1.5);right:calc(var(--pfe-theme--container-spacer,1rem) * 1.5)}:host(:first-child) button{border-top:1px solid #ececec;border-top:var(--pfe-theme--surface--border-width,1px) var(--pfe-theme--surface--border-style,solid) var(--pfe-theme--color--surface--border--lightest,#ececec)}:host(:last-of-type) button[aria-expanded=false]{border-bottom:1px solid #ececec;border-bottom:var(--pfe-theme--surface--border-width,1px) var(--pfe-theme--surface--border-style,solid) var(--pfe-theme--color--surface--border--lightest,#ececec)}:host(.animating){-webkit-transition:-webkit-transform .3s cubic-bezier(.465,.183,.153,.946);transition:-webkit-transform .3s cubic-bezier(.465,.183,.153,.946);transition:transform .3s cubic-bezier(.465,.183,.153,.946);transition:transform .3s cubic-bezier(.465,.183,.153,.946),-webkit-transform .3s cubic-bezier(.465,.183,.153,.946);-webkit-transition:-webkit-transform .3s var(--pfe-theme--animation-timing,cubic-bezier(.465,.183,.153,.946));transition:-webkit-transform .3s var(--pfe-theme--animation-timing,cubic-bezier(.465,.183,.153,.946));transition:transform .3s var(--pfe-theme--animation-timing,cubic-bezier(.465,.183,.153,.946));transition:transform .3s var(--pfe-theme--animation-timing,cubic-bezier(.465,.183,.153,.946)),-webkit-transform .3s var(--pfe-theme--animation-timing,cubic-bezier(.465,.183,.153,.946))}:host([on=dark]) button{--pfe-accordion--main:transparent;--pfe-accordion--aux:var(--pfe-theme--color--surface--darkest--text, #fff);--pfe-accordion--BorderLeftColor--focus:var(--pfe-theme--color--surface--lightest, #fff)}:host([on=dark]) button[aria-expanded=true]{--pfe-accordion--main:var(--pfe-theme--color--surface--darker, #464646);--pfe-accordion--aux:var(--pfe-theme--color--surface--darkest--text, #fff);--pfe-accordion--BorderLeft:var(--pfe-theme--surface--border-width-heavy, ) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border-darkest, );--pfe-accordion--BorderRight:var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border-darkest, );--pfe-accordion--BorderLeftColor--focus:var(--pfe-theme--color--surface--lightest, #fff)}</style><button aria-expanded="false" role="tab"></button>';
       }
@@ -649,3 +650,3 @@ }, {
       get: function get$$1() {
-        return '<style>:host {\n  display: none;\n  overflow: hidden;\n  will-change: height;\n  border-color: transparent; }\n\n:host([expanded]) {\n  display: block;\n  position: relative;\n  border-right: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) transparent;\n  border-left: var(--pfe-theme--surface--border-width--heavy, 3px) var(--pfe-theme--surface--border-style, solid) transparent;\n  box-shadow: 0 5px var(--pfe-theme--surface--border-width--heavy, 3px) rgba(140, 140, 140, 0.35);\n  border-left-color: var(--pfe-theme--color--surface--lightest--link, #06c);\n  background-color: var(--pfe-theme--color--surface--lightest, #fff);\n  border-right-color: var(--pfe-theme--color--surface--border--lightest, #ececec);\n  border-bottom: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border--lightest, #ececec); }\n\n:host([on="dark"][expanded]) {\n  --pfe-broadcasted--color--text:               var(--pfe-theme--color--text--on-dark, #fff);\n  --pfe-broadcasted--color--ui-link:            var(--pfe-theme--color--ui-link--on-dark, #99ccff);\n  --pfe-broadcasted--color--ui-link--visited:   var(--pfe-theme--color--ui-link--on-dark--visited, #b38cd9);\n  --pfe-broadcasted--color--ui-link--hover:     var(--pfe-theme--color--ui-link--on-dark--hover, #cce6ff);\n  --pfe-broadcasted--color--ui-link--focus:     var(--pfe-theme--color--ui-link--on-dark--focus, #cce6ff);\n  border-right: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) transparent;\n  border-left: var(--pfe-theme--surface--border-width--heavy, 3px) var(--pfe-theme--surface--border-style, solid) transparent;\n  box-shadow: none;\n  background-color: var(--pfe-theme--color--surface--darker, #464646);\n  border-left-color: var(--pfe-theme--color--surface--darkest--text, #fff);\n  border-right-color: var(--pfe-theme--color--surface--darkest--text, #fff); }\n\n:host(.animating) {\n  display: block;\n  transition: height 0.3s ease-in-out; }\n\n.container {\n  box-sizing: border-box;\n  width: 100%;\n  padding: 0 3em var(--pfe-theme--container-spacer, 1rem) calc(var(--pfe-theme--container-spacer, 1rem) * 1.5); }\n\n:host(:last-of-type[expanded]) {\n  margin-bottom: 0; }</style>\n<div tabindex="-1" role="tabpanel">\n  <div class="container">\n    <slot></slot>\n  </div>\n</div>';
+        return '<style>:host{display:none;overflow:hidden;will-change:height;border-color:transparent}:host([expanded]){display:block;position:relative;border-right:1px solid transparent;border-right:var(--pfe-theme--surface--border-width,1px) var(--pfe-theme--surface--border-style,solid) transparent;border-left:3px solid transparent;border-left:var(--pfe-theme--surface--border-width--heavy,3px) var(--pfe-theme--surface--border-style,solid) transparent;-webkit-box-shadow:0 5px 3px rgba(140,140,140,.35);box-shadow:0 5px 3px rgba(140,140,140,.35);-webkit-box-shadow:0 5px var(--pfe-theme--surface--border-width--heavy,3px) rgba(140,140,140,.35);box-shadow:0 5px var(--pfe-theme--surface--border-width--heavy,3px) rgba(140,140,140,.35);border-left-color:#06c;border-left-color:var(--pfe-theme--color--surface--lightest--link,#06c);background-color:#fff;background-color:var(--pfe-theme--color--surface--lightest,#fff);border-right-color:#ececec;border-right-color:var(--pfe-theme--color--surface--border--lightest,#ececec);border-bottom:1px solid #ececec;border-bottom:var(--pfe-theme--surface--border-width,1px) var(--pfe-theme--surface--border-style,solid) var(--pfe-theme--color--surface--border--lightest,#ececec)}:host([on=dark][expanded]){--pfe-broadcasted--color--text:var(--pfe-theme--color--text--on-dark, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--ui-link--on-dark, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--ui-link--on-dark--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--ui-link--on-dark--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--ui-link--on-dark--focus, #cce6ff);border-right:1px solid transparent;border-right:var(--pfe-theme--surface--border-width,1px) var(--pfe-theme--surface--border-style,solid) transparent;border-left:3px solid transparent;border-left:var(--pfe-theme--surface--border-width--heavy,3px) var(--pfe-theme--surface--border-style,solid) transparent;-webkit-box-shadow:none;box-shadow:none;background-color:#464646;background-color:var(--pfe-theme--color--surface--darker,#464646);border-left-color:#fff;border-left-color:var(--pfe-theme--color--surface--darkest--text,#fff);border-right-color:#fff;border-right-color:var(--pfe-theme--color--surface--darkest--text,#fff)}:host(.animating){display:block;-webkit-transition:height .3s ease-in-out;transition:height .3s ease-in-out}.container{-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;padding:0 3em 1rem calc(1rem * 1.5);padding:0 3em var(--pfe-theme--container-spacer,1rem) calc(var(--pfe-theme--container-spacer,1rem) * 1.5)}:host(:last-of-type[expanded]){margin-bottom:0}</style><div tabindex="-1" role="tabpanel">\n  <div class="container">\n    <slot></slot>\n  </div>\n</div>';
       }
@@ -652,0 +653,0 @@ }, {

pfe-accordion.umd.min.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("../pfelement/pfelement.umd.min")):"function"==typeof define&&define.amd?define(["../pfelement/pfelement.umd.min"],t):e.PfeAccordion=t(e.PFElement)}(this,function(r){"use strict";r=r&&r.hasOwnProperty("default")?r.default:r;var a=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},i=function(){function n(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(e,t,r){return t&&n(e.prototype,t),r&&n(e,r),e}}(),c=function e(t,r,n){null===t&&(t=Function.prototype);var o=Object.getOwnPropertyDescriptor(t,r);if(void 0===o){var a=Object.getPrototypeOf(t);return null===a?void 0:e(a,r,n)}if("value"in o)return o.value;var i=o.get;return void 0!==i?i.call(n):void 0},s=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)},l=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},d=function(e){if(Array.isArray(e)){for(var t=0,r=Array(e.length);t<e.length;t++)r[t]=e[t];return r}return Array.from(e)};function o(){return Math.random().toString(36).substr(2,9)}Array.prototype.findIndex||Object.defineProperty(Array.prototype,"findIndex",{value:function(e){if(null==this)throw new TypeError('"this" is null or not defined');var t=Object(this),r=t.length>>>0;if("function"!=typeof e)throw new TypeError("predicate must be a function");for(var n=arguments[1],o=0;o<r;){var a=t[o];if(e.call(n,a,o,t))return o;o++}return-1}});var t=function(e){function o(){return a(this,o),l(this,(o.__proto__||Object.getPrototypeOf(o)).call(this,o))}return s(o,r),i(o,[{key:"html",get:function(){return'<style>:host {\n  display: block;\n  position: relative;\n  overflow: hidden;\n  margin: 0;\n  color: var(--pfe-broadcasted--color--text); }\n\n:host([on="dark"]) {\n  --pfe-broadcasted--color--text:               var(--pfe-theme--color--text--on-dark, #fff);\n  --pfe-broadcasted--color--ui-link:            var(--pfe-theme--color--ui-link--on-dark, #99ccff);\n  --pfe-broadcasted--color--ui-link--visited:   var(--pfe-theme--color--ui-link--on-dark--visited, #b38cd9);\n  --pfe-broadcasted--color--ui-link--hover:     var(--pfe-theme--color--ui-link--on-dark--hover, #cce6ff);\n  --pfe-broadcasted--color--ui-link--focus:     var(--pfe-theme--color--ui-link--on-dark--focus, #cce6ff); }\n\n:host([on="light"]) {\n  --pfe-broadcasted--color--text:               var(--pfe-theme--color--text, #333);\n  --pfe-broadcasted--color--ui-link:            var(--pfe-theme--color--ui-link, #06c);\n  --pfe-broadcasted--color--ui-link--visited:   var(--pfe-theme--color--ui-link--visited, rebeccapurple);\n  --pfe-broadcasted--color--ui-link--hover:     var(--pfe-theme--color--ui-link--hover, #003366);\n  --pfe-broadcasted--color--ui-link--focus:     var(--pfe-theme--color--ui-link--focus, #003366); }</style>\n<slot></slot>'}},{key:"styleUrl",get:function(){return"pfe-accordion.scss"}},{key:"templateUrl",get:function(){return"pfe-accordion.html"}}],[{key:"tag",get:function(){return"pfe-accordion"}},{key:"observedAttributes",get:function(){return["theme","color","on"]}},{key:"cascadingAttributes",get:function(){return{color:"pfe-accordion-header, pfe-accordion-panel",on:"pfe-accordion-header, pfe-accordion-panel"}}}]),i(o,[{key:"connectedCallback",value:function(){c(o.prototype.__proto__||Object.getPrototypeOf(o.prototype),"connectedCallback",this).call(this),this.setAttribute("role","presentation"),this.setAttribute("defined",""),this.addEventListener(o.tag+":change",this._changeHandler),this.addEventListener("keydown",this._keydownHandler),Promise.all([customElements.whenDefined(f.tag),customElements.whenDefined(n.tag)]).then(this._linkPanels())}},{key:"disconnectedCallback",value:function(){this.removeEventListener(o.tag+":change",this._changeHandler),this.removeEventListener("keydown",this._keydownHandler)}},{key:"attributeChangedCallback",value:function(e,t,r){if(c(o.prototype.__proto__||Object.getPrototypeOf(o.prototype),"attributeChangedCallback",this).call(this,e,t,r),"color"===e){var n=this.querySelectorAll(f.tag);"striped"===r?[].concat(d(n)).forEach(function(e,t){var r=t%2?"even":"odd";e.classList.add(r)}):[].concat(d(n)).forEach(function(e,t){e.classList.remove("even","odd")})}}},{key:"toggle",value:function(e){var t=this._allHeaders(),r=this._allPanels(),n=t[e],o=r[e];n&&o&&(n.expanded?(this._collapseHeader(n),this._collapsePanel(o)):(this._expandHeader(n),this._expandPanel(o)))}},{key:"expand",value:function(e){var t=this._allHeaders(),r=this._allPanels(),n=t[e],o=r[e];n&&o&&(this._expandHeader(n),this._expandPanel(o))}},{key:"expandAll",value:function(){var t=this,e=this._allHeaders(),r=this._allPanels();e.forEach(function(e){return t._expandHeader(e)}),r.forEach(function(e){return t._expandPanel(e)})}},{key:"collapse",value:function(e){var t=this._allHeaders(),r=this._allPanels(),n=t[e],o=r[e];n&&o&&(this._collapseHeader(n),this._collapsePanel(o))}},{key:"collapseAll",value:function(){var t=this,e=this._allHeaders(),r=this._allPanels();e.forEach(function(e){return t._collapseHeader(e)}),r.forEach(function(e){return t._collapsePanel(e)})}},{key:"_linkPanels",value:function(){var r=this;this._allHeaders().forEach(function(e){var t=r._panelForHeader(e);e.setAttribute("aria-controls",t.pfeId),t.setAttribute("aria-labelledby",e.pfeId)})}},{key:"_changeHandler",value:function(e){if(!this.classList.contains("animating")){var t=e.target,r=e.target.nextElementSibling;e.detail.expanded?(this._expandHeader(t),this._expandPanel(r)):(this._collapseHeader(t),this._collapsePanel(r))}}},{key:"_toggle",value:function(e,t){}},{key:"_expandHeader",value:function(e){e.expanded=!0}},{key:"_expandPanel",value:function(e){if(!e.expanded){e.expanded=!0;var t=e.getBoundingClientRect().height;this._animate(e,0,t)}}},{key:"_collapseHeader",value:function(e){e.expanded=!1}},{key:"_collapsePanel",value:function(e){if(e.expanded){var t=e.getBoundingClientRect().height;e.expanded=!1,this._animate(e,t,0)}}},{key:"_animate",value:function(e,t,r){var n=this;e.classList.add("animating"),e.style.height=t+"px",requestAnimationFrame(function(){requestAnimationFrame(function(){e.style.height=r+"px",e.classList.add("animating"),e.addEventListener("transitionend",n._transitionEndHandler)})})}},{key:"_keydownHandler",value:function(e){var t=e.target;if(this._isHeader(t)){var r=void 0;switch(e.key){case"ArrowDown":case"Down":case"ArrowRight":case"Right":r=this._nextHeader();break;case"ArrowUp":case"Up":case"ArrowLeft":case"Left":r=this._previousHeader();break;case"Home":r=this._firstHeader();break;case"End":r=this._lastHeader();break;default:return}r.shadowRoot.querySelector("button").focus()}}},{key:"_transitionEndHandler",value:function(e){e.target.style.height="",e.target.classList.remove("animating"),e.target.removeEventListener("transitionend",this._transitionEndHandler)}},{key:"_allHeaders",value:function(){return[].concat(d(this.querySelectorAll(f.tag)))}},{key:"_allPanels",value:function(){return[].concat(d(this.querySelectorAll(n.tag)))}},{key:"_panelForHeader",value:function(e){var t=e.nextElementSibling;if(t.tagName.toLowerCase()===n.tag)return t;console.error(o.tag+": Sibling element to a header needs to be a panel")}},{key:"_previousHeader",value:function(){var e=this._allHeaders(),t=e.findIndex(function(e){return e===document.activeElement})-1;return e[(t+e.length)%e.length]}},{key:"_nextHeader",value:function(){var e=this._allHeaders(),t=e.findIndex(function(e){return e===document.activeElement})+1;return e[t%e.length]}},{key:"_firstHeader",value:function(){return this._allHeaders()[0]}},{key:"_lastHeader",value:function(){var e=this._allHeaders();return e[e.length-1]}},{key:"_isHeader",value:function(e){return e.tagName.toLowerCase()===f.tag}}]),o}(),f=function(e){function n(){a(this,n);var e=l(this,(n.__proto__||Object.getPrototypeOf(n)).call(this,n));return e._clickHandler=e._clickHandler.bind(e),e}return s(n,r),i(n,[{key:"html",get:function(){return'<style>:host {\n  display: block; }\n  :host > * {\n    margin: 0; }\n  :host button {\n    --pfe-accordion--main:         transparent;\n    --pfe-accordion--aux:          var(--pfe-theme--color--surface--lightest--text, #333);\n    --pfe-accordion--BorderLeft:  var(--pfe-theme--surface--border-width-heavy, ) var(--pfe-theme--surface--border-style, solid) transparent;\n    --pfe-accordion--BorderRight: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) transparent;\n    --pfe-accordion--BorderBottom: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border--lightest, #ececec);\n    --pfe-accordion--BorderLeftColor--focus: var(--pfe-theme--color--surface--lightest--link, #06c);\n    -webkit-appearance: button;\n    margin: 0;\n    width: 100%;\n    height: auto;\n    font-family: inherit;\n    font-weight: var(--pfe-theme--font-weight--bold, 700);\n    text-align: left;\n    cursor: pointer;\n    z-index: 1;\n    position: relative;\n    font-size: calc(var(--pfe-theme--font-size, 16px) * 1.1);\n    line-height: var(--pfe-theme--line-height, 1.5);\n    color: var(--pfe-accordion--aux);\n    background-color: var(--pfe-accordion--main);\n    border-left: var(--pfe-accordion--BorderLeft);\n    border-right: var(--pfe-accordion--BorderRight);\n    border-bottom: var(--pfe-accordion--BorderBottom);\n    border-top: 0;\n    padding: var(--pfe-theme--container-spacer, 1rem) 50px var(--pfe-theme--container-spacer, 1rem) calc(var(--pfe-theme--container-spacer, 1rem) * 1.5); }\n    :host button:hover {\n      outline: none;\n      border-left-color: var(--pfe-accordion--BorderLeftColor--focus);\n      z-index: 2; }\n    :host button:focus {\n      outline: none;\n      z-index: 2;\n      text-decoration: underline;\n      text-decoration-color: var(--pfe-theme--color--surface--border--darker, #c6c6c6); }\n    :host button::-moz-focus-inner {\n      border: 0; }\n    :host button[aria-expanded="true"] {\n      --pfe-accordion--main:              var(--pfe-theme--color--surface--lightest, #fff);\n      --pfe-accordion--aux:               var(--pfe-theme--color--surface--lightest--text, #333);\n      --pfe-accordion--focus:             var(--pfe-theme--color--surface--lightest--link, #06c);\n      --pfe-accordion--BorderLeft:        var(--pfe-theme--surface--border-width-heavy, ) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--lightest--link, #06c);\n      --pfe-accordion--BorderRight:       var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border--lightest, #ececec);\n      position: relative;\n      display: block;\n      border-bottom: 0; }\n      :host button[aria-expanded="true"]::after {\n        content: "";\n        position: absolute;\n        top: calc((var(--pfe-theme--container-spacer, 1rem) * 0.75) + 0.55em);\n        display: block;\n        border-style: var(--pfe-theme--surface--border-style, solid);\n        height: 0.4em;\n        width: 0.4em;\n        text-align: center;\n        transition: transform 0.15s;\n        border-width: 0.1em 0.1em 0 0;\n        border-bottom: 0;\n        transform: rotate(-45deg);\n        right: calc(var(--pfe-theme--container-spacer, 1rem) * 1.5); }\n    :host button[aria-expanded="false"]::after {\n      content: "";\n      position: absolute;\n      top: calc((var(--pfe-theme--container-spacer, 1rem) * 0.75) + 0.55em);\n      display: block;\n      border-style: var(--pfe-theme--surface--border-style, solid);\n      height: 0.4em;\n      width: 0.4em;\n      text-align: center;\n      transition: transform 0.15s;\n      border-width: 0 0.1em 0.1em 0;\n      transform: rotate(45deg);\n      right: calc(var(--pfe-theme--container-spacer, 1rem) * 1.5); }\n\n:host(:first-child) button {\n  border-top: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border--lightest, #ececec); }\n\n:host(:last-of-type) button[aria-expanded="false"] {\n  border-bottom: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border--lightest, #ececec); }\n\n:host(.animating) {\n  transition: transform 0.3s var(--pfe-theme--animation-timing, cubic-bezier(0.465, 0.183, 0.153, 0.946)); }\n\n:host([on="dark"]) button {\n  --pfe-accordion--main:         transparent;\n  --pfe-accordion--aux:          var(--pfe-theme--color--surface--darkest--text, #fff);\n  --pfe-accordion--BorderLeftColor--focus: var(--pfe-theme--color--surface--lightest, #fff); }\n  :host([on="dark"]) button[aria-expanded="true"] {\n    --pfe-accordion--main:         var(--pfe-theme--color--surface--darker, #464646);\n    --pfe-accordion--aux:          var(--pfe-theme--color--surface--darkest--text, #fff);\n    --pfe-accordion--BorderLeft:   var(--pfe-theme--surface--border-width-heavy, ) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border-darkest, );\n    --pfe-accordion--BorderRight:  var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border-darkest, );\n    --pfe-accordion--BorderLeftColor--focus: var(--pfe-theme--color--surface--lightest, #fff); }</style>\n<button aria-expanded="false" role="tab"></button>'}},{key:"styleUrl",get:function(){return"pfe-accordion-header.scss"}},{key:"templateUrl",get:function(){return"pfe-accordion-header.html"}},{key:"pfeId",get:function(){return this.getAttribute("pfe-id")},set:function(e){e&&this.setAttribute("pfe-id",e)}}],[{key:"tag",get:function(){return"pfe-accordion-header"}},{key:"observedAttributes",get:function(){return["aria-expanded"]}}]),i(n,[{key:"connectedCallback",value:function(){c(n.prototype.__proto__||Object.getPrototypeOf(n.prototype),"connectedCallback",this).call(this),this.hasAttribute("role")||this.setAttribute("role","header"),this.pfeId||(this.pfeId=n.tag+"-"+o()),this.button=this.shadowRoot.querySelector("button");var e=this.children[0],t=!1;if(e){switch(e.tagName){case"H1":case"H2":case"H3":case"H4":case"H5":case"H6":t=!0}var r=document.createElement(e.tagName);this.button.innerText=e.innerText,r.appendChild(this.button),this.shadowRoot.appendChild(r)}else this.button.innerText=this.textContent.trim();t||console.warn(n.tag+": The first child in the light DOM must be a Header level tag (h1, h2, h3, h4, h5, or h6)"),this.addEventListener("click",this._clickHandler)}},{key:"disconnectedCallback",value:function(){this.removeEventListener("click",this._clickHandler)}},{key:"_clickHandler",value:function(e){this.dispatchEvent(new CustomEvent(t.tag+":change",{detail:{expanded:!this.expanded},bubbles:!0}))}},{key:"expanded",get:function(){return this.hasAttribute("aria-expanded")},set:function(e){(e=Boolean(e))?(this.setAttribute("aria-expanded",!0),this.button.setAttribute("aria-expanded",!0)):(this.removeAttribute("aria-expanded"),this.button.setAttribute("aria-expanded",!1))}}]),n}(),n=function(e){function t(){return a(this,t),l(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,t))}return s(t,r),i(t,[{key:"html",get:function(){return'<style>:host {\n  display: none;\n  overflow: hidden;\n  will-change: height;\n  border-color: transparent; }\n\n:host([expanded]) {\n  display: block;\n  position: relative;\n  border-right: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) transparent;\n  border-left: var(--pfe-theme--surface--border-width--heavy, 3px) var(--pfe-theme--surface--border-style, solid) transparent;\n  box-shadow: 0 5px var(--pfe-theme--surface--border-width--heavy, 3px) rgba(140, 140, 140, 0.35);\n  border-left-color: var(--pfe-theme--color--surface--lightest--link, #06c);\n  background-color: var(--pfe-theme--color--surface--lightest, #fff);\n  border-right-color: var(--pfe-theme--color--surface--border--lightest, #ececec);\n  border-bottom: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border--lightest, #ececec); }\n\n:host([on="dark"][expanded]) {\n  --pfe-broadcasted--color--text:               var(--pfe-theme--color--text--on-dark, #fff);\n  --pfe-broadcasted--color--ui-link:            var(--pfe-theme--color--ui-link--on-dark, #99ccff);\n  --pfe-broadcasted--color--ui-link--visited:   var(--pfe-theme--color--ui-link--on-dark--visited, #b38cd9);\n  --pfe-broadcasted--color--ui-link--hover:     var(--pfe-theme--color--ui-link--on-dark--hover, #cce6ff);\n  --pfe-broadcasted--color--ui-link--focus:     var(--pfe-theme--color--ui-link--on-dark--focus, #cce6ff);\n  border-right: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) transparent;\n  border-left: var(--pfe-theme--surface--border-width--heavy, 3px) var(--pfe-theme--surface--border-style, solid) transparent;\n  box-shadow: none;\n  background-color: var(--pfe-theme--color--surface--darker, #464646);\n  border-left-color: var(--pfe-theme--color--surface--darkest--text, #fff);\n  border-right-color: var(--pfe-theme--color--surface--darkest--text, #fff); }\n\n:host(.animating) {\n  display: block;\n  transition: height 0.3s ease-in-out; }\n\n.container {\n  box-sizing: border-box;\n  width: 100%;\n  padding: 0 3em var(--pfe-theme--container-spacer, 1rem) calc(var(--pfe-theme--container-spacer, 1rem) * 1.5); }\n\n:host(:last-of-type[expanded]) {\n  margin-bottom: 0; }</style>\n<div tabindex="-1" role="tabpanel">\n  <div class="container">\n    <slot></slot>\n  </div>\n</div>'}},{key:"styleUrl",get:function(){return"pfe-accordion-panel.scss"}},{key:"templateUrl",get:function(){return"pfe-accordion-panel.html"}},{key:"pfeId",get:function(){return this.getAttribute("pfe-id")},set:function(e){e&&this.setAttribute("pfe-id",e)}}],[{key:"tag",get:function(){return"pfe-accordion-panel"}}]),i(t,[{key:"connectedCallback",value:function(){c(t.prototype.__proto__||Object.getPrototypeOf(t.prototype),"connectedCallback",this).call(this),this.hasAttribute("role")||this.setAttribute("role","region"),this.pfeId||(this.pfeId=t.tag+"-"+o())}},{key:"expanded",get:function(){return this.hasAttribute("expanded")},set:function(e){Boolean(e)?this.setAttribute("expanded",""):this.removeAttribute("expanded")}}]),t}();return r.create(f),r.create(n),r.create(t),t});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("../pfelement/pfelement.umd.min")):"function"==typeof define&&define.amd?define(["../pfelement/pfelement.umd.min"],t):e.PfeAccordion=t(e.PFElement)}(this,function(r){"use strict";r=r&&r.hasOwnProperty("default")?r.default:r;var n=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},i=function(){function o(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(e,t,r){return t&&o(e.prototype,t),r&&o(e,r),e}}(),c=function e(t,r,o){null===t&&(t=Function.prototype);var a=Object.getOwnPropertyDescriptor(t,r);if(void 0===a){var n=Object.getPrototypeOf(t);return null===n?void 0:e(n,r,o)}if("value"in a)return a.value;var i=a.get;return void 0!==i?i.call(o):void 0},s=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)},l=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},d=function(e){if(Array.isArray(e)){for(var t=0,r=Array(e.length);t<e.length;t++)r[t]=e[t];return r}return Array.from(e)};function a(){return Math.random().toString(36).substr(2,9)}Array.prototype.findIndex||Object.defineProperty(Array.prototype,"findIndex",{value:function(e){if(null==this)throw new TypeError('"this" is null or not defined');var t=Object(this),r=t.length>>>0;if("function"!=typeof e)throw new TypeError("predicate must be a function");for(var o=arguments[1],a=0;a<r;){var n=t[a];if(e.call(o,n,a,t))return a;a++}return-1}});var t=function(e){function a(){return n(this,a),l(this,(a.__proto__||Object.getPrototypeOf(a)).call(this,a))}return s(a,r),i(a,[{key:"html",get:function(){return"<style>:host{display:block;position:relative;overflow:hidden;margin:0;color:var(--pfe-broadcasted--color--text)}:host([on=dark]){--pfe-broadcasted--color--text:var(--pfe-theme--color--text--on-dark, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--ui-link--on-dark, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--ui-link--on-dark--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--ui-link--on-dark--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--ui-link--on-dark--focus, #cce6ff)}:host([on=light]){--pfe-broadcasted--color--text:var(--pfe-theme--color--text, #333);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--ui-link, #06c);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--ui-link--visited, rebeccapurple);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--ui-link--hover, #003366);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--ui-link--focus, #003366)}</style><slot></slot>"}},{key:"styleUrl",get:function(){return"pfe-accordion.scss"}},{key:"templateUrl",get:function(){return"pfe-accordion.html"}}],[{key:"tag",get:function(){return"pfe-accordion"}},{key:"observedAttributes",get:function(){return["theme","color","on"]}},{key:"cascadingAttributes",get:function(){return{color:"pfe-accordion-header, pfe-accordion-panel",on:"pfe-accordion-header, pfe-accordion-panel"}}}]),i(a,[{key:"connectedCallback",value:function(){c(a.prototype.__proto__||Object.getPrototypeOf(a.prototype),"connectedCallback",this).call(this),this.setAttribute("role","presentation"),this.setAttribute("defined",""),this.addEventListener(a.tag+":change",this._changeHandler),this.addEventListener("keydown",this._keydownHandler),Promise.all([customElements.whenDefined(f.tag),customElements.whenDefined(o.tag)]).then(this._linkPanels())}},{key:"disconnectedCallback",value:function(){this.removeEventListener(a.tag+":change",this._changeHandler),this.removeEventListener("keydown",this._keydownHandler)}},{key:"attributeChangedCallback",value:function(e,t,r){if(c(a.prototype.__proto__||Object.getPrototypeOf(a.prototype),"attributeChangedCallback",this).call(this,e,t,r),"color"===e){var o=this.querySelectorAll(f.tag);"striped"===r?[].concat(d(o)).forEach(function(e,t){var r=t%2?"even":"odd";e.classList.add(r)}):[].concat(d(o)).forEach(function(e,t){e.classList.remove("even","odd")})}}},{key:"toggle",value:function(e){var t=this._allHeaders(),r=this._allPanels(),o=t[e],a=r[e];o&&a&&(o.expanded?(this._collapseHeader(o),this._collapsePanel(a)):(this._expandHeader(o),this._expandPanel(a)))}},{key:"expand",value:function(e){var t=this._allHeaders(),r=this._allPanels(),o=t[e],a=r[e];o&&a&&(this._expandHeader(o),this._expandPanel(a))}},{key:"expandAll",value:function(){var t=this,e=this._allHeaders(),r=this._allPanels();e.forEach(function(e){return t._expandHeader(e)}),r.forEach(function(e){return t._expandPanel(e)})}},{key:"collapse",value:function(e){var t=this._allHeaders(),r=this._allPanels(),o=t[e],a=r[e];o&&a&&(this._collapseHeader(o),this._collapsePanel(a))}},{key:"collapseAll",value:function(){var t=this,e=this._allHeaders(),r=this._allPanels();e.forEach(function(e){return t._collapseHeader(e)}),r.forEach(function(e){return t._collapsePanel(e)})}},{key:"_linkPanels",value:function(){var r=this;this._allHeaders().forEach(function(e){var t=r._panelForHeader(e);e.setAttribute("aria-controls",t.pfeId),t.setAttribute("aria-labelledby",e.pfeId)})}},{key:"_changeHandler",value:function(e){if(!this.classList.contains("animating")){var t=e.target,r=e.target.nextElementSibling;e.detail.expanded?(this._expandHeader(t),this._expandPanel(r)):(this._collapseHeader(t),this._collapsePanel(r))}}},{key:"_toggle",value:function(e,t){}},{key:"_expandHeader",value:function(e){e.expanded=!0}},{key:"_expandPanel",value:function(e){if(!e.expanded){e.expanded=!0;var t=e.getBoundingClientRect().height;this._animate(e,0,t)}}},{key:"_collapseHeader",value:function(e){e.expanded=!1}},{key:"_collapsePanel",value:function(e){if(e.expanded){var t=e.getBoundingClientRect().height;e.expanded=!1,this._animate(e,t,0)}}},{key:"_animate",value:function(e,t,r){var o=this;e.classList.add("animating"),e.style.height=t+"px",requestAnimationFrame(function(){requestAnimationFrame(function(){e.style.height=r+"px",e.classList.add("animating"),e.addEventListener("transitionend",o._transitionEndHandler)})})}},{key:"_keydownHandler",value:function(e){var t=e.target;if(this._isHeader(t)){var r=void 0;switch(e.key){case"ArrowDown":case"Down":case"ArrowRight":case"Right":r=this._nextHeader();break;case"ArrowUp":case"Up":case"ArrowLeft":case"Left":r=this._previousHeader();break;case"Home":r=this._firstHeader();break;case"End":r=this._lastHeader();break;default:return}r.shadowRoot.querySelector("button").focus()}}},{key:"_transitionEndHandler",value:function(e){e.target.style.height="",e.target.classList.remove("animating"),e.target.removeEventListener("transitionend",this._transitionEndHandler)}},{key:"_allHeaders",value:function(){return[].concat(d(this.querySelectorAll(f.tag)))}},{key:"_allPanels",value:function(){return[].concat(d(this.querySelectorAll(o.tag)))}},{key:"_panelForHeader",value:function(e){var t=e.nextElementSibling;if(t.tagName.toLowerCase()===o.tag)return t;console.error(a.tag+": Sibling element to a header needs to be a panel")}},{key:"_previousHeader",value:function(){var e=this._allHeaders(),t=e.findIndex(function(e){return e===document.activeElement})-1;return e[(t+e.length)%e.length]}},{key:"_nextHeader",value:function(){var e=this._allHeaders(),t=e.findIndex(function(e){return e===document.activeElement})+1;return e[t%e.length]}},{key:"_firstHeader",value:function(){return this._allHeaders()[0]}},{key:"_lastHeader",value:function(){var e=this._allHeaders();return e[e.length-1]}},{key:"_isHeader",value:function(e){return e.tagName.toLowerCase()===f.tag}}]),a}(),f=function(e){function o(){n(this,o);var e=l(this,(o.__proto__||Object.getPrototypeOf(o)).call(this,o));return e._clickHandler=e._clickHandler.bind(e),e}return s(o,r),i(o,[{key:"html",get:function(){return'<style>:host{display:block}:host>*{margin:0}:host button{--pfe-accordion--main:transparent;--pfe-accordion--aux:var(--pfe-theme--color--surface--lightest--text, #333);--pfe-accordion--BorderLeft:var(--pfe-theme--surface--border-width-heavy, ) var(--pfe-theme--surface--border-style, solid) transparent;--pfe-accordion--BorderRight:var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) transparent;--pfe-accordion--BorderBottom:var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border--lightest, #ececec);--pfe-accordion--BorderLeftColor--focus:var(--pfe-theme--color--surface--lightest--link, #06c);-webkit-appearance:button;margin:0;width:100%;height:auto;font-family:inherit;font-weight:700;font-weight:var(--pfe-theme--font-weight--bold,700);text-align:left;cursor:pointer;z-index:1;position:relative;font-size:calc(16px * 1.1);font-size:calc(var(--pfe-theme--font-size,16px) * 1.1);line-height:1.5;line-height:var(--pfe-theme--line-height,1.5);color:var(--pfe-accordion--aux);background-color:var(--pfe-accordion--main);border-left:var(--pfe-accordion--BorderLeft);border-right:var(--pfe-accordion--BorderRight);border-bottom:var(--pfe-accordion--BorderBottom);border-top:0;padding:1rem 50px 1rem calc(1rem * 1.5);padding:var(--pfe-theme--container-spacer,1rem) 50px var(--pfe-theme--container-spacer,1rem) calc(var(--pfe-theme--container-spacer,1rem) * 1.5)}:host button:hover{outline:0;border-left-color:var(--pfe-accordion--BorderLeftColor--focus);z-index:2}:host button:focus{outline:0;z-index:2;text-decoration:underline;-webkit-text-decoration-color:#c6c6c6;text-decoration-color:#c6c6c6;-webkit-text-decoration-color:var(--pfe-theme--color--surface--border--darker,#c6c6c6);text-decoration-color:var(--pfe-theme--color--surface--border--darker,#c6c6c6)}:host button::-moz-focus-inner{border:0}:host button[aria-expanded=true]{--pfe-accordion--main:var(--pfe-theme--color--surface--lightest, #fff);--pfe-accordion--aux:var(--pfe-theme--color--surface--lightest--text, #333);--pfe-accordion--focus:var(--pfe-theme--color--surface--lightest--link, #06c);--pfe-accordion--BorderLeft:var(--pfe-theme--surface--border-width-heavy, ) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--lightest--link, #06c);--pfe-accordion--BorderRight:var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border--lightest, #ececec);position:relative;display:block;border-bottom:0}:host button[aria-expanded=true]::after{content:"";position:absolute;top:calc((1rem * .75) + .55em);top:calc((var(--pfe-theme--container-spacer,1rem) * .75) + .55em);display:block;border-style:solid;border-style:var(--pfe-theme--surface--border-style,solid);height:.4em;width:.4em;text-align:center;-webkit-transition:-webkit-transform .15s;transition:-webkit-transform .15s;transition:transform .15s;transition:transform .15s,-webkit-transform .15s;border-width:.1em .1em 0 0;border-bottom:0;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);right:calc(1rem * 1.5);right:calc(var(--pfe-theme--container-spacer,1rem) * 1.5)}:host button[aria-expanded=false]::after{content:"";position:absolute;top:calc((1rem * .75) + .55em);top:calc((var(--pfe-theme--container-spacer,1rem) * .75) + .55em);display:block;border-style:solid;border-style:var(--pfe-theme--surface--border-style,solid);height:.4em;width:.4em;text-align:center;-webkit-transition:-webkit-transform .15s;transition:-webkit-transform .15s;transition:transform .15s;transition:transform .15s,-webkit-transform .15s;border-width:0 .1em .1em 0;-webkit-transform:rotate(45deg);transform:rotate(45deg);right:calc(1rem * 1.5);right:calc(var(--pfe-theme--container-spacer,1rem) * 1.5)}:host(:first-child) button{border-top:1px solid #ececec;border-top:var(--pfe-theme--surface--border-width,1px) var(--pfe-theme--surface--border-style,solid) var(--pfe-theme--color--surface--border--lightest,#ececec)}:host(:last-of-type) button[aria-expanded=false]{border-bottom:1px solid #ececec;border-bottom:var(--pfe-theme--surface--border-width,1px) var(--pfe-theme--surface--border-style,solid) var(--pfe-theme--color--surface--border--lightest,#ececec)}:host(.animating){-webkit-transition:-webkit-transform .3s cubic-bezier(.465,.183,.153,.946);transition:-webkit-transform .3s cubic-bezier(.465,.183,.153,.946);transition:transform .3s cubic-bezier(.465,.183,.153,.946);transition:transform .3s cubic-bezier(.465,.183,.153,.946),-webkit-transform .3s cubic-bezier(.465,.183,.153,.946);-webkit-transition:-webkit-transform .3s var(--pfe-theme--animation-timing,cubic-bezier(.465,.183,.153,.946));transition:-webkit-transform .3s var(--pfe-theme--animation-timing,cubic-bezier(.465,.183,.153,.946));transition:transform .3s var(--pfe-theme--animation-timing,cubic-bezier(.465,.183,.153,.946));transition:transform .3s var(--pfe-theme--animation-timing,cubic-bezier(.465,.183,.153,.946)),-webkit-transform .3s var(--pfe-theme--animation-timing,cubic-bezier(.465,.183,.153,.946))}:host([on=dark]) button{--pfe-accordion--main:transparent;--pfe-accordion--aux:var(--pfe-theme--color--surface--darkest--text, #fff);--pfe-accordion--BorderLeftColor--focus:var(--pfe-theme--color--surface--lightest, #fff)}:host([on=dark]) button[aria-expanded=true]{--pfe-accordion--main:var(--pfe-theme--color--surface--darker, #464646);--pfe-accordion--aux:var(--pfe-theme--color--surface--darkest--text, #fff);--pfe-accordion--BorderLeft:var(--pfe-theme--surface--border-width-heavy, ) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border-darkest, );--pfe-accordion--BorderRight:var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border-darkest, );--pfe-accordion--BorderLeftColor--focus:var(--pfe-theme--color--surface--lightest, #fff)}</style><button aria-expanded="false" role="tab"></button>'}},{key:"styleUrl",get:function(){return"pfe-accordion-header.scss"}},{key:"templateUrl",get:function(){return"pfe-accordion-header.html"}},{key:"pfeId",get:function(){return this.getAttribute("pfe-id")},set:function(e){e&&this.setAttribute("pfe-id",e)}}],[{key:"tag",get:function(){return"pfe-accordion-header"}},{key:"observedAttributes",get:function(){return["aria-expanded"]}}]),i(o,[{key:"connectedCallback",value:function(){c(o.prototype.__proto__||Object.getPrototypeOf(o.prototype),"connectedCallback",this).call(this),this.hasAttribute("role")||this.setAttribute("role","header"),this.pfeId||(this.pfeId=o.tag+"-"+a()),this.button=this.shadowRoot.querySelector("button");var e=this.children[0],t=!1;if(e){switch(e.tagName){case"H1":case"H2":case"H3":case"H4":case"H5":case"H6":t=!0}var r=document.createElement(e.tagName);this.button.innerText=e.innerText,r.appendChild(this.button),this.shadowRoot.appendChild(r)}else this.button.innerText=this.textContent.trim();t||console.warn(o.tag+": The first child in the light DOM must be a Header level tag (h1, h2, h3, h4, h5, or h6)"),this.addEventListener("click",this._clickHandler)}},{key:"disconnectedCallback",value:function(){this.removeEventListener("click",this._clickHandler)}},{key:"_clickHandler",value:function(e){this.dispatchEvent(new CustomEvent(t.tag+":change",{detail:{expanded:!this.expanded},bubbles:!0}))}},{key:"expanded",get:function(){return this.hasAttribute("aria-expanded")},set:function(e){(e=Boolean(e))?(this.setAttribute("aria-expanded",!0),this.button.setAttribute("aria-expanded",!0)):(this.removeAttribute("aria-expanded"),this.button.setAttribute("aria-expanded",!1))}}]),o}(),o=function(e){function t(){return n(this,t),l(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,t))}return s(t,r),i(t,[{key:"html",get:function(){return'<style>:host{display:none;overflow:hidden;will-change:height;border-color:transparent}:host([expanded]){display:block;position:relative;border-right:1px solid transparent;border-right:var(--pfe-theme--surface--border-width,1px) var(--pfe-theme--surface--border-style,solid) transparent;border-left:3px solid transparent;border-left:var(--pfe-theme--surface--border-width--heavy,3px) var(--pfe-theme--surface--border-style,solid) transparent;-webkit-box-shadow:0 5px 3px rgba(140,140,140,.35);box-shadow:0 5px 3px rgba(140,140,140,.35);-webkit-box-shadow:0 5px var(--pfe-theme--surface--border-width--heavy,3px) rgba(140,140,140,.35);box-shadow:0 5px var(--pfe-theme--surface--border-width--heavy,3px) rgba(140,140,140,.35);border-left-color:#06c;border-left-color:var(--pfe-theme--color--surface--lightest--link,#06c);background-color:#fff;background-color:var(--pfe-theme--color--surface--lightest,#fff);border-right-color:#ececec;border-right-color:var(--pfe-theme--color--surface--border--lightest,#ececec);border-bottom:1px solid #ececec;border-bottom:var(--pfe-theme--surface--border-width,1px) var(--pfe-theme--surface--border-style,solid) var(--pfe-theme--color--surface--border--lightest,#ececec)}:host([on=dark][expanded]){--pfe-broadcasted--color--text:var(--pfe-theme--color--text--on-dark, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--ui-link--on-dark, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--ui-link--on-dark--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--ui-link--on-dark--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--ui-link--on-dark--focus, #cce6ff);border-right:1px solid transparent;border-right:var(--pfe-theme--surface--border-width,1px) var(--pfe-theme--surface--border-style,solid) transparent;border-left:3px solid transparent;border-left:var(--pfe-theme--surface--border-width--heavy,3px) var(--pfe-theme--surface--border-style,solid) transparent;-webkit-box-shadow:none;box-shadow:none;background-color:#464646;background-color:var(--pfe-theme--color--surface--darker,#464646);border-left-color:#fff;border-left-color:var(--pfe-theme--color--surface--darkest--text,#fff);border-right-color:#fff;border-right-color:var(--pfe-theme--color--surface--darkest--text,#fff)}:host(.animating){display:block;-webkit-transition:height .3s ease-in-out;transition:height .3s ease-in-out}.container{-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;padding:0 3em 1rem calc(1rem * 1.5);padding:0 3em var(--pfe-theme--container-spacer,1rem) calc(var(--pfe-theme--container-spacer,1rem) * 1.5)}:host(:last-of-type[expanded]){margin-bottom:0}</style><div tabindex="-1" role="tabpanel">\n  <div class="container">\n    <slot></slot>\n  </div>\n</div>'}},{key:"styleUrl",get:function(){return"pfe-accordion-panel.scss"}},{key:"templateUrl",get:function(){return"pfe-accordion-panel.html"}},{key:"pfeId",get:function(){return this.getAttribute("pfe-id")},set:function(e){e&&this.setAttribute("pfe-id",e)}}],[{key:"tag",get:function(){return"pfe-accordion-panel"}}]),i(t,[{key:"connectedCallback",value:function(){c(t.prototype.__proto__||Object.getPrototypeOf(t.prototype),"connectedCallback",this).call(this),this.hasAttribute("role")||this.setAttribute("role","region"),this.pfeId||(this.pfeId=t.tag+"-"+a())}},{key:"expanded",get:function(){return this.hasAttribute("expanded")},set:function(e){Boolean(e)?this.setAttribute("expanded",""):this.removeAttribute("expanded")}}]),t}();return r.create(f),r.create(o),r.create(t),t});
 //# sourceMappingURL=pfe-accordion.umd.min.js.map

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

393824

increased by19.57%

Lines of code

2113

increased by0.14%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• Updated@patternfly/pfe-sass@^1.0.0-prerelease.11

• Updated@patternfly/pfelement@^1.0.0-prerelease.11