From f3bcff8302fb0454e6b14cfb7478163f0f281feb Mon Sep 17 00:00:00 2001 From: Salem Ghoweri Date: Mon, 3 Sep 2018 07:49:08 -0400 Subject: [PATCH 001/100] chore: add new JS utils for extending component data, adding conditional classnames when rendering, and feature check for Shadow DOM support --- .../uikit-workshop/src/scripts/utils/css.js | 22 +++++++++++++++++++ .../src/scripts/utils/extend.js | 6 +++++ .../uikit-workshop/src/scripts/utils/index.js | 3 +++ .../src/scripts/utils/supports-shadow-dom.js | 13 +++++++++++ 4 files changed, 44 insertions(+) create mode 100644 packages/uikit-workshop/src/scripts/utils/css.js create mode 100644 packages/uikit-workshop/src/scripts/utils/extend.js create mode 100644 packages/uikit-workshop/src/scripts/utils/supports-shadow-dom.js diff --git a/packages/uikit-workshop/src/scripts/utils/css.js b/packages/uikit-workshop/src/scripts/utils/css.js new file mode 100644 index 000000000..16a33f0b2 --- /dev/null +++ b/packages/uikit-workshop/src/scripts/utils/css.js @@ -0,0 +1,22 @@ +// Utility function used for outputting correctly formatted CSS classes in JSX. +// Ported over from https://github.com/wc-catalogue/blaze-elements/blob/master/packages/common/css.ts + +export function css(...args) { + const classes = []; + + for (const arg of args) { + if (arg) { + if (typeof arg === 'string') { + classes.push(arg); + } else { + for (const key in arg) { + if (arg[key]) { + classes.push(key); + } + } + } + } + } + + return classes.join(' '); +} diff --git a/packages/uikit-workshop/src/scripts/utils/extend.js b/packages/uikit-workshop/src/scripts/utils/extend.js new file mode 100644 index 000000000..0c657e37d --- /dev/null +++ b/packages/uikit-workshop/src/scripts/utils/extend.js @@ -0,0 +1,6 @@ +export function extend(obj, props) { + for (const i in props) { + obj[i] = props[i]; + } + return obj; +} diff --git a/packages/uikit-workshop/src/scripts/utils/index.js b/packages/uikit-workshop/src/scripts/utils/index.js index 332531515..ec08e48d8 100755 --- a/packages/uikit-workshop/src/scripts/utils/index.js +++ b/packages/uikit-workshop/src/scripts/utils/index.js @@ -3,3 +3,6 @@ export { DataSaver } from './data-saver'; export { postmessage } from './postmessage'; export { urlHandler } from './url-handler'; export { Dispatcher } from './eventemitter'; +export { css } from './css'; +export { extend } from './extend'; +export { supportsShadowDom } from './supports-shadow-dom'; diff --git a/packages/uikit-workshop/src/scripts/utils/supports-shadow-dom.js b/packages/uikit-workshop/src/scripts/utils/supports-shadow-dom.js new file mode 100644 index 000000000..014d0fda6 --- /dev/null +++ b/packages/uikit-workshop/src/scripts/utils/supports-shadow-dom.js @@ -0,0 +1,13 @@ +function hasShadowDomSupport() { + if ( + ('attachShadow' in Element.prototype && + 'getRootNode' in Element.prototype) || + window.ShadyDOM + ) { + return true; + } else { + return false; + } +} + +export const supportsShadowDom = hasShadowDomSupport(); From 1537c4214e888a3d4d9508a181185665d88118f3 Mon Sep 17 00:00:00 2001 From: Salem Ghoweri Date: Sun, 9 Sep 2018 08:28:44 -0400 Subject: [PATCH 002/100] chore: remove theming and layout toggles now handled by and custom elements --- packages/uikit-workshop/src/scripts/patternlab-viewer.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/uikit-workshop/src/scripts/patternlab-viewer.js b/packages/uikit-workshop/src/scripts/patternlab-viewer.js index 54473509d..f7942629b 100755 --- a/packages/uikit-workshop/src/scripts/patternlab-viewer.js +++ b/packages/uikit-workshop/src/scripts/patternlab-viewer.js @@ -7,10 +7,6 @@ import './components/pattern-finder'; import './components/plugin-loader'; import './components/styleguide'; -// WIP: new JS components for handling UI controls to toggle theme + layout -// import './components/toggle-layout'; -// import './components/toggle-theme'; - //// Add hook to auto re-render the root component. if (typeof module.hot === 'object') { module.hot.accept(err => { From a074cc07d7587dcf971e060aed691a7d5b5d24b0 Mon Sep 17 00:00:00 2001 From: Salem Ghoweri Date: Sun, 9 Sep 2018 08:43:10 -0400 Subject: [PATCH 003/100] refactor: globally update background + background-related CSS transitions to use the longhand property value --- .../src/sass/scss/01-abstracts/_mixins.scss | 14 ++++++------ .../src/sass/scss/02-base/_body.scss | 2 +- .../src/sass/scss/03-vendor/_prism.scss | 8 +++---- .../src/sass/scss/03-vendor/_typeahead.scss | 12 +++++----- .../sass/scss/04-components/_annotations.scss | 6 ++--- .../src/sass/scss/04-components/_header.scss | 2 +- .../sass/scss/04-components/_ish-sizing.scss | 6 ++--- .../src/sass/scss/04-components/_modal.scss | 14 ++++++------ .../sass/scss/04-components/_navigation.scss | 4 ++-- .../scss/04-components/_pattern-states.scss | 8 +++---- .../src/sass/scss/04-components/_pattern.scss | 8 +++---- .../src/sass/scss/04-components/_tabs.scss | 12 +++++----- .../scss/04-components/_text-passage.scss | 2 +- .../sass/scss/04-components/_viewport.scss | 8 +++---- .../src/sass/scss/05-themes/_light-theme.scss | 22 +++++++++---------- 15 files changed, 64 insertions(+), 64 deletions(-) diff --git a/packages/uikit-workshop/src/sass/scss/01-abstracts/_mixins.scss b/packages/uikit-workshop/src/sass/scss/01-abstracts/_mixins.scss index a3f4ec65b..bd09c1a61 100644 --- a/packages/uikit-workshop/src/sass/scss/01-abstracts/_mixins.scss +++ b/packages/uikit-workshop/src/sass/scss/01-abstracts/_mixins.scss @@ -27,25 +27,25 @@ * Header Link Style */ @mixin linkStyle() { - background: $pl-color-black; + background-color: $pl-color-black; color: $pl-color-gray-50; text-decoration: none; line-height: 1; padding: 0.7rem 0.5rem; border: 0; text-align: left; - transition: background $pl-animate-quick ease-out, + transition: background-color $pl-animate-quick ease-out, color $pl-animate-quick ease-out; &:hover { color: $pl-color-white; - background: $pl-color-gray-87; + background-color: $pl-color-gray-87; } - &:focus, - &.active { + &.pl-is-active, + &:active { color: $pl-color-white; - background: $pl-color-gray-87; + background-color: $pl-color-gray-87; outline: 1px dotted $pl-color-gray-50; outline-offset: -1px; } @@ -54,7 +54,7 @@ * Header link styles inside light theme */ .pl-c-body--theme-light & { - background: $pl-color-white; + background-color: $pl-color-white; color: $pl-color-gray-70; } diff --git a/packages/uikit-workshop/src/sass/scss/02-base/_body.scss b/packages/uikit-workshop/src/sass/scss/02-base/_body.scss index 6f37d3e27..234380f29 100644 --- a/packages/uikit-workshop/src/sass/scss/02-base/_body.scss +++ b/packages/uikit-workshop/src/sass/scss/02-base/_body.scss @@ -10,7 +10,7 @@ .pl-c-body { margin: 0; padding: 0; - background: $pl-color-gray-13; + background-color: $pl-color-gray-13; -webkit-text-size-adjust: 100%; display: flex; flex-direction: column; diff --git a/packages/uikit-workshop/src/sass/scss/03-vendor/_prism.scss b/packages/uikit-workshop/src/sass/scss/03-vendor/_prism.scss index 75b13e0f4..faff9d862 100644 --- a/packages/uikit-workshop/src/sass/scss/03-vendor/_prism.scss +++ b/packages/uikit-workshop/src/sass/scss/03-vendor/_prism.scss @@ -32,7 +32,7 @@ pre[class*='language-'] ::-moz-selection, code[class*='language-']::-moz-selection, code[class*='language-'] ::-moz-selection { text-shadow: none; - background: #b3d4fc; + background-color: #b3d4fc; } pre[class*='language-']::selection, @@ -40,7 +40,7 @@ pre[class*='language-'] ::selection, code[class*='language-']::selection, code[class*='language-'] ::selection { text-shadow: none; - background: #b3d4fc; + background-color: #b3d4fc; } @media print { @@ -59,7 +59,7 @@ pre[class*='language-'] { :not(pre) > code[class*='language-'], pre[class*='language-'] { - background: #f5f2f0; + background-color: #f5f2f0; } /* Inline code */ @@ -108,7 +108,7 @@ pre[class*='language-'] { .language-css .token.string, .style .token.string { color: #a67f59; - background: hsla(0, 0%, 100%, 0.5); + background-color: hsla(0, 0%, 100%, 0.5); } .token.atrule, diff --git a/packages/uikit-workshop/src/sass/scss/03-vendor/_typeahead.scss b/packages/uikit-workshop/src/sass/scss/03-vendor/_typeahead.scss index bafd864af..97116926d 100644 --- a/packages/uikit-workshop/src/sass/scss/03-vendor/_typeahead.scss +++ b/packages/uikit-workshop/src/sass/scss/03-vendor/_typeahead.scss @@ -15,7 +15,7 @@ */ .pl-c-typeahead { border: 0; - background: $pl-color-gray-87 !important; + background-color: $pl-color-gray-87 !important; color: $pl-color-gray-50; width: 100%; right: 0; @@ -23,7 +23,7 @@ font-size: inherit; &:focus { - background: $pl-color-gray-50; + background-color: $pl-color-gray-50; color: $pl-color-white; } } @@ -40,12 +40,12 @@ } .tt-input { - background: $pl-color-gray-50; + background-color: $pl-color-gray-50; color: $pl-color-white; &:hover { color: $pl-color-white; - background: $pl-color-gray-87 !important; + background-color: $pl-color-gray-87 !important; &::-webkit-input-placeholder { color: $pl-color-white; @@ -60,7 +60,7 @@ border-radius: 0; text-transform: lowercase; color: $pl-color-white; - background: $pl-color-gray-87; + background-color: $pl-color-gray-87; outline: 1px dotted $pl-color-gray-50; outline-offset: -1px; } @@ -85,7 +85,7 @@ .tt-suggestion.tt-cursor { color: $pl-color-white; - background: $pl-color-trans-white-25; + background-color: $pl-color-trans-white-25; } .tt-suggestion p { diff --git a/packages/uikit-workshop/src/sass/scss/04-components/_annotations.scss b/packages/uikit-workshop/src/sass/scss/04-components/_annotations.scss index 54ac10c9b..57c32f781 100644 --- a/packages/uikit-workshop/src/sass/scss/04-components/_annotations.scss +++ b/packages/uikit-workshop/src/sass/scss/04-components/_annotations.scss @@ -49,7 +49,7 @@ margin-top: 6px !important; margin-left: 6px !important; border-radius: 50% !important; - background: $pl-color-gray-87 !important; + background-color: $pl-color-gray-87 !important; color: $pl-color-white !important; font-size: 16px !important; position: absolute; @@ -99,7 +99,7 @@ padding-left: 1.5rem; margin-bottom: 1rem; border-radius: $pl-border-radius-med; - transition: background $pl-animate-quick ease; + transition: background-color $pl-animate-quick ease; &:before { content: counter(the-count); @@ -113,7 +113,7 @@ border-radius: 50%; padding: 2px; text-align: center; - background: $pl-color-gray-50; + background-color: $pl-color-gray-50; color: $pl-color-white; position: absolute; top: 4px; diff --git a/packages/uikit-workshop/src/sass/scss/04-components/_header.scss b/packages/uikit-workshop/src/sass/scss/04-components/_header.scss index f063865b3..6fdfb119f 100644 --- a/packages/uikit-workshop/src/sass/scss/04-components/_header.scss +++ b/packages/uikit-workshop/src/sass/scss/04-components/_header.scss @@ -16,7 +16,7 @@ z-index: 4; display: flex; /* 2 */ width: 100%; - background: $pl-color-black; + background-color: $pl-color-black; color: $pl-color-gray-50; font-family: $pl-font; font-size: $pl-font-size-sm; diff --git a/packages/uikit-workshop/src/sass/scss/04-components/_ish-sizing.scss b/packages/uikit-workshop/src/sass/scss/04-components/_ish-sizing.scss index 55d236f70..1f31b391c 100644 --- a/packages/uikit-workshop/src/sass/scss/04-components/_ish-sizing.scss +++ b/packages/uikit-workshop/src/sass/scss/04-components/_ish-sizing.scss @@ -24,7 +24,7 @@ margin: 0; border: 0; border-radius: $pl-border-radius; - background: transparent; + background-color: transparent; font-size: inherit; color: $pl-color-gray-50; width: 35px; @@ -38,13 +38,13 @@ &:hover { color: $pl-color-white; - background: $pl-color-gray-87; + background-color: $pl-color-gray-87; } &:active, &:focus { color: $pl-color-white; - background: $pl-color-gray-87; + background-color: $pl-color-gray-87; outline: 1px dotted $pl-color-gray-50; outline-offset: -1px; } diff --git a/packages/uikit-workshop/src/sass/scss/04-components/_modal.scss b/packages/uikit-workshop/src/sass/scss/04-components/_modal.scss index 36afcb41b..d9f5c37fc 100644 --- a/packages/uikit-workshop/src/sass/scss/04-components/_modal.scss +++ b/packages/uikit-workshop/src/sass/scss/04-components/_modal.scss @@ -10,7 +10,7 @@ display: flex; flex-direction: column; font-family: $pl-font; - background: $pl-color-black; + background-color: $pl-color-black; color: $pl-color-gray-20; position: relative; top: auto; @@ -46,7 +46,7 @@ */ .pl-c-modal__close-btn { font-size: 70%; - background: $pl-color-black; + background-color: $pl-color-black; color: $pl-color-gray-50; border: 0; border-radius: $pl-border-radius-med $pl-border-radius-med 0 0; @@ -60,7 +60,7 @@ &:hover, &:focus { - background: $pl-color-gray-87; + background-color: $pl-color-gray-87; color: $pl-color-white; } @@ -95,7 +95,7 @@ left: 0; height: 14px; width: 100%; - background: $pl-color-black; + background-color: $pl-color-black; z-index: 2; cursor: ns-resize; @@ -132,7 +132,7 @@ top: 0.5rem; right: 0.5rem; padding: 0.2rem 0.4rem; - background: $pl-color-gray-07; + background-color: $pl-color-gray-07; color: $pl-color-gray-87; border: 1px solid $pl-color-gray-13; border-radius: $pl-border-radius-med; @@ -142,10 +142,10 @@ line-height: 1; cursor: pointer; z-index: 2; - transition: background $pl-animate-quick ease-out; + transition: background-color $pl-animate-quick ease-out; &:hover, &:focus { - background: $pl-color-gray-20; + background-color: $pl-color-gray-20; } } diff --git a/packages/uikit-workshop/src/sass/scss/04-components/_navigation.scss b/packages/uikit-workshop/src/sass/scss/04-components/_navigation.scss index 0ce861cea..4d3ac105e 100644 --- a/packages/uikit-workshop/src/sass/scss/04-components/_navigation.scss +++ b/packages/uikit-workshop/src/sass/scss/04-components/_navigation.scss @@ -14,7 +14,7 @@ width: 100%; overflow: hidden; max-height: 0; /* 1 */ - background: $pl-color-black; + background-color: $pl-color-black; display: flex; flex-direction: column; transition: max-height $pl-animate-quick ease-out; @@ -127,7 +127,7 @@ */ &.pl-is-active { color: $pl-color-white; - background: $pl-color-gray-87; + background-color: $pl-color-gray-87; /** * Caret rotation and positioning in active dropdown diff --git a/packages/uikit-workshop/src/sass/scss/04-components/_pattern-states.scss b/packages/uikit-workshop/src/sass/scss/04-components/_pattern-states.scss index 82f2663bb..42dcacb9e 100644 --- a/packages/uikit-workshop/src/sass/scss/04-components/_pattern-states.scss +++ b/packages/uikit-workshop/src/sass/scss/04-components/_pattern-states.scss @@ -15,20 +15,20 @@ top: 5px; left: 0; border-radius: 50%; - background: $pl-color-state-info; + background-color: $pl-color-state-info; line-height: 4px; text-indent: 10px; &--complete { - background: $pl-color-state-complete; + background-color: $pl-color-state-complete; } &--inreview { - background: $pl-color-state-inreview; + background-color: $pl-color-state-inreview; } &--deprecated { - background: $pl-color-state-deprecated; + background-color: $pl-color-state-deprecated; } } diff --git a/packages/uikit-workshop/src/sass/scss/04-components/_pattern.scss b/packages/uikit-workshop/src/sass/scss/04-components/_pattern.scss index c07706733..2fb724e2f 100644 --- a/packages/uikit-workshop/src/sass/scss/04-components/_pattern.scss +++ b/packages/uikit-workshop/src/sass/scss/04-components/_pattern.scss @@ -75,12 +75,12 @@ padding: 0.65em 0.65em 0.5em; line-height: 1; color: $pl-color-gray-50; - background: transparent; + background-color: transparent; font-weight: normal; border: 1px solid $pl-color-gray-13; border-top-left-radius: $pl-border-radius-med; border-top-right-radius: $pl-border-radius-med; - transition: background $pl-animate-quick ease-out; + transition: background-color $pl-animate-quick ease-out; .pl-c-pattern__toggle-icon { display: inline-block; @@ -89,7 +89,7 @@ &:hover, &:focus, &.pl-is-active { - background: $pl-color-gray-02; + background-color: $pl-color-gray-02; color: $pl-color-black; } @@ -114,7 +114,7 @@ * like pattern description, lineage, code, and more */ .pl-c-pattern__extra { - background: $pl-color-gray-02; + background-color: $pl-color-gray-02; border-top: 1px solid $pl-color-gray-13; margin-bottom: $pl-space; overflow: hidden; diff --git a/packages/uikit-workshop/src/sass/scss/04-components/_tabs.scss b/packages/uikit-workshop/src/sass/scss/04-components/_tabs.scss index 51740b3d1..8f6895285 100644 --- a/packages/uikit-workshop/src/sass/scss/04-components/_tabs.scss +++ b/packages/uikit-workshop/src/sass/scss/04-components/_tabs.scss @@ -9,7 +9,7 @@ */ .pl-c-tabs { padding: 0 0.5rem 0.5rem; - background: $pl-color-white; + background-color: $pl-color-white; border: 1px solid $pl-color-gray-13; border-radius: $pl-border-radius-med; font-family: $pl-font; @@ -49,7 +49,7 @@ list-style: none; margin: 0; padding: 0.5rem 0; - background: $pl-color-white; + background-color: $pl-color-white; } /** @@ -61,8 +61,8 @@ padding: 0.2rem 0.4rem; border: 1px solid transparent; border-radius: $pl-border-radius-med; - background: $pl-color-white; color: $pl-color-gray-50; + background-color: $pl-color-white; cursor: pointer; text-decoration: none; text-transform: lowercase; @@ -79,7 +79,7 @@ */ &.pl-is-active-tab { color: $pl-color-gray-87; - background: $pl-color-gray-07; + background-color: $pl-color-gray-07; border: 1px solid $pl-color-gray-13; } } @@ -123,7 +123,7 @@ pre[class*='language-'], :not(pre) > code[class*='language-'], pre[class*='language-'] { - background: transparent; + background-color: transparent; margin: 0; padding: 0; border: 0; @@ -131,7 +131,7 @@ } code[class*='language-'] { - background: transparent; + background-color: transparent; margin: 0; } } diff --git a/packages/uikit-workshop/src/sass/scss/04-components/_text-passage.scss b/packages/uikit-workshop/src/sass/scss/04-components/_text-passage.scss index 82d9eb4e8..208332563 100644 --- a/packages/uikit-workshop/src/sass/scss/04-components/_text-passage.scss +++ b/packages/uikit-workshop/src/sass/scss/04-components/_text-passage.scss @@ -50,7 +50,7 @@ */ hr { height: 1px; - background: $pl-color-gray-50; + background-color: $pl-color-gray-50; margin: 2rem 0; border: 0; } diff --git a/packages/uikit-workshop/src/sass/scss/04-components/_viewport.scss b/packages/uikit-workshop/src/sass/scss/04-components/_viewport.scss index f09661fe8..54dade3dc 100644 --- a/packages/uikit-workshop/src/sass/scss/04-components/_viewport.scss +++ b/packages/uikit-workshop/src/sass/scss/04-components/_viewport.scss @@ -120,16 +120,16 @@ margin: 0; width: 100%; height: 100%; - background: $pl-color-gray-20; - transition: background $pl-animate-quick ease-out; + background-color: $pl-color-gray-20; + transition: background-color $pl-animate-quick ease-out; &:hover { - background: $pl-color-gray-50; + background-color: $pl-color-gray-50; } &:active { cursor: move; - background: $pl-color-gray-70; + background-color: $pl-color-gray-70; } } diff --git a/packages/uikit-workshop/src/sass/scss/05-themes/_light-theme.scss b/packages/uikit-workshop/src/sass/scss/05-themes/_light-theme.scss index 64df02529..b8fdd9e0d 100644 --- a/packages/uikit-workshop/src/sass/scss/05-themes/_light-theme.scss +++ b/packages/uikit-workshop/src/sass/scss/05-themes/_light-theme.scss @@ -11,7 +11,7 @@ * Header */ .pl-c-header { - background: $pl-color-white; + background-color: $pl-color-white; border-bottom: 1px solid $pl-color-gray-20; } @@ -19,7 +19,7 @@ * Nav Sublist dropdown */ .pl-c-nav__sublist { - background: transparent; + background-color: transparent; } /** @@ -35,7 +35,7 @@ */ .pl-c-nav__link--dropdown { color: $pl-color-gray-70; - background: $pl-color-white; + background-color: $pl-color-white; &:after { color: $pl-color-gray-20; @@ -69,7 +69,7 @@ &:hover, &:focus { - background: $pl-color-gray-13; + background-color: $pl-color-gray-13; } } @@ -77,14 +77,14 @@ * Typeahead container */ .typeahead { - background: $pl-color-gray-13 !important; + background-color: $pl-color-gray-13 !important; } /** * Typeahead input */ .pl-c-typeahead { - background: $pl-color-gray-13 !important; + background-color: $pl-color-gray-13 !important; color: $pl-color-gray-70 !important; } @@ -92,12 +92,12 @@ * Typeahead input */ .tt-input { - background: $pl-color-gray-07 !important; + background-color: $pl-color-gray-07 !important; color: $pl-color-gray-70 !important; &:hover { color: $pl-color-gray-87; - background: $pl-color-gray-13 !important; + background-color: $pl-color-gray-13 !important; &::-webkit-input-placeholder { color: $pl-color-gray-87; @@ -113,7 +113,7 @@ * Modal inside a light theme */ .pl-c-modal { - background: $pl-color-white; + background-color: $pl-color-white; color: $pl-color-gray-70; border-top: 1px solid $pl-color-gray-20; } @@ -123,13 +123,13 @@ * 1) Closes the modal popup */ .pl-c-modal__close-btn { - background: $pl-color-white; + background-color: $pl-color-white; border-top: 1px solid $pl-color-gray-20; border-left: 1px solid $pl-color-gray-20; &:hover, &:focus { - background: $pl-color-gray-02; + background-color: $pl-color-gray-02; color: $pl-color-gray-70; } } From b6c62ff3c101e75b71bdb801c95a31439b4350a9 Mon Sep 17 00:00:00 2001 From: Salem Ghoweri Date: Sun, 9 Sep 2018 08:45:11 -0400 Subject: [PATCH 004/100] chore: misc Sass cleanup + tweaks --- .../src/sass/scss/01-abstracts/_mixins.scss | 8 ++++++++ .../src/sass/scss/01-abstracts/_variables.scss | 1 + packages/uikit-workshop/src/sass/scss/02-base/_reset.scss | 5 +++++ .../src/sass/scss/04-components/_tools.scss | 5 +++-- 4 files changed, 17 insertions(+), 2 deletions(-) diff --git a/packages/uikit-workshop/src/sass/scss/01-abstracts/_mixins.scss b/packages/uikit-workshop/src/sass/scss/01-abstracts/_mixins.scss index bd09c1a61..43bf15e57 100644 --- a/packages/uikit-workshop/src/sass/scss/01-abstracts/_mixins.scss +++ b/packages/uikit-workshop/src/sass/scss/01-abstracts/_mixins.scss @@ -36,6 +36,7 @@ text-align: left; transition: background-color $pl-animate-quick ease-out, color $pl-animate-quick ease-out; + cursor: pointer; &:hover { color: $pl-color-white; @@ -96,3 +97,10 @@ } } } + +@mixin noSelect(){ + -webkit-user-select: none; /* Chrome all / Safari all */ + -moz-user-select: none; /* Firefox all */ + -ms-user-select: none; /* IE 10+ */ + user-select: none; /* Likely future */ +} diff --git a/packages/uikit-workshop/src/sass/scss/01-abstracts/_variables.scss b/packages/uikit-workshop/src/sass/scss/01-abstracts/_variables.scss index 3e663d412..a17295484 100644 --- a/packages/uikit-workshop/src/sass/scss/01-abstracts/_variables.scss +++ b/packages/uikit-workshop/src/sass/scss/01-abstracts/_variables.scss @@ -48,6 +48,7 @@ $pl-bp-xl: 62em; // Animations $pl-animate-quick: 0.1s; +$pl-animate-normal: 0.3s; // Borders $pl-border-radius: 3px; diff --git a/packages/uikit-workshop/src/sass/scss/02-base/_reset.scss b/packages/uikit-workshop/src/sass/scss/02-base/_reset.scss index 203b0f8fb..735a18995 100644 --- a/packages/uikit-workshop/src/sass/scss/02-base/_reset.scss +++ b/packages/uikit-workshop/src/sass/scss/02-base/_reset.scss @@ -15,3 +15,8 @@ -webkit-box-sizing: border-box; box-sizing: border-box; } + +button { + font-size: inherit; + background-color: transparent; +} diff --git a/packages/uikit-workshop/src/sass/scss/04-components/_tools.scss b/packages/uikit-workshop/src/sass/scss/04-components/_tools.scss index 992e0370f..663aad06c 100644 --- a/packages/uikit-workshop/src/sass/scss/04-components/_tools.scss +++ b/packages/uikit-workshop/src/sass/scss/04-components/_tools.scss @@ -35,7 +35,7 @@ * 2) Set the width and height of the icon to be the same height of font */ .pl-c-tools__toggle-icon { - position: absolute; + transition: inherit; // inherit transition styles from parent toggle } /** @@ -59,7 +59,8 @@ */ .pl-c-tools__action { @include linkStyle(); - display: block; + display: flex; + align-items: center; width: 100%; margin: 0; } From 8449b1a59abcf20b68cde4346cc6846c98df7bce Mon Sep 17 00:00:00 2001 From: Salem Ghoweri Date: Sun, 9 Sep 2018 08:46:11 -0400 Subject: [PATCH 005/100] fix: update annotation style to display consistently in browser UI -- display inline isn't centered as expected for example. --- .../uikit-workshop/src/scripts/components/modal-styleguide.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/uikit-workshop/src/scripts/components/modal-styleguide.js b/packages/uikit-workshop/src/scripts/components/modal-styleguide.js index 91e849e64..a7a8e8254 100644 --- a/packages/uikit-workshop/src/scripts/components/modal-styleguide.js +++ b/packages/uikit-workshop/src/scripts/components/modal-styleguide.js @@ -252,7 +252,7 @@ export const modalStyleguide = { elsToHighlight[j].firstChild ); } else { - annotationTip.style.display = 'inline'; + annotationTip.style.display = 'inline-flex'; } elsToHighlight[j].onclick = (function(el) { From 397cd2f40a70877dc46e9099bc61f0fa169f190d Mon Sep 17 00:00:00 2001 From: Salem Ghoweri Date: Sun, 9 Sep 2018 08:47:08 -0400 Subject: [PATCH 006/100] refactor: updating deps + new additions for POC web component demo --- packages/uikit-workshop/package.json | 32 ++++++++++++++++++++++------ 1 file changed, 26 insertions(+), 6 deletions(-) diff --git a/packages/uikit-workshop/package.json b/packages/uikit-workshop/package.json index 66109e6fd..1ad720cfb 100644 --- a/packages/uikit-workshop/package.json +++ b/packages/uikit-workshop/package.json @@ -32,18 +32,25 @@ "jshint": "^2.9.5" }, "devDependencies": { - "@babel/core": "^7.0.0-beta.55", - "@babel/preset-env": "^7.0.0-beta.55", + "@babel/core": "^7.0.0", + "@babel/plugin-proposal-class-properties": "^7.0.0", + "@babel/plugin-proposal-decorators": "^7.0.0", + "@babel/plugin-syntax-dynamic-import": "^7.0.0", + "@babel/plugin-syntax-jsx": "^7.0.0", + "@babel/plugin-transform-react-jsx": "^7.0.0", + "@babel/preset-env": "^7.0.0", "autoprefixer": "^9.1.0", - "babel-loader": "^8.0.0-beta.4", + "babel-loader": "^8.0.2", "clean-css-loader": "^1.0.1", "clean-webpack-plugin": "^0.1.19", "copy-webpack-plugin": "^4.5.2", + "cosmiconfig": "^5.0.6", "critical-css-webpack-plugin": "^0.2.0", "critical": "^1.3.4", "css-loader": "^1.0.0", "html-loader": "^0.5.5", "html-webpack-plugin": "github:jantimon/html-webpack-plugin#webpack-4", + "jshint": "^2.9.6", "mini-css-extract-plugin": "^0.4.1", "no-emit-webpack-plugin": "^1.0.0", "node-sass": "^4.9.3", @@ -61,18 +68,31 @@ "access": "public" }, "dependencies": { - "deepmerge": "^2.1.1", - "js-cookie": "^2.2.0", + "react-animate-height": "^2.0.4", + "@skatejs/renderer-preact": "^0.3.3", + "@webcomponents/shadydom": "^1.2.0", "clipboard": "^2.0.1", + "core-js": "^2.5.7", + "deepmerge": "^2.1.1", + "document-register-element": "^1.11.1", + "es6-promise": "^4.2.4", "fg-loadcss": "^2.0.1", "fg-loadjs": "^1.0.0", "hogan.js": "^3.0.2", "jquery": "^3.3.1", - "jshint": "^2.9.5", + "js-cookie": "^2.2.0", "mousetrap": "^1.6.2", + "preact-compat": "^3.18.4", + "preact": "^8.3.1", "prism": "^4.1.2", "prismjs": "^1.15.0", + "pwa-helpers": "^0.8.3", + "redux-thunk": "^2.3.0", + "redux": "^4.0.0", + "reselect": "^3.0.1", "scriptjs": "^2.5.8", + "scroll-js": "^1.9.1", + "skatejs": "^5.2.4", "typeahead.js": "^0.11.1", "whendefined": "^0.0.1", "wolfy87-eventemitter": "^5.2.4" From 7997a027588f1935801310f36d080e419b494d5b Mon Sep 17 00:00:00 2001 From: Josh Batley Date: Fri, 14 Sep 2018 19:35:02 +0100 Subject: [PATCH 007/100] fix: Prettier should only format .js files --- .prettierignore | 3 +++ package.json | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/.prettierignore b/.prettierignore index 627831b2a..81a5907aa 100644 --- a/.prettierignore +++ b/.prettierignore @@ -9,3 +9,6 @@ packages/core/scripts/api.handlebars packages/core/scripts/events.handlebars packages/core/test/files/annotations.js **/uikit-workshop/src/js/**/* +*.json +*.md +*.scss diff --git a/package.json b/package.json index c06bcbcc3..e1edce614 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "scripts": { "bootstrap": "npx lerna bootstrap", "precommit": "pretty-quick --staged", - "prettier": "prettier --config .prettierrc --write ./**/*.js", + "prettier": "prettier --config .prettierrc --write ./**/*.js --ignore-path .prettierignore", "test": "lerna run test", "clean": "git clean -dfx" }, From 3d38d4399bc8553b68bf5914fc94af3351bb49d6 Mon Sep 17 00:00:00 2001 From: Salem Ghoweri Date: Sat, 15 Sep 2018 09:21:42 -0400 Subject: [PATCH 008/100] refactor: update UIKit Webpack build to support inlining Sass files within JavaScript components + add support for JS components loading Sass files that aren't intended to be inlined; add support for externally exposing build config options via cosmic config --- packages/uikit-workshop/.patternlabrc.js | 5 + packages/uikit-workshop/package.json | 1 + packages/uikit-workshop/webpack.config.js | 388 +++++++++++++--------- 3 files changed, 241 insertions(+), 153 deletions(-) create mode 100644 packages/uikit-workshop/.patternlabrc.js diff --git a/packages/uikit-workshop/.patternlabrc.js b/packages/uikit-workshop/.patternlabrc.js new file mode 100644 index 000000000..2eaa244c1 --- /dev/null +++ b/packages/uikit-workshop/.patternlabrc.js @@ -0,0 +1,5 @@ +// .rc config file allowing users to customize folder locations, etc that are wired up to be configurable in the build process (via cosmic config) -- this example lives in the root of UIKit however can live in a higher-level parent as part of your project's config! + +module.exports = { + // buildDir: '../../../www/pattern-lab', +} \ No newline at end of file diff --git a/packages/uikit-workshop/package.json b/packages/uikit-workshop/package.json index 1ad720cfb..50ba6df63 100644 --- a/packages/uikit-workshop/package.json +++ b/packages/uikit-workshop/package.json @@ -32,6 +32,7 @@ "jshint": "^2.9.5" }, "devDependencies": { + "node-sass-selector-importer": "^5.2.0", "@babel/core": "^7.0.0", "@babel/plugin-proposal-class-properties": "^7.0.0", "@babel/plugin-proposal-decorators": "^7.0.0", diff --git a/packages/uikit-workshop/webpack.config.js b/packages/uikit-workshop/webpack.config.js index 4bcf63807..c0eea3f23 100644 --- a/packages/uikit-workshop/webpack.config.js +++ b/packages/uikit-workshop/webpack.config.js @@ -3,181 +3,263 @@ const CleanWebpackPlugin = require('clean-webpack-plugin'); const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); const NoEmitPlugin = require('no-emit-webpack-plugin'); const autoprefixer = require('autoprefixer'); -// const webpack = require('webpack'); const CriticalCssPlugin = require('critical-css-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); +const selectorImporter = require('node-sass-selector-importer'); const path = require('path'); +const cosmiconfig = require('cosmiconfig'); +const explorer = cosmiconfig('patternlab'); + // @todo: wire these two ocnfigs up to use cosmicconfig! -const config = { +const defaultConfig = { buildDir: './dist', - prod: true, // or false for local dev + prod: false, // or false for local dev sourceMaps: true, }; -// organize the series of plugins to run our Sass through as an external array -- this is necessary since we need to add additional loaders when compiling Sass to standalone CSS files vs compiling Sass and returning an inline-able ; + } else { + return null; + } + } +} From 78b38a1c7a8779b2e46c587adb7be8d9b4e82cb0 Mon Sep 17 00:00:00 2001 From: Salem Ghoweri Date: Sat, 15 Sep 2018 09:35:25 -0400 Subject: [PATCH 012/100] chore: add classnames helper library --- packages/uikit-workshop/package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/uikit-workshop/package.json b/packages/uikit-workshop/package.json index 50ba6df63..2c575e031 100644 --- a/packages/uikit-workshop/package.json +++ b/packages/uikit-workshop/package.json @@ -69,6 +69,7 @@ "access": "public" }, "dependencies": { + "classnames": "^2.2.6", "react-animate-height": "^2.0.4", "@skatejs/renderer-preact": "^0.3.3", "@webcomponents/shadydom": "^1.2.0", From a04bade6259e49b176aa7c2ba4142dfbdd975051 Mon Sep 17 00:00:00 2001 From: Salem Ghoweri Date: Sat, 15 Sep 2018 09:35:51 -0400 Subject: [PATCH 013/100] feat: add component --- .../pl-toggle-theme/pl-toggle-theme.js | 92 +++++++++++++++++++ .../pl-toggle-theme/pl-toggle-theme.scss | 18 ++++ 2 files changed, 110 insertions(+) create mode 100644 packages/uikit-workshop/src/scripts/components/pl-toggle-theme/pl-toggle-theme.js create mode 100644 packages/uikit-workshop/src/scripts/components/pl-toggle-theme/pl-toggle-theme.scss diff --git a/packages/uikit-workshop/src/scripts/components/pl-toggle-theme/pl-toggle-theme.js b/packages/uikit-workshop/src/scripts/components/pl-toggle-theme/pl-toggle-theme.js new file mode 100644 index 000000000..776a429ea --- /dev/null +++ b/packages/uikit-workshop/src/scripts/components/pl-toggle-theme/pl-toggle-theme.js @@ -0,0 +1,92 @@ +import { define, props } from 'skatejs'; +import { h } from 'preact'; + +import { store } from '../../store.js'; // connect to the Redux store. +import { updateThemeMode } from '../../actions/app.js'; // redux actions needed +import { BaseComponent } from '../base-component.js'; + +import './pl-toggle-theme.scss?external'; +import styles from './pl-toggle-theme.scss'; + +@define +class ThemeToggle extends BaseComponent { + static is = 'pl-toggle-theme'; + + constructor(self) { + self = super(self); + this.useShadow = false; + return self; + } + + connected() { + const state = store.getState(); + this.themeMode = state.app.themeMode || 'dark'; + store.dispatch(updateThemeMode(this.themeMode)); + } + + static props = { + themeMode: props.string, + }; + + _stateChanged(state) { + this.themeMode = state.app.themeMode; + } + + render({ themeMode }) { + const toggleThemeMode = this.themeMode !== 'dark' ? 'dark' : 'light'; + return ( +
+ {this._renderStyles([styles])} + +
+ ); + } +} + +export { ThemeToggle }; diff --git a/packages/uikit-workshop/src/scripts/components/pl-toggle-theme/pl-toggle-theme.scss b/packages/uikit-workshop/src/scripts/components/pl-toggle-theme/pl-toggle-theme.scss new file mode 100644 index 000000000..a95c4d29f --- /dev/null +++ b/packages/uikit-workshop/src/scripts/components/pl-toggle-theme/pl-toggle-theme.scss @@ -0,0 +1,18 @@ +@import '../../../sass/scss/core.scss'; +@import '{ .pl-c-tools__action, .pl-c-tools__action-text, .pl-c-tools__action-icon } from ../../../sass/scss/04-components/_tools.scss'; + +:host, +pl-toggle-theme { + display: inline-flex; + align-self: center; + justify-content: center; + align-items: center; + z-index: 10; + width: 100%; + cursor: pointer; +} + +.pl-c-toggle-theme, +.pl-c-toggle-theme__action { + width: 100%; +} From 65b1177e5a55fb46355cea018712bea86da66e5e Mon Sep 17 00:00:00 2001 From: Salem Ghoweri Date: Sat, 15 Sep 2018 09:36:03 -0400 Subject: [PATCH 014/100] feat: add component --- .../pl-toggle-layout/pl-toggle-layout.js | 86 +++++++++++++++++++ .../pl-toggle-layout/pl-toggle-layout.scss | 21 +++++ 2 files changed, 107 insertions(+) create mode 100644 packages/uikit-workshop/src/scripts/components/pl-toggle-layout/pl-toggle-layout.js create mode 100644 packages/uikit-workshop/src/scripts/components/pl-toggle-layout/pl-toggle-layout.scss diff --git a/packages/uikit-workshop/src/scripts/components/pl-toggle-layout/pl-toggle-layout.js b/packages/uikit-workshop/src/scripts/components/pl-toggle-layout/pl-toggle-layout.js new file mode 100644 index 000000000..5c32b282b --- /dev/null +++ b/packages/uikit-workshop/src/scripts/components/pl-toggle-layout/pl-toggle-layout.js @@ -0,0 +1,86 @@ +import { define, props } from 'skatejs'; +import { h } from 'preact'; + +import { store } from '../../store.js'; // connect to the Redux store. +import { updateLayoutMode } from '../../actions/app.js'; // redux actions +import { BaseComponent } from '../base-component.js'; + +import './pl-toggle-layout.scss?external'; +import styles from './pl-toggle-layout.scss'; + +@define +class LayoutToggle extends BaseComponent { + static is = 'pl-toggle-layout'; + + constructor(self) { + self = super(self); + this.useShadow = false; + return self; + } + + connected() { + const state = store.getState(); + this.layoutMode = state.app.layoutMode || 'vertical'; + store.dispatch(updateLayoutMode(this.layoutMode)); + } + + static props = { + layoutMode: props.string, + text: props.string, + }; + + _stateChanged(state) { + if (this.layoutMode !== state.app.layoutMode) { + this.layoutMode = state.app.layoutMode; + } + } + + render({ layoutMode, text }) { + const toggleLayoutMode = + layoutMode !== 'vertical' ? 'vertical' : 'horizontal'; + return ( +
+ {this._renderStyles([styles])} + +
+ ); + } +} + +export { LayoutToggle }; diff --git a/packages/uikit-workshop/src/scripts/components/pl-toggle-layout/pl-toggle-layout.scss b/packages/uikit-workshop/src/scripts/components/pl-toggle-layout/pl-toggle-layout.scss new file mode 100644 index 000000000..67b9858cc --- /dev/null +++ b/packages/uikit-workshop/src/scripts/components/pl-toggle-layout/pl-toggle-layout.scss @@ -0,0 +1,21 @@ +@import '../../../sass/scss/core.scss'; + +:host, +pl-toggle-layout { + display: none; + align-self: center; + justify-content: center; + align-items: center; + z-index: 10; + width: 100%; + cursor: pointer; + + @media all and (min-width: $pl-bp-med) { + display: inline-flex; + } +} + +.pl-c-toggle-layout, +.pl-c-toggle-layout__action { + width: 100%; +} \ No newline at end of file From 2141ad7c739d5f89af59f145974b8d2cdfc46b22 Mon Sep 17 00:00:00 2001 From: Salem Ghoweri Date: Sat, 15 Sep 2018 09:36:41 -0400 Subject: [PATCH 015/100] feat: add wrapping component that responds to state changes by the and components --- .../scripts/components/pl-layout/pl-layout.js | 77 +++++++++++++++++++ .../components/pl-layout/pl-layout.scss | 19 +++++ 2 files changed, 96 insertions(+) create mode 100644 packages/uikit-workshop/src/scripts/components/pl-layout/pl-layout.js create mode 100644 packages/uikit-workshop/src/scripts/components/pl-layout/pl-layout.scss diff --git a/packages/uikit-workshop/src/scripts/components/pl-layout/pl-layout.js b/packages/uikit-workshop/src/scripts/components/pl-layout/pl-layout.js new file mode 100644 index 000000000..c9f1573c0 --- /dev/null +++ b/packages/uikit-workshop/src/scripts/components/pl-layout/pl-layout.js @@ -0,0 +1,77 @@ +import { define, props } from 'skatejs'; +import { h } from 'preact'; +import Hogan from 'hogan.js'; +const classNames = require('classnames'); + +import { store } from '../../store.js'; // connect to redux +import { BaseComponent } from '../base-component.js'; + +import './pl-layout.scss?external'; + +@define +class Layout extends BaseComponent { + static is = 'pl-layout'; + + constructor(self) { + self = super(self); + try { + /* load pattern nav */ + const template = document.querySelector('.pl-js-pattern-nav-template'); + const templateCompiled = Hogan.compile(template.innerHTML); + const templateRendered = templateCompiled.render(window.navItems); + this.renderRoot.querySelector( + '.pl-js-pattern-nav-target' + ).innerHTML = templateRendered; + + /* load ish controls */ + const controlsTemplate = document.querySelector( + '.pl-js-ish-controls-template' + ); + const controlsTemplateCompiled = Hogan.compile( + controlsTemplate.innerHTML + ); + const controlsTemplateRendered = controlsTemplateCompiled.render( + window.ishControls + ); + this.renderRoot.querySelector( + '.pl-js-controls' + ).innerHTML = controlsTemplateRendered; + } catch (e) { + const message = + '

Please generate your site before trying to view it.

'; + this.renderRoot.querySelector( + '.pl-js-pattern-nav-target' + ).innerHTML = message; + } + return self; + } + + static props = { + layoutMode: props.string, + themeMode: props.string, + }; + + connected() { + const state = store.getState(); + this.layoutMode = state.app.layoutMode; + this.themeMode = state.app.themeMode; + } + + get renderRoot() { + return this; + } + + _stateChanged(state) { + this.layoutMode = state.app.layoutMode; + this.themeMode = state.app.themeMode; + + const classes = classNames({ + [`pl-c-body--theme-${this.themeMode}`]: this.themeMode !== undefined, + [`pl-c-body--theme-${this.layoutMode}`]: this.layoutMode !== undefined, + }); + + this.className = classes; + } +} + +export { Layout }; diff --git a/packages/uikit-workshop/src/scripts/components/pl-layout/pl-layout.scss b/packages/uikit-workshop/src/scripts/components/pl-layout/pl-layout.scss new file mode 100644 index 000000000..56e598e59 --- /dev/null +++ b/packages/uikit-workshop/src/scripts/components/pl-layout/pl-layout.scss @@ -0,0 +1,19 @@ +@import '../../../sass/scss/core.scss'; + +pl-layout { + display: flex; + flex-direction: column; + height: 100%; + background-color: $pl-color-gray-13; + + &.pl-c-body--theme-sidebar, + &.pl-c-body--theme-vertical { + @media all and (min-width: $pl-bp-med) { + flex-direction: row; + } + } + + &.pl-c-body--theme-light { + background-color: $pl-color-white; + } +} From 00954e32a03b50f915f8d7e24db216cf09181b96 Mon Sep 17 00:00:00 2001 From: Salem Ghoweri Date: Sat, 15 Sep 2018 09:37:13 -0400 Subject: [PATCH 016/100] chore: expose global Sass variables and mixins as a single importable dependency --- packages/uikit-workshop/src/sass/scss/core.scss | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 packages/uikit-workshop/src/sass/scss/core.scss diff --git a/packages/uikit-workshop/src/sass/scss/core.scss b/packages/uikit-workshop/src/sass/scss/core.scss new file mode 100644 index 000000000..50ce042c1 --- /dev/null +++ b/packages/uikit-workshop/src/sass/scss/core.scss @@ -0,0 +1,2 @@ +@import './01-abstracts/variables'; +@import './01-abstracts/mixins'; \ No newline at end of file From a9ed2b188a290d459ddc869beb422b9d4617382e Mon Sep 17 00:00:00 2001 From: Salem Ghoweri Date: Sat, 15 Sep 2018 09:38:19 -0400 Subject: [PATCH 017/100] refactor: delete layout.js -- ported over to the component added --- .../src/scripts/components/layout.js | 30 ------------------- 1 file changed, 30 deletions(-) delete mode 100644 packages/uikit-workshop/src/scripts/components/layout.js diff --git a/packages/uikit-workshop/src/scripts/components/layout.js b/packages/uikit-workshop/src/scripts/components/layout.js deleted file mode 100644 index e6cf2e3dc..000000000 --- a/packages/uikit-workshop/src/scripts/components/layout.js +++ /dev/null @@ -1,30 +0,0 @@ -/** - * Primary UI rendering for Pattern Lab - */ - -import Hogan from 'hogan.js'; - -try { - /* load pattern nav */ - const template = document.querySelector('.pl-js-pattern-nav-template'); - const templateCompiled = Hogan.compile(template.innerHTML); - const templateRendered = templateCompiled.render(window.navItems); - document.querySelector( - '.pl-js-pattern-nav-target' - ).innerHTML = templateRendered; - - /* load ish controls */ - const controlsTemplate = document.querySelector( - '.pl-js-ish-controls-template' - ); - const controlsTemplateCompiled = Hogan.compile(controlsTemplate.innerHTML); - const controlsTemplateRendered = controlsTemplateCompiled.render( - window.ishControls - ); - document.querySelector( - '.pl-js-controls' - ).innerHTML = controlsTemplateRendered; -} catch (e) { - const message = '

Please generate your site before trying to view it.

'; - document.querySelector('.pl-js-pattern-nav-target').innerHTML = message; -} From 10cf92ac0479e70e3792a4905acf56bf36b6055b Mon Sep 17 00:00:00 2001 From: Salem Ghoweri Date: Sat, 15 Sep 2018 09:39:04 -0400 Subject: [PATCH 018/100] refactor: remove old code no longer needed from index.html template --- packages/uikit-workshop/src/html/index.html | 47 --------------------- 1 file changed, 47 deletions(-) diff --git a/packages/uikit-workshop/src/html/index.html b/packages/uikit-workshop/src/html/index.html index 06f5a1c22..6a5438ff2 100644 --- a/packages/uikit-workshop/src/html/index.html +++ b/packages/uikit-workshop/src/html/index.html @@ -7,7 +7,6 @@ - @@ -38,56 +37,10 @@ - - - - - - - - -
+ + + + + + + +
\ No newline at end of file + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/uikit-workshop/dist/styleguide/css/pattern-lab.042bdcd6.css b/packages/uikit-workshop/dist/styleguide/css/pattern-lab.042bdcd6.css deleted file mode 100644 index 4ebc94be9..000000000 --- a/packages/uikit-workshop/dist/styleguide/css/pattern-lab.042bdcd6.css +++ /dev/null @@ -1 +0,0 @@ -.pl-c-header .pl-c-typeahead:focus{background:grey;color:#fff}.pl-c-header .twitter-typeahead{display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;width:100%}.pl-c-header .tt-input{background:grey;color:#fff}.pl-c-header .tt-input:hover{color:#fff;background:#222!important}.pl-c-header .tt-input:hover::-webkit-input-placeholder{color:#fff}.pl-c-header .tt-input:hover::-moz-input-placeholder{color:#fff}.pl-c-header .tt-input:focus{border-radius:0;text-transform:lowercase;color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-header .tt-hint{text-transform:lowercase}.pl-c-header .tt-menu{text-transform:lowercase;background-color:grey;width:100%;border-bottom-right-radius:6px;border-bottom-left-radius:6px}.pl-c-header .tt-suggestion{color:#eee;padding:.8em}.pl-c-header .tt-suggestion.tt-cursor{color:#fff;background:rgba(255,255,255,.25)}.pl-c-header .tt-suggestion p{margin:0}code[class*=language-],pre[class*=language-]{color:#000;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono',monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#a67f59;background:rgba(255,255,255,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}pre.line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}pre.line-numbers>code{position:relative}.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.8em;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.line-numbers-rows>span{pointer-events:none;display:block;counter-increment:linenumber}.line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.8em;text-align:right}.token a{color:inherit}.pl-c-header__nav-toggle{background:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out;border:0}.pl-c-header__nav-toggle:hover{color:#fff;background:#222}.pl-c-header__nav-toggle.active,.pl-c-header__nav-toggle:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-header__nav-toggle{background:#fff;color:#4d4c4c}.pl-c-body--theme-density-cozy .pl-c-header__nav-toggle{font-size:.85rem;padding:1.2rem .8rem}.pl-c-body--theme-density-comfortable .pl-c-header__nav-toggle{font-size:.85rem;padding:1.5rem 1rem}.pl-c-logo{max-width:2rem;margin:0 1rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.pl-c-logo:focus{outline:1px dotted grey;outline-offset:-1px}.pl-c-logo__img{display:block;max-width:100%;height:auto}@media all and (max-width:42em){.pl-c-nav{position:absolute;top:100%;width:100%;overflow:hidden;max-height:0;background:#000;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-transition:max-height .1s ease-out;transition:max-height .1s ease-out}.pl-c-nav.pl-is-active{max-height:50rem;height:calc(100vh - 2rem);overflow:auto;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-nav.pl-is-active::-webkit-scrollbar{width:0!important}}.pl-c-nav__item{cursor:pointer;position:relative}@media all and (min-width:42em){.pl-c-nav__sublist>.pl-c-nav__item:last-child{overflow:hidden;border-bottom-left-radius:6px;border-bottom-right-radius:6px}}.pl-c-nav__link{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out}.pl-c-nav__link:hover{color:#fff;background:#222}.pl-c-nav__link.active,.pl-c-nav__link:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-nav__link{background:#fff;color:#4d4c4c}.pl-c-body--theme-density-cozy .pl-c-nav__link{font-size:.85rem;padding:1.2rem .8rem}.pl-c-body--theme-density-comfortable .pl-c-nav__link{font-size:.85rem;padding:1.5rem 1rem}.pl-c-nav__link--sublink{text-transform:none;padding-left:1rem}.pl-c-nav__link--dropdown:after{content:'\25BC';color:rgba(255,255,255,.25);display:inline-block;font-size:7px;position:relative;top:1px;right:-2px;-webkit-transition:all .1s ease-out;transition:all .1s ease-out}.pl-c-nav__link--dropdown:focus:after,.pl-c-nav__link--dropdown:hover:after{color:grey}.pl-c-nav__link--dropdown.pl-is-active{color:#fff;background:#222}.pl-c-nav__link--dropdown.pl-is-active:after{color:grey;-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.pl-c-nav__sublist{list-style:none;margin:0;padding:0}@media all and (min-width:42em){.pl-c-nav__sublist{position:absolute;top:100%;left:0;min-width:10rem;overflow:hidden;border-bottom-left-radius:6px;border-bottom-right-radius:6px}}.pl-c-nav__sublist--dropdown,.pl-c-nav__subsublist--dropdown{list-style:none;margin:0;padding:0;overflow:hidden;max-height:0;-webkit-transition:max-height .1s ease-out;transition:max-height .1s ease-out}.pl-c-nav__sublist--dropdown.pl-is-active,.pl-c-nav__subsublist--dropdown.pl-is-active{max-height:none;overflow:auto;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-nav__sublist--dropdown.pl-is-active::-webkit-scrollbar,.pl-c-nav__subsublist--dropdown.pl-is-active::-webkit-scrollbar{width:0!important}@media all and (min-width:42em){.pl-c-nav__sublist--dropdown.pl-is-active,.pl-c-nav__subsublist--dropdown.pl-is-active{max-height:120rem}}@media all and (min-width:42em){.pl-c-nav__sublist--dropdown.pl-is-active{height:calc(100vh - 2rem)}}.pl-c-nav__subsublist{list-style:none;margin:0;padding:0}.pl-c-viewport-size__input{padding:.1rem;margin:0;border:0;border-radius:3px;background:0 0;font-size:inherit;color:grey;width:35px;text-align:right;-webkit-transition:all .1s ease-out;transition:all .1s ease-out}.pl-c-viewport-size__input:hover{color:#fff;background:#222}.pl-c-viewport-size__input:active,.pl-c-viewport-size__input:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-size-list__action{background:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out}.pl-c-size-list__action:hover{color:#fff;background:#222}.pl-c-size-list__action.active,.pl-c-size-list__action:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-size-list__action{background:#fff;color:#4d4c4c}.pl-c-body--theme-density-cozy .pl-c-size-list__action{font-size:.85rem;padding:1.2rem .8rem}.pl-c-body--theme-density-comfortable .pl-c-size-list__action{font-size:.85rem;padding:1.5rem 1rem}.pl-c-controls__list{list-style:none;margin:0;padding:0;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.pl-c-tools__toggle{background:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out;margin:0;padding-top:.6rem;padding-bottom:.5rem;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:relative;min-width:30px}.pl-c-tools__toggle:hover{color:#fff;background:#222}.pl-c-tools__toggle.active,.pl-c-tools__toggle:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-tools__toggle{background:#fff;color:#4d4c4c}.pl-c-body--theme-density-cozy .pl-c-tools__toggle{font-size:.85rem;padding:1.2rem .8rem}.pl-c-body--theme-density-comfortable .pl-c-tools__toggle{font-size:.85rem;padding:1.5rem 1rem}.pl-c-tools__list{list-style:none;margin:0;padding:0;overflow:hidden;max-height:0;-webkit-transition:max-height .1s ease-out;transition:max-height .1s ease-out;position:absolute;top:100%;right:0;z-index:1;width:10rem;border-bottom-left-radius:6px;border-bottom-right-radius:6px}.pl-c-tools__list.pl-is-active{max-height:none;overflow:auto;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-tools__list.pl-is-active::-webkit-scrollbar{width:0!important}@media all and (min-width:42em){.pl-c-tools__list.pl-is-active{max-height:120rem}}.pl-c-tools__action{background:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out;display:block;width:100%;margin:0}.pl-c-tools__action:hover{color:#fff;background:#222}.pl-c-tools__action.active,.pl-c-tools__action:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-tools__action{background:#fff;color:#4d4c4c}.pl-c-body--theme-density-cozy .pl-c-tools__action{font-size:.85rem;padding:1.2rem .8rem}.pl-c-body--theme-density-comfortable .pl-c-tools__action{font-size:.85rem;padding:1.5rem 1rem}.pl-c-viewport{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;flex-direction:column;height:auto;width:100%;position:relative;top:2rem;bottom:0;left:0;right:0;z-index:0;overflow:hidden;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-transition:height .3s ease;transition:height .3s ease;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);will-change:height}@supports ((position:-webkit-sticky) or (position:sticky)){.pl-c-viewport{top:0}}.pl-c-viewport__cover{width:100%;height:100%;display:none;position:absolute;z-index:20;cursor:move}.pl-c-viewport__iframe-wrapper.hay-mode{-webkit-transition:all 40s linear;transition:all 40s linear}.pl-c-viewport__iframe.hay-mode{-webkit-transition:all 40s linear;transition:all 40s linear}.pl-c-viewport__resizer{position:absolute;right:0;top:0;bottom:0;width:14px;margin:0;height:100%;cursor:ew-resize}.pl-c-viewport__resizer-handle{margin:0;width:100%;height:100%;background:#ccc;-webkit-transition:background .1s ease-out;transition:background .1s ease-out}.pl-c-viewport__resizer-handle:hover{background:grey}.pl-c-viewport__resizer-handle:active{cursor:move;background:#4d4c4c}.vp-animate{-webkit-transition:width .8s ease-out;transition:width .8s ease-out}.pl-c-pattern{margin-bottom:2rem;position:relative;clear:both}.pl-c-pattern__header{position:relative;padding:.5rem 0 0;line-height:1.3;font-size:90%;color:grey}.pl-c-pattern__header:empty{padding:0}.pl-c-pattern__title{font-family:HelveticaNeue,Helvetica,Arial,sans-serif!important;font-size:.85rem!important;line-height:1!important;font-weight:400!important;margin:0!important;padding:0!important;text-transform:capitalize!important}.pl-c-pattern__title-link{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;padding:1rem 0 .3rem;color:grey!important;text-decoration:none;cursor:pointer}.pl-c-pattern__title-link:focus,.pl-c-pattern__title-link:hover{color:#000!important}.pl-c-pattern__extra-toggle{font-size:9px;position:absolute;bottom:-1px;right:0;z-index:1;padding:.65em .65em .5em;line-height:1;color:grey;background:0 0;font-weight:400;border:1px solid #ddd;border-top-left-radius:6px;border-top-right-radius:6px;-webkit-transition:background .1s ease-out;transition:background .1s ease-out}.pl-c-pattern__extra-toggle .pl-c-pattern__toggle-icon{display:inline-block}.pl-c-pattern__extra-toggle.pl-is-active,.pl-c-pattern__extra-toggle:focus,.pl-c-pattern__extra-toggle:hover{background:#fafafa;color:#000}.pl-c-pattern__extra-toggle:focus{outline:1px dotted #4d4c4c}.pl-c-pattern__extra-toggle.pl-is-active{border-bottom-color:#fafafa}.pl-c-pattern__extra-toggle.pl-is-active .pl-c-pattern__toggle-icon{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.pl-c-pattern__extra{background:#fafafa;border-top:1px solid #ddd;margin-bottom:1rem;overflow:hidden;max-height:1px;position:relative;-webkit-transition:all .1s ease-out;transition:all .1s ease-out}.pl-c-pattern__extra.pl-is-active{border:1px solid #ddd;border-radius:6px;border-top-right-radius:0;max-height:150rem}.pl-c-category{margin-top:6rem;font:HelveticaNeue,Helvetica,Arial,sans-serif!important}.pl-c-category:first-of-type{margin-top:2rem}.pl-c-category__title{font-size:1.4rem!important;color:#222!important;margin:0 0 .2rem;text-transform:capitalize}.pl-c-category__title-link{-webkit-transition:color .1s ease-out;transition:color .1s ease-out}.pl-c-category__description{font-size:.85rem;line-height:1.5;max-width:30rem}.pl-c-category__description:empty{display:none}@media all and (min-width:53em){.pl-c-pattern-info{display:-webkit-box;display:-ms-flexbox;display:flex}}.pl-c-pattern .pl-c-pattern-info{max-height:20rem;overflow:scroll;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-pattern .pl-c-pattern-info::-webkit-scrollbar{width:0!important}@media all and (min-width:53em){.pl-c-pattern .pl-c-pattern-info{max-height:none;height:18rem;overflow:visible}}.pl-c-modal .pl-c-pattern-info{position:absolute;top:0;right:0;bottom:0;left:0;overflow:scroll;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-modal .pl-c-pattern-info::-webkit-scrollbar{width:0!important}@media all and (min-width:53em){.pl-c-modal .pl-c-pattern-info{position:static;overflow:visible}}.pl-c-pattern-info__panel{padding:1rem}@media all and (min-width:53em){.pl-c-pattern-info__panel{-webkit-box-flex:1;-ms-flex:auto;flex:auto;position:absolute;top:0;bottom:0;left:0;right:0}}@media all and (min-width:62em){.pl-c-modal .pl-c-pattern-info__panel{padding-left:2rem}}.pl-c-pattern-info__panel--info{padding-top:2rem}@media all and (min-width:53em){.pl-c-pattern-info__panel--info{left:0;right:50%;overflow:scroll;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-pattern-info__panel--info::-webkit-scrollbar{width:0!important}}@media all and (min-width:62em){.pl-c-pattern-info__panel--info{right:55%}}@media all and (min-width:53em){.pl-c-pattern-info__panel--info+.pl-c-pattern-info__panel--code{right:0;left:50%;top:1.2rem}}@media all and (min-width:62em){.pl-c-pattern-info__panel--info+.pl-c-pattern-info__panel--code{left:45%}}.pl-c-pattern-info__header{margin-bottom:.5rem}.pl-c-pattern-info__title{font-size:1.4rem!important;font-weight:400;margin-top:0;margin-bottom:0;color:inherit;text-transform:capitalize;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.pl-c-pattern-info__description{border-bottom-color:grey}.pl-c-annotations{border-top-color:grey}.pl-c-pattern-state{display:inline-block;width:5px;height:5px;margin-left:10px;position:relative;top:5px;left:0;border-radius:50%;background:#02a4d5;line-height:4px;text-indent:10px}.pl-c-pattern-state--complete{background:#03790f}.pl-c-pattern-state--inreview{background:#c7a118}.pl-c-pattern-state--deprecated{background:#b00b02}.complete:before{color:#03790f!important}.pl-c-lineage{font-size:.85rem;line-height:1.7;margin-top:0}.pl-c-lineage__link{font-style:italic;color:grey;text-decoration:underline;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transition:opacity .1s ease;transition:opacity .1s ease}.pl-c-lineage__link:focus,.pl-c-lineage__link:hover{opacity:.8}.pl-c-breadcrumb{list-style:none;margin:0;padding:0;margin-bottom:.5rem;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:.7rem;color:grey;text-transform:capitalize}.pl-c-breadcrumb__item:after{content:'\25B6';opacity:.4;font-size:6px;display:inline-block;margin:0 .2rem;position:relative;top:-1px}.pl-c-tabs{padding:0 .5rem .5rem;background:#fff;border:1px solid #ddd;border-radius:6px;font-family:HelveticaNeue,Helvetica,Arial,sans-serif;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow:hidden}@media all and (min-width:53em){.pl-c-pattern-info__panel--code .pl-c-tabs{position:absolute;top:1rem;bottom:1rem;left:1rem;right:1rem}}@media all and (min-width:62em){.pl-c-modal .pl-c-tabs{right:2rem;left:2rem}}.pl-c-tabs__list{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;list-style:none;margin:0;padding:.5rem 0;background:#fff}.pl-c-tabs__link{display:block;line-height:1;padding:.2rem .4rem;border:1px solid transparent;border-radius:6px;background:#fff;color:grey;cursor:pointer;text-decoration:none;text-transform:lowercase;-webkit-transition:all .1s ease-out;transition:all .1s ease-out}.pl-c-tabs__link:hover{color:#222}.pl-c-tabs__link.pl-is-active-tab{color:#222;background:#eee;border:1px solid #ddd}.pl-c-tabs__content{-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;overflow:scroll;-ms-overflow-style:-ms-autohiding-scrollbar;height:100%;padding-top:.5rem}.pl-c-tabs__content::-webkit-scrollbar{width:0!important}.pl-c-modal .pl-c-tabs__content{border:0}.pl-c-tabs__panel{display:none;min-height:12rem}.pl-c-tabs__panel.pl-is-active-tab{display:block}.pl-c-tabs__panel :not(pre)>code[class*=language-],.pl-c-tabs__panel pre[class*=language-]{background:0 0;margin:0;padding:0;border:0;display:block}.pl-c-tabs__panel code[class*=language-]{background:0 0;margin:0}.pl-c-tools__toggle{background:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out;margin:0;padding-top:.6rem;padding-bottom:.5rem;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:relative;min-width:30px}.pl-c-tools__toggle:hover{color:#fff;background:#222}.pl-c-tools__toggle.active,.pl-c-tools__toggle:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-tools__toggle{background:#fff;color:#4d4c4c}.pl-c-body--theme-density-cozy .pl-c-tools__toggle{font-size:.85rem;padding:1.2rem .8rem}.pl-c-body--theme-density-comfortable .pl-c-tools__toggle{font-size:.85rem;padding:1.5rem 1rem}.pl-c-tools__list{list-style:none;margin:0;padding:0;overflow:hidden;max-height:0;-webkit-transition:max-height .1s ease-out;transition:max-height .1s ease-out;position:absolute;top:100%;right:0;z-index:1;width:10rem;border-bottom-left-radius:6px;border-bottom-right-radius:6px}.pl-c-tools__list.pl-is-active{max-height:none;overflow:auto;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-tools__list.pl-is-active::-webkit-scrollbar{width:0!important}@media all and (min-width:42em){.pl-c-tools__list.pl-is-active{max-height:120rem}}.pl-c-tools__action{background:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out;display:block;width:100%;margin:0}.pl-c-tools__action:hover{color:#fff;background:#222}.pl-c-tools__action.active,.pl-c-tools__action:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-tools__action{background:#fff;color:#4d4c4c}.pl-c-body--theme-density-cozy .pl-c-tools__action{font-size:.85rem;padding:1.2rem .8rem}.pl-c-body--theme-density-comfortable .pl-c-tools__action{font-size:.85rem;padding:1.5rem 1rem}.pl-has-annotation{cursor:help!important;outline:1px dotted grey;outline-offset:-4px;-webkit-transition:-webkit-box-shadow .1s ease;transition:-webkit-box-shadow .1s ease;transition:box-shadow .1s ease;transition:box-shadow .1s ease,-webkit-box-shadow .1s ease}.pl-has-annotation a,.pl-has-annotation input{cursor:help!important}.pl-has-annotation:hover{-webkit-box-shadow:0 0 3px grey;box-shadow:0 0 3px grey}.pl-has-annotation.active{-webkit-box-shadow:inset 0 0 6px #4d4c4c;box-shadow:inset 0 0 6px #4d4c4c;outline:1px dotted grey;outline-offset:-1px}.pl-c-annotation-tip{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:24px!important;height:24px!important;margin-top:6px!important;margin-left:6px!important;border-radius:50%!important;background:#222!important;color:#fff!important;font-size:16px!important;position:absolute;z-index:100}.pl-c-annotations{margin:1rem 0}.pl-c-annotations__title{font-size:1.2rem!important;margin:0 0 .5rem}.pl-c-annotations .pl-c-annotations__list{counter-reset:the-count;padding:0;margin:0;list-style:none}.pl-c-annotations__item{position:relative;padding-left:1.5rem;margin-bottom:1rem;border-radius:6px;-webkit-transition:background .1s ease;transition:background .1s ease}.pl-c-annotations__item:before{content:counter(the-count);counter-increment:the-count;font-size:85%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:14px;height:14px;border-radius:50%;padding:2px;text-align:center;background:grey;color:#fff;position:absolute;top:4px;left:0}.pl-c-annotations__item.pl-is-active{outline:1px dotted grey;outline-offset:-1px}.pl-c-annotations .pl-c-annotations__item-title{margin-bottom:0}.pl-c-modal{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;font-family:HelveticaNeue,Helvetica,Arial,sans-serif;background:#000;color:#ccc;position:relative;top:auto;bottom:0;left:0;z-index:5;width:100%;height:0;-webkit-transition:height .3s ease,-webkit-transform .3s ease;transition:height .3s ease,-webkit-transform .3s ease;transition:transform .3s ease,height .3s ease;transition:transform .3s ease,height .3s ease,-webkit-transform .3s ease;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);pointer-events:none;will-change:height,transform;overflow:hidden}.pl-c-modal.pl-is-active{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);height:50vh;-webkit-transition:-webkit-transform .3s ease;transition:-webkit-transform .3s ease;transition:transform .3s ease;transition:transform .3s ease,-webkit-transform .3s ease;pointer-events:auto}.pl-c-modal__toolbar{display:-webkit-box;display:-ms-flexbox;display:flex}.pl-c-modal__close-btn{font-size:70%;background:#000;color:grey;border:0;border-radius:6px 6px 0 0;display:inline-block;padding:.5rem .5rem .3rem;margin:0;text-decoration:none;cursor:pointer;z-index:2;-webkit-transition:all .1s ease-out;transition:all .1s ease-out}.pl-c-modal__close-btn:focus,.pl-c-modal__close-btn:hover{background:#222;color:#fff}.pl-c-modal__close-btn:active,.pl-c-modal__close-btn:focus{outline:1px dotted grey;outline-offset:-2px}.pl-c-modal.pl-is-active .pl-c-modal__close-btn{bottom:100%}.pl-c-modal__cover{width:100%;height:100%;display:none;position:absolute;z-index:20;cursor:move}.pl-c-modal__resizer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;left:0;height:14px;width:100%;background:#000;z-index:2;cursor:ns-resize}.pl-c-modal__resizer:after{content:'';height:3px;width:50px;border-top:1px solid grey;border-bottom:1px solid grey;-webkit-transition:border-color .1s ease-out;transition:border-color .1s ease-out}.pl-c-modal__resizer:focus:after,.pl-c-modal__resizer:hover:after{border-color:#fff}.pl-c-modal__close-btn-icon{width:12px;height:12px;color:currentColor;fill:currentColor;-webkit-transition:fill .1s ease-out;transition:fill .1s ease-out}.pl-c-code-copy-btn{display:inline-block;position:absolute;top:.5rem;right:.5rem;padding:.2rem .4rem;background:#eee;color:#222;border:1px solid #ddd;border-radius:6px;font-family:HelveticaNeue,Helvetica,Arial,sans-serif;font-size:1rem;text-transform:lowercase;line-height:1;cursor:pointer;z-index:2;-webkit-transition:background .1s ease-out;transition:background .1s ease-out}.pl-c-code-copy-btn:focus,.pl-c-code-copy-btn:hover{background:#ccc}.pl-c-text-passage{font-size:.85rem;line-height:1.7}.pl-c-text-passage p{margin-top:0;margin-bottom:1rem}.pl-c-text-passage a{color:grey;text-decoration:underline;-webkit-transition:opacity .1s ease;transition:opacity .1s ease}.pl-c-text-passage a:focus,.pl-c-text-passage a:hover{opacity:.8}.pl-c-text-passage code[class*=language-],.pl-c-text-passage pre[class*=language-]{color:inherit}.pl-c-text-passage blockquote{padding-left:.8rem;border-left:3px solid inherit}.pl-c-text-passage hr{height:1px;background:grey;margin:2rem 0;border:0}.pl-c-text-passage h1{margin-bottom:1rem;font-weight:400}.pl-c-text-passage h2{margin:1rem 0 1rem;font-weight:400}.pl-c-text-passage h3{margin:1rem 0 1rem;font-weight:400}.pl-c-text-passage h4{margin:1rem 0 1rem;font-weight:400}.pl-c-text-passage h5{margin:1rem 0 1rem;font-weight:400}.pl-c-text-passage h6{margin:1rem 0 1rem;font-weight:400}.pl-c-text-passage ul{list-style:square;margin-left:.9rem;margin-bottom:1rem}.pl-c-text-passage ul li:last-child{margin-bottom:0}.pl-c-text-passage ol{list-style:decimal;margin-left:.9rem;margin-bottom:1rem}.pl-c-text-passage ol li:last-child{margin-bottom:0}.pl-c-text-passage li{margin-bottom:.5rem}.pl-c-body--theme-light .pl-c-header{background:#fff;border-bottom:1px solid #ccc}.pl-c-body--theme-light .pl-c-nav__sublist{background:0 0}.pl-c-body--theme-light .pl-c-tools__list.pl-is-active{border-bottom:1px solid #ccc;border-left:1px solid #ccc}.pl-c-body--theme-light .pl-c-nav__link--dropdown{color:#4d4c4c;background:#fff}.pl-c-body--theme-light .pl-c-nav__link--dropdown:after{color:#ccc}.pl-c-body--theme-light .pl-c-nav__sublist .pl-c-nav__link{border-left:1px solid #ccc;border-right:1px solid #ccc}@media all and (min-width:42em){.pl-c-body--theme-light .pl-c-nav__sublist>.pl-c-nav__item:last-child .pl-c-nav__link{border-bottom-left-radius:6px;border-bottom-right-radius:6px;border-bottom:1px solid #ccc}}.pl-c-body--theme-light .pl-c-viewport-size__input{color:#4d4c4c}.pl-c-body--theme-light .pl-c-viewport-size__input:focus,.pl-c-body--theme-light .pl-c-viewport-size__input:hover{background:#ddd}.pl-c-body--theme-light .typeahead{background:#ddd!important}.pl-c-body--theme-light .pl-c-typeahead{background:#ddd!important;color:#4d4c4c!important}.pl-c-body--theme-light .tt-input{background:#eee!important;color:#4d4c4c!important}.pl-c-body--theme-light .tt-input:hover{color:#222;background:#ddd!important}.pl-c-body--theme-light .tt-input:hover::-webkit-input-placeholder{color:#222}.pl-c-body--theme-light .tt-input:hover::-moz-input-placeholder{color:#222}.pl-c-body--theme-light .pl-c-modal{background:#fff;color:#4d4c4c;border-top:1px solid #ccc}.pl-c-body--theme-light .pl-c-modal__close-btn{background:#fff;border-top:1px solid #ccc;border-left:1px solid #ccc}.pl-c-body--theme-light .pl-c-modal__close-btn:focus,.pl-c-body--theme-light .pl-c-modal__close-btn:hover{background:#fafafa;color:#4d4c4c}.pl-c-body--theme-density-cozy .pl-c-header{font-size:.85rem}.pl-c-body--theme-density-cozy .pl-c-viewport-size__input{width:44px}.pl-c-body--theme-density-cozy .pl-c-typeahead{padding:.9rem .8rem}@media all and (max-width:78em){.pl-c-body--theme-density-cozy .pl-c-size-list{display:none}}@media all and (max-width:78em){.pl-c-body--theme-density-cozy .pl-c-viewport-size{display:none}}.pl-c-body--theme-density-cozy .pl-c-tools__toggle{min-width:44px}.pl-c-body--theme-density-cozy .pl-c-viewport{top:3.28rem}.pl-c-body--theme-density-comfortable .pl-c-header{font-size:.85rem}.pl-c-body--theme-density-comfortable .pl-c-logo{max-width:4rem}.pl-c-body--theme-density-comfortable .pl-c-header .tt-suggestion{padding:1.5rem 1rem}.pl-c-body--theme-density-comfortable .pl-c-viewport-size__input{width:44px}.pl-c-body--theme-density-comfortable .pl-c-typeahead{padding:.9rem 1rem}@media all and (max-width:78em){.pl-c-body--theme-density-comfortable .pl-c-size-list{display:none}}@media all and (max-width:78em){.pl-c-body--theme-density-comfortable .pl-c-viewport-size{display:none}}.pl-c-body--theme-density-comfortable .pl-c-tools__toggle{min-width:44px}.pl-c-body--theme-density-comfortable .pl-c-viewport{top:3.8rem}@media all and (min-width:48em){.pl-c-body--theme-sidebar .pl-c-header{width:14rem;height:100vh;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;border-bottom:0;padding:1rem;overflow:auto;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-body--theme-sidebar .pl-c-header::-webkit-scrollbar{width:0!important}.pl-c-body--theme-sidebar.pl-c-body--theme-light .pl-c-header{border-right:1px solid #ccc}.pl-c-body--theme-sidebar .pl-c-logo{max-width:7rem;margin:0 auto 1rem}.pl-c-body--theme-sidebar .pl-c-nav{display:block;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.pl-c-body--theme-sidebar .pl-c-nav__list{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.pl-c-body--theme-sidebar .pl-c-nav__link{font-size:.85rem;padding-left:0;padding-right:0}.pl-c-body--theme-sidebar .pl-c-nav__sublist{position:relative;border-radius:0}.pl-c-body--theme-sidebar .pl-c-nav__sublist .pl-c-nav__link{padding-left:1rem}.pl-c-body--theme-sidebar .pl-c-nav__sublist--dropdown.pl-is-active{border:0;border-left:1px solid #4d4c4c}.pl-c-body--theme-sidebar.pl-c-body--theme-light .pl-c-nav__sublist--dropdown.pl-is-active{border-left-color:#eee}}@media all and (min-width:48em) and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-nav__sublist--dropdown.pl-is-active{height:auto}}@media all and (min-width:48em){.pl-c-body--theme-sidebar .pl-c-nav__subsublist{border-left:1px solid #4d4c4c;margin-left:1rem}.pl-c-body--theme-sidebar.pl-c-body--theme-light .pl-c-nav__subsublist{border-left-color:#eee}.pl-c-body--theme-sidebar .pl-c-nav__sublist .pl-c-nav__link{border-left:0;border-right:0}}@media all and (min-width:48em) and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-nav__sublist>.pl-c-nav__item:last-child .pl-c-nav__link{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:0}}@media all and (min-width:48em){.pl-c-body--theme-sidebar .pl-c-controls{margin-top:auto;margin-left:0;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.pl-c-body--theme-sidebar .pl-c-size-list{display:none}.pl-c-body--theme-sidebar .pl-c-viewport-size{display:none}.pl-c-body--theme-sidebar .pl-c-typeahead{border-radius:6px}.pl-c-body--theme-sidebar .pl-c-header .twitter-typeahead{display:block!important;margin-bottom:.5rem}.pl-c-body--theme-sidebar .pl-c-tools__toggle{display:none}.pl-c-body--theme-sidebar .pl-c-tools__list{max-height:none;overflow:visible;position:relative;border-radius:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:100%}.pl-c-body--theme-sidebar .pl-c-tools__action{padding-left:0;padding-right:0}.pl-c-body--theme-sidebar .pl-c-viewport__iframe-wrapper{width:100%!important}.pl-c-body--theme-sidebar .pl-c-viewport__iframe{width:100%!important}.pl-c-body--theme-sidebar .pl-c-modal{left:14rem;right:0;width:auto}}.is-vishidden{position:absolute!important;overflow:hidden;width:1px;height:1px;padding:0;border:0;clip:rect(1px,1px,1px,1px)} \ No newline at end of file diff --git a/packages/uikit-workshop/dist/styleguide/css/pattern-lab.css b/packages/uikit-workshop/dist/styleguide/css/pattern-lab.css index f2f3906b2..0be417dd5 100644 --- a/packages/uikit-workshop/dist/styleguide/css/pattern-lab.css +++ b/packages/uikit-workshop/dist/styleguide/css/pattern-lab.css @@ -1 +1 @@ -.pl-c-body *{-webkit-box-sizing:border-box;box-sizing:border-box}.pl-c-body{margin:0;padding:0;background:#ddd;-webkit-text-size-adjust:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:100vh}.pl-c-header .pl-c-typeahead{border:0;background:#222!important;color:grey;width:100%;right:0;padding:.61rem .5rem;font-size:inherit}.pl-c-header .pl-c-typeahead:focus{background:grey;color:#fff}.pl-c-header .twitter-typeahead{display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;width:100%}.pl-c-header .tt-input{background:grey;color:#fff}.pl-c-header .tt-input:hover{color:#fff;background:#222!important}.pl-c-header .tt-input:hover::-webkit-input-placeholder{color:#fff}.pl-c-header .tt-input:hover::-moz-input-placeholder{color:#fff}.pl-c-header .tt-input:focus{border-radius:0;text-transform:lowercase;color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-header .tt-hint{text-transform:lowercase}.pl-c-header .tt-menu{text-transform:lowercase;background-color:grey;width:100%;border-bottom-right-radius:6px;border-bottom-left-radius:6px}.pl-c-header .tt-suggestion{color:#eee;padding:.8em}.pl-c-header .tt-suggestion.tt-cursor{color:#fff;background:rgba(255,255,255,.25)}.pl-c-header .tt-suggestion p{margin:0}code[class*=language-],pre[class*=language-]{color:#000;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono',monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#a67f59;background:rgba(255,255,255,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}pre.line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}pre.line-numbers>code{position:relative}.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.8em;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.line-numbers-rows>span{pointer-events:none;display:block;counter-increment:linenumber}.line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.8em;text-align:right}.token a{color:inherit}.pl-c-header{position:fixed;position:-webkit-sticky;position:sticky;top:0;left:0;z-index:4;display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;background:#000;color:grey;font-family:HelveticaNeue,Helvetica,Arial,sans-serif;font-size:.7rem}.pl-c-header__nav-toggle{background:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out;border:0}.pl-c-header__nav-toggle:hover{color:#fff;background:#222}.pl-c-header__nav-toggle.active,.pl-c-header__nav-toggle:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-header__nav-toggle{background:#fff;color:#4d4c4c}.pl-c-body--theme-density-cozy .pl-c-header__nav-toggle{font-size:.85rem;padding:1.2rem .8rem}.pl-c-body--theme-density-comfortable .pl-c-header__nav-toggle{font-size:.85rem;padding:1.5rem 1rem}@media all and (min-width:42em){.pl-c-header__nav-toggle{display:none}}.pl-c-logo{max-width:2rem;margin:0 1rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.pl-c-logo:focus{outline:1px dotted grey;outline-offset:-1px}.pl-c-logo__img{display:block;max-width:100%;height:auto}@media all and (max-width:42em){.pl-c-nav{position:absolute;top:100%;width:100%;overflow:hidden;max-height:0;background:#000;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-transition:max-height .1s ease-out;transition:max-height .1s ease-out}.pl-c-nav.pl-is-active{max-height:50rem;height:calc(100vh - 2rem);overflow:auto;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-nav.pl-is-active::-webkit-scrollbar{width:0!important}}@media all and (min-width:42em){.pl-c-nav{display:-webkit-box;display:-ms-flexbox;display:flex}}.pl-c-nav__list{z-index:1;margin:0;padding:0;list-style:none}@media all and (max-width:42em){.pl-c-nav__list{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}}@media all and (min-width:42em){.pl-c-nav__list{display:-webkit-box;display:-ms-flexbox;display:flex}}.pl-c-nav__item{cursor:pointer;position:relative}@media all and (min-width:42em){.pl-c-nav__sublist>.pl-c-nav__item:last-child{overflow:hidden;border-bottom-left-radius:6px;border-bottom-right-radius:6px}}.pl-c-nav__link{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out}.pl-c-nav__link:hover{color:#fff;background:#222}.pl-c-nav__link.active,.pl-c-nav__link:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-nav__link{background:#fff;color:#4d4c4c}.pl-c-body--theme-density-cozy .pl-c-nav__link{font-size:.85rem;padding:1.2rem .8rem}.pl-c-body--theme-density-comfortable .pl-c-nav__link{font-size:.85rem;padding:1.5rem 1rem}.pl-c-nav__link--sublink{text-transform:none;padding-left:1rem}.pl-c-nav__link--dropdown:after{content:'\25BC';color:rgba(255,255,255,.25);display:inline-block;font-size:7px;position:relative;top:1px;right:-2px;-webkit-transition:all .1s ease-out;transition:all .1s ease-out}.pl-c-nav__link--dropdown:focus:after,.pl-c-nav__link--dropdown:hover:after{color:grey}.pl-c-nav__link--dropdown.pl-is-active{color:#fff;background:#222}.pl-c-nav__link--dropdown.pl-is-active:after{color:grey;-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.pl-c-nav__sublist{list-style:none;margin:0;padding:0}@media all and (min-width:42em){.pl-c-nav__sublist{position:absolute;top:100%;left:0;min-width:10rem;overflow:hidden;border-bottom-left-radius:6px;border-bottom-right-radius:6px}}.pl-c-nav__sublist--dropdown,.pl-c-nav__subsublist--dropdown{list-style:none;margin:0;padding:0;overflow:hidden;max-height:0;-webkit-transition:max-height .1s ease-out;transition:max-height .1s ease-out}.pl-c-nav__sublist--dropdown.pl-is-active,.pl-c-nav__subsublist--dropdown.pl-is-active{max-height:none;overflow:auto;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-nav__sublist--dropdown.pl-is-active::-webkit-scrollbar,.pl-c-nav__subsublist--dropdown.pl-is-active::-webkit-scrollbar{width:0!important}@media all and (min-width:42em){.pl-c-nav__sublist--dropdown.pl-is-active,.pl-c-nav__subsublist--dropdown.pl-is-active{max-height:120rem}}@media all and (min-width:42em){.pl-c-nav__sublist--dropdown.pl-is-active{height:calc(100vh - 2rem)}}.pl-c-nav__subsublist{list-style:none;margin:0;padding:0}.pl-c-viewport-size{margin:0;border:0;padding:.3rem .5rem .4rem;line-height:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.pl-c-viewport-size__input{padding:.1rem;margin:0;border:0;border-radius:3px;background:0 0;font-size:inherit;color:grey;width:35px;text-align:right;-webkit-transition:all .1s ease-out;transition:all .1s ease-out}.pl-c-viewport-size__input::-moz-focus-inner{padding:0;border:0}.pl-c-viewport-size__input:hover{color:#fff;background:#222}.pl-c-viewport-size__input:active,.pl-c-viewport-size__input:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-viewport-size__label{display:block;margin:0;padding:0}.pl-c-size-list{display:none;list-style:none;margin:0;padding:0}@media all and (min-width:53em){.pl-c-size-list{display:block;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}}.pl-c-size-list__action{background:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out}.pl-c-size-list__action:hover{color:#fff;background:#222}.pl-c-size-list__action.active,.pl-c-size-list__action:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-size-list__action{background:#fff;color:#4d4c4c}.pl-c-body--theme-density-cozy .pl-c-size-list__action{font-size:.85rem;padding:1.2rem .8rem}.pl-c-body--theme-density-comfortable .pl-c-size-list__action{font-size:.85rem;padding:1.5rem 1rem}.pl-c-controls{margin-left:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.pl-c-controls__list{list-style:none;margin:0;padding:0;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.pl-c-tools{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex}.pl-c-tools__toggle{background:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out;margin:0;padding-top:.6rem;padding-bottom:.5rem;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:relative;min-width:30px}.pl-c-tools__toggle:hover{color:#fff;background:#222}.pl-c-tools__toggle.active,.pl-c-tools__toggle:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-tools__toggle{background:#fff;color:#4d4c4c}.pl-c-body--theme-density-cozy .pl-c-tools__toggle{font-size:.85rem;padding:1.2rem .8rem}.pl-c-body--theme-density-comfortable .pl-c-tools__toggle{font-size:.85rem;padding:1.5rem 1rem}.pl-c-tools__toggle-icon{position:absolute}.pl-c-tools__list{list-style:none;margin:0;padding:0;overflow:hidden;max-height:0;-webkit-transition:max-height .1s ease-out;transition:max-height .1s ease-out;position:absolute;top:100%;right:0;z-index:1;width:10rem;border-bottom-left-radius:6px;border-bottom-right-radius:6px}.pl-c-tools__list.pl-is-active{max-height:none;overflow:auto;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-tools__list.pl-is-active::-webkit-scrollbar{width:0!important}@media all and (min-width:42em){.pl-c-tools__list.pl-is-active{max-height:120rem}}.pl-c-tools__action{background:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out;display:block;width:100%;margin:0}.pl-c-tools__action:hover{color:#fff;background:#222}.pl-c-tools__action.active,.pl-c-tools__action:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-tools__action{background:#fff;color:#4d4c4c}.pl-c-body--theme-density-cozy .pl-c-tools__action{font-size:.85rem;padding:1.2rem .8rem}.pl-c-body--theme-density-comfortable .pl-c-tools__action{font-size:.85rem;padding:1.5rem 1rem}.pl-c-viewport{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;flex-direction:column;height:auto;width:100%;position:relative;top:2rem;bottom:0;left:0;right:0;z-index:0;overflow:hidden;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-transition:height .3s ease;transition:height .3s ease;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);will-change:height}@supports ((position: -webkit-sticky) or (position: sticky)){.pl-c-viewport{top:0}}.pl-c-viewport__cover{width:100%;height:100%;display:none;position:absolute;z-index:20;cursor:move}.pl-c-viewport__iframe-wrapper{height:100%;width:100%;position:relative;margin:0 auto;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-overflow-scrolling:touch;overflow-y:auto;overflow-x:hidden;width:100%}.pl-c-viewport__iframe-wrapper.hay-mode{-webkit-transition:all 40s linear;transition:all 40s linear}.pl-c-viewport__iframe{position:absolute;height:100%;width:100%;border:0;padding:0;margin:0;top:0;bottom:0;left:0;right:0;background-color:#fff}.pl-c-viewport__iframe.hay-mode{-webkit-transition:all 40s linear;transition:all 40s linear}.pl-c-viewport__resizer{position:absolute;right:0;top:0;bottom:0;width:14px;margin:0;height:100%;cursor:ew-resize}.pl-c-viewport__resizer-handle{margin:0;width:100%;height:100%;background:#ccc;-webkit-transition:background .1s ease-out;transition:background .1s ease-out}.pl-c-viewport__resizer-handle:hover{background:grey}.pl-c-viewport__resizer-handle:active{cursor:move;background:#4d4c4c}.vp-animate{-webkit-transition:width .8s ease-out;transition:width .8s ease-out}.pl-c-pattern{margin-bottom:2rem;position:relative;clear:both}.pl-c-pattern__header{position:relative;padding:.5rem 0 0;line-height:1.3;font-size:90%;color:grey}.pl-c-pattern__header:empty{padding:0}.pl-c-pattern__title{font-family:HelveticaNeue,Helvetica,Arial,sans-serif!important;font-size:.85rem!important;line-height:1!important;font-weight:400!important;margin:0!important;padding:0!important;text-transform:capitalize!important}.pl-c-pattern__title-link{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;padding:1rem 0 .3rem;color:grey!important;text-decoration:none;cursor:pointer}.pl-c-pattern__title-link:focus,.pl-c-pattern__title-link:hover{color:#000!important}.pl-c-pattern__extra-toggle{font-size:9px;position:absolute;bottom:-1px;right:0;z-index:1;padding:.65em .65em .5em;line-height:1;color:grey;background:0 0;font-weight:400;border:1px solid #ddd;border-top-left-radius:6px;border-top-right-radius:6px;-webkit-transition:background .1s ease-out;transition:background .1s ease-out}.pl-c-pattern__extra-toggle .pl-c-pattern__toggle-icon{display:inline-block}.pl-c-pattern__extra-toggle.pl-is-active,.pl-c-pattern__extra-toggle:focus,.pl-c-pattern__extra-toggle:hover{background:#fafafa;color:#000}.pl-c-pattern__extra-toggle:focus{outline:1px dotted #4d4c4c}.pl-c-pattern__extra-toggle.pl-is-active{border-bottom-color:#fafafa}.pl-c-pattern__extra-toggle.pl-is-active .pl-c-pattern__toggle-icon{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.pl-c-pattern__extra{background:#fafafa;border-top:1px solid #ddd;margin-bottom:1rem;overflow:hidden;max-height:1px;position:relative;-webkit-transition:all .1s ease-out;transition:all .1s ease-out}.pl-c-pattern__extra.pl-is-active{border:1px solid #ddd;border-radius:6px;border-top-right-radius:0;max-height:150rem}.pl-c-category{margin-top:6rem;font:HelveticaNeue,Helvetica,Arial,sans-serif!important}.pl-c-category:first-of-type{margin-top:2rem}.pl-c-category__title{font-size:1.4rem!important;color:#222!important;margin:0 0 .2rem;text-transform:capitalize}.pl-c-category__title-link{-webkit-transition:color .1s ease-out;transition:color .1s ease-out}.pl-c-category__description{font-size:.85rem;line-height:1.5;max-width:30rem}.pl-c-category__description:empty{display:none}@media all and (min-width:53em){.pl-c-pattern-info{display:-webkit-box;display:-ms-flexbox;display:flex}}.pl-c-pattern .pl-c-pattern-info{max-height:20rem;overflow:scroll;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-pattern .pl-c-pattern-info::-webkit-scrollbar{width:0!important}@media all and (min-width:53em){.pl-c-pattern .pl-c-pattern-info{max-height:none;height:18rem;overflow:visible}}.pl-c-modal .pl-c-pattern-info{position:absolute;top:0;right:0;bottom:0;left:0;overflow:scroll;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-modal .pl-c-pattern-info::-webkit-scrollbar{width:0!important}@media all and (min-width:53em){.pl-c-modal .pl-c-pattern-info{position:static;overflow:visible}}.pl-c-pattern-info__panel{padding:1rem}@media all and (min-width:53em){.pl-c-pattern-info__panel{-webkit-box-flex:1;-ms-flex:auto;flex:auto;position:absolute;top:0;bottom:0;left:0;right:0}}@media all and (min-width:62em){.pl-c-modal .pl-c-pattern-info__panel{padding-left:2rem}}.pl-c-pattern-info__panel--info{padding-top:2rem}@media all and (min-width:53em){.pl-c-pattern-info__panel--info{left:0;right:50%;overflow:scroll;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-pattern-info__panel--info::-webkit-scrollbar{width:0!important}}@media all and (min-width:62em){.pl-c-pattern-info__panel--info{right:55%}}@media all and (min-width:53em){.pl-c-pattern-info__panel--info+.pl-c-pattern-info__panel--code{right:0;left:50%;top:1.2rem}}@media all and (min-width:62em){.pl-c-pattern-info__panel--info+.pl-c-pattern-info__panel--code{left:45%}}.pl-c-pattern-info__header{margin-bottom:.5rem}.pl-c-pattern-info__title{font-size:1.4rem!important;font-weight:400;margin-top:0;margin-bottom:0;color:inherit;text-transform:capitalize;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.pl-c-pattern-info__description{border-bottom-color:grey}.pl-c-annotations{border-top-color:grey}.pl-c-pattern-state{display:inline-block;width:5px;height:5px;margin-left:10px;position:relative;top:5px;left:0;border-radius:50%;background:#02a4d5;line-height:4px;text-indent:10px}.pl-c-pattern-state--complete{background:#03790f}.pl-c-pattern-state--inreview{background:#c7a118}.pl-c-pattern-state--deprecated{background:#b00b02}.complete:before{color:#03790f!important}.pl-c-lineage{font-size:.85rem;line-height:1.7;margin-top:0}.pl-c-lineage__link{font-style:italic;color:grey;text-decoration:underline;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transition:opacity .1s ease;transition:opacity .1s ease}.pl-c-lineage__link:focus,.pl-c-lineage__link:hover{opacity:.8}.pl-c-breadcrumb{list-style:none;margin:0;padding:0;margin-bottom:.5rem;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:.7rem;color:grey;text-transform:capitalize}.pl-c-breadcrumb__item:after{content:'\25B6';opacity:.4;font-size:6px;display:inline-block;margin:0 .2rem;position:relative;top:-1px}.pl-c-tabs{padding:0 .5rem .5rem;background:#fff;border:1px solid #ddd;border-radius:6px;font-family:HelveticaNeue,Helvetica,Arial,sans-serif;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow:hidden}@media all and (min-width:53em){.pl-c-pattern-info__panel--code .pl-c-tabs{position:absolute;top:1rem;bottom:1rem;left:1rem;right:1rem}}@media all and (min-width:62em){.pl-c-modal .pl-c-tabs{right:2rem;left:2rem}}.pl-c-tabs__list{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;list-style:none;margin:0;padding:.5rem 0;background:#fff}.pl-c-tabs__link{display:block;line-height:1;padding:.2rem .4rem;border:1px solid transparent;border-radius:6px;background:#fff;color:grey;cursor:pointer;text-decoration:none;text-transform:lowercase;-webkit-transition:all .1s ease-out;transition:all .1s ease-out}.pl-c-tabs__link:hover{color:#222}.pl-c-tabs__link.pl-is-active-tab{color:#222;background:#eee;border:1px solid #ddd}.pl-c-tabs__content{-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;overflow:scroll;-ms-overflow-style:-ms-autohiding-scrollbar;height:100%;padding-top:.5rem}.pl-c-tabs__content::-webkit-scrollbar{width:0!important}.pl-c-modal .pl-c-tabs__content{border:0}.pl-c-tabs__panel{display:none;min-height:12rem}.pl-c-tabs__panel.pl-is-active-tab{display:block}.pl-c-tabs__panel :not(pre)>code[class*=language-],.pl-c-tabs__panel pre[class*=language-]{background:0 0;margin:0;padding:0;border:0;display:block}.pl-c-tabs__panel code[class*=language-]{background:0 0;margin:0}.pl-c-tools{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex}.pl-c-tools__toggle{background:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out;margin:0;padding-top:.6rem;padding-bottom:.5rem;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:relative;min-width:30px}.pl-c-tools__toggle:hover{color:#fff;background:#222}.pl-c-tools__toggle.active,.pl-c-tools__toggle:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-tools__toggle{background:#fff;color:#4d4c4c}.pl-c-body--theme-density-cozy .pl-c-tools__toggle{font-size:.85rem;padding:1.2rem .8rem}.pl-c-body--theme-density-comfortable .pl-c-tools__toggle{font-size:.85rem;padding:1.5rem 1rem}.pl-c-tools__toggle-icon{position:absolute}.pl-c-tools__list{list-style:none;margin:0;padding:0;overflow:hidden;max-height:0;-webkit-transition:max-height .1s ease-out;transition:max-height .1s ease-out;position:absolute;top:100%;right:0;z-index:1;width:10rem;border-bottom-left-radius:6px;border-bottom-right-radius:6px}.pl-c-tools__list.pl-is-active{max-height:none;overflow:auto;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-tools__list.pl-is-active::-webkit-scrollbar{width:0!important}@media all and (min-width:42em){.pl-c-tools__list.pl-is-active{max-height:120rem}}.pl-c-tools__action{background:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background .1s ease-out,color .1s ease-out;transition:background .1s ease-out,color .1s ease-out;display:block;width:100%;margin:0}.pl-c-tools__action:hover{color:#fff;background:#222}.pl-c-tools__action.active,.pl-c-tools__action:focus{color:#fff;background:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-tools__action{background:#fff;color:#4d4c4c}.pl-c-body--theme-density-cozy .pl-c-tools__action{font-size:.85rem;padding:1.2rem .8rem}.pl-c-body--theme-density-comfortable .pl-c-tools__action{font-size:.85rem;padding:1.5rem 1rem}.pl-has-annotation{cursor:help!important;outline:1px dotted grey;outline-offset:-4px;-webkit-transition:-webkit-box-shadow .1s ease;transition:-webkit-box-shadow .1s ease;transition:box-shadow .1s ease;transition:box-shadow .1s ease, -webkit-box-shadow .1s ease}.pl-has-annotation a,.pl-has-annotation input{cursor:help!important}.pl-has-annotation:hover{-webkit-box-shadow:0 0 3px grey;box-shadow:0 0 3px grey}.pl-has-annotation.active{-webkit-box-shadow:inset 0 0 6px #4d4c4c;box-shadow:inset 0 0 6px #4d4c4c;outline:1px dotted grey;outline-offset:-1px}.pl-c-annotation-tip{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:24px!important;height:24px!important;margin-top:6px!important;margin-left:6px!important;border-radius:50%!important;background:#222!important;color:#fff!important;font-size:16px!important;position:absolute;z-index:100}.pl-c-annotations{margin:1rem 0}.pl-c-annotations__title{font-size:1.2rem!important;margin:0 0 .5rem}.pl-c-annotations .pl-c-annotations__list{counter-reset:the-count;padding:0;margin:0;list-style:none}.pl-c-annotations__item{position:relative;padding-left:1.5rem;margin-bottom:1rem;border-radius:6px;-webkit-transition:background .1s ease;transition:background .1s ease}.pl-c-annotations__item:before{content:counter(the-count);counter-increment:the-count;font-size:85%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:14px;height:14px;border-radius:50%;padding:2px;text-align:center;background:grey;color:#fff;position:absolute;top:4px;left:0}.pl-c-annotations__item.pl-is-active{outline:1px dotted grey;outline-offset:-1px}.pl-c-annotations .pl-c-annotations__item-title{margin-bottom:0}.pl-c-modal{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;font-family:HelveticaNeue,Helvetica,Arial,sans-serif;background:#000;color:#ccc;position:relative;top:auto;bottom:0;left:0;z-index:5;width:100%;height:0;-webkit-transition:height .3s ease,-webkit-transform .3s ease;transition:height .3s ease,-webkit-transform .3s ease;transition:transform .3s ease,height .3s ease;transition:transform .3s ease,height .3s ease,-webkit-transform .3s ease;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);pointer-events:none;will-change:height,transform;overflow:hidden}.pl-c-modal.pl-is-active{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);height:50vh;-webkit-transition:-webkit-transform .3s ease;transition:-webkit-transform .3s ease;transition:transform .3s ease;transition:transform .3s ease, -webkit-transform .3s ease;pointer-events:auto}.pl-c-modal__toolbar{display:-webkit-box;display:-ms-flexbox;display:flex}.pl-c-modal__close-btn{font-size:70%;background:#000;color:grey;border:0;border-radius:6px 6px 0 0;display:inline-block;padding:.5rem .5rem .3rem;margin:0;text-decoration:none;cursor:pointer;z-index:2;-webkit-transition:all .1s ease-out;transition:all .1s ease-out}.pl-c-modal__close-btn:focus,.pl-c-modal__close-btn:hover{background:#222;color:#fff}.pl-c-modal__close-btn:active,.pl-c-modal__close-btn:focus{outline:1px dotted grey;outline-offset:-2px}.pl-c-modal.pl-is-active .pl-c-modal__close-btn{bottom:100%}.pl-c-modal__cover{width:100%;height:100%;display:none;position:absolute;z-index:20;cursor:move}.pl-c-modal__resizer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;left:0;height:14px;width:100%;background:#000;z-index:2;cursor:ns-resize}.pl-c-modal__resizer:after{content:'';height:3px;width:50px;border-top:1px solid grey;border-bottom:1px solid grey;-webkit-transition:border-color .1s ease-out;transition:border-color .1s ease-out}.pl-c-modal__resizer:focus:after,.pl-c-modal__resizer:hover:after{border-color:#fff}.pl-c-modal__close-btn-icon{width:12px;height:12px;color:currentColor;fill:currentColor;-webkit-transition:fill .1s ease-out;transition:fill .1s ease-out}.pl-c-code-copy-btn{display:inline-block;position:absolute;top:.5rem;right:.5rem;padding:.2rem .4rem;background:#eee;color:#222;border:1px solid #ddd;border-radius:6px;font-family:HelveticaNeue,Helvetica,Arial,sans-serif;font-size:1rem;text-transform:lowercase;line-height:1;cursor:pointer;z-index:2;-webkit-transition:background .1s ease-out;transition:background .1s ease-out}.pl-c-code-copy-btn:focus,.pl-c-code-copy-btn:hover{background:#ccc}.pl-c-text-passage{font-size:.85rem;line-height:1.7}.pl-c-text-passage p{margin-top:0;margin-bottom:1rem}.pl-c-text-passage a{color:grey;text-decoration:underline;-webkit-transition:opacity .1s ease;transition:opacity .1s ease}.pl-c-text-passage a:focus,.pl-c-text-passage a:hover{opacity:.8}.pl-c-text-passage code[class*=language-],.pl-c-text-passage pre[class*=language-]{color:inherit}.pl-c-text-passage blockquote{padding-left:.8rem;border-left:3px solid inherit}.pl-c-text-passage hr{height:1px;background:grey;margin:2rem 0;border:0}.pl-c-text-passage h1{margin-bottom:1rem;font-weight:400}.pl-c-text-passage h2{margin:1rem 0 1rem;font-weight:400}.pl-c-text-passage h3{margin:1rem 0 1rem;font-weight:400}.pl-c-text-passage h4{margin:1rem 0 1rem;font-weight:400}.pl-c-text-passage h5{margin:1rem 0 1rem;font-weight:400}.pl-c-text-passage h6{margin:1rem 0 1rem;font-weight:400}.pl-c-text-passage ul{list-style:square;margin-left:.9rem;margin-bottom:1rem}.pl-c-text-passage ul li:last-child{margin-bottom:0}.pl-c-text-passage ol{list-style:decimal;margin-left:.9rem;margin-bottom:1rem}.pl-c-text-passage ol li:last-child{margin-bottom:0}.pl-c-text-passage li{margin-bottom:.5rem}.pl-c-body--theme-light .pl-c-header{background:#fff;border-bottom:1px solid #ccc}.pl-c-body--theme-light .pl-c-nav__sublist{background:0 0}.pl-c-body--theme-light .pl-c-tools__list.pl-is-active{border-bottom:1px solid #ccc;border-left:1px solid #ccc}.pl-c-body--theme-light .pl-c-nav__link--dropdown{color:#4d4c4c;background:#fff}.pl-c-body--theme-light .pl-c-nav__link--dropdown:after{color:#ccc}.pl-c-body--theme-light .pl-c-nav__sublist .pl-c-nav__link{border-left:1px solid #ccc;border-right:1px solid #ccc}@media all and (min-width:42em){.pl-c-body--theme-light .pl-c-nav__sublist>.pl-c-nav__item:last-child .pl-c-nav__link{border-bottom-left-radius:6px;border-bottom-right-radius:6px;border-bottom:1px solid #ccc}}.pl-c-body--theme-light .pl-c-viewport-size__input{color:#4d4c4c}.pl-c-body--theme-light .pl-c-viewport-size__input:focus,.pl-c-body--theme-light .pl-c-viewport-size__input:hover{background:#ddd}.pl-c-body--theme-light .typeahead{background:#ddd!important}.pl-c-body--theme-light .pl-c-typeahead{background:#ddd!important;color:#4d4c4c!important}.pl-c-body--theme-light .tt-input{background:#eee!important;color:#4d4c4c!important}.pl-c-body--theme-light .tt-input:hover{color:#222;background:#ddd!important}.pl-c-body--theme-light .tt-input:hover::-webkit-input-placeholder{color:#222}.pl-c-body--theme-light .tt-input:hover::-moz-input-placeholder{color:#222}.pl-c-body--theme-light .pl-c-modal{background:#fff;color:#4d4c4c;border-top:1px solid #ccc}.pl-c-body--theme-light .pl-c-modal__close-btn{background:#fff;border-top:1px solid #ccc;border-left:1px solid #ccc}.pl-c-body--theme-light .pl-c-modal__close-btn:focus,.pl-c-body--theme-light .pl-c-modal__close-btn:hover{background:#fafafa;color:#4d4c4c}.pl-c-body--theme-density-cozy .pl-c-header{font-size:.85rem}.pl-c-body--theme-density-cozy .pl-c-viewport-size__input{width:44px}.pl-c-body--theme-density-cozy .pl-c-typeahead{padding:.9rem .8rem}@media all and (max-width:78em){.pl-c-body--theme-density-cozy .pl-c-size-list{display:none}}@media all and (max-width:78em){.pl-c-body--theme-density-cozy .pl-c-viewport-size{display:none}}.pl-c-body--theme-density-cozy .pl-c-tools__toggle{min-width:44px}.pl-c-body--theme-density-cozy .pl-c-viewport{top:3.28rem}.pl-c-body--theme-density-comfortable .pl-c-header{font-size:.85rem}.pl-c-body--theme-density-comfortable .pl-c-logo{max-width:4rem}.pl-c-body--theme-density-comfortable .pl-c-header .tt-suggestion{padding:1.5rem 1rem}.pl-c-body--theme-density-comfortable .pl-c-viewport-size__input{width:44px}.pl-c-body--theme-density-comfortable .pl-c-typeahead{padding:.9rem 1rem}@media all and (max-width:78em){.pl-c-body--theme-density-comfortable .pl-c-size-list{display:none}}@media all and (max-width:78em){.pl-c-body--theme-density-comfortable .pl-c-viewport-size{display:none}}.pl-c-body--theme-density-comfortable .pl-c-tools__toggle{min-width:44px}.pl-c-body--theme-density-comfortable .pl-c-viewport{top:3.8rem}@media all and (min-width:48em){.pl-c-body--theme-sidebar .pl-c-header{width:14rem;height:100vh;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;border-bottom:0;padding:1rem;overflow:auto;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-body--theme-sidebar .pl-c-header::-webkit-scrollbar{width:0!important}.pl-c-body--theme-sidebar.pl-c-body--theme-light .pl-c-header{border-right:1px solid #ccc}.pl-c-body--theme-sidebar .pl-c-logo{max-width:7rem;margin:0 auto 1rem}.pl-c-body--theme-sidebar .pl-c-nav{display:block;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.pl-c-body--theme-sidebar .pl-c-nav__list{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.pl-c-body--theme-sidebar .pl-c-nav__link{font-size:.85rem;padding-left:0;padding-right:0}.pl-c-body--theme-sidebar .pl-c-nav__sublist{position:relative;border-radius:0}.pl-c-body--theme-sidebar .pl-c-nav__sublist .pl-c-nav__link{padding-left:1rem}.pl-c-body--theme-sidebar .pl-c-nav__sublist--dropdown.pl-is-active{border:0;border-left:1px solid #4d4c4c}.pl-c-body--theme-sidebar.pl-c-body--theme-light .pl-c-nav__sublist--dropdown.pl-is-active{border-left-color:#eee}}@media all and (min-width:48em) and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-nav__sublist--dropdown.pl-is-active{height:auto}}@media all and (min-width:48em){.pl-c-body--theme-sidebar .pl-c-nav__subsublist{border-left:1px solid #4d4c4c;margin-left:1rem}.pl-c-body--theme-sidebar.pl-c-body--theme-light .pl-c-nav__subsublist{border-left-color:#eee}.pl-c-body--theme-sidebar .pl-c-nav__sublist .pl-c-nav__link{border-left:0;border-right:0}}@media all and (min-width:48em) and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-nav__sublist>.pl-c-nav__item:last-child .pl-c-nav__link{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:0}}@media all and (min-width:48em){.pl-c-body--theme-sidebar .pl-c-controls{margin-top:auto;margin-left:0;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.pl-c-body--theme-sidebar .pl-c-size-list{display:none}.pl-c-body--theme-sidebar .pl-c-viewport-size{display:none}.pl-c-body--theme-sidebar .pl-c-typeahead{border-radius:6px}.pl-c-body--theme-sidebar .pl-c-header .twitter-typeahead{display:block!important;margin-bottom:.5rem}.pl-c-body--theme-sidebar .pl-c-tools__toggle{display:none}.pl-c-body--theme-sidebar .pl-c-tools__list{max-height:none;overflow:visible;position:relative;border-radius:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:100%}.pl-c-body--theme-sidebar .pl-c-tools__action{padding-left:0;padding-right:0}.pl-c-body--theme-sidebar .pl-c-viewport{top:0;margin-left:auto;width:calc(100% - 14rem)}.pl-c-body--theme-sidebar .pl-c-viewport__iframe-wrapper{width:100%!important}.pl-c-body--theme-sidebar .pl-c-viewport__iframe{width:100%!important}.pl-c-body--theme-sidebar .pl-c-modal{left:14rem;right:0;width:auto}}.is-vishidden{position:absolute!important;overflow:hidden;width:1px;height:1px;padding:0;border:0;clip:rect(1px,1px,1px,1px)} +.pl-c-body *{-webkit-box-sizing:border-box;box-sizing:border-box}button{font-size:inherit;background-color:transparent}.pl-c-body{margin:0;padding:0;-webkit-text-size-adjust:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:100vh}.pl-c-header .pl-c-typeahead{border:0;background-color:#222!important;color:grey;width:100%;right:0;padding:.61rem .5rem;font-size:inherit}.pl-c-header .pl-c-typeahead:focus{background-color:grey;color:#fff}.pl-c-header .twitter-typeahead{display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;width:100%}.pl-c-header .tt-input{background-color:grey;color:#fff}.pl-c-header .tt-input:hover{color:#fff;background-color:#222!important}.pl-c-header .tt-input:hover::-webkit-input-placeholder{color:#fff}.pl-c-header .tt-input:hover::-moz-input-placeholder{color:#fff}.pl-c-header .tt-input:focus{border-radius:0;text-transform:lowercase;color:#fff;background-color:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-header .tt-hint{text-transform:lowercase}.pl-c-header .tt-menu{text-transform:lowercase;background-color:grey;width:100%;border-bottom-right-radius:6px;border-bottom-left-radius:6px}.pl-c-header .tt-suggestion{color:#eee;padding:.8em}.pl-c-header .tt-suggestion.tt-cursor{color:#fff;background-color:rgba(255,255,255,.25)}.pl-c-header .tt-suggestion p{margin:0}code[class*=language-],pre[class*=language-]{color:#000;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono',monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background-color:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background-color:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background-color:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#a67f59;background-color:rgba(255,255,255,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}pre.line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}pre.line-numbers>code{position:relative}.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.8em;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.line-numbers-rows>span{pointer-events:none;display:block;counter-increment:linenumber}.line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.8em;text-align:right}.token a{color:inherit}.pl-c-header{position:fixed;position:-webkit-sticky;position:sticky;top:0;left:0;z-index:4;display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;background-color:#000;color:grey;font-family:HelveticaNeue,Helvetica,Arial,sans-serif;font-size:.7rem}.pl-c-header__nav-toggle{background-color:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background-color .1s ease-out,color .1s ease-out;transition:background-color .1s ease-out,color .1s ease-out;cursor:pointer;border:0}.pl-c-header__nav-toggle:hover{color:#fff;background-color:#222}.pl-c-header__nav-toggle.pl-is-active,.pl-c-header__nav-toggle:active{color:#fff;background-color:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-header__nav-toggle{background-color:#fff;color:#4d4c4c}.pl-c-body--theme-density-cozy .pl-c-header__nav-toggle{font-size:.85rem;padding:1.2rem .8rem}.pl-c-body--theme-density-comfortable .pl-c-header__nav-toggle{font-size:.85rem;padding:1.5rem 1rem}@media all and (min-width:42em){.pl-c-header__nav-toggle{display:none}}.pl-c-logo{max-width:2rem;margin:0 1rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.pl-c-logo:focus{outline:1px dotted grey;outline-offset:-1px}.pl-c-logo__img{display:block;max-width:100%;height:auto}.pl-c-nav{background-color:inherit}@media all and (max-width:42em){.pl-c-nav{position:absolute;top:100%;width:100%;overflow:hidden;max-height:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-transition:max-height .1s ease-out;transition:max-height .1s ease-out}.pl-c-nav.pl-is-active{max-height:50rem;height:calc(100vh - 2rem);overflow:auto;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-nav.pl-is-active::-webkit-scrollbar{width:0!important}}@media all and (min-width:42em){.pl-c-nav{display:-webkit-box;display:-ms-flexbox;display:flex}}.pl-c-nav__list{z-index:1;margin:0;padding:0;list-style:none;-ms-flex-negative:0;flex-shrink:0}@media all and (max-width:42em){.pl-c-nav__list{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}}@media all and (min-width:42em){.pl-c-nav__list{display:-webkit-box;display:-ms-flexbox;display:flex}.pl-c-body--theme-sidebar .pl-c-nav__list{display:block}}.pl-c-nav__item{cursor:pointer;position:relative}@media all and (min-width:42em){.pl-c-nav__sublist>.pl-c-nav__item:last-child{overflow:hidden;border-bottom-left-radius:6px;border-bottom-right-radius:6px}}.pl-c-nav__link{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background-color .1s ease-out,color .1s ease-out;transition:background-color .1s ease-out,color .1s ease-out;cursor:pointer}.pl-c-nav__link:hover{color:#fff;background-color:#222}.pl-c-nav__link.pl-is-active,.pl-c-nav__link:active{color:#fff;background-color:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-nav__link{background-color:#fff;color:#4d4c4c}.pl-c-body--theme-density-cozy .pl-c-nav__link{font-size:.85rem;padding:1.2rem .8rem}.pl-c-body--theme-density-comfortable .pl-c-nav__link{font-size:.85rem;padding:1.5rem 1rem}.pl-c-nav__link--sublink{text-transform:none;padding-left:1rem}.pl-c-nav__link--dropdown:after{content:'\25BC';color:rgba(255,255,255,.25);display:inline-block;font-size:7px;position:relative;top:1px;right:-2px;-webkit-transition:all .1s ease-out;transition:all .1s ease-out}.pl-c-nav__link--dropdown:focus:after,.pl-c-nav__link--dropdown:hover:after{color:grey}.pl-c-nav__link--dropdown.pl-is-active{color:#fff;background-color:#222}.pl-c-nav__link--dropdown.pl-is-active:after{color:grey;-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.pl-c-nav__sublist{list-style:none;margin:0;padding:0}@media all and (min-width:42em){.pl-c-nav__sublist{position:absolute;top:100%;left:0;min-width:10rem;overflow:hidden;border-bottom-left-radius:6px;border-bottom-right-radius:6px}}.pl-c-nav__sublist--dropdown,.pl-c-nav__subsublist--dropdown{list-style:none;margin:0;padding:0;overflow:hidden;max-height:0;-webkit-transition:max-height .1s ease-out;transition:max-height .1s ease-out}.pl-c-nav__sublist--dropdown.pl-is-active,.pl-c-nav__subsublist--dropdown.pl-is-active{max-height:none;overflow:auto;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-nav__sublist--dropdown.pl-is-active::-webkit-scrollbar,.pl-c-nav__subsublist--dropdown.pl-is-active::-webkit-scrollbar{width:0!important}@media all and (min-width:42em){.pl-c-nav__sublist--dropdown.pl-is-active,.pl-c-nav__subsublist--dropdown.pl-is-active{max-height:120rem;max-height:calc(var(--pl-viewport-height) - 1rem,120rem)}}@media all and (min-width:42em){.pl-c-nav__sublist--dropdown.pl-is-active{height:calc(100vh - 2rem)}}.pl-c-nav__subsublist{list-style:none;margin:0;padding:0}.pl-c-viewport-size{margin:0;border:0;padding:.3rem .5rem .4rem;line-height:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.pl-c-viewport-size__input{padding:.1rem;margin:0;border:0;border-radius:3px;background-color:transparent;font-size:inherit;color:grey;width:35px;text-align:right;-webkit-transition:all .1s ease-out;transition:all .1s ease-out}.pl-c-viewport-size__input::-moz-focus-inner{padding:0;border:0}.pl-c-viewport-size__input:hover{color:#fff;background-color:#222}.pl-c-viewport-size__input:active,.pl-c-viewport-size__input:focus{color:#fff;background-color:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-viewport-size__label{display:block;margin:0;padding:0}.pl-c-size-list{display:none;list-style:none;margin:0;padding:0;overflow-x:auto;padding:0 .25rem}@media all and (min-width:42em){.pl-c-size-list{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-overflow-scrolling:touch}}@media all and (min-width:53em){.pl-c-size-list{display:block;display:-webkit-box;display:-ms-flexbox;display:flex}}.pl-c-size-list__action{background-color:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background-color .1s ease-out,color .1s ease-out;transition:background-color .1s ease-out,color .1s ease-out;cursor:pointer}.pl-c-size-list__action:hover{color:#fff;background-color:#222}.pl-c-size-list__action.pl-is-active,.pl-c-size-list__action:active{color:#fff;background-color:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-size-list__action{background-color:#fff;color:#4d4c4c}.pl-c-body--theme-density-cozy .pl-c-size-list__action{font-size:.85rem;padding:1.2rem .8rem}.pl-c-body--theme-density-comfortable .pl-c-size-list__action{font-size:.85rem;padding:1.5rem 1rem}.pl-c-size-list__item:first-child{margin-left:auto}.pl-c-size-list__item:last-child{margin-right:auto}.pl-c-controls{margin-left:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap}@media all and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-controls{display:block}}.pl-c-controls__list{list-style:none;margin:0;padding:0;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.pl-c-tools{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex}.pl-c-tools__toggle{background-color:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background-color .1s ease-out,color .1s ease-out;transition:background-color .1s ease-out,color .1s ease-out;cursor:pointer;margin:0;padding-top:.6rem;padding-bottom:.5rem;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:relative;min-width:30px}.pl-c-tools__toggle:hover{color:#fff;background-color:#222}.pl-c-tools__toggle.pl-is-active,.pl-c-tools__toggle:active{color:#fff;background-color:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-tools__toggle{background-color:#fff;color:#4d4c4c}.pl-c-body--theme-density-cozy .pl-c-tools__toggle{font-size:.85rem;padding:1.2rem .8rem}.pl-c-body--theme-density-comfortable .pl-c-tools__toggle{font-size:.85rem;padding:1.5rem 1rem}.pl-c-tools__toggle-icon{-webkit-transition:inherit;transition:inherit}.pl-c-tools__list{list-style:none;margin:0;padding:0;overflow:hidden;max-height:0;-webkit-transition:max-height .1s ease-out;transition:max-height .1s ease-out;position:absolute;top:100%;right:0;z-index:1;width:10rem;border-bottom-left-radius:6px;border-bottom-right-radius:6px}.pl-c-tools__list.pl-is-active{max-height:none;overflow:auto;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-tools__list.pl-is-active::-webkit-scrollbar{width:0!important}@media all and (min-width:42em){.pl-c-tools__list.pl-is-active{max-height:120rem;max-height:calc(var(--pl-viewport-height) - 1rem,120rem)}}.pl-c-tools__action{background-color:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background-color .1s ease-out,color .1s ease-out;transition:background-color .1s ease-out,color .1s ease-out;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;margin:0}.pl-c-tools__action:hover{color:#fff;background-color:#222}.pl-c-tools__action.pl-is-active,.pl-c-tools__action:active{color:#fff;background-color:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-tools__action{background-color:#fff;color:#4d4c4c}.pl-c-body--theme-density-cozy .pl-c-tools__action{font-size:.85rem;padding:1.2rem .8rem}.pl-c-body--theme-density-comfortable .pl-c-tools__action{font-size:.85rem;padding:1.5rem 1rem}.pl-c-tools__action-icon{margin-left:auto}.pl-c-viewport{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;flex-direction:column;height:auto;width:100%;position:relative;top:2rem;bottom:0;left:0;right:0;z-index:0;overflow:hidden;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-transition:height .3s ease;transition:height .3s ease}@supports ((position: -webkit-sticky) or (position: sticky)){.pl-c-viewport{top:0}}.pl-c-body--theme-sidebar .pl-c-viewport{top:0}.pl-c-viewport__cover{width:100%;height:100%;display:none;position:fixed;top:0;left:0;z-index:200;cursor:move;pointer-events:auto}.pl-c-viewport__iframe-wrapper{height:100%;width:100%;position:relative;margin:0 auto;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-overflow-scrolling:touch;overflow-y:auto;overflow-x:hidden;width:100%}.pl-c-viewport__iframe-wrapper.hay-mode{-webkit-transition:all 40s linear;transition:all 40s linear}.pl-c-viewport__iframe{position:absolute;height:100%;width:100%;border:0;padding:0;margin:0;top:0;bottom:0;left:0;right:0;background-color:#fff;max-width:100vw}@media all and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-viewport__iframe{max-width:calc(100vw - 14rem + 14px)}}.pl-c-viewport__iframe.hay-mode{-webkit-transition:all 40s linear;transition:all 40s linear}.pl-c-viewport__resizer{position:absolute;right:0;top:0;bottom:0;width:14px;margin:0;height:100%;cursor:ew-resize}.pl-c-viewport__resizer-handle{margin:0;width:100%;height:100%;background-color:#ccc;-webkit-transition:background-color .1s ease-out;transition:background-color .1s ease-out}.pl-c-viewport__resizer-handle:hover{background-color:grey}.pl-c-viewport__resizer-handle:active{cursor:move;background-color:#4d4c4c}.vp-animate{-webkit-transition:width .8s ease-out;transition:width .8s ease-out}.pl-c-viewport-modal-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;max-width:calc(100vw)}@media all and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-viewport-modal-wrapper{max-width:calc(100vw - 14rem)}}@media all and (min-width:42em) and (-ms-high-contrast:none),all and (min-width:42em) and (-ms-high-contrast:active){.pl-c-body--theme-sidebar .pl-c-viewport-modal-wrapper{margin-left:14rem}}.pl-c-pattern{margin-bottom:2rem;position:relative;clear:both}.pl-c-pattern__header{position:relative;padding:.5rem 0 0;line-height:1.3;font-size:90%;color:grey}.pl-c-pattern__header:empty{padding:0}.pl-c-pattern__title{font-family:HelveticaNeue,Helvetica,Arial,sans-serif!important;font-size:.85rem!important;line-height:1!important;font-weight:400!important;margin:0!important;padding:0!important;text-transform:capitalize!important}.pl-c-pattern__title-link{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;padding:1rem 0 .3rem;color:grey!important;text-decoration:none;cursor:pointer}.pl-c-pattern__title-link:focus,.pl-c-pattern__title-link:hover{color:#000!important}.pl-c-pattern__extra-toggle{font-size:9px;position:absolute;bottom:-1px;right:0;z-index:1;padding:.65em .65em .5em;line-height:1;color:grey;background-color:transparent;font-weight:400;border:1px solid #ddd;border-top-left-radius:6px;border-top-right-radius:6px;-webkit-transition:background-color .1s ease-out;transition:background-color .1s ease-out}.pl-c-pattern__extra-toggle .pl-c-pattern__toggle-icon{display:inline-block}.pl-c-pattern__extra-toggle.pl-is-active,.pl-c-pattern__extra-toggle:focus,.pl-c-pattern__extra-toggle:hover{background-color:#fafafa;color:#000}.pl-c-pattern__extra-toggle:focus{outline:1px dotted #4d4c4c}.pl-c-pattern__extra-toggle.pl-is-active{border-bottom-color:#fafafa}.pl-c-pattern__extra-toggle.pl-is-active .pl-c-pattern__toggle-icon{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.pl-c-pattern__extra{background-color:#fafafa;border-top:1px solid #ddd;margin-bottom:1rem;overflow:hidden;max-height:1px;position:relative;-webkit-transition:all .1s ease-out;transition:all .1s ease-out}.pl-c-pattern__extra.pl-is-active{border:1px solid #ddd;border-radius:6px;border-top-right-radius:0;max-height:150rem}.pl-c-category{margin-top:6rem;font:HelveticaNeue,Helvetica,Arial,sans-serif!important}.pl-c-category:first-of-type{margin-top:2rem}.pl-c-category__title{font-size:1.4rem!important;color:#222!important;margin:0 0 .2rem;text-transform:capitalize}.pl-c-category__title-link{-webkit-transition:color .1s ease-out;transition:color .1s ease-out}.pl-c-category__description{font-size:.85rem;line-height:1.5;max-width:30rem}.pl-c-category__description:empty{display:none}@media all and (min-width:53em){.pl-c-pattern-info{display:-webkit-box;display:-ms-flexbox;display:flex}}.pl-c-pattern .pl-c-pattern-info{max-height:20rem;overflow:scroll;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-pattern .pl-c-pattern-info::-webkit-scrollbar{width:0!important}@media all and (min-width:53em){.pl-c-pattern .pl-c-pattern-info{max-height:none;height:18rem;overflow:visible}}.pl-c-modal .pl-c-pattern-info{position:absolute;top:0;right:0;bottom:0;left:0;overflow:scroll;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-modal .pl-c-pattern-info::-webkit-scrollbar{width:0!important}@media all and (min-width:53em){.pl-c-modal .pl-c-pattern-info{position:static;overflow:visible}}.pl-c-pattern-info__panel{padding:1rem}@media all and (min-width:42em){.pl-c-pattern-info__panel{padding-right:2.3rem}}@media all and (min-width:53em){.pl-c-pattern-info__panel{-webkit-box-flex:1;-ms-flex:auto;flex:auto;position:absolute;top:0;bottom:0;left:0;right:1.3rem;padding-right:0}}@media all and (min-width:62em){.pl-c-modal .pl-c-pattern-info__panel{right:0;padding-left:2rem;padding-right:2.5rem}}.pl-c-pattern-info__panel--info{padding-top:2rem}@media all and (min-width:53em){.pl-c-pattern-info__panel--info{left:0;right:50%;overflow:scroll;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-pattern-info__panel--info::-webkit-scrollbar{width:0!important}}@media all and (min-width:62em){.pl-c-pattern-info__panel--info{right:55%}}@media all and (min-width:53em){.pl-c-pattern-info__panel--info+.pl-c-pattern-info__panel--code{right:0;left:50%;top:1.2rem}}@media all and (min-width:62em){.pl-c-pattern-info__panel--info+.pl-c-pattern-info__panel--code{left:45%}}.pl-c-pattern-info__header{margin-bottom:.5rem}.pl-c-pattern-info__title{font-size:1.4rem!important;font-weight:400;margin-top:0;margin-bottom:0;color:inherit;text-transform:capitalize;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.pl-c-pattern-info__description{border-bottom-color:grey}.pl-c-annotations{border-top-color:grey}.pl-c-pattern-state{display:inline-block;width:5px;height:5px;margin-left:10px;position:relative;top:5px;left:0;border-radius:50%;background-color:#02a4d5;line-height:4px;text-indent:10px}.pl-c-pattern-state--complete{background-color:#03790f}.pl-c-pattern-state--inreview{background-color:#c7a118}.pl-c-pattern-state--deprecated{background-color:#b00b02}.complete:before{color:#03790f!important}.pl-c-lineage{font-size:.85rem;line-height:1.7;margin-top:0}.pl-c-lineage__link{font-style:italic;color:grey;text-decoration:underline;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transition:opacity .1s ease;transition:opacity .1s ease}.pl-c-lineage__link:focus,.pl-c-lineage__link:hover{opacity:.8}.pl-c-breadcrumb{list-style:none;margin:0;padding:0;margin-bottom:.5rem;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:.7rem;color:grey;text-transform:capitalize}.pl-c-breadcrumb__item:after{content:'\25B6';opacity:.4;font-size:6px;display:inline-block;margin:0 .2rem;position:relative;top:-1px}.pl-c-tabs{padding:0 .5rem .5rem;background-color:#fff;border:1px solid #ddd;border-radius:6px;font-family:HelveticaNeue,Helvetica,Arial,sans-serif;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow:hidden}@media all and (min-width:53em){.pl-c-pattern-info__panel--code .pl-c-tabs{position:absolute;top:1rem;bottom:1rem;left:1rem;right:1rem}}@media all and (min-width:62em){.pl-c-modal .pl-c-tabs{right:2.5rem;left:2rem}}.pl-c-tabs__list{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;list-style:none;margin:0;padding:.5rem 0;background-color:#fff}.pl-c-tabs__link{display:block;line-height:1;padding:.2rem .4rem;border:1px solid transparent;border-radius:6px;color:grey;background-color:#fff;cursor:pointer;text-decoration:none;text-transform:lowercase;-webkit-transition:all .1s ease-out;transition:all .1s ease-out}.pl-c-tabs__link:hover{color:#222}.pl-c-tabs__link.pl-is-active-tab{color:#222;background-color:#eee;border:1px solid #ddd}.pl-c-tabs__content{-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;overflow:scroll;-ms-overflow-style:-ms-autohiding-scrollbar;height:100%;padding-top:.5rem}.pl-c-tabs__content::-webkit-scrollbar{width:0!important}.pl-c-modal .pl-c-tabs__content{border:0}.pl-c-tabs__panel{display:none;min-height:12rem}.pl-c-tabs__panel.pl-is-active-tab{display:block}.pl-c-tabs__panel :not(pre)>code[class*=language-],.pl-c-tabs__panel pre[class*=language-]{background-color:transparent;margin:0;padding:0;border:0;display:block}.pl-c-tabs__panel code[class*=language-]{background-color:transparent;margin:0}.pl-c-tools{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex}.pl-c-tools__toggle{background-color:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background-color .1s ease-out,color .1s ease-out;transition:background-color .1s ease-out,color .1s ease-out;cursor:pointer;margin:0;padding-top:.6rem;padding-bottom:.5rem;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:relative;min-width:30px}.pl-c-tools__toggle:hover{color:#fff;background-color:#222}.pl-c-tools__toggle.pl-is-active,.pl-c-tools__toggle:active{color:#fff;background-color:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-tools__toggle{background-color:#fff;color:#4d4c4c}.pl-c-body--theme-density-cozy .pl-c-tools__toggle{font-size:.85rem;padding:1.2rem .8rem}.pl-c-body--theme-density-comfortable .pl-c-tools__toggle{font-size:.85rem;padding:1.5rem 1rem}.pl-c-tools__toggle-icon{-webkit-transition:inherit;transition:inherit}.pl-c-tools__list{list-style:none;margin:0;padding:0;overflow:hidden;max-height:0;-webkit-transition:max-height .1s ease-out;transition:max-height .1s ease-out;position:absolute;top:100%;right:0;z-index:1;width:10rem;border-bottom-left-radius:6px;border-bottom-right-radius:6px}.pl-c-tools__list.pl-is-active{max-height:none;overflow:auto;-ms-overflow-style:-ms-autohiding-scrollbar}.pl-c-tools__list.pl-is-active::-webkit-scrollbar{width:0!important}@media all and (min-width:42em){.pl-c-tools__list.pl-is-active{max-height:120rem;max-height:calc(var(--pl-viewport-height) - 1rem,120rem)}}.pl-c-tools__action{background-color:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background-color .1s ease-out,color .1s ease-out;transition:background-color .1s ease-out,color .1s ease-out;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;margin:0}.pl-c-tools__action:hover{color:#fff;background-color:#222}.pl-c-tools__action.pl-is-active,.pl-c-tools__action:active{color:#fff;background-color:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-tools__action{background-color:#fff;color:#4d4c4c}.pl-c-body--theme-density-cozy .pl-c-tools__action{font-size:.85rem;padding:1.2rem .8rem}.pl-c-body--theme-density-comfortable .pl-c-tools__action{font-size:.85rem;padding:1.5rem 1rem}.pl-c-tools__action-icon{margin-left:auto}.pl-has-annotation{cursor:help!important;outline:1px dotted grey;outline-offset:-4px;-webkit-transition:-webkit-box-shadow .1s ease;transition:-webkit-box-shadow .1s ease;transition:box-shadow .1s ease;transition:box-shadow .1s ease, -webkit-box-shadow .1s ease}.pl-has-annotation a,.pl-has-annotation input{cursor:help!important}.pl-has-annotation:hover{-webkit-box-shadow:0 0 3px grey;box-shadow:0 0 3px grey}.pl-has-annotation.active{-webkit-box-shadow:inset 0 0 6px #4d4c4c;box-shadow:inset 0 0 6px #4d4c4c;outline:1px dotted grey;outline-offset:-1px}.pl-c-annotation-tip{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:24px!important;height:24px!important;margin-top:6px!important;margin-left:6px!important;border-radius:50%!important;background-color:#222!important;color:#fff!important;font-size:16px!important;position:absolute;z-index:100}.pl-c-annotations{margin:1rem 0}.pl-c-annotations__title{font-size:1.2rem!important;margin:0 0 .5rem}.pl-c-annotations .pl-c-annotations__list{counter-reset:the-count;padding:0;margin:0;list-style:none}.pl-c-annotations__item{position:relative;padding-left:1.5rem;margin-bottom:1rem;border-radius:6px;-webkit-transition:background-color .1s ease;transition:background-color .1s ease}.pl-c-annotations__item:before{content:counter(the-count);counter-increment:the-count;font-size:85%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:14px;height:14px;border-radius:50%;padding:2px;text-align:center;background-color:grey;color:#fff;position:absolute;top:4px;left:0}.pl-c-annotations__item.pl-is-active{outline:1px dotted grey;outline-offset:-1px}.pl-c-annotations .pl-c-annotations__item-title{margin-bottom:0}pl-modal{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:relative;z-index:20;max-height:100vh;-webkit-box-shadow:0 0 2px 0 #4d4c4c;box-shadow:0 0 2px 0 #4d4c4c;overflow:visible}.pl-c-modal{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;font-family:HelveticaNeue,Helvetica,Arial,sans-serif;background-color:#222;color:#ccc;position:relative;top:auto;bottom:0;left:0;z-index:5;width:100%;height:0;-webkit-transition:height .3s ease,-webkit-transform .3s ease;transition:height .3s ease,-webkit-transform .3s ease;transition:transform .3s ease,height .3s ease;transition:transform .3s ease,height .3s ease,-webkit-transform .3s ease;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);pointer-events:none;will-change:height,transform;overflow:hidden;max-width:100vw}@media all and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-modal{max-width:calc(100vw - 14rem)}}.pl-c-modal.pl-is-active{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);height:50vh;-webkit-transition:-webkit-transform .3s ease;transition:-webkit-transform .3s ease;transition:transform .3s ease;transition:transform .3s ease, -webkit-transform .3s ease;pointer-events:auto}.pl-c-modal__wrapper{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.pl-c-modal__wrapper>*{height:100%}.pl-c-modal__toolbar{display:-webkit-box;display:-ms-flexbox;display:flex}.pl-c-modal__toolbar-controls{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:relative;z-index:10}.pl-c-modal__close-btn{background-color:#000;color:grey;text-decoration:none;line-height:1;padding:.7rem .5rem;border:0;text-align:left;-webkit-transition:background-color .1s ease-out,color .1s ease-out;transition:background-color .1s ease-out,color .1s ease-out;cursor:pointer;z-index:2;opacity:.85;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.pl-c-modal__close-btn:hover{color:#fff;background-color:#222}.pl-c-modal__close-btn.pl-is-active,.pl-c-modal__close-btn:active{color:#fff;background-color:#222;outline:1px dotted grey;outline-offset:-1px}.pl-c-body--theme-light .pl-c-modal__close-btn{background-color:#fff;color:#4d4c4c}.pl-c-body--theme-density-cozy .pl-c-modal__close-btn{font-size:.85rem;padding:1.2rem .8rem}.pl-c-body--theme-density-comfortable .pl-c-modal__close-btn{font-size:.85rem;padding:1.5rem 1rem}@media all and (max-width:41em){.pl-c-modal__close-btn{border-radius:20rem;padding-top:.5rem;padding-bottom:.5rem}}.pl-c-modal__close-btn:focus,.pl-c-modal__close-btn:hover{opacity:1}.pl-c-modal__close-btn:active,.pl-c-modal__close-btn:focus{opacity:1}.pl-c-modal__cover{width:100%;height:100%;display:none;position:absolute;z-index:20;cursor:move}.pl-c-modal__resizer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;left:0;height:14px;width:100%;background-color:inherit;z-index:2;cursor:ns-resize}.pl-c-modal__resizer:after{content:'';height:3px;width:50px;border-top:1px solid currentColor;border-bottom:1px solid currentColor;-webkit-transition:opacity .3s ease-out;transition:opacity .3s ease-out;opacity:.5;background-color:currentColor;border-radius:3px}.pl-c-modal__resizer:hover:after{opacity:.8}.pl-c-modal__resizer:active:after,.pl-c-modal__resizer:focus:after{opacity:.95}.pl-c-modal__close-btn-icon{width:12px;height:12px;color:currentColor;fill:currentColor;-webkit-transition:fill .1s ease-out;transition:fill .1s ease-out}.pl-c-code-copy-btn{display:inline-block;position:absolute;top:.5rem;right:.5rem;padding:.2rem .4rem;background-color:#eee;color:#222;border:1px solid #ddd;border-radius:6px;font-family:HelveticaNeue,Helvetica,Arial,sans-serif;font-size:1rem;text-transform:lowercase;line-height:1;cursor:pointer;z-index:2;-webkit-transition:background-color .1s ease-out;transition:background-color .1s ease-out}.pl-c-code-copy-btn:focus,.pl-c-code-copy-btn:hover{background-color:#ccc}.pl-c-text-passage{font-size:.85rem;line-height:1.7}.pl-c-text-passage p{margin-top:0;margin-bottom:1rem}.pl-c-text-passage a{color:grey;text-decoration:underline;-webkit-transition:opacity .1s ease;transition:opacity .1s ease}.pl-c-text-passage a:focus,.pl-c-text-passage a:hover{opacity:.8}.pl-c-text-passage code[class*=language-],.pl-c-text-passage pre[class*=language-]{color:inherit}.pl-c-text-passage blockquote{padding-left:.8rem;border-left:3px solid inherit}.pl-c-text-passage hr{height:1px;background-color:grey;margin:2rem 0;border:0}.pl-c-text-passage h1{margin-bottom:1rem;font-weight:400}.pl-c-text-passage h2{margin:1rem 0 1rem;font-weight:400}.pl-c-text-passage h3{margin:1rem 0 1rem;font-weight:400}.pl-c-text-passage h4{margin:1rem 0 1rem;font-weight:400}.pl-c-text-passage h5{margin:1rem 0 1rem;font-weight:400}.pl-c-text-passage h6{margin:1rem 0 1rem;font-weight:400}.pl-c-text-passage ul{list-style:square;margin-left:.9rem;margin-bottom:1rem}.pl-c-text-passage ul li:last-child{margin-bottom:0}.pl-c-text-passage ol{list-style:decimal;margin-left:.9rem;margin-bottom:1rem}.pl-c-text-passage ol li:last-child{margin-bottom:0}.pl-c-text-passage li{margin-bottom:.5rem}.pl-c-body--theme-light .pl-c-header{background-color:#fff;border-bottom:1px solid #ccc}.pl-c-body--theme-light .pl-c-nav__sublist{background-color:transparent}.pl-c-body--theme-light:not(.pl-c-body--theme-sidebar) .pl-c-tools__list.pl-is-active{border-bottom:1px solid #ccc;border-left:1px solid #ccc}.pl-c-body--theme-light .pl-c-nav__link--dropdown{color:#4d4c4c;background-color:#fff}.pl-c-body--theme-light .pl-c-nav__link--dropdown:after{color:#ccc}.pl-c-body--theme-light .pl-c-nav__sublist .pl-c-nav__link{border-left:1px solid #ccc;border-right:1px solid #ccc}@media all and (min-width:42em){.pl-c-body--theme-light .pl-c-nav__sublist>.pl-c-nav__item:last-child .pl-c-nav__link{border-bottom-left-radius:6px;border-bottom-right-radius:6px;border-bottom:1px solid #ccc}}.pl-c-body--theme-light .pl-c-viewport-size__input{color:#4d4c4c}.pl-c-body--theme-light .pl-c-viewport-size__input:focus,.pl-c-body--theme-light .pl-c-viewport-size__input:hover{background-color:#ddd}.pl-c-body--theme-light .typeahead{background-color:#ddd!important}.pl-c-body--theme-light .pl-c-typeahead{background-color:#ddd!important;color:#4d4c4c!important}.pl-c-body--theme-light .tt-input{background-color:#eee!important;color:#4d4c4c!important}.pl-c-body--theme-light .tt-input:hover{color:#222;background-color:#ddd!important}.pl-c-body--theme-light .tt-input:hover::-webkit-input-placeholder{color:#222}.pl-c-body--theme-light .tt-input:hover::-moz-input-placeholder{color:#222}.pl-c-body--theme-light .pl-c-modal{background-color:#fff;color:#4d4c4c;border-top:1px solid #ccc}.pl-c-body--theme-light .pl-c-modal__close-btn,.pl-c-body--theme-light .pl-c-tools__action{background-color:#fff}.pl-c-body--theme-light .pl-c-modal__close-btn:focus,.pl-c-body--theme-light .pl-c-modal__close-btn:hover,.pl-c-body--theme-light .pl-c-tools__action:focus,.pl-c-body--theme-light .pl-c-tools__action:hover{background-color:#eee;color:#4d4c4c}.pl-c-body--theme-density-cozy .pl-c-header{font-size:.85rem}.pl-c-body--theme-density-cozy .pl-c-viewport-size__input{width:44px}.pl-c-body--theme-density-cozy .pl-c-typeahead{padding:.9rem .8rem}@media all and (max-width:78em){.pl-c-body--theme-density-cozy .pl-c-size-list{display:none}}@media all and (max-width:78em){.pl-c-body--theme-density-cozy .pl-c-viewport-size{display:none}}.pl-c-body--theme-density-cozy .pl-c-tools__toggle{min-width:44px}.pl-c-body--theme-density-cozy .pl-c-viewport{top:3.28rem}.pl-c-body--theme-density-comfortable .pl-c-header{font-size:.85rem}.pl-c-body--theme-density-comfortable .pl-c-logo{max-width:4rem}.pl-c-body--theme-density-comfortable .pl-c-header .tt-suggestion{padding:1.5rem 1rem}.pl-c-body--theme-density-comfortable .pl-c-viewport-size__input{width:44px}.pl-c-body--theme-density-comfortable .pl-c-typeahead{padding:.9rem 1rem}@media all and (max-width:78em){.pl-c-body--theme-density-comfortable .pl-c-size-list{display:none}}@media all and (max-width:78em){.pl-c-body--theme-density-comfortable .pl-c-viewport-size{display:none}}.pl-c-body--theme-density-comfortable .pl-c-tools__toggle{min-width:44px}.pl-c-body--theme-density-comfortable .pl-c-viewport{top:3.8rem}@media all and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-header{width:14rem;height:100vh;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;border-bottom:0;padding:1rem;overflow:auto;-ms-overflow-style:-ms-autohiding-scrollbar;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.pl-c-body--theme-sidebar .pl-c-header::-webkit-scrollbar{width:0!important}.pl-c-body--theme-sidebar.pl-c-body--theme-light .pl-c-header{border-right:1px solid #ccc}.pl-c-body--theme-sidebar .pl-c-logo{max-width:7rem;margin:0 auto 1rem}.pl-c-body--theme-sidebar .pl-c-nav{display:block;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.pl-c-body--theme-sidebar .pl-c-nav__list{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.pl-c-body--theme-sidebar .pl-c-nav__link{font-size:.85rem;padding-left:0;padding-right:0}.pl-c-body--theme-sidebar .pl-c-nav__sublist{position:relative;border-radius:0}.pl-c-body--theme-sidebar .pl-c-nav__sublist .pl-c-nav__link{padding-left:1rem}.pl-c-body--theme-sidebar .pl-c-nav__sublist--dropdown.pl-is-active{border:0;border-left:1px solid #4d4c4c}.pl-c-body--theme-sidebar.pl-c-body--theme-light .pl-c-nav__sublist--dropdown.pl-is-active{border-left-color:#eee}}@media all and (min-width:42em) and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-nav__sublist--dropdown.pl-is-active{height:auto}}@media all and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-nav__subsublist{border-left:1px solid #4d4c4c;margin-left:1rem}.pl-c-body--theme-sidebar.pl-c-body--theme-light .pl-c-nav__subsublist{border-left-color:#eee}.pl-c-body--theme-sidebar .pl-c-nav__sublist .pl-c-nav__link{border-left:0;border-right:0}}@media all and (min-width:42em) and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-nav__sublist>.pl-c-nav__item:last-child .pl-c-nav__link{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:0}}@media all and (min-width:42em){.pl-c-body--theme-sidebar .pl-c-controls{justify-self:flex-end;margin-left:0;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.pl-c-body--theme-sidebar .pl-c-viewport-size{display:none}.pl-c-body--theme-sidebar .pl-c-typeahead{border-radius:6px}.pl-c-body--theme-sidebar .pl-c-header .twitter-typeahead{display:block!important;margin-bottom:.5rem}.pl-c-body--theme-sidebar .pl-c-tools__toggle{display:none}.pl-c-body--theme-sidebar .pl-c-tools__list{max-height:none;overflow:visible;position:relative;border-radius:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:100%}.pl-c-body--theme-sidebar .pl-c-modal{right:0;width:auto}}.is-vishidden{position:absolute!important;overflow:hidden;width:1px;height:1px;padding:0;border:0;clip:rect(1px,1px,1px,1px)} diff --git a/packages/uikit-workshop/dist/styleguide/js/0-chunk-d792df13253aa9b6508b.js b/packages/uikit-workshop/dist/styleguide/js/0-chunk-d792df13253aa9b6508b.js new file mode 100644 index 000000000..5a15f29a1 --- /dev/null +++ b/packages/uikit-workshop/dist/styleguide/js/0-chunk-d792df13253aa9b6508b.js @@ -0,0 +1,15 @@ +(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[0],{ + +/***/ "./node_modules/@webcomponents/shadydom/src/shadydom.js": +/*!***************************************************************************!*\ + !*** ./node_modules/@webcomponents/shadydom/src/shadydom.js + 16 modules ***! + \***************************************************************************/ +/*! no exports provided */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +eval("var native_methods_namespaceObject = {};\n__webpack_require__.r(native_methods_namespaceObject);\n__webpack_require__.d(native_methods_namespaceObject, \"appendChild\", function() { return native_methods_appendChild; });\n__webpack_require__.d(native_methods_namespaceObject, \"insertBefore\", function() { return native_methods_insertBefore; });\n__webpack_require__.d(native_methods_namespaceObject, \"replaceChild\", function() { return native_methods_replaceChild; });\n__webpack_require__.d(native_methods_namespaceObject, \"removeChild\", function() { return native_methods_removeChild; });\n__webpack_require__.d(native_methods_namespaceObject, \"setAttribute\", function() { return native_methods_setAttribute; });\n__webpack_require__.d(native_methods_namespaceObject, \"removeAttribute\", function() { return native_methods_removeAttribute; });\n__webpack_require__.d(native_methods_namespaceObject, \"cloneNode\", function() { return native_methods_cloneNode; });\n__webpack_require__.d(native_methods_namespaceObject, \"importNode\", function() { return native_methods_importNode; });\n__webpack_require__.d(native_methods_namespaceObject, \"addEventListener\", function() { return addEventListener; });\n__webpack_require__.d(native_methods_namespaceObject, \"removeEventListener\", function() { return removeEventListener; });\n__webpack_require__.d(native_methods_namespaceObject, \"windowAddEventListener\", function() { return windowAddEventListener; });\n__webpack_require__.d(native_methods_namespaceObject, \"windowRemoveEventListener\", function() { return windowRemoveEventListener; });\n__webpack_require__.d(native_methods_namespaceObject, \"dispatchEvent\", function() { return native_methods_dispatchEvent; });\n__webpack_require__.d(native_methods_namespaceObject, \"contains\", function() { return native_methods_contains; });\n__webpack_require__.d(native_methods_namespaceObject, \"getElementById\", function() { return native_methods_getElementById; });\n__webpack_require__.d(native_methods_namespaceObject, \"elementQuerySelector\", function() { return elementQuerySelector; });\n__webpack_require__.d(native_methods_namespaceObject, \"fragmentQuerySelector\", function() { return fragmentQuerySelector; });\n__webpack_require__.d(native_methods_namespaceObject, \"documentQuerySelector\", function() { return documentQuerySelector; });\n__webpack_require__.d(native_methods_namespaceObject, \"querySelector\", function() { return native_methods_querySelector; });\n__webpack_require__.d(native_methods_namespaceObject, \"elementQuerySelectorAll\", function() { return elementQuerySelectorAll; });\n__webpack_require__.d(native_methods_namespaceObject, \"fragmentQuerySelectorAll\", function() { return fragmentQuerySelectorAll; });\n__webpack_require__.d(native_methods_namespaceObject, \"documentQuerySelectorAll\", function() { return documentQuerySelectorAll; });\n__webpack_require__.d(native_methods_namespaceObject, \"querySelectorAll\", function() { return native_methods_querySelectorAll; });\nvar native_tree_walker_namespaceObject = {};\n__webpack_require__.r(native_tree_walker_namespaceObject);\n__webpack_require__.d(native_tree_walker_namespaceObject, \"parentNode\", function() { return parentNode; });\n__webpack_require__.d(native_tree_walker_namespaceObject, \"firstChild\", function() { return native_tree_walker_firstChild; });\n__webpack_require__.d(native_tree_walker_namespaceObject, \"lastChild\", function() { return lastChild; });\n__webpack_require__.d(native_tree_walker_namespaceObject, \"previousSibling\", function() { return previousSibling; });\n__webpack_require__.d(native_tree_walker_namespaceObject, \"nextSibling\", function() { return nextSibling; });\n__webpack_require__.d(native_tree_walker_namespaceObject, \"childNodes\", function() { return native_tree_walker_childNodes; });\n__webpack_require__.d(native_tree_walker_namespaceObject, \"parentElement\", function() { return parentElement; });\n__webpack_require__.d(native_tree_walker_namespaceObject, \"firstElementChild\", function() { return firstElementChild; });\n__webpack_require__.d(native_tree_walker_namespaceObject, \"lastElementChild\", function() { return lastElementChild; });\n__webpack_require__.d(native_tree_walker_namespaceObject, \"previousElementSibling\", function() { return previousElementSibling; });\n__webpack_require__.d(native_tree_walker_namespaceObject, \"nextElementSibling\", function() { return nextElementSibling; });\n__webpack_require__.d(native_tree_walker_namespaceObject, \"children\", function() { return native_tree_walker_children; });\n__webpack_require__.d(native_tree_walker_namespaceObject, \"innerHTML\", function() { return innerHTML; });\n__webpack_require__.d(native_tree_walker_namespaceObject, \"textContent\", function() { return textContent; });\nvar native_tree_accessors_namespaceObject = {};\n__webpack_require__.r(native_tree_accessors_namespaceObject);\n__webpack_require__.d(native_tree_accessors_namespaceObject, \"nodeAccessors\", function() { return nodeAccessors; });\n__webpack_require__.d(native_tree_accessors_namespaceObject, \"fragmentAccessors\", function() { return fragmentAccessors; });\n__webpack_require__.d(native_tree_accessors_namespaceObject, \"documentAccessors\", function() { return documentAccessors; });\n__webpack_require__.d(native_tree_accessors_namespaceObject, \"parentNode\", function() { return native_tree_accessors_parentNode; });\n__webpack_require__.d(native_tree_accessors_namespaceObject, \"firstChild\", function() { return native_tree_accessors_firstChild; });\n__webpack_require__.d(native_tree_accessors_namespaceObject, \"lastChild\", function() { return native_tree_accessors_lastChild; });\n__webpack_require__.d(native_tree_accessors_namespaceObject, \"previousSibling\", function() { return native_tree_accessors_previousSibling; });\n__webpack_require__.d(native_tree_accessors_namespaceObject, \"nextSibling\", function() { return native_tree_accessors_nextSibling; });\n__webpack_require__.d(native_tree_accessors_namespaceObject, \"childNodes\", function() { return native_tree_accessors_childNodes; });\n__webpack_require__.d(native_tree_accessors_namespaceObject, \"parentElement\", function() { return native_tree_accessors_parentElement; });\n__webpack_require__.d(native_tree_accessors_namespaceObject, \"previousElementSibling\", function() { return native_tree_accessors_previousElementSibling; });\n__webpack_require__.d(native_tree_accessors_namespaceObject, \"nextElementSibling\", function() { return native_tree_accessors_nextElementSibling; });\n__webpack_require__.d(native_tree_accessors_namespaceObject, \"innerHTML\", function() { return native_tree_accessors_innerHTML; });\n__webpack_require__.d(native_tree_accessors_namespaceObject, \"textContent\", function() { return native_tree_accessors_textContent; });\n__webpack_require__.d(native_tree_accessors_namespaceObject, \"children\", function() { return native_tree_accessors_children; });\n__webpack_require__.d(native_tree_accessors_namespaceObject, \"firstElementChild\", function() { return native_tree_accessors_firstElementChild; });\n__webpack_require__.d(native_tree_accessors_namespaceObject, \"lastElementChild\", function() { return native_tree_accessors_lastElementChild; });\n\n// CONCATENATED MODULE: ./node_modules/@webcomponents/shadydom/src/shady-data.js\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }\n\n/**\n@license\nCopyright (c) 2016 The Polymer Project Authors. All rights reserved.\nThis code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt\nThe complete set of authors may be found at http://polymer.github.io/AUTHORS.txt\nThe complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt\nCode distributed by Google as part of the polymer project is also\nsubject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt\n*/\nvar ShadyData =\n/*#__PURE__*/\nfunction () {\n function ShadyData() {\n _classCallCheck(this, ShadyData);\n\n /** @type {ShadowRoot} */\n this.root = null;\n /** @type {ShadowRoot} */\n\n this.publicRoot = null;\n this.dirty = false;\n this.observer = null;\n /** @type {Array} */\n\n this.assignedNodes = null;\n /** @type {Element} */\n\n this.assignedSlot = null;\n /** @type {Array} */\n\n this._previouslyAssignedNodes = null;\n /** @type {Element} */\n\n this._prevAssignedSlot = null;\n /** @type {Array} */\n\n this.flattenedNodes = null;\n this.ownerShadyRoot = undefined;\n /** @type {Node|undefined} */\n\n this.parentNode = undefined;\n /** @type {Node|undefined} */\n\n this.firstChild = undefined;\n /** @type {Node|undefined} */\n\n this.lastChild = undefined;\n /** @type {Node|undefined} */\n\n this.previousSibling = undefined;\n /** @type {Node|undefined} */\n\n this.nextSibling = undefined;\n /** @type {Array|undefined} */\n\n this.childNodes = undefined;\n this.__outsideAccessors = false;\n this.__insideAccessors = false;\n this.__onCallbackListeners = {};\n }\n\n _createClass(ShadyData, [{\n key: \"toJSON\",\n value: function toJSON() {\n return {};\n }\n }]);\n\n return ShadyData;\n}();\nfunction ensureShadyDataForNode(node) {\n if (!node.__shady) {\n node.__shady = new ShadyData();\n }\n\n return node.__shady;\n}\nfunction shadyDataForNode(node) {\n return node && node.__shady;\n}\n// CONCATENATED MODULE: ./node_modules/@webcomponents/shadydom/src/utils.js\n/**\n@license\nCopyright (c) 2016 The Polymer Project Authors. All rights reserved.\nThis code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt\nThe complete set of authors may be found at http://polymer.github.io/AUTHORS.txt\nThe complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt\nCode distributed by Google as part of the polymer project is also\nsubject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt\n*/\n\nvar settings = window['ShadyDOM'] || {};\nsettings.hasNativeShadowDOM = Boolean(Element.prototype.attachShadow && Node.prototype.getRootNode);\nvar desc = Object.getOwnPropertyDescriptor(Node.prototype, 'firstChild');\nsettings.hasDescriptors = Boolean(desc && desc.configurable && desc.get);\nsettings.inUse = settings['force'] || !settings.hasNativeShadowDOM; // Default to using native accessors (instead of treewalker) only for\n// IE/Edge where they are faster.\n\nvar IS_IE = navigator.userAgent.match('Trident');\nvar IS_EDGE = navigator.userAgent.match('Edge');\n\nif (settings.useNativeAccessors === undefined) {\n settings.useNativeAccessors = settings.hasDescriptors && (IS_IE || IS_EDGE);\n}\n\nfunction isTrackingLogicalChildNodes(node) {\n var nodeData = shadyDataForNode(node);\n return nodeData && nodeData.firstChild !== undefined;\n}\nfunction utils_isShadyRoot(obj) {\n return Boolean(obj._localName === 'ShadyRoot');\n}\nfunction ownerShadyRootForNode(node) {\n var root = node.getRootNode();\n\n if (utils_isShadyRoot(root)) {\n return root;\n }\n}\nvar utils_p = Element.prototype;\nvar matches = utils_p.matches || utils_p.matchesSelector || utils_p.mozMatchesSelector || utils_p.msMatchesSelector || utils_p.oMatchesSelector || utils_p.webkitMatchesSelector;\nfunction matchesSelector(element, selector) {\n return matches.call(element, selector);\n}\n\nfunction copyOwnProperty(name, source, target) {\n var pd = Object.getOwnPropertyDescriptor(source, name);\n\n if (pd) {\n Object.defineProperty(target, name, pd);\n }\n}\n\nfunction extend(target, source) {\n if (target && source) {\n var n$ = Object.getOwnPropertyNames(source);\n\n for (var i = 0, n; i < n$.length && (n = n$[i]); i++) {\n copyOwnProperty(n, source, target);\n }\n }\n\n return target || source;\n}\nfunction extendAll(target) {\n for (var i = 0; i < (arguments.length <= 1 ? 0 : arguments.length - 1); i++) {\n extend(target, i + 1 < 1 || arguments.length <= i + 1 ? undefined : arguments[i + 1]);\n }\n\n return target;\n}\nfunction mixin(target, source) {\n for (var i in source) {\n target[i] = source[i];\n }\n\n return target;\n}\nfunction patchPrototype(obj, mixin) {\n var proto = Object.getPrototypeOf(obj);\n\n if (!proto.hasOwnProperty('__patchProto')) {\n var patchProto = Object.create(proto);\n patchProto.__sourceProto = proto;\n extend(patchProto, mixin);\n proto['__patchProto'] = patchProto;\n } // old browsers don't have setPrototypeOf\n\n\n obj.__proto__ = proto['__patchProto'];\n}\nvar twiddle = document.createTextNode('');\nvar utils_content = 0;\nvar queue = [];\nnew MutationObserver(function () {\n while (queue.length) {\n // catch errors in user code...\n try {\n queue.shift()();\n } catch (e) {\n // enqueue another record and throw\n twiddle.textContent = utils_content++;\n throw e;\n }\n }\n}).observe(twiddle, {\n characterData: true\n}); // use MutationObserver to get microtask async timing.\n\nfunction microtask(callback) {\n queue.push(callback);\n twiddle.textContent = utils_content++;\n}\nvar hasDocumentContains = Boolean(document.contains);\nfunction utils_contains(container, node) {\n while (node) {\n if (node == container) {\n return true;\n }\n\n node = node.parentNode;\n }\n\n return false;\n}\n\nfunction getNodeHTMLCollectionName(node) {\n return node.getAttribute('id') || node.getAttribute('name');\n}\n\nfunction isValidHTMLCollectionName(name) {\n return name !== 'length' && isNaN(name);\n}\n\nfunction createPolyfilledHTMLCollection(nodes) {\n // Note: loop in reverse so that the first named item matches the named property\n for (var l = nodes.length - 1; l >= 0; l--) {\n var node = nodes[l];\n var name = getNodeHTMLCollectionName(node);\n\n if (name && isValidHTMLCollectionName(name)) {\n nodes[name] = node;\n }\n }\n\n nodes.item = function (index) {\n return nodes[index];\n };\n\n nodes.namedItem = function (name) {\n if (isValidHTMLCollectionName(name) && nodes[name]) {\n return nodes[name];\n }\n\n var _iteratorNormalCompletion = true;\n var _didIteratorError = false;\n var _iteratorError = undefined;\n\n try {\n for (var _iterator = nodes[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {\n var _node = _step.value;\n var nodeName = getNodeHTMLCollectionName(_node);\n\n if (nodeName == name) {\n return _node;\n }\n }\n } catch (err) {\n _didIteratorError = true;\n _iteratorError = err;\n } finally {\n try {\n if (!_iteratorNormalCompletion && _iterator.return != null) {\n _iterator.return();\n }\n } finally {\n if (_didIteratorError) {\n throw _iteratorError;\n }\n }\n }\n\n return null;\n };\n\n return nodes;\n}\n// CONCATENATED MODULE: ./node_modules/@webcomponents/shadydom/src/flush.js\n/**\n@license\nCopyright (c) 2016 The Polymer Project Authors. All rights reserved.\nThis code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt\nThe complete set of authors may be found at http://polymer.github.io/AUTHORS.txt\nThe complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt\nCode distributed by Google as part of the polymer project is also\nsubject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt\n*/\n // render enqueuer/flusher\n\nvar flushList = [];\nvar scheduled;\nfunction enqueue(callback) {\n if (!scheduled) {\n scheduled = true;\n microtask(flush);\n }\n\n flushList.push(callback);\n}\nfunction flush() {\n scheduled = false;\n var didFlush = Boolean(flushList.length);\n\n while (flushList.length) {\n flushList.shift()();\n }\n\n return didFlush;\n}\nflush['list'] = flushList;\n// CONCATENATED MODULE: ./node_modules/@webcomponents/shadydom/src/observe-changes.js\nfunction observe_changes_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction observe_changes_defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction observe_changes_createClass(Constructor, protoProps, staticProps) { if (protoProps) observe_changes_defineProperties(Constructor.prototype, protoProps); if (staticProps) observe_changes_defineProperties(Constructor, staticProps); return Constructor; }\n\n/**\n@license\nCopyright (c) 2016 The Polymer Project Authors. All rights reserved.\nThis code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt\nThe complete set of authors may be found at http://polymer.github.io/AUTHORS.txt\nThe complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt\nCode distributed by Google as part of the polymer project is also\nsubject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt\n*/\n\n\n\nvar observe_changes_AsyncObserver =\n/*#__PURE__*/\nfunction () {\n function AsyncObserver() {\n observe_changes_classCallCheck(this, AsyncObserver);\n\n this._scheduled = false;\n this.addedNodes = [];\n this.removedNodes = [];\n this.callbacks = new Set();\n }\n\n observe_changes_createClass(AsyncObserver, [{\n key: \"schedule\",\n value: function schedule() {\n var _this = this;\n\n if (!this._scheduled) {\n this._scheduled = true;\n microtask(function () {\n _this.flush();\n });\n }\n }\n }, {\n key: \"flush\",\n value: function flush() {\n if (this._scheduled) {\n this._scheduled = false;\n var mutations = this.takeRecords();\n\n if (mutations.length) {\n this.callbacks.forEach(function (cb) {\n cb(mutations);\n });\n }\n }\n }\n }, {\n key: \"takeRecords\",\n value: function takeRecords() {\n if (this.addedNodes.length || this.removedNodes.length) {\n var mutations = [{\n addedNodes: this.addedNodes,\n removedNodes: this.removedNodes\n }];\n this.addedNodes = [];\n this.removedNodes = [];\n return mutations;\n }\n\n return [];\n }\n }]);\n\n return AsyncObserver;\n}(); // TODO(sorvell): consider instead polyfilling MutationObserver\n// directly so that users do not have to fork their code.\n// Supporting the entire api may be challenging: e.g. filtering out\n// removed nodes in the wrong scope and seeing non-distributing\n// subtree child mutations.\n\n\nvar observe_changes_observeChildren = function observeChildren(node, callback) {\n var sd = ensureShadyDataForNode(node);\n\n if (!sd.observer) {\n sd.observer = new observe_changes_AsyncObserver();\n }\n\n sd.observer.callbacks.add(callback);\n var observer = sd.observer;\n return {\n _callback: callback,\n _observer: observer,\n _node: node,\n takeRecords: function takeRecords() {\n return observer.takeRecords();\n }\n };\n};\nvar observe_changes_unobserveChildren = function unobserveChildren(handle) {\n var observer = handle && handle._observer;\n\n if (observer) {\n observer.callbacks.delete(handle._callback);\n\n if (!observer.callbacks.size) {\n ensureShadyDataForNode(handle._node).observer = null;\n }\n }\n};\nfunction filterMutations(mutations, target) {\n /** @const {Node} */\n var targetRootNode = target.getRootNode();\n return mutations.map(function (mutation) {\n /** @const {boolean} */\n var mutationInScope = targetRootNode === mutation.target.getRootNode();\n\n if (mutationInScope && mutation.addedNodes) {\n var nodes = Array.from(mutation.addedNodes).filter(function (n) {\n return targetRootNode === n.getRootNode();\n });\n\n if (nodes.length) {\n mutation = Object.create(mutation);\n Object.defineProperty(mutation, 'addedNodes', {\n value: nodes,\n configurable: true\n });\n return mutation;\n }\n } else if (mutationInScope) {\n return mutation;\n }\n }).filter(function (m) {\n return m;\n });\n}\n// CONCATENATED MODULE: ./node_modules/@webcomponents/shadydom/src/native-methods.js\n/**\n@license\nCopyright (c) 2016 The Polymer Project Authors. All rights reserved.\nThis code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt\nThe complete set of authors may be found at http://polymer.github.io/AUTHORS.txt\nThe complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt\nCode distributed by Google as part of the polymer project is also\nsubject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt\n*/\nvar native_methods_appendChild = Element.prototype.appendChild;\nvar native_methods_insertBefore = Element.prototype.insertBefore;\nvar native_methods_replaceChild = Element.prototype.replaceChild;\nvar native_methods_removeChild = Element.prototype.removeChild;\nvar native_methods_setAttribute = Element.prototype.setAttribute;\nvar native_methods_removeAttribute = Element.prototype.removeAttribute;\nvar native_methods_cloneNode = Element.prototype.cloneNode;\nvar native_methods_importNode = Document.prototype.importNode;\nvar addEventListener = Element.prototype.addEventListener;\nvar removeEventListener = Element.prototype.removeEventListener;\nvar windowAddEventListener = Window.prototype.addEventListener;\nvar windowRemoveEventListener = Window.prototype.removeEventListener;\nvar native_methods_dispatchEvent = Element.prototype.dispatchEvent;\nvar native_methods_contains = Node.prototype.contains || HTMLElement.prototype.contains;\nvar native_methods_getElementById = Document.prototype.getElementById;\nvar elementQuerySelector = Element.prototype.querySelector;\nvar fragmentQuerySelector = DocumentFragment.prototype.querySelector;\nvar documentQuerySelector = Document.prototype.querySelector;\nvar native_methods_querySelector =\n/** @this {Element|Document|DocumentFragment} */\nfunction querySelector(selector) {\n switch (this.nodeType) {\n case Node.ELEMENT_NODE:\n return elementQuerySelector.call(\n /** @type {Element} */\n this, selector);\n\n case Node.DOCUMENT_NODE:\n return documentQuerySelector.call(\n /** @type {Document} */\n this, selector);\n\n default:\n return fragmentQuerySelector.call(this, selector);\n }\n};\nvar elementQuerySelectorAll = Element.prototype.querySelectorAll;\nvar fragmentQuerySelectorAll = DocumentFragment.prototype.querySelectorAll;\nvar documentQuerySelectorAll = Document.prototype.querySelectorAll;\nvar native_methods_querySelectorAll =\n/** @this {Element|Document|DocumentFragment} */\nfunction querySelectorAll(selector) {\n switch (this.nodeType) {\n case Node.ELEMENT_NODE:\n return elementQuerySelectorAll.call(\n /** @type {Element} */\n this, selector);\n\n case Node.DOCUMENT_NODE:\n return documentQuerySelectorAll.call(\n /** @type {Document} */\n this, selector);\n\n default:\n return fragmentQuerySelectorAll.call(this, selector);\n }\n};\n// CONCATENATED MODULE: ./node_modules/@webcomponents/shadydom/src/innerHTML.js\n/**\n@license\nCopyright (c) 2016 The Polymer Project Authors. All rights reserved.\nThis code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt\nThe complete set of authors may be found at http://polymer.github.io/AUTHORS.txt\nThe complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt\nCode distributed by Google as part of the polymer project is also\nsubject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt\n*/\n// Cribbed from ShadowDOM polyfill\n// https://github.com/webcomponents/webcomponentsjs/blob/master/src/ShadowDOM/wrappers/HTMLElement.js#L28\n/////////////////////////////////////////////////////////////////////////////\n// innerHTML and outerHTML\n// http://www.whatwg.org/specs/web-apps/current-work/multipage/the-end.html#escapingString\nvar escapeAttrRegExp = /[&\\u00A0\"]/g;\nvar escapeDataRegExp = /[&\\u00A0<>]/g;\n\nfunction escapeReplace(c) {\n switch (c) {\n case '&':\n return '&';\n\n case '<':\n return '<';\n\n case '>':\n return '>';\n\n case '\"':\n return '"';\n\n case \"\\xA0\":\n return ' ';\n }\n}\n\nfunction escapeAttr(s) {\n return s.replace(escapeAttrRegExp, escapeReplace);\n}\n\nfunction escapeData(s) {\n return s.replace(escapeDataRegExp, escapeReplace);\n}\n\nfunction makeSet(arr) {\n var set = {};\n\n for (var i = 0; i < arr.length; i++) {\n set[arr[i]] = true;\n }\n\n return set;\n} // http://www.whatwg.org/specs/web-apps/current-work/#void-elements\n\n\nvar voidElements = makeSet(['area', 'base', 'br', 'col', 'command', 'embed', 'hr', 'img', 'input', 'keygen', 'link', 'meta', 'param', 'source', 'track', 'wbr']);\nvar plaintextParents = makeSet(['style', 'script', 'xmp', 'iframe', 'noembed', 'noframes', 'plaintext', 'noscript']);\n/**\n * @param {Node} node\n * @param {Node} parentNode\n * @param {Function=} callback\n */\n\nfunction getOuterHTML(node, parentNode, callback) {\n switch (node.nodeType) {\n case Node.ELEMENT_NODE:\n {\n var tagName = node.localName;\n var s = '<' + tagName;\n var attrs = node.attributes;\n\n for (var i = 0, attr; attr = attrs[i]; i++) {\n s += ' ' + attr.name + '=\"' + escapeAttr(attr.value) + '\"';\n }\n\n s += '>';\n\n if (voidElements[tagName]) {\n return s;\n }\n\n return s + getInnerHTML(node, callback) + '';\n }\n\n case Node.TEXT_NODE:\n {\n var data =\n /** @type {Text} */\n node.data;\n\n if (parentNode && plaintextParents[parentNode.localName]) {\n return data;\n }\n\n return escapeData(data);\n }\n\n case Node.COMMENT_NODE:\n {\n return '';\n }\n\n default:\n {\n window.console.error(node);\n throw new Error('not implemented');\n }\n }\n}\n/**\n * @param {Node} node\n * @param {Function=} callback\n */\n\nfunction getInnerHTML(node, callback) {\n if (node.localName === 'template') {\n node =\n /** @type {HTMLTemplateElement} */\n node.content;\n }\n\n var s = '';\n var c$ = callback ? callback(node) : node.childNodes;\n\n for (var i = 0, l = c$.length, child; i < l && (child = c$[i]); i++) {\n s += getOuterHTML(child, node, callback);\n }\n\n return s;\n}\n// CONCATENATED MODULE: ./node_modules/@webcomponents/shadydom/src/native-tree-walker.js\n/**\n@license\nCopyright (c) 2016 The Polymer Project Authors. All rights reserved.\nThis code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt\nThe complete set of authors may be found at http://polymer.github.io/AUTHORS.txt\nThe complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt\nCode distributed by Google as part of the polymer project is also\nsubject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt\n*/\n\n\nvar nodeWalker = document.createTreeWalker(document, NodeFilter.SHOW_ALL, null, false);\nvar elementWalker = document.createTreeWalker(document, NodeFilter.SHOW_ELEMENT, null, false);\nfunction parentNode(node) {\n nodeWalker.currentNode = node;\n return nodeWalker.parentNode();\n}\nfunction native_tree_walker_firstChild(node) {\n nodeWalker.currentNode = node;\n return nodeWalker.firstChild();\n}\nfunction lastChild(node) {\n nodeWalker.currentNode = node;\n return nodeWalker.lastChild();\n}\nfunction previousSibling(node) {\n nodeWalker.currentNode = node;\n return nodeWalker.previousSibling();\n}\nfunction nextSibling(node) {\n nodeWalker.currentNode = node;\n return nodeWalker.nextSibling();\n}\nfunction native_tree_walker_childNodes(node) {\n var nodes = [];\n nodeWalker.currentNode = node;\n var n = nodeWalker.firstChild();\n\n while (n) {\n nodes.push(n);\n n = nodeWalker.nextSibling();\n }\n\n return nodes;\n}\nfunction parentElement(node) {\n elementWalker.currentNode = node;\n return elementWalker.parentNode();\n}\nfunction firstElementChild(node) {\n elementWalker.currentNode = node;\n return elementWalker.firstChild();\n}\nfunction lastElementChild(node) {\n elementWalker.currentNode = node;\n return elementWalker.lastChild();\n}\nfunction previousElementSibling(node) {\n elementWalker.currentNode = node;\n return elementWalker.previousSibling();\n}\nfunction nextElementSibling(node) {\n elementWalker.currentNode = node;\n return elementWalker.nextSibling();\n}\nfunction native_tree_walker_children(node) {\n var nodes = [];\n elementWalker.currentNode = node;\n var n = elementWalker.firstChild();\n\n while (n) {\n nodes.push(n);\n n = elementWalker.nextSibling();\n }\n\n return createPolyfilledHTMLCollection(nodes);\n}\nfunction innerHTML(node) {\n return getInnerHTML(node, function (n) {\n return native_tree_walker_childNodes(n);\n });\n}\nfunction textContent(node) {\n /* eslint-disable no-case-declarations */\n switch (node.nodeType) {\n case Node.ELEMENT_NODE:\n case Node.DOCUMENT_FRAGMENT_NODE:\n var textWalker = document.createTreeWalker(node, NodeFilter.SHOW_TEXT, null, false);\n var content = '',\n n;\n\n while (n = textWalker.nextNode()) {\n // TODO(sorvell): can't use textContent since we patch it on Node.prototype!\n // However, should probably patch it only on element.\n content += n.nodeValue;\n }\n\n return content;\n\n default:\n return node.nodeValue;\n }\n /* eslint-enable */\n\n}\n// CONCATENATED MODULE: ./node_modules/@webcomponents/shadydom/src/native-tree-accessors.js\n/**\n@license\nCopyright (c) 2016 The Polymer Project Authors. All rights reserved.\nThis code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt\nThe complete set of authors may be found at http://polymer.github.io/AUTHORS.txt\nThe complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt\nCode distributed by Google as part of the polymer project is also\nsubject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt\n*/\n\nvar hasDescriptors = settings.hasDescriptors; // Find descriptor on the \"lowest\" native prototype. Safe as these are not\n// overridden and we call these on nodes.\n\nvar nativeProtos = [Node.prototype, Element.prototype, HTMLElement.prototype]; // note, avoid Array.find for IE11 compat.\n\nfunction findNativeProtoWithDescriptor(name) {\n for (var i = 0; i < nativeProtos.length; i++) {\n var proto = nativeProtos[i];\n\n if (proto.hasOwnProperty(name)) {\n return proto;\n }\n }\n}\n\nfunction findNodeDescriptor(name) {\n var proto = findNativeProtoWithDescriptor(name);\n\n if (!proto) {\n throw Error(\"Could not find descriptor for \".concat(name));\n }\n\n return Object.getOwnPropertyDescriptor(proto, name);\n}\n\nvar nodeAccessors = hasDescriptors ? {\n parentNode: findNodeDescriptor('parentNode'),\n firstChild: findNodeDescriptor('firstChild'),\n lastChild: findNodeDescriptor('lastChild'),\n previousSibling: findNodeDescriptor('previousSibling'),\n nextSibling: findNodeDescriptor('nextSibling'),\n childNodes: findNodeDescriptor('childNodes'),\n parentElement: findNodeDescriptor('parentElement'),\n previousElementSibling: findNodeDescriptor('previousElementSibling'),\n nextElementSibling: findNodeDescriptor('nextElementSibling'),\n innerHTML: findNodeDescriptor('innerHTML'),\n textContent: findNodeDescriptor('textContent'),\n firstElementChild: findNodeDescriptor('firstElementChild'),\n lastElementChild: findNodeDescriptor('lastElementChild'),\n children: findNodeDescriptor('children')\n} : {};\nvar fragmentAccessors = hasDescriptors ? {\n firstElementChild: Object.getOwnPropertyDescriptor(DocumentFragment.prototype, 'firstElementChild'),\n lastElementChild: Object.getOwnPropertyDescriptor(DocumentFragment.prototype, 'lastElementChild'),\n children: Object.getOwnPropertyDescriptor(DocumentFragment.prototype, 'children')\n} : {};\nvar documentAccessors = hasDescriptors ? {\n firstElementChild: Object.getOwnPropertyDescriptor(Document.prototype, 'firstElementChild'),\n lastElementChild: Object.getOwnPropertyDescriptor(Document.prototype, 'lastElementChild'),\n children: Object.getOwnPropertyDescriptor(Document.prototype, 'children')\n} : {};\nfunction native_tree_accessors_parentNode(node) {\n return nodeAccessors.parentNode.get.call(node);\n}\nfunction native_tree_accessors_firstChild(node) {\n return nodeAccessors.firstChild.get.call(node);\n}\nfunction native_tree_accessors_lastChild(node) {\n return nodeAccessors.lastChild.get.call(node);\n}\nfunction native_tree_accessors_previousSibling(node) {\n return nodeAccessors.previousSibling.get.call(node);\n}\nfunction native_tree_accessors_nextSibling(node) {\n return nodeAccessors.nextSibling.get.call(node);\n}\nfunction native_tree_accessors_childNodes(node) {\n return Array.prototype.slice.call(nodeAccessors.childNodes.get.call(node));\n}\nfunction native_tree_accessors_parentElement(node) {\n return nodeAccessors.parentElement.get.call(node);\n}\nfunction native_tree_accessors_previousElementSibling(node) {\n return nodeAccessors.previousElementSibling.get.call(node);\n}\nfunction native_tree_accessors_nextElementSibling(node) {\n return nodeAccessors.nextElementSibling.get.call(node);\n}\nfunction native_tree_accessors_innerHTML(node) {\n return nodeAccessors.innerHTML.get.call(node);\n}\nfunction native_tree_accessors_textContent(node) {\n return nodeAccessors.textContent.get.call(node);\n}\nfunction native_tree_accessors_children(node) {\n switch (node.nodeType) {\n case Node.DOCUMENT_FRAGMENT_NODE:\n return fragmentAccessors.children.get.call(node);\n\n case Node.DOCUMENT_NODE:\n return documentAccessors.children.get.call(node);\n\n default:\n return nodeAccessors.children.get.call(node);\n }\n}\nfunction native_tree_accessors_firstElementChild(node) {\n switch (node.nodeType) {\n case Node.DOCUMENT_FRAGMENT_NODE:\n return fragmentAccessors.firstElementChild.get.call(node);\n\n case Node.DOCUMENT_NODE:\n return documentAccessors.firstElementChild.get.call(node);\n\n default:\n return nodeAccessors.firstElementChild.get.call(node);\n }\n}\nfunction native_tree_accessors_lastElementChild(node) {\n switch (node.nodeType) {\n case Node.DOCUMENT_FRAGMENT_NODE:\n return fragmentAccessors.lastElementChild.get.call(node);\n\n case Node.DOCUMENT_NODE:\n return documentAccessors.lastElementChild.get.call(node);\n\n default:\n return nodeAccessors.lastElementChild.get.call(node);\n }\n}\n// CONCATENATED MODULE: ./node_modules/@webcomponents/shadydom/src/native-tree.js\n/**\n@license\nCopyright (c) 2016 The Polymer Project Authors. All rights reserved.\nThis code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt\nThe complete set of authors may be found at http://polymer.github.io/AUTHORS.txt\nThe complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt\nCode distributed by Google as part of the polymer project is also\nsubject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt\n*/\n\n\n\nvar accessors = settings.useNativeAccessors ? native_tree_accessors_namespaceObject : native_tree_walker_namespaceObject;\n// CONCATENATED MODULE: ./node_modules/@webcomponents/shadydom/src/patch-accessors.js\n/**\n@license\nCopyright (c) 2016 The Polymer Project Authors. All rights reserved.\nThis code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt\nThe complete set of authors may be found at http://polymer.github.io/AUTHORS.txt\nThe complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt\nCode distributed by Google as part of the polymer project is also\nsubject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt\n*/\n\n\n\n\n\n\n\nfunction clearNode(node) {\n while (node.firstChild) {\n node.removeChild(node.firstChild);\n }\n}\n\nvar patch_accessors_hasDescriptors = settings.hasDescriptors;\nvar inertDoc = document.implementation.createHTMLDocument('inert');\nvar nativeIsConnectedAccessors =\n/** @type {ObjectPropertyDescriptor} */\nObject.getOwnPropertyDescriptor(Node.prototype, 'isConnected');\nvar nativeIsConnected = nativeIsConnectedAccessors && nativeIsConnectedAccessors.get;\nvar nativeActiveElementDescriptor =\n/** @type {ObjectPropertyDescriptor} */\nObject.getOwnPropertyDescriptor(Document.prototype, 'activeElement');\n\nfunction getDocumentActiveElement() {\n if (nativeActiveElementDescriptor && nativeActiveElementDescriptor.get) {\n return nativeActiveElementDescriptor.get.call(document);\n } else if (!settings.hasDescriptors) {\n return document.activeElement;\n }\n}\n\nfunction activeElementForNode(node) {\n var active = getDocumentActiveElement(); // In IE11, activeElement might be an empty object if the document is\n // contained in an iframe.\n // https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/10998788/\n\n if (!active || !active.nodeType) {\n return null;\n }\n\n var isShadyRoot = !!utils_isShadyRoot(node);\n\n if (node !== document) {\n // If this node isn't a document or shady root, then it doesn't have\n // an active element.\n if (!isShadyRoot) {\n return null;\n } // If this shady root's host is the active element or the active\n // element is not a descendant of the host (in the composed tree),\n // then it doesn't have an active element.\n\n\n if (node.host === active || !native_methods_contains.call(node.host, active)) {\n return null;\n }\n } // This node is either the document or a shady root of which the active\n // element is a (composed) descendant of its host; iterate upwards to\n // find the active element's most shallow host within it.\n\n\n var activeRoot = ownerShadyRootForNode(active);\n\n while (activeRoot && activeRoot !== node) {\n active = activeRoot.host;\n activeRoot = ownerShadyRootForNode(active);\n }\n\n if (node === document) {\n // This node is the document, so activeRoot should be null.\n return activeRoot ? null : active;\n } else {\n // This node is a non-document shady root, and it should be\n // activeRoot.\n return activeRoot === node ? active : null;\n }\n}\n\nvar OutsideAccessors = {\n parentElement: {\n /** @this {Node} */\n get: function get() {\n var nodeData = shadyDataForNode(this);\n var l = nodeData && nodeData.parentNode;\n\n if (l && l.nodeType !== Node.ELEMENT_NODE) {\n l = null;\n }\n\n return l !== undefined ? l : accessors.parentElement(this);\n },\n configurable: true\n },\n parentNode: {\n /** @this {Node} */\n get: function get() {\n var nodeData = shadyDataForNode(this);\n var l = nodeData && nodeData.parentNode;\n return l !== undefined ? l : accessors.parentNode(this);\n },\n configurable: true\n },\n nextSibling: {\n /** @this {Node} */\n get: function get() {\n var nodeData = shadyDataForNode(this);\n var l = nodeData && nodeData.nextSibling;\n return l !== undefined ? l : accessors.nextSibling(this);\n },\n configurable: true\n },\n previousSibling: {\n /** @this {Node} */\n get: function get() {\n var nodeData = shadyDataForNode(this);\n var l = nodeData && nodeData.previousSibling;\n return l !== undefined ? l : accessors.previousSibling(this);\n },\n configurable: true\n },\n // fragment, element, document\n nextElementSibling: {\n /**\n * @this {HTMLElement}\n */\n get: function get() {\n var nodeData = shadyDataForNode(this);\n\n if (nodeData && nodeData.nextSibling !== undefined) {\n var n = this.nextSibling;\n\n while (n && n.nodeType !== Node.ELEMENT_NODE) {\n n = n.nextSibling;\n }\n\n return n;\n } else {\n return accessors.nextElementSibling(this);\n }\n },\n configurable: true\n },\n previousElementSibling: {\n /**\n * @this {HTMLElement}\n */\n get: function get() {\n var nodeData = shadyDataForNode(this);\n\n if (nodeData && nodeData.previousSibling !== undefined) {\n var n = this.previousSibling;\n\n while (n && n.nodeType !== Node.ELEMENT_NODE) {\n n = n.previousSibling;\n }\n\n return n;\n } else {\n return accessors.previousElementSibling(this);\n }\n },\n configurable: true\n }\n};\nvar ClassNameAccessor = {\n className: {\n /**\n * @this {HTMLElement}\n */\n get: function get() {\n return this.getAttribute('class') || '';\n },\n\n /**\n * @this {HTMLElement}\n */\n set: function set(value) {\n this.setAttribute('class', value);\n },\n configurable: true\n }\n};\nvar IsConnectedAccessor = {\n isConnected: {\n /**\n * @this {Node}\n */\n get: function get() {\n if (nativeIsConnected && nativeIsConnected.call(this)) {\n return true;\n }\n\n if (this.nodeType == Node.DOCUMENT_FRAGMENT_NODE) {\n return false;\n } // Fast path for distributed nodes.\n\n\n var ownerDocument = this.ownerDocument;\n\n if (hasDocumentContains) {\n if (native_methods_contains.call(ownerDocument, this)) {\n return true;\n }\n } else if (ownerDocument.documentElement && native_methods_contains.call(ownerDocument.documentElement, this)) {\n return true;\n } // Slow path for non-distributed nodes.\n\n\n var node = this;\n\n while (node && !(node instanceof Document)) {\n node = node.parentNode || (utils_isShadyRoot(node) ?\n /** @type {ShadowRoot} */\n node.host : undefined);\n }\n\n return !!(node && node instanceof Document);\n },\n configurable: true\n }\n};\nvar InsideAccessors = {\n childNodes: {\n /**\n * @this {HTMLElement}\n */\n get: function get() {\n var childNodes;\n\n if (isTrackingLogicalChildNodes(this)) {\n var nodeData = shadyDataForNode(this);\n\n if (!nodeData.childNodes) {\n nodeData.childNodes = [];\n\n for (var n = this.firstChild; n; n = n.nextSibling) {\n nodeData.childNodes.push(n);\n }\n }\n\n childNodes = nodeData.childNodes;\n } else {\n childNodes = accessors.childNodes(this);\n }\n\n childNodes.item = function (index) {\n return childNodes[index];\n };\n\n return childNodes;\n },\n configurable: true\n },\n childElementCount: {\n /** @this {HTMLElement} */\n get: function get() {\n return this.children.length;\n },\n configurable: true\n },\n firstChild: {\n /** @this {HTMLElement} */\n get: function get() {\n var nodeData = shadyDataForNode(this);\n var l = nodeData && nodeData.firstChild;\n return l !== undefined ? l : accessors.firstChild(this);\n },\n configurable: true\n },\n lastChild: {\n /** @this {HTMLElement} */\n get: function get() {\n var nodeData = shadyDataForNode(this);\n var l = nodeData && nodeData.lastChild;\n return l !== undefined ? l : accessors.lastChild(this);\n },\n configurable: true\n },\n textContent: {\n /**\n * @this {HTMLElement}\n */\n get: function get() {\n if (isTrackingLogicalChildNodes(this)) {\n var tc = [];\n\n for (var i = 0, cn = this.childNodes, c; c = cn[i]; i++) {\n if (c.nodeType !== Node.COMMENT_NODE) {\n tc.push(c.textContent);\n }\n }\n\n return tc.join('');\n } else {\n return accessors.textContent(this);\n }\n },\n\n /**\n * @this {HTMLElement}\n * @param {string} text\n */\n set: function set(text) {\n if (typeof text === 'undefined' || text === null) {\n text = '';\n }\n\n switch (this.nodeType) {\n case Node.ELEMENT_NODE:\n case Node.DOCUMENT_FRAGMENT_NODE:\n if (!isTrackingLogicalChildNodes(this) && patch_accessors_hasDescriptors) {\n // may be removing a nested slot but fast path if we know we are not.\n var firstChild = this.firstChild;\n\n if (firstChild != this.lastChild || firstChild && firstChild.nodeType != Node.TEXT_NODE) {\n clearNode(this);\n }\n\n nodeAccessors.textContent.set.call(this, text);\n } else {\n clearNode(this); // Document fragments must have no childnodes if setting a blank string\n\n if (text.length > 0 || this.nodeType === Node.ELEMENT_NODE) {\n this.appendChild(document.createTextNode(text));\n }\n }\n\n break;\n\n default:\n // TODO(sorvell): can't do this if patch nodeValue.\n this.nodeValue = text;\n break;\n }\n },\n configurable: true\n },\n // fragment, element, document\n firstElementChild: {\n /**\n * @this {HTMLElement}\n */\n get: function get() {\n var nodeData = shadyDataForNode(this);\n\n if (nodeData && nodeData.firstChild !== undefined) {\n var n = this.firstChild;\n\n while (n && n.nodeType !== Node.ELEMENT_NODE) {\n n = n.nextSibling;\n }\n\n return n;\n } else {\n return accessors.firstElementChild(this);\n }\n },\n configurable: true\n },\n lastElementChild: {\n /**\n * @this {HTMLElement}\n */\n get: function get() {\n var nodeData = shadyDataForNode(this);\n\n if (nodeData && nodeData.lastChild !== undefined) {\n var n = this.lastChild;\n\n while (n && n.nodeType !== Node.ELEMENT_NODE) {\n n = n.previousSibling;\n }\n\n return n;\n } else {\n return accessors.lastElementChild(this);\n }\n },\n configurable: true\n },\n children: {\n /**\n * @this {HTMLElement}\n */\n get: function get() {\n if (!isTrackingLogicalChildNodes(this)) {\n return accessors.children(this);\n }\n\n return createPolyfilledHTMLCollection(Array.prototype.filter.call(this.childNodes, function (n) {\n return n.nodeType === Node.ELEMENT_NODE;\n }));\n },\n configurable: true\n },\n // element (HTMLElement on IE11)\n innerHTML: {\n /**\n * @this {HTMLElement}\n */\n get: function get() {\n if (isTrackingLogicalChildNodes(this)) {\n var content = this.localName === 'template' ?\n /** @type {HTMLTemplateElement} */\n this.content : this;\n return getInnerHTML(content);\n } else {\n return accessors.innerHTML(this);\n }\n },\n\n /**\n * @this {HTMLElement}\n */\n set: function set(text) {\n var content = this.localName === 'template' ?\n /** @type {HTMLTemplateElement} */\n this.content : this;\n clearNode(content);\n var containerName = this.localName || 'div';\n var htmlContainer;\n\n if (!this.namespaceURI || this.namespaceURI === inertDoc.namespaceURI) {\n htmlContainer = inertDoc.createElement(containerName);\n } else {\n htmlContainer = inertDoc.createElementNS(this.namespaceURI, containerName);\n }\n\n if (patch_accessors_hasDescriptors) {\n nodeAccessors.innerHTML.set.call(htmlContainer, text);\n } else {\n htmlContainer.innerHTML = text;\n }\n\n var newContent = this.localName === 'template' ?\n /** @type {HTMLTemplateElement} */\n htmlContainer.content : htmlContainer;\n\n while (newContent.firstChild) {\n content.appendChild(newContent.firstChild);\n }\n },\n configurable: true\n }\n}; // Note: Can be patched on element prototype on all browsers.\n// Must be patched on instance on browsers that support native Shadow DOM\n// but do not have builtin accessors (old Chrome).\n\nvar ShadowRootAccessor = {\n shadowRoot: {\n /**\n * @this {HTMLElement}\n */\n get: function get() {\n var nodeData = shadyDataForNode(this);\n return nodeData && nodeData.publicRoot || null;\n },\n configurable: true\n }\n}; // Note: Can be patched on document prototype on browsers with builtin accessors.\n// Must be patched separately on simulated ShadowRoot.\n// Must be patched as `_activeElement` on browsers without builtin accessors.\n\nvar ActiveElementAccessor = {\n activeElement: {\n /**\n * @this {HTMLElement}\n */\n get: function get() {\n return activeElementForNode(this);\n },\n\n /**\n * @this {HTMLElement}\n */\n set: function set() {},\n configurable: true\n }\n}; // patch a group of descriptors on an object only if it exists or if the `force`\n// argument is true.\n\n/**\n * @param {!Object} obj\n * @param {!Object} descriptors\n * @param {boolean=} force\n */\n\nfunction patchAccessorGroup(obj, descriptors, force) {\n for (var p in descriptors) {\n var objDesc = Object.getOwnPropertyDescriptor(obj, p);\n\n if (objDesc && objDesc.configurable || !objDesc && force) {\n Object.defineProperty(obj, p, descriptors[p]);\n } else if (force) {\n console.warn('Could not define', p, 'on', obj); // eslint-disable-line no-console\n }\n }\n} // patch dom accessors on proto where they exist\n\n\nfunction patchAccessors(proto) {\n patchAccessorGroup(proto, OutsideAccessors);\n patchAccessorGroup(proto, ClassNameAccessor);\n patchAccessorGroup(proto, InsideAccessors);\n patchAccessorGroup(proto, ActiveElementAccessor);\n}\nfunction patchShadowRootAccessors(proto) {\n proto.__proto__ = DocumentFragment.prototype; // ensure element descriptors (IE/Edge don't have em)\n\n patchAccessorGroup(proto, OutsideAccessors, true);\n patchAccessorGroup(proto, InsideAccessors, true);\n patchAccessorGroup(proto, ActiveElementAccessor, true); // Ensure native properties are all safely wrapped since ShadowRoot is not an\n // actual DocumentFragment instance.\n\n Object.defineProperties(proto, {\n nodeType: {\n value: Node.DOCUMENT_FRAGMENT_NODE,\n configurable: true\n },\n nodeName: {\n value: '#document-fragment',\n configurable: true\n },\n nodeValue: {\n value: null,\n configurable: true\n }\n }); // make undefined\n\n ['localName', 'namespaceURI', 'prefix'].forEach(function (prop) {\n Object.defineProperty(proto, prop, {\n value: undefined,\n configurable: true\n });\n }); // defer properties to host\n\n ['ownerDocument', 'baseURI', 'isConnected'].forEach(function (prop) {\n Object.defineProperty(proto, prop, {\n get: function get() {\n return this.host[prop];\n },\n configurable: true\n });\n });\n} // ensure an element has patched \"outside\" accessors; no-op when not needed\n\nvar patchOutsideElementAccessors = settings.hasDescriptors ? function () {} : function (element) {\n var sd = ensureShadyDataForNode(element);\n\n if (!sd.__outsideAccessors) {\n sd.__outsideAccessors = true;\n patchAccessorGroup(element, OutsideAccessors, true);\n patchAccessorGroup(element, ClassNameAccessor, true);\n }\n}; // ensure an element has patched \"inside\" accessors; no-op when not needed\n\nvar patchInsideElementAccessors = settings.hasDescriptors ? function () {} : function (element) {\n var sd = ensureShadyDataForNode(element);\n\n if (!sd.__insideAccessors) {\n patchAccessorGroup(element, InsideAccessors, true);\n patchAccessorGroup(element, ShadowRootAccessor, true);\n }\n};\n// CONCATENATED MODULE: ./node_modules/@webcomponents/shadydom/src/logical-tree.js\n/**\n@license\nCopyright (c) 2016 The Polymer Project Authors. All rights reserved.\nThis code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt\nThe complete set of authors may be found at http://polymer.github.io/AUTHORS.txt\nThe complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt\nCode distributed by Google as part of the polymer project is also\nsubject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt\n*/\n\n\n\nvar logical_tree_childNodes = accessors.childNodes;\nfunction recordInsertBefore(node, container, ref_node) {\n patchInsideElementAccessors(container);\n var containerData = ensureShadyDataForNode(container);\n\n if (containerData.firstChild !== undefined) {\n containerData.childNodes = null;\n } // handle document fragments\n\n\n if (node.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {\n var c$ = node.childNodes;\n\n for (var i = 0; i < c$.length; i++) {\n linkNode(c$[i], container, ref_node);\n } // cleanup logical dom in doc fragment.\n\n\n var nodeData = ensureShadyDataForNode(node);\n var resetTo = nodeData.firstChild !== undefined ? null : undefined;\n nodeData.firstChild = nodeData.lastChild = resetTo;\n nodeData.childNodes = resetTo;\n } else {\n linkNode(node, container, ref_node);\n }\n}\n\nfunction linkNode(node, container, ref_node) {\n patchOutsideElementAccessors(node);\n ref_node = ref_node || null;\n var nodeData = ensureShadyDataForNode(node);\n var containerData = ensureShadyDataForNode(container);\n var ref_nodeData = ref_node ? ensureShadyDataForNode(ref_node) : null; // update ref_node.previousSibling <-> node\n\n nodeData.previousSibling = ref_node ? ref_nodeData.previousSibling : container.lastChild;\n var psd = shadyDataForNode(nodeData.previousSibling);\n\n if (psd) {\n psd.nextSibling = node;\n } // update node <-> ref_node\n\n\n var nsd = shadyDataForNode(nodeData.nextSibling = ref_node);\n\n if (nsd) {\n nsd.previousSibling = node;\n } // update node <-> container\n\n\n nodeData.parentNode = container;\n\n if (ref_node) {\n if (ref_node === containerData.firstChild) {\n containerData.firstChild = node;\n }\n } else {\n containerData.lastChild = node;\n\n if (!containerData.firstChild) {\n containerData.firstChild = node;\n }\n } // remove caching of childNodes\n\n\n containerData.childNodes = null;\n}\n\nfunction recordRemoveChild(node, container) {\n var nodeData = ensureShadyDataForNode(node);\n var containerData = ensureShadyDataForNode(container);\n\n if (node === containerData.firstChild) {\n containerData.firstChild = nodeData.nextSibling;\n }\n\n if (node === containerData.lastChild) {\n containerData.lastChild = nodeData.previousSibling;\n }\n\n var p = nodeData.previousSibling;\n var n = nodeData.nextSibling;\n\n if (p) {\n ensureShadyDataForNode(p).nextSibling = n;\n }\n\n if (n) {\n ensureShadyDataForNode(n).previousSibling = p;\n } // When an element is removed, logical data is no longer tracked.\n // Explicitly set `undefined` here to indicate this. This is disginguished\n // from `null` which is set if info is null.\n\n\n nodeData.parentNode = nodeData.previousSibling = nodeData.nextSibling = undefined;\n\n if (containerData.childNodes !== undefined) {\n // remove caching of childNodes\n containerData.childNodes = null;\n }\n}\n/**\n * @param {!Node} node\n * @param {Array=} nodes\n */\n\nfunction recordChildNodes(node, nodes) {\n var nodeData = ensureShadyDataForNode(node);\n\n if (nodeData.firstChild === undefined) {\n // remove caching of childNodes\n nodeData.childNodes = null;\n var c$ = nodes || logical_tree_childNodes(node);\n nodeData.firstChild = c$[0] || null;\n nodeData.lastChild = c$[c$.length - 1] || null;\n patchInsideElementAccessors(node);\n\n for (var i = 0; i < c$.length; i++) {\n var n = c$[i];\n var sd = ensureShadyDataForNode(n);\n sd.parentNode = node;\n sd.nextSibling = c$[i + 1] || null;\n sd.previousSibling = c$[i - 1] || null;\n patchOutsideElementAccessors(n);\n }\n }\n}\n\n\n// CONCATENATED MODULE: ./node_modules/@webcomponents/shadydom/src/logical-mutation.js\n/**\n@license\nCopyright (c) 2016 The Polymer Project Authors. All rights reserved.\nThis code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt\nThe complete set of authors may be found at http://polymer.github.io/AUTHORS.txt\nThe complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt\nCode distributed by Google as part of the polymer project is also\nsubject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt\n*/\n\n\n\n\n\nvar logical_mutation_parentNode = accessors.parentNode; // Patched `insertBefore`. Note that all mutations that add nodes are routed\n// here. When a is added or a node is added to a host with a shadowRoot\n// with a slot, a standard dom `insert` call is aborted and `_asyncRender`\n// is called on the relevant shadowRoot. In all other cases, a standard dom\n// `insert` can be made, but the location and ref_node may need to be changed.\n\n/**\n * @param {!Node} parent\n * @param {Node} node\n * @param {Node=} ref_node\n */\n\nfunction logical_mutation_insertBefore(parent, node, ref_node) {\n if (node === parent) {\n throw Error(\"Failed to execute 'appendChild' on 'Node': The new child element contains the parent.\");\n }\n\n if (ref_node) {\n var refData = shadyDataForNode(ref_node);\n var p = refData && refData.parentNode;\n\n if (p !== undefined && p !== parent || p === undefined && logical_mutation_parentNode(ref_node) !== parent) {\n throw Error(\"Failed to execute 'insertBefore' on 'Node': The node \" + \"before which the new node is to be inserted is not a child of this node.\");\n }\n }\n\n if (ref_node === node) {\n return node;\n }\n /** @type {!Array} */\n\n\n var slotsAdded = [];\n /** @type {function(!Node, string): void} */\n\n var scopingFn = addShadyScoping;\n var ownerRoot = ownerShadyRootForNode(parent);\n /** @type {string} */\n\n var newScopeName = ownerRoot ? ownerRoot.host.localName : ''; // remove from existing location\n\n if (node.parentNode) {\n // NOTE: avoid node.removeChild as this *can* trigger another patched\n // method (e.g. custom elements) and we want only the shady method to run.\n // The following table describes what style scoping actions should happen as a result of this insertion.\n // document -> shadowRoot: replace\n // shadowRoot -> shadowRoot: replace\n // shadowRoot -> shadowRoot of same type: do nothing\n // shadowRoot -> document: allow unscoping\n // document -> document: do nothing\n // The \"same type of shadowRoot\" and \"document to document cases rely on `currentScopeIsCorrect` returning true\n var oldScopeName = currentScopeForNode(node);\n logical_mutation_removeChild(node.parentNode, node, Boolean(ownerRoot) || !(node.getRootNode() instanceof ShadowRoot));\n\n scopingFn = function scopingFn(node, newScopeName) {\n replaceShadyScoping(node, newScopeName, oldScopeName);\n };\n } // add to new parent\n\n\n var allowNativeInsert = true;\n var needsScoping = !currentScopeIsCorrect(node, newScopeName);\n\n if (ownerRoot && (!node['__noInsertionPoint'] || needsScoping)) {\n treeVisitor(node, function (node) {\n if (node.localName === 'slot') {\n slotsAdded.push(\n /** @type {!HTMLSlotElement} */\n node);\n }\n\n if (needsScoping) {\n scopingFn(node, newScopeName);\n }\n });\n }\n\n if (slotsAdded.length) {\n ownerRoot._addSlots(slotsAdded);\n } // if a slot is added, must render containing root.\n\n\n if (parent.localName === 'slot' || slotsAdded.length) {\n if (ownerRoot) {\n ownerRoot._asyncRender();\n }\n }\n\n if (isTrackingLogicalChildNodes(parent)) {\n recordInsertBefore(node, parent, ref_node); // when inserting into a host with a shadowRoot with slot, use\n // `shadowRoot._asyncRender()` via `attach-shadow` module\n\n var parentData = shadyDataForNode(parent);\n\n if (hasShadowRootWithSlot(parent)) {\n parentData.root._asyncRender();\n\n allowNativeInsert = false; // when inserting into a host with shadowRoot with NO slot, do nothing\n // as the node should not be added to composed dome anywhere.\n } else if (parentData.root) {\n allowNativeInsert = false;\n }\n }\n\n if (allowNativeInsert) {\n // if adding to a shadyRoot, add to host instead\n var container = utils_isShadyRoot(parent) ?\n /** @type {ShadowRoot} */\n parent.host : parent; // if ref_node, get the ref_node that's actually in composed dom.\n\n if (ref_node) {\n ref_node = firstComposedNode(ref_node);\n native_methods_insertBefore.call(container, node, ref_node);\n } else {\n native_methods_appendChild.call(container, node);\n } // Since ownerDocument is not patched, it can be incorrect afer this call\n // if the node is physically appended via distribution. This can result\n // in the custom elements polyfill not upgrading the node if it's in an inert doc.\n // We correct this by calling `adoptNode`.\n\n } else if (node.ownerDocument !== parent.ownerDocument) {\n parent.ownerDocument.adoptNode(node);\n }\n\n scheduleObserver(parent, node);\n return node;\n}\n/**\n * Patched `removeChild`. Note that all dom \"removals\" are routed here.\n * Removes the given `node` from the element's `children`.\n * This method also performs dom composition.\n * @param {Node} parent\n * @param {Node} node\n * @param {boolean=} skipUnscoping\n*/\n\nfunction logical_mutation_removeChild(parent, node) {\n var skipUnscoping = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;\n\n if (node.parentNode !== parent) {\n throw Error('The node to be removed is not a child of this node: ' + node);\n }\n\n var preventNativeRemove;\n var ownerRoot = ownerShadyRootForNode(node);\n var removingInsertionPoint;\n var parentData = shadyDataForNode(parent);\n\n if (isTrackingLogicalChildNodes(parent)) {\n recordRemoveChild(node, parent);\n\n if (hasShadowRootWithSlot(parent)) {\n parentData.root._asyncRender();\n\n preventNativeRemove = true;\n }\n } // unscope a node leaving a ShadowRoot if ShadyCSS is present, and this node\n // is not going to be rescoped in `insertBefore`\n\n\n if (getScopingShim() && !skipUnscoping && ownerRoot) {\n var oldScopeName = currentScopeForNode(node);\n treeVisitor(node, function (node) {\n removeShadyScoping(node, oldScopeName);\n });\n }\n\n removeOwnerShadyRoot(node); // if removing slot, must render containing root\n\n if (ownerRoot) {\n var changeSlotContent = parent && parent.localName === 'slot';\n\n if (changeSlotContent) {\n preventNativeRemove = true;\n }\n\n removingInsertionPoint = ownerRoot._removeContainedSlots(node);\n\n if (removingInsertionPoint || changeSlotContent) {\n ownerRoot._asyncRender();\n }\n }\n\n if (!preventNativeRemove) {\n // if removing from a shadyRoot, remove from host instead\n var container = utils_isShadyRoot(parent) ?\n /** @type {ShadowRoot} */\n parent.host : parent; // not guaranteed to physically be in container; e.g.\n // (1) if parent has a shadyRoot, element may or may not at distributed\n // location (could be undistributed)\n // (2) if parent is a slot, element may not ben in composed dom\n\n if (!(parentData.root || node.localName === 'slot') || container === logical_mutation_parentNode(node)) {\n native_methods_removeChild.call(container, node);\n }\n }\n\n scheduleObserver(parent, null, node);\n return node;\n}\n\nfunction removeOwnerShadyRoot(node) {\n // optimization: only reset the tree if node is actually in a root\n if (hasCachedOwnerRoot(node)) {\n var c$ = node.childNodes;\n\n for (var i = 0, l = c$.length, n; i < l && (n = c$[i]); i++) {\n removeOwnerShadyRoot(n);\n }\n }\n\n var nodeData = shadyDataForNode(node);\n\n if (nodeData) {\n nodeData.ownerShadyRoot = undefined;\n }\n}\n\nfunction hasCachedOwnerRoot(node) {\n var nodeData = shadyDataForNode(node);\n return Boolean(nodeData && nodeData.ownerShadyRoot !== undefined);\n}\n/**\n * Finds the first flattened node that is composed in the node's parent.\n * If the given node is a slot, then the first flattened node is returned\n * if it exists, otherwise advance to the node's nextSibling.\n * @param {Node} node within which to find first composed node\n * @returns {Node} first composed node\n */\n\n\nfunction firstComposedNode(node) {\n var composed = node;\n\n if (node && node.localName === 'slot') {\n var nodeData = shadyDataForNode(node);\n var flattened = nodeData && nodeData.flattenedNodes;\n composed = flattened && flattened.length ? flattened[0] : firstComposedNode(node.nextSibling);\n }\n\n return composed;\n}\n\nfunction hasShadowRootWithSlot(node) {\n var nodeData = shadyDataForNode(node);\n var root = nodeData && nodeData.root;\n return root && root._hasInsertionPoint();\n}\n/**\n * Should be called whenever an attribute changes. If the `slot` attribute\n * changes, provokes rendering if necessary. If a `` element's `name`\n * attribute changes, updates the root's slot map and renders.\n * @param {Node} node\n * @param {string} name\n */\n\n\nfunction distributeAttributeChange(node, name) {\n if (name === 'slot') {\n var parent = node.parentNode;\n\n if (hasShadowRootWithSlot(parent)) {\n shadyDataForNode(parent).root._asyncRender();\n }\n } else if (node.localName === 'slot' && name === 'name') {\n var root = ownerShadyRootForNode(node);\n\n if (root) {\n root._updateSlotName(node);\n\n root._asyncRender();\n }\n }\n}\n/**\n * @param {Node} node\n * @param {Node=} addedNode\n * @param {Node=} removedNode\n */\n\n\nfunction scheduleObserver(node, addedNode, removedNode) {\n var nodeData = shadyDataForNode(node);\n var observer = nodeData && nodeData.observer;\n\n if (observer) {\n if (addedNode) {\n observer.addedNodes.push(addedNode);\n }\n\n if (removedNode) {\n observer.removedNodes.push(removedNode);\n }\n\n observer.schedule();\n }\n}\n/**\n * @param {Node} node\n * @param {Object=} options\n */\n\n\nfunction logical_mutation_getRootNode(node, options) {\n // eslint-disable-line no-unused-vars\n if (!node || !node.nodeType) {\n return;\n }\n\n var nodeData = ensureShadyDataForNode(node);\n var root = nodeData.ownerShadyRoot;\n\n if (root === undefined) {\n if (utils_isShadyRoot(node)) {\n root = node;\n nodeData.ownerShadyRoot = root;\n } else {\n var parent = node.parentNode;\n root = parent ? logical_mutation_getRootNode(parent) : node; // memo-ize result for performance but only memo-ize\n // result if node is in the document. This avoids a problem where a root\n // can be cached while an element is inside a fragment.\n // If this happens and we cache the result, the value can become stale\n // because for perf we avoid processing the subtree of added fragments.\n\n if (native_methods_contains.call(document.documentElement, node)) {\n nodeData.ownerShadyRoot = root;\n }\n }\n }\n\n return root;\n} // NOTE: `query` is used primarily for ShadyDOM's querySelector impl,\n// but it's also generally useful to recurse through the element tree\n// and is used by Polymer's styling system.\n\n/**\n * @param {Node} node\n * @param {Function} matcher\n * @param {Function=} halter\n */\n\nfunction query(node, matcher, halter) {\n var list = [];\n queryElements(node.childNodes, matcher, halter, list);\n return list;\n}\n\nfunction queryElements(elements, matcher, halter, list) {\n for (var i = 0, l = elements.length, c; i < l && (c = elements[i]); i++) {\n if (c.nodeType === Node.ELEMENT_NODE && queryElement(c, matcher, halter, list)) {\n return true;\n }\n }\n}\n\nfunction queryElement(node, matcher, halter, list) {\n var result = matcher(node);\n\n if (result) {\n list.push(node);\n }\n\n if (halter && halter(result)) {\n return result;\n }\n\n queryElements(node.childNodes, matcher, halter, list);\n}\n\nfunction renderRootNode(element) {\n var root = element.getRootNode();\n\n if (utils_isShadyRoot(root)) {\n root._render();\n }\n}\nvar logical_mutation_scopingShim = null;\n\nfunction getScopingShim() {\n if (!logical_mutation_scopingShim) {\n logical_mutation_scopingShim = window['ShadyCSS'] && window['ShadyCSS']['ScopingShim'];\n }\n\n return logical_mutation_scopingShim || null;\n}\n\nfunction logical_mutation_setAttribute(node, attr, value) {\n var scopingShim = getScopingShim();\n\n if (scopingShim && attr === 'class') {\n scopingShim['setElementClass'](node, value);\n } else {\n native_methods_setAttribute.call(node, attr, value);\n distributeAttributeChange(node, attr);\n }\n}\nfunction logical_mutation_removeAttribute(node, attr) {\n native_methods_removeAttribute.call(node, attr);\n distributeAttributeChange(node, attr);\n}\nfunction logical_mutation_cloneNode(node, deep) {\n if (node.localName == 'template') {\n return native_methods_cloneNode.call(node, deep);\n } else {\n var n = native_methods_cloneNode.call(node, false); // Attribute nodes historically had childNodes, but they have later\n // been removed from the spec.\n // Make sure we do not do a deep clone on them for old browsers (IE11)\n\n if (deep && n.nodeType !== Node.ATTRIBUTE_NODE) {\n var c$ = node.childNodes;\n\n for (var i = 0, nc; i < c$.length; i++) {\n nc = c$[i].cloneNode(true);\n n.appendChild(nc);\n }\n }\n\n return n;\n }\n} // note: Though not technically correct, we fast path `importNode`\n// when called on a node not owned by the main document.\n// This allows, for example, elements that cannot\n// contain custom elements and are therefore not likely to contain shadowRoots\n// to cloned natively. This is a fairly significant performance win.\n\nfunction logical_mutation_importNode(node, deep) {\n // A template element normally has no children with shadowRoots, so make\n // sure we always make a deep copy to correctly construct the template.content\n if (node.ownerDocument !== document || node.localName === 'template') {\n return native_methods_importNode.call(document, node, deep);\n }\n\n var n = native_methods_importNode.call(document, node, false);\n\n if (deep) {\n var c$ = node.childNodes;\n\n for (var i = 0, nc; i < c$.length; i++) {\n nc = logical_mutation_importNode(c$[i], true);\n n.appendChild(nc);\n }\n }\n\n return n;\n}\n/**\n * @param {!Node} node\n * @param {string} newScopeName\n */\n\nfunction addShadyScoping(node, newScopeName) {\n var scopingShim = getScopingShim();\n\n if (!scopingShim) {\n return;\n }\n\n scopingShim['scopeNode'](node, newScopeName);\n}\n/**\n * @param {!Node} node\n * @param {string} currentScopeName\n */\n\n\nfunction removeShadyScoping(node, currentScopeName) {\n var scopingShim = getScopingShim();\n\n if (!scopingShim) {\n return;\n }\n\n scopingShim['unscopeNode'](node, currentScopeName);\n}\n/**\n * @param {!Node} node\n * @param {string} newScopeName\n * @param {string} oldScopeName\n */\n\n\nfunction replaceShadyScoping(node, newScopeName, oldScopeName) {\n var scopingShim = getScopingShim();\n\n if (!scopingShim) {\n return;\n }\n\n removeShadyScoping(node, oldScopeName);\n addShadyScoping(node, newScopeName);\n}\n/**\n * @param {!Node} node\n * @param {string} newScopeName\n * @return {boolean}\n */\n\n\nfunction currentScopeIsCorrect(node, newScopeName) {\n var scopingShim = getScopingShim();\n\n if (!scopingShim) {\n return true;\n }\n\n if (node.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {\n // NOTE: as an optimization, only check that all the top-level children\n // have the correct scope.\n var correctScope = true;\n\n for (var idx = 0; correctScope && idx < node.childNodes.length; idx++) {\n correctScope = correctScope && currentScopeIsCorrect(node.childNodes[idx], newScopeName);\n }\n\n return correctScope;\n }\n\n if (node.nodeType !== Node.ELEMENT_NODE) {\n return true;\n }\n\n var currentScope = scopingShim['currentScopeForNode'](node);\n return currentScope === newScopeName;\n}\n/**\n * @param {!Node} node\n * @return {string}\n */\n\n\nfunction currentScopeForNode(node) {\n if (node.nodeType !== Node.ELEMENT_NODE) {\n return '';\n }\n\n var scopingShim = getScopingShim();\n\n if (!scopingShim) {\n return '';\n }\n\n return scopingShim['currentScopeForNode'](node);\n}\n/**\n * Walk over a node's tree and apply visitorFn to each element node\n *\n * @param {Node} node\n * @param {function(!Node):void} visitorFn\n */\n\n\nfunction treeVisitor(node, visitorFn) {\n if (!node) {\n return;\n } // this check is necessary if `node` is a Document Fragment\n\n\n if (node.nodeType === Node.ELEMENT_NODE) {\n visitorFn(node);\n }\n\n for (var idx = 0, n; idx < node.childNodes.length; idx++) {\n n = node.childNodes[idx];\n\n if (n.nodeType === Node.ELEMENT_NODE) {\n treeVisitor(n, visitorFn);\n }\n }\n}\n// CONCATENATED MODULE: ./node_modules/@webcomponents/shadydom/src/patch-events.js\nfunction _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n/**\n@license\nCopyright (c) 2016 The Polymer Project Authors. All rights reserved.\nThis code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt\nThe complete set of authors may be found at http://polymer.github.io/AUTHORS.txt\nThe complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt\nCode distributed by Google as part of the polymer project is also\nsubject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt\n*/\n\n\n\n/*\nMake this name unique so it is unlikely to conflict with properties on objects passed to `addEventListener`\nhttps://github.com/webcomponents/shadydom/issues/173\n*/\n\nvar\n/** string */\neventWrappersName = \"__eventWrappers\".concat(Date.now());\n/** @type {?function(!Event): boolean} */\n\nvar composedGetter = function () {\n var composedProp = Object.getOwnPropertyDescriptor(Event.prototype, 'composed');\n return composedProp ? function (ev) {\n return composedProp.get.call(ev);\n } : null;\n}(); // https://github.com/w3c/webcomponents/issues/513#issuecomment-224183937\n\n\nvar alwaysComposed = {\n 'blur': true,\n 'focus': true,\n 'focusin': true,\n 'focusout': true,\n 'click': true,\n 'dblclick': true,\n 'mousedown': true,\n 'mouseenter': true,\n 'mouseleave': true,\n 'mousemove': true,\n 'mouseout': true,\n 'mouseover': true,\n 'mouseup': true,\n 'wheel': true,\n 'beforeinput': true,\n 'input': true,\n 'keydown': true,\n 'keyup': true,\n 'compositionstart': true,\n 'compositionupdate': true,\n 'compositionend': true,\n 'touchstart': true,\n 'touchend': true,\n 'touchmove': true,\n 'touchcancel': true,\n 'pointerover': true,\n 'pointerenter': true,\n 'pointerdown': true,\n 'pointermove': true,\n 'pointerup': true,\n 'pointercancel': true,\n 'pointerout': true,\n 'pointerleave': true,\n 'gotpointercapture': true,\n 'lostpointercapture': true,\n 'dragstart': true,\n 'drag': true,\n 'dragenter': true,\n 'dragleave': true,\n 'dragover': true,\n 'drop': true,\n 'dragend': true,\n 'DOMActivate': true,\n 'DOMFocusIn': true,\n 'DOMFocusOut': true,\n 'keypress': true\n};\nvar unpatchedEvents = {\n 'DOMAttrModified': true,\n 'DOMAttributeNameChanged': true,\n 'DOMCharacterDataModified': true,\n 'DOMElementNameChanged': true,\n 'DOMNodeInserted': true,\n 'DOMNodeInsertedIntoDocument': true,\n 'DOMNodeRemoved': true,\n 'DOMNodeRemovedFromDocument': true,\n 'DOMSubtreeModified': true\n};\n\nfunction pathComposer(startNode, composed) {\n var composedPath = [];\n var current = startNode;\n var startRoot = startNode === window ? window : startNode.getRootNode();\n\n while (current) {\n composedPath.push(current);\n\n if (current.assignedSlot) {\n current = current.assignedSlot;\n } else if (current.nodeType === Node.DOCUMENT_FRAGMENT_NODE && current.host && (composed || current !== startRoot)) {\n current = current.host;\n } else {\n current = current.parentNode;\n }\n } // event composedPath includes window when startNode's ownerRoot is document\n\n\n if (composedPath[composedPath.length - 1] === document) {\n composedPath.push(window);\n }\n\n return composedPath;\n}\n\nfunction retarget(refNode, path) {\n if (!utils_isShadyRoot) {\n return refNode;\n } // If ANCESTOR's root is not a shadow root or ANCESTOR's root is BASE's\n // shadow-including inclusive ancestor, return ANCESTOR.\n\n\n var refNodePath = pathComposer(refNode, true);\n var p$ = path;\n\n for (var i = 0, ancestor, lastRoot, root, rootIdx; i < p$.length; i++) {\n ancestor = p$[i];\n root = ancestor === window ? window : ancestor.getRootNode();\n\n if (root !== lastRoot) {\n rootIdx = refNodePath.indexOf(root);\n lastRoot = root;\n }\n\n if (!utils_isShadyRoot(root) || rootIdx > -1) {\n return ancestor;\n }\n }\n}\n\nvar eventMixin = {\n /**\n * @this {Event}\n */\n get composed() {\n if (this.__composed === undefined) {\n // if there's an original `composed` getter on the Event prototype, use that\n if (composedGetter) {\n // TODO(web-padawan): see https://github.com/webcomponents/shadydom/issues/275\n this.__composed = this.type === 'focusin' || this.type === 'focusout' || composedGetter(this); // If the event is trusted, or `isTrusted` is not supported, check the list of always composed events\n } else if (this.isTrusted !== false) {\n this.__composed = alwaysComposed[this.type];\n }\n }\n\n return this.__composed || false;\n },\n\n /**\n * @this {Event}\n */\n composedPath: function composedPath() {\n if (!this.__composedPath) {\n this.__composedPath = pathComposer(this['__target'], this.composed);\n }\n\n return this.__composedPath;\n },\n\n /**\n * @this {Event}\n */\n get target() {\n return retarget(this.currentTarget || this['__previousCurrentTarget'], this.composedPath());\n },\n\n // http://w3c.github.io/webcomponents/spec/shadow/#event-relatedtarget-retargeting\n\n /**\n * @this {Event}\n */\n get relatedTarget() {\n if (!this.__relatedTarget) {\n return null;\n }\n\n if (!this.__relatedTargetComposedPath) {\n this.__relatedTargetComposedPath = pathComposer(this.__relatedTarget, true);\n } // find the deepest node in relatedTarget composed path that is in the same root with the currentTarget\n\n\n return retarget(this.currentTarget || this['__previousCurrentTarget'], this.__relatedTargetComposedPath);\n },\n\n /**\n * @this {Event}\n */\n stopPropagation: function stopPropagation() {\n Event.prototype.stopPropagation.call(this);\n this.__propagationStopped = true;\n },\n\n /**\n * @this {Event}\n */\n stopImmediatePropagation: function stopImmediatePropagation() {\n Event.prototype.stopImmediatePropagation.call(this);\n this.__immediatePropagationStopped = true;\n this.__propagationStopped = true;\n }\n};\n\nfunction mixinComposedFlag(Base) {\n // NOTE: avoiding use of `class` here so that transpiled output does not\n // try to do `Base.call` with a dom construtor.\n var klazz = function klazz(type, options) {\n var event = new Base(type, options);\n event.__composed = options && Boolean(options['composed']);\n return event;\n }; // put constructor properties on subclass\n\n\n mixin(klazz, Base);\n klazz.prototype = Base.prototype;\n return klazz;\n}\n\nvar nonBubblingEventsToRetarget = {\n 'focus': true,\n 'blur': true\n};\n/**\n * Check if the event has been retargeted by comparing original `target`, and calculated `target`\n * @param {Event} event\n * @return {boolean} True if the original target and calculated target are the same\n */\n\nfunction hasRetargeted(event) {\n return event['__target'] !== event.target || event.__relatedTarget !== event.relatedTarget;\n}\n/**\n *\n * @param {Event} event\n * @param {Node} node\n * @param {string} phase\n */\n\n\nfunction fireHandlers(event, node, phase) {\n var hs = node.__handlers && node.__handlers[event.type] && node.__handlers[event.type][phase];\n\n if (hs) {\n for (var i = 0, fn; fn = hs[i]; i++) {\n if (hasRetargeted(event) && event.target === event.relatedTarget) {\n return;\n }\n\n fn.call(node, event);\n\n if (event.__immediatePropagationStopped) {\n return;\n }\n }\n }\n}\n\nfunction retargetNonBubblingEvent(e) {\n var path = e.composedPath();\n var node; // override `currentTarget` to let patched `target` calculate correctly\n\n Object.defineProperty(e, 'currentTarget', {\n get: function get() {\n return node;\n },\n configurable: true\n });\n\n for (var i = path.length - 1; i >= 0; i--) {\n node = path[i]; // capture phase fires all capture handlers\n\n fireHandlers(e, node, 'capture');\n\n if (e.__propagationStopped) {\n return;\n }\n } // set the event phase to `AT_TARGET` as in spec\n\n\n Object.defineProperty(e, 'eventPhase', {\n get: function get() {\n return Event.AT_TARGET;\n }\n }); // the event only needs to be fired when owner roots change when iterating the event path\n // keep track of the last seen owner root\n\n var lastFiredRoot;\n\n for (var _i = 0; _i < path.length; _i++) {\n node = path[_i];\n var nodeData = shadyDataForNode(node);\n var root = nodeData && nodeData.root;\n\n if (_i === 0 || root && root === lastFiredRoot) {\n fireHandlers(e, node, 'bubble'); // don't bother with window, it doesn't have `getRootNode` and will be last in the path anyway\n\n if (node !== window) {\n lastFiredRoot = node.getRootNode();\n }\n\n if (e.__propagationStopped) {\n return;\n }\n }\n }\n}\n\nfunction listenerSettingsEqual(savedListener, node, type, capture, once, passive) {\n var savedNode = savedListener.node,\n savedType = savedListener.type,\n savedCapture = savedListener.capture,\n savedOnce = savedListener.once,\n savedPassive = savedListener.passive;\n return node === savedNode && type === savedType && capture === savedCapture && once === savedOnce && passive === savedPassive;\n}\n\nfunction findListener(wrappers, node, type, capture, once, passive) {\n for (var i = 0; i < wrappers.length; i++) {\n if (listenerSettingsEqual(wrappers[i], node, type, capture, once, passive)) {\n return i;\n }\n }\n\n return -1;\n}\n/**\n * Firefox can throw on accessing eventWrappers inside of `removeEventListener` during a selenium run\n * Try/Catch accessing eventWrappers to work around\n * https://bugzilla.mozilla.org/show_bug.cgi?id=1353074\n */\n\nfunction getEventWrappers(eventLike) {\n var wrappers = null;\n\n try {\n wrappers = eventLike[eventWrappersName];\n } catch (e) {} // eslint-disable-line no-empty\n\n\n return wrappers;\n}\n/**\n * @this {Event}\n */\n\n\nfunction patch_events_addEventListener(type, fnOrObj, optionsOrCapture) {\n if (!fnOrObj) {\n return;\n }\n\n var handlerType = _typeof(fnOrObj); // bail if `fnOrObj` is not a function, not an object\n\n\n if (handlerType !== 'function' && handlerType !== 'object') {\n return;\n } // bail if `fnOrObj` is an object without a `handleEvent` method\n\n\n if (handlerType === 'object' && (!fnOrObj.handleEvent || typeof fnOrObj.handleEvent !== 'function')) {\n return;\n }\n\n var ael = this instanceof Window ? windowAddEventListener : addEventListener;\n\n if (unpatchedEvents[type]) {\n return ael.call(this, type, fnOrObj, optionsOrCapture);\n } // The callback `fn` might be used for multiple nodes/events. Since we generate\n // a wrapper function, we need to keep track of it when we remove the listener.\n // It's more efficient to store the node/type/options information as Array in\n // `fn` itself rather than the node (we assume that the same callback is used\n // for few nodes at most, whereas a node will likely have many event listeners).\n // NOTE(valdrin) invoking external functions is costly, inline has better perf.\n\n\n var capture, once, passive;\n\n if (optionsOrCapture && _typeof(optionsOrCapture) === 'object') {\n capture = Boolean(optionsOrCapture.capture);\n once = Boolean(optionsOrCapture.once);\n passive = Boolean(optionsOrCapture.passive);\n } else {\n capture = Boolean(optionsOrCapture);\n once = false;\n passive = false;\n } // hack to let ShadyRoots have event listeners\n // event listener will be on host, but `currentTarget`\n // will be set to shadyroot for event listener\n\n\n var target = optionsOrCapture && optionsOrCapture.__shadyTarget || this;\n var wrappers = fnOrObj[eventWrappersName];\n\n if (wrappers) {\n // Stop if the wrapper function has already been created.\n if (findListener(wrappers, target, type, capture, once, passive) > -1) {\n return;\n }\n } else {\n fnOrObj[eventWrappersName] = [];\n }\n /**\n * @this {HTMLElement}\n * @param {Event} e\n */\n\n\n var wrapperFn = function wrapperFn(e) {\n // Support `once` option.\n if (once) {\n this.removeEventListener(type, fnOrObj, optionsOrCapture);\n }\n\n if (!e['__target']) {\n patchEvent(e);\n }\n\n var lastCurrentTargetDesc;\n\n if (target !== this) {\n // replace `currentTarget` to make `target` and `relatedTarget` correct for inside the shadowroot\n lastCurrentTargetDesc = Object.getOwnPropertyDescriptor(e, 'currentTarget');\n Object.defineProperty(e, 'currentTarget', {\n get: function get() {\n return target;\n },\n configurable: true\n });\n }\n\n e['__previousCurrentTarget'] = e['currentTarget']; // Always check if a shadowRoot is in the current event path.\n // If it is not, the event was generated on either the host of the shadowRoot\n // or a children of the host.\n\n if (utils_isShadyRoot(target) && e.composedPath().indexOf(target) == -1) {\n return;\n } // There are two critera that should stop events from firing on this node\n // 1. the event is not composed and the current node is not in the same root as the target\n // 2. when bubbling, if after retargeting, relatedTarget and target point to the same node\n\n\n if (e.composed || e.composedPath().indexOf(target) > -1) {\n if (hasRetargeted(e) && e.target === e.relatedTarget) {\n if (e.eventPhase === Event.BUBBLING_PHASE) {\n e.stopImmediatePropagation();\n }\n\n return;\n } // prevent non-bubbling events from triggering bubbling handlers on shadowroot, but only if not in capture phase\n\n\n if (e.eventPhase !== Event.CAPTURING_PHASE && !e.bubbles && e.target !== target && !(target instanceof Window)) {\n return;\n }\n\n var ret = handlerType === 'function' ? fnOrObj.call(target, e) : fnOrObj.handleEvent && fnOrObj.handleEvent(e);\n\n if (target !== this) {\n // replace the \"correct\" `currentTarget`\n if (lastCurrentTargetDesc) {\n Object.defineProperty(e, 'currentTarget', lastCurrentTargetDesc);\n lastCurrentTargetDesc = null;\n } else {\n delete e['currentTarget'];\n }\n }\n\n return ret;\n }\n }; // Store the wrapper information.\n\n\n fnOrObj[eventWrappersName].push({\n // note: use target here which is either a shadowRoot\n // (when the host element is proxy'ing the event) or this element\n node: target,\n type: type,\n capture: capture,\n once: once,\n passive: passive,\n wrapperFn: wrapperFn\n });\n\n if (nonBubblingEventsToRetarget[type]) {\n this.__handlers = this.__handlers || {};\n this.__handlers[type] = this.__handlers[type] || {\n 'capture': [],\n 'bubble': []\n };\n\n this.__handlers[type][capture ? 'capture' : 'bubble'].push(wrapperFn);\n } else {\n ael.call(this, type, wrapperFn, optionsOrCapture);\n }\n}\n/**\n * @this {Event}\n */\n\nfunction patch_events_removeEventListener(type, fnOrObj, optionsOrCapture) {\n if (!fnOrObj) {\n return;\n }\n\n var rel = this instanceof Window ? windowRemoveEventListener : removeEventListener;\n\n if (unpatchedEvents[type]) {\n return rel.call(this, type, fnOrObj, optionsOrCapture);\n } // NOTE(valdrin) invoking external functions is costly, inline has better perf.\n\n\n var capture, once, passive;\n\n if (optionsOrCapture && _typeof(optionsOrCapture) === 'object') {\n capture = Boolean(optionsOrCapture.capture);\n once = Boolean(optionsOrCapture.once);\n passive = Boolean(optionsOrCapture.passive);\n } else {\n capture = Boolean(optionsOrCapture);\n once = false;\n passive = false;\n }\n\n var target = optionsOrCapture && optionsOrCapture.__shadyTarget || this; // Search the wrapped function.\n\n var wrapperFn = undefined;\n var wrappers = getEventWrappers(fnOrObj);\n\n if (wrappers) {\n var idx = findListener(wrappers, target, type, capture, once, passive);\n\n if (idx > -1) {\n wrapperFn = wrappers.splice(idx, 1)[0].wrapperFn; // Cleanup.\n\n if (!wrappers.length) {\n fnOrObj[eventWrappersName] = undefined;\n }\n }\n }\n\n rel.call(this, type, wrapperFn || fnOrObj, optionsOrCapture);\n\n if (wrapperFn && nonBubblingEventsToRetarget[type] && this.__handlers && this.__handlers[type]) {\n var arr = this.__handlers[type][capture ? 'capture' : 'bubble'];\n\n var _idx = arr.indexOf(wrapperFn);\n\n if (_idx > -1) {\n arr.splice(_idx, 1);\n }\n }\n}\n\nfunction activateFocusEventOverrides() {\n for (var ev in nonBubblingEventsToRetarget) {\n window.addEventListener(ev, function (e) {\n if (!e['__target']) {\n patchEvent(e);\n retargetNonBubblingEvent(e);\n }\n }, true);\n }\n}\n\nfunction patchEvent(event) {\n event['__target'] = event.target;\n event.__relatedTarget = event.relatedTarget; // patch event prototype if we can\n\n if (settings.hasDescriptors) {\n patchPrototype(event, eventMixin); // and fallback to patching instance\n } else {\n extend(event, eventMixin);\n }\n}\n\nvar PatchedEvent = mixinComposedFlag(window.Event);\nvar PatchedCustomEvent = mixinComposedFlag(window.CustomEvent);\nvar PatchedMouseEvent = mixinComposedFlag(window.MouseEvent);\nfunction patchEvents() {\n window.Event = PatchedEvent;\n window.CustomEvent = PatchedCustomEvent;\n window.MouseEvent = PatchedMouseEvent;\n activateFocusEventOverrides(); // Fix up `Element.prototype.click()` if `isTrusted` is supported, but `composed` isn't\n\n if (!composedGetter && Object.getOwnPropertyDescriptor(Event.prototype, 'isTrusted')) {\n /** @this {Element} */\n var composedClickFn = function composedClickFn() {\n var ev = new MouseEvent('click', {\n bubbles: true,\n cancelable: true,\n composed: true\n });\n this.dispatchEvent(ev);\n };\n\n if (Element.prototype.click) {\n Element.prototype.click = composedClickFn;\n } else if (HTMLElement.prototype.click) {\n HTMLElement.prototype.click = composedClickFn;\n }\n }\n}\n// CONCATENATED MODULE: ./node_modules/@webcomponents/shadydom/src/array-splice.js\n/**\n@license\nCopyright (c) 2016 The Polymer Project Authors. All rights reserved.\nThis code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt\nThe complete set of authors may be found at http://polymer.github.io/AUTHORS.txt\nThe complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt\nCode distributed by Google as part of the polymer project is also\nsubject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt\n*/\nfunction newSplice(index, removed, addedCount) {\n return {\n index: index,\n removed: removed,\n addedCount: addedCount\n };\n}\n\nvar EDIT_LEAVE = 0;\nvar EDIT_UPDATE = 1;\nvar EDIT_ADD = 2;\nvar EDIT_DELETE = 3; // Note: This function is *based* on the computation of the Levenshtein\n// \"edit\" distance. The one change is that \"updates\" are treated as two\n// edits - not one. With Array splices, an update is really a delete\n// followed by an add. By retaining this, we optimize for \"keeping\" the\n// maximum array items in the original array. For example:\n//\n// 'xxxx123' -> '123yyyy'\n//\n// With 1-edit updates, the shortest path would be just to update all seven\n// characters. With 2-edit updates, we delete 4, leave 3, and add 4. This\n// leaves the substring '123' intact.\n\nfunction calcEditDistances(current, currentStart, currentEnd, old, oldStart, oldEnd) {\n // \"Deletion\" columns\n var rowCount = oldEnd - oldStart + 1;\n var columnCount = currentEnd - currentStart + 1;\n var distances = new Array(rowCount); // \"Addition\" rows. Initialize null column.\n\n for (var i = 0; i < rowCount; i++) {\n distances[i] = new Array(columnCount);\n distances[i][0] = i;\n } // Initialize null row\n\n\n for (var j = 0; j < columnCount; j++) {\n distances[0][j] = j;\n }\n\n for (var _i = 1; _i < rowCount; _i++) {\n for (var _j = 1; _j < columnCount; _j++) {\n if (equals(current[currentStart + _j - 1], old[oldStart + _i - 1])) distances[_i][_j] = distances[_i - 1][_j - 1];else {\n var north = distances[_i - 1][_j] + 1;\n var west = distances[_i][_j - 1] + 1;\n distances[_i][_j] = north < west ? north : west;\n }\n }\n }\n\n return distances;\n} // This starts at the final weight, and walks \"backward\" by finding\n// the minimum previous weight recursively until the origin of the weight\n// matrix.\n\n\nfunction spliceOperationsFromEditDistances(distances) {\n var i = distances.length - 1;\n var j = distances[0].length - 1;\n var current = distances[i][j];\n var edits = [];\n\n while (i > 0 || j > 0) {\n if (i == 0) {\n edits.push(EDIT_ADD);\n j--;\n continue;\n }\n\n if (j == 0) {\n edits.push(EDIT_DELETE);\n i--;\n continue;\n }\n\n var northWest = distances[i - 1][j - 1];\n var west = distances[i - 1][j];\n var north = distances[i][j - 1];\n var min = void 0;\n if (west < north) min = west < northWest ? west : northWest;else min = north < northWest ? north : northWest;\n\n if (min == northWest) {\n if (northWest == current) {\n edits.push(EDIT_LEAVE);\n } else {\n edits.push(EDIT_UPDATE);\n current = northWest;\n }\n\n i--;\n j--;\n } else if (min == west) {\n edits.push(EDIT_DELETE);\n i--;\n current = west;\n } else {\n edits.push(EDIT_ADD);\n j--;\n current = north;\n }\n }\n\n edits.reverse();\n return edits;\n}\n/**\n * Splice Projection functions:\n *\n * A splice map is a representation of how a previous array of items\n * was transformed into a new array of items. Conceptually it is a list of\n * tuples of\n *\n * \n *\n * which are kept in ascending index order of. The tuple represents that at\n * the |index|, |removed| sequence of items were removed, and counting forward\n * from |index|, |addedCount| items were added.\n */\n\n/**\n * Lacking individual splice mutation information, the minimal set of\n * splices can be synthesized given the previous state and final state of an\n * array. The basic approach is to calculate the edit distance matrix and\n * choose the shortest path through it.\n *\n * Complexity: O(l * p)\n * l: The length of the current array\n * p: The length of the old array\n */\n\n\nfunction calcSplices(current, currentStart, currentEnd, old, oldStart, oldEnd) {\n var prefixCount = 0;\n var suffixCount = 0;\n var splice;\n var minLength = Math.min(currentEnd - currentStart, oldEnd - oldStart);\n if (currentStart == 0 && oldStart == 0) prefixCount = sharedPrefix(current, old, minLength);\n if (currentEnd == current.length && oldEnd == old.length) suffixCount = sharedSuffix(current, old, minLength - prefixCount);\n currentStart += prefixCount;\n oldStart += prefixCount;\n currentEnd -= suffixCount;\n oldEnd -= suffixCount;\n if (currentEnd - currentStart == 0 && oldEnd - oldStart == 0) return [];\n\n if (currentStart == currentEnd) {\n splice = newSplice(currentStart, [], 0);\n\n while (oldStart < oldEnd) {\n splice.removed.push(old[oldStart++]);\n }\n\n return [splice];\n } else if (oldStart == oldEnd) return [newSplice(currentStart, [], currentEnd - currentStart)];\n\n var ops = spliceOperationsFromEditDistances(calcEditDistances(current, currentStart, currentEnd, old, oldStart, oldEnd));\n splice = undefined;\n var splices = [];\n var index = currentStart;\n var oldIndex = oldStart;\n\n for (var i = 0; i < ops.length; i++) {\n switch (ops[i]) {\n case EDIT_LEAVE:\n if (splice) {\n splices.push(splice);\n splice = undefined;\n }\n\n index++;\n oldIndex++;\n break;\n\n case EDIT_UPDATE:\n if (!splice) splice = newSplice(index, [], 0);\n splice.addedCount++;\n index++;\n splice.removed.push(old[oldIndex]);\n oldIndex++;\n break;\n\n case EDIT_ADD:\n if (!splice) splice = newSplice(index, [], 0);\n splice.addedCount++;\n index++;\n break;\n\n case EDIT_DELETE:\n if (!splice) splice = newSplice(index, [], 0);\n splice.removed.push(old[oldIndex]);\n oldIndex++;\n break;\n }\n }\n\n if (splice) {\n splices.push(splice);\n }\n\n return splices;\n}\n\nfunction sharedPrefix(current, old, searchLength) {\n for (var i = 0; i < searchLength; i++) {\n if (!equals(current[i], old[i])) return i;\n }\n\n return searchLength;\n}\n\nfunction sharedSuffix(current, old, searchLength) {\n var index1 = current.length;\n var index2 = old.length;\n var count = 0;\n\n while (count < searchLength && equals(current[--index1], old[--index2])) {\n count++;\n }\n\n return count;\n}\n\nfunction equals(currentValue, previousValue) {\n return currentValue === previousValue;\n}\n\nfunction calculateSplices(current, previous) {\n return calcSplices(current, 0, current.length, previous, 0, previous.length);\n}\n// CONCATENATED MODULE: ./node_modules/@webcomponents/shadydom/src/attach-shadow.js\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }\n\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance\"); }\n\nfunction _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"] != null) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; }\n\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\nfunction _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }\n\nfunction _nonIterableSpread() { throw new TypeError(\"Invalid attempt to spread non-iterable instance\"); }\n\nfunction _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === \"[object Arguments]\") return Array.from(iter); }\n\nfunction _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }\n\nfunction attach_shadow_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction attach_shadow_defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction attach_shadow_createClass(Constructor, protoProps, staticProps) { if (protoProps) attach_shadow_defineProperties(Constructor.prototype, protoProps); if (staticProps) attach_shadow_defineProperties(Constructor, staticProps); return Constructor; }\n\n/**\n@license\nCopyright (c) 2016 The Polymer Project Authors. All rights reserved.\nThis code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt\nThe complete set of authors may be found at http://polymer.github.io/AUTHORS.txt\nThe complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt\nCode distributed by Google as part of the polymer project is also\nsubject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt\n*/\n\n\n\n\n\n\n\nvar attach_shadow_parentNode = accessors.parentNode,\n attach_shadow_childNodes = accessors.childNodes; // Do not export this object. It must be passed as the first argument to the\n// ShadyRoot constructor in `attachShadow` to prevent the constructor from\n// throwing. This prevents the user from being able to manually construct a\n// ShadyRoot (i.e. `new ShadowRoot()`).\n\nvar ShadyRootConstructionToken = {};\nvar CATCHALL_NAME = '__catchall';\nvar SHADYROOT_NAME = 'ShadyRoot';\nvar MODE_CLOSED = 'closed';\nvar isRendering = settings['deferConnectionCallbacks'] && document.readyState === 'loading';\nvar rootRendered;\n\nfunction ancestorList(node) {\n var ancestors = [];\n\n do {\n ancestors.unshift(node);\n } while (node = node.parentNode);\n\n return ancestors;\n}\n/**\n * @extends {ShadowRoot}\n */\n\n\nvar attach_shadow_ShadyRoot =\n/*#__PURE__*/\nfunction () {\n function ShadyRoot(token, host, options) {\n attach_shadow_classCallCheck(this, ShadyRoot);\n\n if (token !== ShadyRootConstructionToken) {\n throw new TypeError('Illegal constructor');\n } // NOTE: set a fake local name so this element can be\n // distinguished from a DocumentFragment when patching.\n // FF doesn't allow this to be `localName`\n\n\n this._localName = SHADYROOT_NAME; // root <=> host\n\n this.host = host;\n this._mode = options && options.mode;\n recordChildNodes(host);\n var hostData = ensureShadyDataForNode(host);\n hostData.root = this;\n hostData.publicRoot = this._mode !== MODE_CLOSED ? this : null; // setup root\n\n var rootData = ensureShadyDataForNode(this);\n rootData.firstChild = rootData.lastChild = rootData.parentNode = rootData.nextSibling = rootData.previousSibling = null;\n rootData.childNodes = []; // state flags\n\n this._renderPending = false;\n this._hasRendered = false; // marsalled lazily\n\n this._slotList = null;\n /** @type {Object>} */\n\n this._slotMap = null;\n this._pendingSlots = null;\n this._initialChildren = null;\n\n this._asyncRender();\n } // async render\n\n\n attach_shadow_createClass(ShadyRoot, [{\n key: \"_asyncRender\",\n value: function _asyncRender() {\n var _this = this;\n\n if (!this._renderPending) {\n this._renderPending = true;\n enqueue(function () {\n return _this._render();\n });\n }\n } // returns the oldest renderPending ancestor root.\n\n }, {\n key: \"_getRenderRoot\",\n value: function _getRenderRoot() {\n var renderRoot;\n var root = this;\n\n while (root) {\n if (root._renderPending) {\n renderRoot = root;\n }\n\n root = root._rendererForHost();\n }\n\n return renderRoot;\n } // Returns the shadyRoot `this.host` if `this.host`\n // has children that require distribution.\n\n }, {\n key: \"_rendererForHost\",\n value: function _rendererForHost() {\n var root = this.host.getRootNode();\n\n if (utils_isShadyRoot(root)) {\n var c$ = this.host.childNodes;\n\n for (var i = 0, c; i < c$.length; i++) {\n c = c$[i];\n\n if (this._isInsertionPoint(c)) {\n return root;\n }\n }\n }\n }\n }, {\n key: \"_render\",\n value: function _render() {\n var root = this._getRenderRoot();\n\n if (root) {\n root['_renderRoot']();\n }\n } // NOTE: avoid renaming to ease testability.\n\n }, {\n key: '_renderRoot',\n value: function _renderRoot() {\n // track rendering state.\n var wasRendering = isRendering;\n isRendering = true;\n this._renderPending = false;\n\n if (this._slotList) {\n this._distribute();\n\n this._compose();\n } // on initial render remove any undistributed children.\n\n\n if (!this._hasRendered) {\n var c$ = this.host.childNodes;\n\n for (var i = 0, l = c$.length; i < l; i++) {\n var child = c$[i];\n var data = shadyDataForNode(child);\n\n if (attach_shadow_parentNode(child) === this.host && (child.localName === 'slot' || !data.assignedSlot)) {\n native_methods_removeChild.call(this.host, child);\n }\n }\n }\n\n this._hasRendered = true;\n isRendering = wasRendering;\n\n if (rootRendered) {\n rootRendered();\n }\n }\n }, {\n key: \"_distribute\",\n value: function _distribute() {\n this._validateSlots(); // capture # of previously assigned nodes to help determine if dirty.\n\n\n for (var i = 0, slot; i < this._slotList.length; i++) {\n slot = this._slotList[i];\n\n this._clearSlotAssignedNodes(slot);\n } // distribute host children.\n\n\n for (var n = this.host.firstChild; n; n = n.nextSibling) {\n this._distributeNodeToSlot(n);\n } // fallback content, slotchange, and dirty roots\n\n\n for (var _i = 0; _i < this._slotList.length; _i++) {\n var _slot = this._slotList[_i];\n var slotData = shadyDataForNode(_slot); // distribute fallback content\n\n if (!slotData.assignedNodes.length) {\n for (var _n = _slot.firstChild; _n; _n = _n.nextSibling) {\n this._distributeNodeToSlot(_n, _slot);\n }\n }\n\n var slotParentData = shadyDataForNode(_slot.parentNode);\n var slotParentRoot = slotParentData && slotParentData.root;\n\n if (slotParentRoot && slotParentRoot._hasInsertionPoint()) {\n slotParentRoot['_renderRoot']();\n }\n\n this._addAssignedToFlattenedNodes(slotData.flattenedNodes, slotData.assignedNodes);\n\n var prevAssignedNodes = slotData._previouslyAssignedNodes;\n\n if (prevAssignedNodes) {\n for (var _i2 = 0; _i2 < prevAssignedNodes.length; _i2++) {\n shadyDataForNode(prevAssignedNodes[_i2])._prevAssignedSlot = null;\n }\n\n slotData._previouslyAssignedNodes = null; // dirty if previously less assigned nodes than previously assigned.\n\n if (prevAssignedNodes.length > slotData.assignedNodes.length) {\n slotData.dirty = true;\n }\n }\n /* Note: A slot is marked dirty whenever a node is newly assigned to it\n or a node is assigned to a different slot (done in `_distributeNodeToSlot`)\n or if the number of nodes assigned to the slot has decreased (done above);\n */\n\n\n if (slotData.dirty) {\n slotData.dirty = false;\n\n this._fireSlotChange(_slot);\n }\n }\n }\n /**\n * Distributes given `node` to the appropriate slot based on its `slot`\n * attribute. If `forcedSlot` is given, then the node is distributed to the\n * `forcedSlot`.\n * Note: slot to which the node is assigned will be marked dirty for firing\n * `slotchange`.\n * @param {Node} node\n * @param {Node=} forcedSlot\n *\n */\n\n }, {\n key: \"_distributeNodeToSlot\",\n value: function _distributeNodeToSlot(node, forcedSlot) {\n var nodeData = ensureShadyDataForNode(node);\n var oldSlot = nodeData._prevAssignedSlot;\n nodeData._prevAssignedSlot = null;\n var slot = forcedSlot;\n\n if (!slot) {\n var name = node.slot || CATCHALL_NAME;\n var list = this._slotMap[name];\n slot = list && list[0];\n }\n\n if (slot) {\n var slotData = ensureShadyDataForNode(slot);\n slotData.assignedNodes.push(node);\n nodeData.assignedSlot = slot;\n } else {\n nodeData.assignedSlot = undefined;\n }\n\n if (oldSlot !== nodeData.assignedSlot) {\n if (nodeData.assignedSlot) {\n ensureShadyDataForNode(nodeData.assignedSlot).dirty = true;\n }\n }\n }\n /**\n * Clears the assignedNodes tracking data for a given `slot`. Note, the current\n * assigned node data is tracked (via _previouslyAssignedNodes and\n * _prevAssignedSlot) to see if `slotchange` should fire. This data may be out\n * of date at this time because the assigned nodes may have already been\n * distributed to another root. This is ok since this data is only used to\n * track changes.\n * @param {HTMLSlotElement} slot\n */\n\n }, {\n key: \"_clearSlotAssignedNodes\",\n value: function _clearSlotAssignedNodes(slot) {\n var slotData = shadyDataForNode(slot);\n var n$ = slotData.assignedNodes;\n slotData.assignedNodes = [];\n slotData.flattenedNodes = [];\n slotData._previouslyAssignedNodes = n$;\n\n if (n$) {\n for (var i = 0; i < n$.length; i++) {\n var n = shadyDataForNode(n$[i]);\n n._prevAssignedSlot = n.assignedSlot; // only clear if it was previously set to this slot;\n // this helps ensure that if the node has otherwise been distributed\n // ignore it.\n\n if (n.assignedSlot === slot) {\n n.assignedSlot = null;\n }\n }\n }\n }\n }, {\n key: \"_addAssignedToFlattenedNodes\",\n value: function _addAssignedToFlattenedNodes(flattened, assigned) {\n for (var i = 0, n; i < assigned.length && (n = assigned[i]); i++) {\n if (n.localName == 'slot') {\n var nestedAssigned = shadyDataForNode(n).assignedNodes;\n\n if (nestedAssigned && nestedAssigned.length) {\n this._addAssignedToFlattenedNodes(flattened, nestedAssigned);\n }\n } else {\n flattened.push(assigned[i]);\n }\n }\n }\n }, {\n key: \"_fireSlotChange\",\n value: function _fireSlotChange(slot) {\n // NOTE: cannot bubble correctly here so not setting bubbles: true\n // Safari tech preview does not bubble but chrome does\n // Spec says it bubbles (https://dom.spec.whatwg.org/#mutation-observers)\n native_methods_dispatchEvent.call(slot, new Event('slotchange'));\n var slotData = shadyDataForNode(slot);\n\n if (slotData.assignedSlot) {\n this._fireSlotChange(slotData.assignedSlot);\n }\n } // Reify dom such that it is at its correct rendering position\n // based on logical distribution.\n // NOTE: here we only compose parents of elements and not the\n // shadowRoot into the host. The latter is performend via a fast path\n // in the `logical-mutation`.insertBefore.\n\n }, {\n key: \"_compose\",\n value: function _compose() {\n var slots = this._slotList;\n var composeList = [];\n\n for (var i = 0; i < slots.length; i++) {\n var parent = slots[i].parentNode;\n /* compose node only if:\n (1) parent does not have a shadowRoot since shadowRoot has already\n composed into the host\n (2) we're not already composing it\n [consider (n^2) but rare better than Set]\n */\n\n var parentData = shadyDataForNode(parent);\n\n if (!(parentData && parentData.root) && composeList.indexOf(parent) < 0) {\n composeList.push(parent);\n }\n }\n\n for (var _i3 = 0; _i3 < composeList.length; _i3++) {\n var node = composeList[_i3];\n var targetNode = node === this ? this.host : node;\n\n this._updateChildNodes(targetNode, this._composeNode(node));\n }\n } // Returns the list of nodes which should be rendered inside `node`.\n\n }, {\n key: \"_composeNode\",\n value: function _composeNode(node) {\n var children = [];\n var c$ = node.childNodes;\n\n for (var i = 0; i < c$.length; i++) {\n var child = c$[i]; // Note: if we see a slot here, the nodes are guaranteed to need to be\n // composed here. This is because if there is redistribution, it has\n // already been handled by this point.\n\n if (this._isInsertionPoint(child)) {\n var flattenedNodes = shadyDataForNode(child).flattenedNodes;\n\n for (var j = 0; j < flattenedNodes.length; j++) {\n var distributedNode = flattenedNodes[j];\n children.push(distributedNode);\n }\n } else {\n children.push(child);\n }\n }\n\n return children;\n }\n }, {\n key: \"_isInsertionPoint\",\n value: function _isInsertionPoint(node) {\n return node.localName == 'slot';\n } // Ensures that the rendered node list inside `container` is `children`.\n\n }, {\n key: \"_updateChildNodes\",\n value: function _updateChildNodes(container, children) {\n var composed = attach_shadow_childNodes(container);\n var splices = calculateSplices(children, composed); // process removals\n\n for (var i = 0, d = 0, s; i < splices.length && (s = splices[i]); i++) {\n for (var j = 0, n; j < s.removed.length && (n = s.removed[j]); j++) {\n // check if the node is still where we expect it is before trying\n // to remove it; this can happen if we move a node and\n // then schedule its previous host for distribution resulting in\n // the node being removed here.\n if (attach_shadow_parentNode(n) === container) {\n native_methods_removeChild.call(container, n);\n } // TODO(sorvell): avoid the need for splicing here.\n\n\n composed.splice(s.index + d, 1);\n }\n\n d -= s.addedCount;\n } // process adds\n\n\n for (var _i4 = 0, _s, next; _i4 < splices.length && (_s = splices[_i4]); _i4++) {\n //eslint-disable-line no-redeclare\n next = composed[_s.index];\n\n for (var _j = _s.index, _n2; _j < _s.index + _s.addedCount; _j++) {\n _n2 = children[_j];\n native_methods_insertBefore.call(container, _n2, next);\n composed.splice(_j, 0, _n2);\n }\n }\n }\n }, {\n key: \"_ensureSlotData\",\n value: function _ensureSlotData() {\n this._pendingSlots = this._pendingSlots || [];\n this._slotList = this._slotList || [];\n this._slotMap = this._slotMap || {};\n }\n }, {\n key: \"_addSlots\",\n value: function _addSlots(slots) {\n var _this$_pendingSlots;\n\n this._ensureSlotData();\n\n (_this$_pendingSlots = this._pendingSlots).push.apply(_this$_pendingSlots, _toConsumableArray(slots));\n }\n }, {\n key: \"_validateSlots\",\n value: function _validateSlots() {\n if (this._pendingSlots && this._pendingSlots.length) {\n this._mapSlots(this._pendingSlots);\n\n this._pendingSlots = [];\n }\n }\n /**\n * Adds the given slots. Slots are maintained in an dom-ordered list.\n * In addition a map of name to slot is updated.\n */\n\n }, {\n key: \"_mapSlots\",\n value: function _mapSlots(slots) {\n var slotNamesToSort;\n\n for (var i = 0; i < slots.length; i++) {\n var slot = slots[i]; // ensure insertionPoints's and their parents have logical dom info.\n // save logical tree info\n // a. for shadyRoot\n // b. for insertion points (fallback)\n // c. for parents of insertion points\n\n recordChildNodes(slot);\n recordChildNodes(slot.parentNode);\n\n var name = this._nameForSlot(slot);\n\n if (this._slotMap[name]) {\n slotNamesToSort = slotNamesToSort || {};\n slotNamesToSort[name] = true;\n\n this._slotMap[name].push(slot);\n } else {\n this._slotMap[name] = [slot];\n }\n\n this._slotList.push(slot);\n }\n\n if (slotNamesToSort) {\n for (var n in slotNamesToSort) {\n this._slotMap[n] = this._sortSlots(this._slotMap[n]);\n }\n }\n }\n }, {\n key: \"_nameForSlot\",\n value: function _nameForSlot(slot) {\n var name = slot['name'] || slot.getAttribute('name') || CATCHALL_NAME;\n slot.__slotName = name;\n return name;\n }\n /**\n * Slots are kept in an ordered list. Slots with the same name\n * are sorted here by tree order.\n */\n\n }, {\n key: \"_sortSlots\",\n value: function _sortSlots(slots) {\n // NOTE: Cannot use `compareDocumentPosition` because it's not polyfilled,\n // but the code here could be used to polyfill the preceeding/following info\n // in `compareDocumentPosition`.\n return slots.sort(function (a, b) {\n var listA = ancestorList(a);\n var listB = ancestorList(b);\n\n for (var i = 0; i < listA.length; i++) {\n var nA = listA[i];\n var nB = listB[i];\n\n if (nA !== nB) {\n var c$ = Array.from(nA.parentNode.childNodes);\n return c$.indexOf(nA) - c$.indexOf(nB);\n }\n }\n });\n }\n /**\n * Removes from tracked slot data any slots contained within `container` and\n * then updates the tracked data (_slotList and _slotMap).\n * Any removed slots also have their `assignedNodes` removed from comopsed dom.\n */\n\n }, {\n key: \"_removeContainedSlots\",\n value: function _removeContainedSlots(container) {\n if (!this._slotList) {\n return;\n }\n\n this._validateSlots();\n\n var didRemove;\n var map = this._slotMap;\n\n for (var n in map) {\n var slots = map[n];\n\n for (var i = 0; i < slots.length; i++) {\n var slot = slots[i];\n\n if (utils_contains(container, slot)) {\n slots.splice(i, 1);\n\n var x = this._slotList.indexOf(slot);\n\n if (x >= 0) {\n this._slotList.splice(x, 1);\n }\n\n i--;\n\n this._removeFlattenedNodes(slot);\n\n didRemove = true;\n }\n }\n }\n\n return didRemove;\n }\n }, {\n key: \"_updateSlotName\",\n value: function _updateSlotName(slot) {\n if (!this._slotList) {\n return;\n } // make sure slotMap is initialized with this slot\n\n\n this._validateSlots();\n\n var oldName = slot.__slotName;\n\n var name = this._nameForSlot(slot);\n\n if (name === oldName) {\n return;\n } // remove from existing tracking\n\n\n var slots = this._slotMap[oldName];\n var i = slots.indexOf(slot);\n\n if (i >= 0) {\n slots.splice(i, 1);\n } // add to new location and sort if nedessary\n\n\n var list = this._slotMap[name] || (this._slotMap[name] = []);\n list.push(slot);\n\n if (list.length > 1) {\n this._slotMap[name] = this._sortSlots(list);\n }\n }\n }, {\n key: \"_removeFlattenedNodes\",\n value: function _removeFlattenedNodes(slot) {\n var data = shadyDataForNode(slot);\n var n$ = data.flattenedNodes;\n\n if (n$) {\n for (var i = 0; i < n$.length; i++) {\n var node = n$[i];\n var parent = attach_shadow_parentNode(node);\n\n if (parent) {\n native_methods_removeChild.call(parent, node);\n }\n }\n }\n\n data.flattenedNodes = [];\n data.assignedNodes = [];\n }\n }, {\n key: \"_hasInsertionPoint\",\n value: function _hasInsertionPoint() {\n this._validateSlots();\n\n return Boolean(this._slotList && this._slotList.length);\n }\n }]);\n\n return ShadyRoot;\n}();\n\n\n/**\n Implements a pared down version of ShadowDOM's scoping, which is easy to\n polyfill across browsers.\n*/\n\nfunction attach_shadow_attachShadow(host, options) {\n if (!host) {\n throw 'Must provide a host.';\n }\n\n if (!options) {\n throw 'Not enough arguments.';\n }\n\n return new attach_shadow_ShadyRoot(ShadyRootConstructionToken, host, options);\n} // Mitigate connect/disconnect spam by wrapping custom element classes.\n\nif (window['customElements'] && settings.inUse) {\n // process connect/disconnect after roots have rendered to avoid\n // issues with reaction stack.\n var connectMap = new Map();\n\n rootRendered = function rootRendered() {\n // allow elements to connect\n var map = Array.from(connectMap);\n connectMap.clear();\n\n for (var _i5 = 0; _i5 < map.length; _i5++) {\n var _map$_i = _slicedToArray(map[_i5], 2),\n e = _map$_i[0],\n value = _map$_i[1];\n\n if (value) {\n e.__shadydom_connectedCallback();\n } else {\n e.__shadydom_disconnectedCallback();\n }\n }\n }; // Document is in loading state and flag is set (deferConnectionCallbacks)\n // so process connection stack when `readystatechange` fires.\n\n\n if (isRendering) {\n document.addEventListener('readystatechange', function () {\n isRendering = false;\n rootRendered();\n }, {\n once: true\n });\n }\n /*\n * (1) elements can only be connected/disconnected if they are in the expected\n * state.\n * (2) never run connect/disconnect during rendering to avoid reaction stack issues.\n */\n\n\n var ManageConnect = function ManageConnect(base, connected, disconnected) {\n var counter = 0;\n var connectFlag = \"__isConnected\".concat(counter++);\n\n if (connected || disconnected) {\n base.prototype.connectedCallback = base.prototype.__shadydom_connectedCallback = function () {\n // if rendering defer connected\n // otherwise connect only if we haven't already\n if (isRendering) {\n connectMap.set(this, true);\n } else if (!this[connectFlag]) {\n this[connectFlag] = true;\n\n if (connected) {\n connected.call(this);\n }\n }\n };\n\n base.prototype.disconnectedCallback = base.prototype.__shadydom_disconnectedCallback = function () {\n // if rendering, cancel a pending connection and queue disconnect,\n // otherwise disconnect only if a connection has been allowed\n if (isRendering) {\n // This is necessary only because calling removeChild\n // on a node that requires distribution leaves it in the DOM tree\n // until distribution.\n // NOTE: remember this is checking the patched isConnected to determine\n // if the node is in the logical tree.\n if (!this.isConnected) {\n connectMap.set(this, false);\n }\n } else if (this[connectFlag]) {\n this[connectFlag] = false;\n\n if (disconnected) {\n disconnected.call(this);\n }\n }\n };\n }\n\n return base;\n };\n\n var define = window['customElements']['define']; // NOTE: Instead of patching customElements.define,\n // re-define on the CustomElementRegistry.prototype.define\n // for Safari 10 compatibility (it's flakey otherwise).\n\n Object.defineProperty(window['CustomElementRegistry'].prototype, 'define', {\n value: function value(name, constructor) {\n var connected = constructor.prototype.connectedCallback;\n var disconnected = constructor.prototype.disconnectedCallback;\n define.call(window['customElements'], name, ManageConnect(constructor, connected, disconnected)); // unpatch connected/disconnected on class; custom elements tears this off\n // so the patch is maintained, but if the user calls these methods for\n // e.g. testing, they will be as expected.\n\n constructor.prototype.connectedCallback = connected;\n constructor.prototype.disconnectedCallback = disconnected;\n }\n });\n}\n// CONCATENATED MODULE: ./node_modules/@webcomponents/shadydom/src/patch-builtins.js\nfunction patch_builtins_typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { patch_builtins_typeof = function _typeof(obj) { return typeof obj; }; } else { patch_builtins_typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return patch_builtins_typeof(obj); }\n\n/**\n@license\nCopyright (c) 2016 The Polymer Project Authors. All rights reserved.\nThis code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt\nThe complete set of authors may be found at http://polymer.github.io/AUTHORS.txt\nThe complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt\nCode distributed by Google as part of the polymer project is also\nsubject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt\n*/\n\n\n\n\n\n\n\n\n\nfunction getAssignedSlot(node) {\n renderRootNode(node);\n var nodeData = shadyDataForNode(node);\n return nodeData && nodeData.assignedSlot || null;\n}\n\nvar windowMixin = {\n // NOTE: ensure these methods are bound to `window` so that `this` is correct\n // when called directly from global context without a receiver; e.g.\n // `addEventListener(...)`.\n addEventListener: patch_events_addEventListener.bind(window),\n removeEventListener: patch_events_removeEventListener.bind(window)\n};\nvar nodeMixin = {\n addEventListener: patch_events_addEventListener,\n removeEventListener: patch_events_removeEventListener,\n appendChild: function appendChild(node) {\n return logical_mutation_insertBefore(this, node);\n },\n insertBefore: function insertBefore(node, ref_node) {\n return logical_mutation_insertBefore(this, node, ref_node);\n },\n removeChild: function removeChild(node) {\n return logical_mutation_removeChild(this, node);\n },\n\n /**\n * @this {Node}\n */\n replaceChild: function replaceChild(node, ref_node) {\n logical_mutation_insertBefore(this, node, ref_node);\n logical_mutation_removeChild(this, ref_node);\n return node;\n },\n\n /**\n * @this {Node}\n */\n cloneNode: function cloneNode(deep) {\n return logical_mutation_cloneNode(this, deep);\n },\n\n /**\n * @this {Node}\n */\n getRootNode: function getRootNode(options) {\n return logical_mutation_getRootNode(this, options);\n },\n contains: function contains(node) {\n return utils_contains(this, node);\n },\n\n /**\n * @this {Node}\n */\n dispatchEvent: function dispatchEvent(event) {\n flush();\n return native_methods_dispatchEvent.call(this, event);\n }\n}; // NOTE: we can do this regardless of the browser supporting native accessors\n// since this is always \"new\" in that case.\n\nObject.defineProperties(nodeMixin, IsConnectedAccessor); // NOTE: For some reason 'Text' redefines 'assignedSlot'\n\nvar textMixin = {\n /**\n * @this {Text}\n */\n get assignedSlot() {\n return getAssignedSlot(this);\n }\n\n};\nvar fragmentMixin = {\n // TODO(sorvell): consider doing native QSA and filtering results.\n\n /**\n * @this {DocumentFragment}\n */\n querySelector: function querySelector(selector) {\n // match selector and halt on first result.\n var result = query(this, function (n) {\n return matchesSelector(n, selector);\n }, function (n) {\n return Boolean(n);\n })[0];\n return result || null;\n },\n\n /**\n * @this {DocumentFragment}\n */\n // TODO(sorvell): `useNative` option relies on native querySelectorAll and\n // misses distributed nodes, see\n // https://github.com/webcomponents/shadydom/pull/210#issuecomment-361435503\n querySelectorAll: function querySelectorAll(selector, useNative) {\n if (useNative) {\n var o = Array.prototype.slice.call(native_methods_querySelectorAll.call(this, selector));\n var root = this.getRootNode();\n return o.filter(function (e) {\n return e.getRootNode() == root;\n });\n }\n\n return query(this, function (n) {\n return matchesSelector(n, selector);\n });\n }\n};\nvar slotMixin = {\n /**\n * @this {HTMLSlotElement}\n */\n assignedNodes: function assignedNodes(options) {\n if (this.localName === 'slot') {\n renderRootNode(this);\n var nodeData = shadyDataForNode(this);\n return nodeData ? (options && options.flatten ? nodeData.flattenedNodes : nodeData.assignedNodes) || [] : [];\n }\n }\n};\nvar elementMixin = extendAll({\n /**\n * @this {HTMLElement}\n */\n setAttribute: function setAttribute(name, value) {\n logical_mutation_setAttribute(this, name, value);\n },\n\n /**\n * @this {HTMLElement}\n */\n removeAttribute: function removeAttribute(name) {\n logical_mutation_removeAttribute(this, name);\n },\n\n /**\n * @this {HTMLElement}\n */\n attachShadow: function attachShadow(options) {\n return attach_shadow_attachShadow(this, options);\n },\n\n /**\n * @this {HTMLElement}\n */\n get slot() {\n return this.getAttribute('slot');\n },\n\n /**\n * @this {HTMLElement}\n */\n set slot(value) {\n logical_mutation_setAttribute(this, 'slot', value);\n },\n\n /**\n * @this {HTMLElement}\n */\n get assignedSlot() {\n return getAssignedSlot(this);\n }\n\n}, fragmentMixin, slotMixin);\nObject.defineProperties(elementMixin, ShadowRootAccessor);\nvar documentMixin = extendAll({\n /**\n * @this {Document}\n */\n importNode: function importNode(node, deep) {\n return logical_mutation_importNode(node, deep);\n },\n\n /**\n * @this {Document}\n */\n getElementById: function getElementById(id) {\n var result = query(this, function (n) {\n return n.id == id;\n }, function (n) {\n return Boolean(n);\n })[0];\n return result || null;\n }\n}, fragmentMixin);\nObject.defineProperties(documentMixin, {\n '_activeElement': ActiveElementAccessor.activeElement\n});\nvar nativeBlur = HTMLElement.prototype.blur;\nvar htmlElementMixin = {\n /**\n * @this {HTMLElement}\n */\n blur: function blur() {\n var nodeData = shadyDataForNode(this);\n var root = nodeData && nodeData.root;\n var shadowActive = root && root.activeElement;\n\n if (shadowActive) {\n shadowActive.blur();\n } else {\n nativeBlur.call(this);\n }\n }\n};\nvar _iteratorNormalCompletion = true;\nvar _didIteratorError = false;\nvar _iteratorError = undefined;\n\ntry {\n var patch_builtins_loop = function _loop() {\n var property = _step.value;\n\n if (property.substring(0, 2) === 'on') {\n Object.defineProperty(htmlElementMixin, property, {\n /** @this {HTMLElement} */\n set: function set(fn) {\n var shadyData = ensureShadyDataForNode(this);\n var eventName = property.substring(2);\n shadyData.__onCallbackListeners[property] && this.removeEventListener(eventName, shadyData.__onCallbackListeners[property]);\n this.addEventListener(eventName, fn, {});\n shadyData.__onCallbackListeners[property] = fn;\n },\n\n /** @this {HTMLElement} */\n get: function get() {\n var shadyData = shadyDataForNode(this);\n return shadyData && shadyData.__onCallbackListeners[property];\n },\n configurable: true\n });\n }\n };\n\n for (var _iterator = Object.getOwnPropertyNames(Document.prototype)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {\n patch_builtins_loop();\n }\n} catch (err) {\n _didIteratorError = true;\n _iteratorError = err;\n} finally {\n try {\n if (!_iteratorNormalCompletion && _iterator.return != null) {\n _iterator.return();\n }\n } finally {\n if (_didIteratorError) {\n throw _iteratorError;\n }\n }\n}\n\nvar shadowRootMixin = {\n /**\n * @this {ShadowRoot}\n */\n addEventListener: function addEventListener(type, fn, optionsOrCapture) {\n if (patch_builtins_typeof(optionsOrCapture) !== 'object') {\n optionsOrCapture = {\n capture: Boolean(optionsOrCapture)\n };\n }\n\n optionsOrCapture.__shadyTarget = this;\n this.host.addEventListener(type, fn, optionsOrCapture);\n },\n\n /**\n * @this {ShadowRoot}\n */\n removeEventListener: function removeEventListener(type, fn, optionsOrCapture) {\n if (patch_builtins_typeof(optionsOrCapture) !== 'object') {\n optionsOrCapture = {\n capture: Boolean(optionsOrCapture)\n };\n }\n\n optionsOrCapture.__shadyTarget = this;\n this.host.removeEventListener(type, fn, optionsOrCapture);\n },\n\n /**\n * @this {ShadowRoot}\n */\n getElementById: function getElementById(id) {\n var result = query(this, function (n) {\n return n.id == id;\n }, function (n) {\n return Boolean(n);\n })[0];\n return result || null;\n }\n};\n\nfunction patchBuiltin(proto, obj) {\n var n$ = Object.getOwnPropertyNames(obj);\n\n for (var i = 0; i < n$.length; i++) {\n var n = n$[i];\n var d = Object.getOwnPropertyDescriptor(obj, n); // NOTE: we prefer writing directly here because some browsers\n // have descriptors that are writable but not configurable (e.g.\n // `appendChild` on older browsers)\n\n if (d.value) {\n proto[n] = d.value;\n } else {\n Object.defineProperty(proto, n, d);\n }\n }\n} // Apply patches to builtins (e.g. Element.prototype). Some of these patches\n// can be done unconditionally (mostly methods like\n// `Element.prototype.appendChild`) and some can only be done when the browser\n// has proper descriptors on the builtin prototype\n// (e.g. `Element.prototype.firstChild`)`. When descriptors are not available,\n// elements are individually patched when needed (see e.g.\n// `patchInside/OutsideElementAccessors` in `patch-accessors.js`).\n\n\nfunction patchBuiltins() {\n var nativeHTMLElement = window['customElements'] && window['customElements']['nativeHTMLElement'] || HTMLElement; // These patches can always be done, for all supported browsers.\n\n patchBuiltin(attach_shadow_ShadyRoot.prototype, shadowRootMixin);\n patchBuiltin(window.Node.prototype, nodeMixin);\n patchBuiltin(window.Window.prototype, windowMixin);\n patchBuiltin(window.Text.prototype, textMixin);\n patchBuiltin(window.DocumentFragment.prototype, fragmentMixin);\n patchBuiltin(window.Element.prototype, elementMixin);\n patchBuiltin(window.Document.prototype, documentMixin);\n\n if (window.HTMLSlotElement) {\n patchBuiltin(window.HTMLSlotElement.prototype, slotMixin);\n }\n\n patchBuiltin(nativeHTMLElement.prototype, htmlElementMixin); // These patches can *only* be done\n // on browsers that have proper property descriptors on builtin prototypes.\n // This includes: IE11, Edge, Chrome >= 4?; Safari >= 10, Firefox\n // On older browsers (Chrome <= 4?, Safari 9), a per element patching\n // strategy is used for patching accessors.\n\n if (settings.hasDescriptors) {\n patchAccessors(window.Node.prototype);\n patchAccessors(window.Text.prototype);\n patchAccessors(window.DocumentFragment.prototype);\n patchAccessors(window.Element.prototype);\n patchAccessors(nativeHTMLElement.prototype);\n patchAccessors(window.Document.prototype);\n\n if (window.HTMLSlotElement) {\n patchAccessors(window.HTMLSlotElement.prototype);\n }\n }\n\n patchShadowRootAccessors(attach_shadow_ShadyRoot.prototype);\n}\n// CONCATENATED MODULE: ./node_modules/@webcomponents/shadydom/src/shadydom.js\n/**\n@license\nCopyright (c) 2016 The Polymer Project Authors. All rights reserved.\nThis code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt\nThe complete set of authors may be found at http://polymer.github.io/AUTHORS.txt\nThe complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt\nCode distributed by Google as part of the polymer project is also\nsubject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt\n*/\n\n/**\n * Patches elements that interacts with ShadyDOM\n * such that tree traversal and mutation apis act like they would under\n * ShadowDOM.\n *\n * This import enables seemless interaction with ShadyDOM powered\n * custom elements, enabling better interoperation with 3rd party code,\n * libraries, and frameworks that use DOM tree manipulation apis.\n */\n\n\n\n\n\n\n\n\n\n\nif (settings.inUse) {\n var ShadyDOM = {\n // TODO(sorvell): remove when Polymer does not depend on this.\n 'inUse': settings.inUse,\n // NOTE: old browsers without prototype accessors (very old Chrome\n // and Safari) need manually patched accessors to properly set\n // `innerHTML` and `textContent` when an element is:\n // (1) inside a shadowRoot\n // (2) does not have special (slot) children itself\n // (3) and setting the property needs to provoke distribution (because\n // a nested slot is added/removed)\n 'patch': function patch(node) {\n patchInsideElementAccessors(node);\n patchOutsideElementAccessors(node);\n return node;\n },\n 'isShadyRoot': utils_isShadyRoot,\n 'enqueue': enqueue,\n 'flush': flush,\n 'settings': settings,\n 'filterMutations': filterMutations,\n 'observeChildren': observe_changes_observeChildren,\n 'unobserveChildren': observe_changes_unobserveChildren,\n 'nativeMethods': native_methods_namespaceObject,\n 'nativeTree': accessors,\n // Set to true to defer native custom elements connection until the\n // document has fully parsed. This enables custom elements that create\n // shadowRoots to be defined while the document is loading. Elements\n // customized as they are created by the parser will successfully\n // render with this flag on.\n 'deferConnectionCallbacks': settings['deferConnectionCallbacks'],\n // Integration point with ShadyCSS to disable styling MutationObserver,\n // as ShadyDOM will now handle dynamic scoping.\n 'handlesDynamicScoping': true\n };\n window['ShadyDOM'] = ShadyDOM; // Apply patches to events...\n\n patchEvents(); // Apply patches to builtins (e.g. Element.prototype) where applicable.\n\n patchBuiltins();\n window.ShadowRoot = attach_shadow_ShadyRoot;\n}\n\n//# sourceURL=webpack:///./node_modules/@webcomponents/shadydom/src/shadydom.js_+_16_modules?"); + +/***/ }) + +}]); \ No newline at end of file diff --git a/packages/uikit-workshop/dist/styleguide/js/1-chunk-162a89af2e10f9bdb50b.js b/packages/uikit-workshop/dist/styleguide/js/1-chunk-162a89af2e10f9bdb50b.js new file mode 100644 index 000000000..4ca1c7004 --- /dev/null +++ b/packages/uikit-workshop/dist/styleguide/js/1-chunk-162a89af2e10f9bdb50b.js @@ -0,0 +1,15 @@ +(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],{ + +/***/ "./node_modules/document-register-element/build/document-register-element.node.js": +/*!****************************************************************************************!*\ + !*** ./node_modules/document-register-element/build/document-register-element.node.js ***! + \****************************************************************************************/ +/*! no static exports found */ +/*! ModuleConcatenation bailout: Module is not an ECMAScript module */ +/***/ (function(module, exports, __webpack_require__) { + +eval("/* WEBPACK VAR INJECTION */(function(global) {function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n/*!\nISC License\n\nCopyright (c) 2014-2018, Andrea Giammarchi, @WebReflection\n\nPermission to use, copy, modify, and/or distribute this software for any\npurpose with or without fee is hereby granted, provided that the above\ncopyright notice and this permission notice appear in all copies.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\nREGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY\nAND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\nINDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM\nLOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE\nOR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR\nPERFORMANCE OF THIS SOFTWARE.\n\n*/\n// global window Object\n// optional polyfill info\n// 'auto' used by default, everything is feature detected\n// 'force' use the polyfill even if not fully needed\nfunction installCustomElements(window, polyfill) {\n 'use strict'; // DO NOT USE THIS FILE DIRECTLY, IT WON'T WORK\n // THIS IS A PROJECT BASED ON A BUILD SYSTEM\n // THIS FILE IS JUST WRAPPED UP RESULTING IN\n // build/document-register-element.node.js\n\n var document = window.document,\n Object = window.Object;\n\n var htmlClass = function (info) {\n // (C) Andrea Giammarchi - @WebReflection - MIT Style\n var catchClass = /^[A-Z]+[a-z]/,\n filterBy = function filterBy(re) {\n var arr = [],\n tag;\n\n for (tag in register) {\n if (re.test(tag)) arr.push(tag);\n }\n\n return arr;\n },\n add = function add(Class, tag) {\n tag = tag.toLowerCase();\n\n if (!(tag in register)) {\n register[Class] = (register[Class] || []).concat(tag);\n register[tag] = register[tag.toUpperCase()] = Class;\n }\n },\n register = (Object.create || Object)(null),\n htmlClass = {},\n i,\n section,\n tags,\n Class;\n\n for (section in info) {\n for (Class in info[section]) {\n tags = info[section][Class];\n register[Class] = tags;\n\n for (i = 0; i < tags.length; i++) {\n register[tags[i].toLowerCase()] = register[tags[i].toUpperCase()] = Class;\n }\n }\n }\n\n htmlClass.get = function get(tagOrClass) {\n return typeof tagOrClass === 'string' ? register[tagOrClass] || (catchClass.test(tagOrClass) ? [] : '') : filterBy(tagOrClass);\n };\n\n htmlClass.set = function set(tag, Class) {\n return catchClass.test(tag) ? add(tag, Class) : add(Class, tag), htmlClass;\n };\n\n return htmlClass;\n }({\n \"collections\": {\n \"HTMLAllCollection\": [\"all\"],\n \"HTMLCollection\": [\"forms\"],\n \"HTMLFormControlsCollection\": [\"elements\"],\n \"HTMLOptionsCollection\": [\"options\"]\n },\n \"elements\": {\n \"Element\": [\"element\"],\n \"HTMLAnchorElement\": [\"a\"],\n \"HTMLAppletElement\": [\"applet\"],\n \"HTMLAreaElement\": [\"area\"],\n \"HTMLAttachmentElement\": [\"attachment\"],\n \"HTMLAudioElement\": [\"audio\"],\n \"HTMLBRElement\": [\"br\"],\n \"HTMLBaseElement\": [\"base\"],\n \"HTMLBodyElement\": [\"body\"],\n \"HTMLButtonElement\": [\"button\"],\n \"HTMLCanvasElement\": [\"canvas\"],\n \"HTMLContentElement\": [\"content\"],\n \"HTMLDListElement\": [\"dl\"],\n \"HTMLDataElement\": [\"data\"],\n \"HTMLDataListElement\": [\"datalist\"],\n \"HTMLDetailsElement\": [\"details\"],\n \"HTMLDialogElement\": [\"dialog\"],\n \"HTMLDirectoryElement\": [\"dir\"],\n \"HTMLDivElement\": [\"div\"],\n \"HTMLDocument\": [\"document\"],\n \"HTMLElement\": [\"element\", \"abbr\", \"address\", \"article\", \"aside\", \"b\", \"bdi\", \"bdo\", \"cite\", \"code\", \"command\", \"dd\", \"dfn\", \"dt\", \"em\", \"figcaption\", \"figure\", \"footer\", \"header\", \"i\", \"kbd\", \"mark\", \"nav\", \"noscript\", \"rp\", \"rt\", \"ruby\", \"s\", \"samp\", \"section\", \"small\", \"strong\", \"sub\", \"summary\", \"sup\", \"u\", \"var\", \"wbr\"],\n \"HTMLEmbedElement\": [\"embed\"],\n \"HTMLFieldSetElement\": [\"fieldset\"],\n \"HTMLFontElement\": [\"font\"],\n \"HTMLFormElement\": [\"form\"],\n \"HTMLFrameElement\": [\"frame\"],\n \"HTMLFrameSetElement\": [\"frameset\"],\n \"HTMLHRElement\": [\"hr\"],\n \"HTMLHeadElement\": [\"head\"],\n \"HTMLHeadingElement\": [\"h1\", \"h2\", \"h3\", \"h4\", \"h5\", \"h6\"],\n \"HTMLHtmlElement\": [\"html\"],\n \"HTMLIFrameElement\": [\"iframe\"],\n \"HTMLImageElement\": [\"img\"],\n \"HTMLInputElement\": [\"input\"],\n \"HTMLKeygenElement\": [\"keygen\"],\n \"HTMLLIElement\": [\"li\"],\n \"HTMLLabelElement\": [\"label\"],\n \"HTMLLegendElement\": [\"legend\"],\n \"HTMLLinkElement\": [\"link\"],\n \"HTMLMapElement\": [\"map\"],\n \"HTMLMarqueeElement\": [\"marquee\"],\n \"HTMLMediaElement\": [\"media\"],\n \"HTMLMenuElement\": [\"menu\"],\n \"HTMLMenuItemElement\": [\"menuitem\"],\n \"HTMLMetaElement\": [\"meta\"],\n \"HTMLMeterElement\": [\"meter\"],\n \"HTMLModElement\": [\"del\", \"ins\"],\n \"HTMLOListElement\": [\"ol\"],\n \"HTMLObjectElement\": [\"object\"],\n \"HTMLOptGroupElement\": [\"optgroup\"],\n \"HTMLOptionElement\": [\"option\"],\n \"HTMLOutputElement\": [\"output\"],\n \"HTMLParagraphElement\": [\"p\"],\n \"HTMLParamElement\": [\"param\"],\n \"HTMLPictureElement\": [\"picture\"],\n \"HTMLPreElement\": [\"pre\"],\n \"HTMLProgressElement\": [\"progress\"],\n \"HTMLQuoteElement\": [\"blockquote\", \"q\", \"quote\"],\n \"HTMLScriptElement\": [\"script\"],\n \"HTMLSelectElement\": [\"select\"],\n \"HTMLShadowElement\": [\"shadow\"],\n \"HTMLSlotElement\": [\"slot\"],\n \"HTMLSourceElement\": [\"source\"],\n \"HTMLSpanElement\": [\"span\"],\n \"HTMLStyleElement\": [\"style\"],\n \"HTMLTableCaptionElement\": [\"caption\"],\n \"HTMLTableCellElement\": [\"td\", \"th\"],\n \"HTMLTableColElement\": [\"col\", \"colgroup\"],\n \"HTMLTableElement\": [\"table\"],\n \"HTMLTableRowElement\": [\"tr\"],\n \"HTMLTableSectionElement\": [\"thead\", \"tbody\", \"tfoot\"],\n \"HTMLTemplateElement\": [\"template\"],\n \"HTMLTextAreaElement\": [\"textarea\"],\n \"HTMLTimeElement\": [\"time\"],\n \"HTMLTitleElement\": [\"title\"],\n \"HTMLTrackElement\": [\"track\"],\n \"HTMLUListElement\": [\"ul\"],\n \"HTMLUnknownElement\": [\"unknown\", \"vhgroupv\", \"vkeygen\"],\n \"HTMLVideoElement\": [\"video\"]\n },\n \"nodes\": {\n \"Attr\": [\"node\"],\n \"Audio\": [\"audio\"],\n \"CDATASection\": [\"node\"],\n \"CharacterData\": [\"node\"],\n \"Comment\": [\"#comment\"],\n \"Document\": [\"#document\"],\n \"DocumentFragment\": [\"#document-fragment\"],\n \"DocumentType\": [\"node\"],\n \"HTMLDocument\": [\"#document\"],\n \"Image\": [\"img\"],\n \"Option\": [\"option\"],\n \"ProcessingInstruction\": [\"node\"],\n \"ShadowRoot\": [\"#shadow-root\"],\n \"Text\": [\"#text\"],\n \"XMLDocument\": [\"xml\"]\n }\n }); // passed at runtime, configurable via nodejs module\n\n\n if (_typeof(polyfill) !== 'object') polyfill = {\n type: polyfill || 'auto'\n };\n\n var // V0 polyfill entry\n REGISTER_ELEMENT = 'registerElement',\n // IE < 11 only + old WebKit for attributes + feature detection\n EXPANDO_UID = '__' + REGISTER_ELEMENT + (window.Math.random() * 10e4 >> 0),\n // shortcuts and costants\n ADD_EVENT_LISTENER = 'addEventListener',\n ATTACHED = 'attached',\n CALLBACK = 'Callback',\n DETACHED = 'detached',\n EXTENDS = 'extends',\n ATTRIBUTE_CHANGED_CALLBACK = 'attributeChanged' + CALLBACK,\n ATTACHED_CALLBACK = ATTACHED + CALLBACK,\n CONNECTED_CALLBACK = 'connected' + CALLBACK,\n DISCONNECTED_CALLBACK = 'disconnected' + CALLBACK,\n CREATED_CALLBACK = 'created' + CALLBACK,\n DETACHED_CALLBACK = DETACHED + CALLBACK,\n ADDITION = 'ADDITION',\n MODIFICATION = 'MODIFICATION',\n REMOVAL = 'REMOVAL',\n DOM_ATTR_MODIFIED = 'DOMAttrModified',\n DOM_CONTENT_LOADED = 'DOMContentLoaded',\n DOM_SUBTREE_MODIFIED = 'DOMSubtreeModified',\n PREFIX_TAG = '<',\n PREFIX_IS = '=',\n // valid and invalid node names\n validName = /^[A-Z][A-Z0-9]*(?:-[A-Z0-9]+)+$/,\n invalidNames = ['ANNOTATION-XML', 'COLOR-PROFILE', 'FONT-FACE', 'FONT-FACE-SRC', 'FONT-FACE-URI', 'FONT-FACE-FORMAT', 'FONT-FACE-NAME', 'MISSING-GLYPH'],\n // registered types and their prototypes\n types = [],\n protos = [],\n // to query subnodes\n query = '',\n // html shortcut used to feature detect\n documentElement = document.documentElement,\n // ES5 inline helpers || basic patches\n indexOf = types.indexOf || function (v) {\n for (var i = this.length; i-- && this[i] !== v;) {}\n\n return i;\n },\n // other helpers / shortcuts\n OP = Object.prototype,\n hOP = OP.hasOwnProperty,\n iPO = OP.isPrototypeOf,\n defineProperty = Object.defineProperty,\n empty = [],\n gOPD = Object.getOwnPropertyDescriptor,\n gOPN = Object.getOwnPropertyNames,\n gPO = Object.getPrototypeOf,\n sPO = Object.setPrototypeOf,\n // jshint proto: true\n hasProto = !!Object.__proto__,\n // V1 helpers\n fixGetClass = false,\n DRECEV1 = '__dreCEv1',\n customElements = window.customElements,\n usableCustomElements = !/^force/.test(polyfill.type) && !!(customElements && customElements.define && customElements.get && customElements.whenDefined),\n Dict = Object.create || Object,\n Map = window.Map || function Map() {\n var K = [],\n V = [],\n i;\n return {\n get: function get(k) {\n return V[indexOf.call(K, k)];\n },\n set: function set(k, v) {\n i = indexOf.call(K, k);\n if (i < 0) V[K.push(k) - 1] = v;else V[i] = v;\n }\n };\n },\n Promise = window.Promise || function (fn) {\n var notify = [],\n done = false,\n p = {\n 'catch': function _catch() {\n return p;\n },\n 'then': function then(cb) {\n notify.push(cb);\n if (done) setTimeout(resolve, 1);\n return p;\n }\n };\n\n function resolve(value) {\n done = true;\n\n while (notify.length) {\n notify.shift()(value);\n }\n }\n\n fn(resolve);\n return p;\n },\n justCreated = false,\n constructors = Dict(null),\n waitingList = Dict(null),\n nodeNames = new Map(),\n secondArgument = function secondArgument(is) {\n return is.toLowerCase();\n },\n // used to create unique instances\n create = Object.create || function Bridge(proto) {\n // silly broken polyfill probably ever used but short enough to work\n return proto ? (Bridge.prototype = proto, new Bridge()) : this;\n },\n // will set the prototype if possible\n // or copy over all properties\n setPrototype = sPO || (hasProto ? function (o, p) {\n o.__proto__ = p;\n return o;\n } : gOPN && gOPD ? function () {\n function setProperties(o, p) {\n for (var key, names = gOPN(p), i = 0, length = names.length; i < length; i++) {\n key = names[i];\n\n if (!hOP.call(o, key)) {\n defineProperty(o, key, gOPD(p, key));\n }\n }\n }\n\n return function (o, p) {\n do {\n setProperties(o, p);\n } while ((p = gPO(p)) && !iPO.call(p, o));\n\n return o;\n };\n }() : function (o, p) {\n for (var key in p) {\n o[key] = p[key];\n }\n\n return o;\n }),\n // DOM shortcuts and helpers, if any\n MutationObserver = window.MutationObserver || window.WebKitMutationObserver,\n HTMLAnchorElement = window.HTMLAnchorElement,\n HTMLElementPrototype = (window.HTMLElement || window.Element || window.Node).prototype,\n IE8 = !iPO.call(HTMLElementPrototype, documentElement),\n safeProperty = IE8 ? function (o, k, d) {\n o[k] = d.value;\n return o;\n } : defineProperty,\n isValidNode = IE8 ? function (node) {\n return node.nodeType === 1;\n } : function (node) {\n return iPO.call(HTMLElementPrototype, node);\n },\n targets = IE8 && [],\n attachShadow = HTMLElementPrototype.attachShadow,\n cloneNode = HTMLElementPrototype.cloneNode,\n dispatchEvent = HTMLElementPrototype.dispatchEvent,\n getAttribute = HTMLElementPrototype.getAttribute,\n hasAttribute = HTMLElementPrototype.hasAttribute,\n removeAttribute = HTMLElementPrototype.removeAttribute,\n setAttribute = HTMLElementPrototype.setAttribute,\n // replaced later on\n createElement = document.createElement,\n importNode = document.importNode,\n patchedCreateElement = createElement,\n // shared observer for all attributes\n attributesObserver = MutationObserver && {\n attributes: true,\n characterData: true,\n attributeOldValue: true\n },\n // useful to detect only if there's no MutationObserver\n DOMAttrModified = MutationObserver || function (e) {\n doesNotSupportDOMAttrModified = false;\n documentElement.removeEventListener(DOM_ATTR_MODIFIED, DOMAttrModified);\n },\n // will both be used to make DOMNodeInserted asynchronous\n asapQueue,\n asapTimer = 0,\n // internal flags\n V0 = REGISTER_ELEMENT in document && !/^force-all/.test(polyfill.type),\n setListener = true,\n justSetup = false,\n doesNotSupportDOMAttrModified = true,\n dropDomContentLoaded = true,\n // needed for the innerHTML helper\n notFromInnerHTMLHelper = true,\n // optionally defined later on\n onSubtreeModified,\n callDOMAttrModified,\n getAttributesMirror,\n observer,\n observe,\n // based on setting prototype capability\n // will check proto or the expando attribute\n // in order to setup the node once\n patchIfNotAlready,\n patch,\n // used for tests\n tmp; // IE11 disconnectedCallback issue #\n // to be tested before any createElement patch\n\n\n if (MutationObserver) {\n // original fix:\n // https://github.com/javan/mutation-observer-inner-html-shim\n tmp = document.createElement('div');\n tmp.innerHTML = '
';\n new MutationObserver(function (mutations, observer) {\n if (mutations[0] && mutations[0].type == 'childList' && !mutations[0].removedNodes[0].childNodes.length) {\n tmp = gOPD(HTMLElementPrototype, 'innerHTML');\n\n var _set = tmp && tmp.set;\n\n if (_set) defineProperty(HTMLElementPrototype, 'innerHTML', {\n set: function set(value) {\n while (this.lastChild) {\n this.removeChild(this.lastChild);\n }\n\n _set.call(this, value);\n }\n });\n }\n\n observer.disconnect();\n tmp = null;\n }).observe(tmp, {\n childList: true,\n subtree: true\n });\n tmp.innerHTML = \"\";\n } // only if needed\n\n\n if (!V0) {\n if (sPO || hasProto) {\n patchIfNotAlready = function patchIfNotAlready(node, proto) {\n if (!iPO.call(proto, node)) {\n setupNode(node, proto);\n }\n };\n\n patch = setupNode;\n } else {\n patchIfNotAlready = function patchIfNotAlready(node, proto) {\n if (!node[EXPANDO_UID]) {\n node[EXPANDO_UID] = Object(true);\n setupNode(node, proto);\n }\n };\n\n patch = patchIfNotAlready;\n }\n\n if (IE8) {\n doesNotSupportDOMAttrModified = false;\n\n (function () {\n var descriptor = gOPD(HTMLElementPrototype, ADD_EVENT_LISTENER),\n addEventListener = descriptor.value,\n patchedRemoveAttribute = function patchedRemoveAttribute(name) {\n var e = new CustomEvent(DOM_ATTR_MODIFIED, {\n bubbles: true\n });\n e.attrName = name;\n e.prevValue = getAttribute.call(this, name);\n e.newValue = null;\n e[REMOVAL] = e.attrChange = 2;\n removeAttribute.call(this, name);\n dispatchEvent.call(this, e);\n },\n patchedSetAttribute = function patchedSetAttribute(name, value) {\n var had = hasAttribute.call(this, name),\n old = had && getAttribute.call(this, name),\n e = new CustomEvent(DOM_ATTR_MODIFIED, {\n bubbles: true\n });\n setAttribute.call(this, name, value);\n e.attrName = name;\n e.prevValue = had ? old : null;\n e.newValue = value;\n\n if (had) {\n e[MODIFICATION] = e.attrChange = 1;\n } else {\n e[ADDITION] = e.attrChange = 0;\n }\n\n dispatchEvent.call(this, e);\n },\n onPropertyChange = function onPropertyChange(e) {\n // jshint eqnull:true\n var node = e.currentTarget,\n superSecret = node[EXPANDO_UID],\n propertyName = e.propertyName,\n event;\n\n if (superSecret.hasOwnProperty(propertyName)) {\n superSecret = superSecret[propertyName];\n event = new CustomEvent(DOM_ATTR_MODIFIED, {\n bubbles: true\n });\n event.attrName = superSecret.name;\n event.prevValue = superSecret.value || null;\n event.newValue = superSecret.value = node[propertyName] || null;\n\n if (event.prevValue == null) {\n event[ADDITION] = event.attrChange = 0;\n } else {\n event[MODIFICATION] = event.attrChange = 1;\n }\n\n dispatchEvent.call(node, event);\n }\n };\n\n descriptor.value = function (type, handler, capture) {\n if (type === DOM_ATTR_MODIFIED && this[ATTRIBUTE_CHANGED_CALLBACK] && this.setAttribute !== patchedSetAttribute) {\n this[EXPANDO_UID] = {\n className: {\n name: 'class',\n value: this.className\n }\n };\n this.setAttribute = patchedSetAttribute;\n this.removeAttribute = patchedRemoveAttribute;\n addEventListener.call(this, 'propertychange', onPropertyChange);\n }\n\n addEventListener.call(this, type, handler, capture);\n };\n\n defineProperty(HTMLElementPrototype, ADD_EVENT_LISTENER, descriptor);\n })();\n } else if (!MutationObserver) {\n documentElement[ADD_EVENT_LISTENER](DOM_ATTR_MODIFIED, DOMAttrModified);\n documentElement.setAttribute(EXPANDO_UID, 1);\n documentElement.removeAttribute(EXPANDO_UID);\n\n if (doesNotSupportDOMAttrModified) {\n onSubtreeModified = function onSubtreeModified(e) {\n var node = this,\n oldAttributes,\n newAttributes,\n key;\n\n if (node === e.target) {\n oldAttributes = node[EXPANDO_UID];\n node[EXPANDO_UID] = newAttributes = getAttributesMirror(node);\n\n for (key in newAttributes) {\n if (!(key in oldAttributes)) {\n // attribute was added\n return callDOMAttrModified(0, node, key, oldAttributes[key], newAttributes[key], ADDITION);\n } else if (newAttributes[key] !== oldAttributes[key]) {\n // attribute was changed\n return callDOMAttrModified(1, node, key, oldAttributes[key], newAttributes[key], MODIFICATION);\n }\n } // checking if it has been removed\n\n\n for (key in oldAttributes) {\n if (!(key in newAttributes)) {\n // attribute removed\n return callDOMAttrModified(2, node, key, oldAttributes[key], newAttributes[key], REMOVAL);\n }\n }\n }\n };\n\n callDOMAttrModified = function callDOMAttrModified(attrChange, currentTarget, attrName, prevValue, newValue, action) {\n var e = {\n attrChange: attrChange,\n currentTarget: currentTarget,\n attrName: attrName,\n prevValue: prevValue,\n newValue: newValue\n };\n e[action] = attrChange;\n onDOMAttrModified(e);\n };\n\n getAttributesMirror = function getAttributesMirror(node) {\n for (var attr, name, result = {}, attributes = node.attributes, i = 0, length = attributes.length; i < length; i++) {\n attr = attributes[i];\n name = attr.name;\n\n if (name !== 'setAttribute') {\n result[name] = attr.value;\n }\n }\n\n return result;\n };\n }\n } // set as enumerable, writable and configurable\n\n\n document[REGISTER_ELEMENT] = function registerElement(type, options) {\n upperType = type.toUpperCase();\n\n if (setListener) {\n // only first time document.registerElement is used\n // we need to set this listener\n // setting it by default might slow down for no reason\n setListener = false;\n\n if (MutationObserver) {\n observer = function (attached, detached) {\n function checkEmAll(list, callback) {\n for (var i = 0, length = list.length; i < length; callback(list[i++])) {}\n }\n\n return new MutationObserver(function (records) {\n for (var current, node, newValue, i = 0, length = records.length; i < length; i++) {\n current = records[i];\n\n if (current.type === 'childList') {\n checkEmAll(current.addedNodes, attached);\n checkEmAll(current.removedNodes, detached);\n } else {\n node = current.target;\n\n if (notFromInnerHTMLHelper && node[ATTRIBUTE_CHANGED_CALLBACK] && current.attributeName !== 'style') {\n newValue = getAttribute.call(node, current.attributeName);\n\n if (newValue !== current.oldValue) {\n node[ATTRIBUTE_CHANGED_CALLBACK](current.attributeName, current.oldValue, newValue);\n }\n }\n }\n }\n });\n }(executeAction(ATTACHED), executeAction(DETACHED));\n\n observe = function observe(node) {\n observer.observe(node, {\n childList: true,\n subtree: true\n });\n return node;\n };\n\n observe(document);\n\n if (attachShadow) {\n HTMLElementPrototype.attachShadow = function () {\n return observe(attachShadow.apply(this, arguments));\n };\n }\n } else {\n asapQueue = [];\n document[ADD_EVENT_LISTENER]('DOMNodeInserted', onDOMNode(ATTACHED));\n document[ADD_EVENT_LISTENER]('DOMNodeRemoved', onDOMNode(DETACHED));\n }\n\n document[ADD_EVENT_LISTENER](DOM_CONTENT_LOADED, onReadyStateChange);\n document[ADD_EVENT_LISTENER]('readystatechange', onReadyStateChange);\n\n document.importNode = function (node, deep) {\n switch (node.nodeType) {\n case 1:\n return setupAll(document, importNode, [node, !!deep]);\n\n case 11:\n for (var fragment = document.createDocumentFragment(), childNodes = node.childNodes, length = childNodes.length, i = 0; i < length; i++) {\n fragment.appendChild(document.importNode(childNodes[i], !!deep));\n }\n\n return fragment;\n\n default:\n return cloneNode.call(node, !!deep);\n }\n };\n\n HTMLElementPrototype.cloneNode = function (deep) {\n return setupAll(this, cloneNode, [!!deep]);\n };\n }\n\n if (justSetup) return justSetup = false;\n\n if (-2 < indexOf.call(types, PREFIX_IS + upperType) + indexOf.call(types, PREFIX_TAG + upperType)) {\n throwTypeError(type);\n }\n\n if (!validName.test(upperType) || -1 < indexOf.call(invalidNames, upperType)) {\n throw new Error('The type ' + type + ' is invalid');\n }\n\n var constructor = function constructor() {\n return extending ? document.createElement(nodeName, upperType) : document.createElement(nodeName);\n },\n opt = options || OP,\n extending = hOP.call(opt, EXTENDS),\n nodeName = extending ? options[EXTENDS].toUpperCase() : upperType,\n upperType,\n i;\n\n if (extending && -1 < indexOf.call(types, PREFIX_TAG + nodeName)) {\n throwTypeError(nodeName);\n }\n\n i = types.push((extending ? PREFIX_IS : PREFIX_TAG) + upperType) - 1;\n query = query.concat(query.length ? ',' : '', extending ? nodeName + '[is=\"' + type.toLowerCase() + '\"]' : nodeName);\n constructor.prototype = protos[i] = hOP.call(opt, 'prototype') ? opt.prototype : create(HTMLElementPrototype);\n if (query.length) loopAndVerify(document.querySelectorAll(query), ATTACHED);\n return constructor;\n };\n\n document.createElement = patchedCreateElement = function patchedCreateElement(localName, typeExtension) {\n var is = getIs(typeExtension),\n node = is ? createElement.call(document, localName, secondArgument(is)) : createElement.call(document, localName),\n name = '' + localName,\n i = indexOf.call(types, (is ? PREFIX_IS : PREFIX_TAG) + (is || name).toUpperCase()),\n setup = -1 < i;\n\n if (is) {\n node.setAttribute('is', is = is.toLowerCase());\n\n if (setup) {\n setup = isInQSA(name.toUpperCase(), is);\n }\n }\n\n notFromInnerHTMLHelper = !document.createElement.innerHTMLHelper;\n if (setup) patch(node, protos[i]);\n return node;\n };\n }\n\n function ASAP() {\n var queue = asapQueue.splice(0, asapQueue.length);\n asapTimer = 0;\n\n while (queue.length) {\n queue.shift().call(null, queue.shift());\n }\n }\n\n function loopAndVerify(list, action) {\n for (var i = 0, length = list.length; i < length; i++) {\n verifyAndSetupAndAction(list[i], action);\n }\n }\n\n function loopAndSetup(list) {\n for (var i = 0, length = list.length, node; i < length; i++) {\n node = list[i];\n patch(node, protos[getTypeIndex(node)]);\n }\n }\n\n function executeAction(action) {\n return function (node) {\n if (isValidNode(node)) {\n verifyAndSetupAndAction(node, action);\n if (query.length) loopAndVerify(node.querySelectorAll(query), action);\n }\n };\n }\n\n function getTypeIndex(target) {\n var is = getAttribute.call(target, 'is'),\n nodeName = target.nodeName.toUpperCase(),\n i = indexOf.call(types, is ? PREFIX_IS + is.toUpperCase() : PREFIX_TAG + nodeName);\n return is && -1 < i && !isInQSA(nodeName, is) ? -1 : i;\n }\n\n function isInQSA(name, type) {\n return -1 < query.indexOf(name + '[is=\"' + type + '\"]');\n }\n\n function onDOMAttrModified(e) {\n var node = e.currentTarget,\n attrChange = e.attrChange,\n attrName = e.attrName,\n target = e.target,\n addition = e[ADDITION] || 2,\n removal = e[REMOVAL] || 3;\n\n if (notFromInnerHTMLHelper && (!target || target === node) && node[ATTRIBUTE_CHANGED_CALLBACK] && attrName !== 'style' && (e.prevValue !== e.newValue || // IE9, IE10, and Opera 12 gotcha\n e.newValue === '' && (attrChange === addition || attrChange === removal))) {\n node[ATTRIBUTE_CHANGED_CALLBACK](attrName, attrChange === addition ? null : e.prevValue, attrChange === removal ? null : e.newValue);\n }\n }\n\n function onDOMNode(action) {\n var executor = executeAction(action);\n return function (e) {\n asapQueue.push(executor, e.target);\n if (asapTimer) clearTimeout(asapTimer);\n asapTimer = setTimeout(ASAP, 1);\n };\n }\n\n function onReadyStateChange(e) {\n if (dropDomContentLoaded) {\n dropDomContentLoaded = false;\n e.currentTarget.removeEventListener(DOM_CONTENT_LOADED, onReadyStateChange);\n }\n\n if (query.length) loopAndVerify((e.target || document).querySelectorAll(query), e.detail === DETACHED ? DETACHED : ATTACHED);\n if (IE8) purge();\n }\n\n function patchedSetAttribute(name, value) {\n // jshint validthis:true\n var self = this;\n setAttribute.call(self, name, value);\n onSubtreeModified.call(self, {\n target: self\n });\n }\n\n function setupAll(context, callback, args) {\n var node = callback.apply(context, args),\n i = getTypeIndex(node);\n if (-1 < i) patch(node, protos[i]);\n if (args.pop() && query.length) loopAndSetup(node.querySelectorAll(query));\n return node;\n }\n\n function setupNode(node, proto) {\n setPrototype(node, proto);\n\n if (observer) {\n observer.observe(node, attributesObserver);\n } else {\n if (doesNotSupportDOMAttrModified) {\n node.setAttribute = patchedSetAttribute;\n node[EXPANDO_UID] = getAttributesMirror(node);\n node[ADD_EVENT_LISTENER](DOM_SUBTREE_MODIFIED, onSubtreeModified);\n }\n\n node[ADD_EVENT_LISTENER](DOM_ATTR_MODIFIED, onDOMAttrModified);\n }\n\n if (node[CREATED_CALLBACK] && notFromInnerHTMLHelper) {\n node.created = true;\n node[CREATED_CALLBACK]();\n node.created = false;\n }\n }\n\n function purge() {\n for (var node, i = 0, length = targets.length; i < length; i++) {\n node = targets[i];\n\n if (!documentElement.contains(node)) {\n length--;\n targets.splice(i--, 1);\n verifyAndSetupAndAction(node, DETACHED);\n }\n }\n }\n\n function throwTypeError(type) {\n throw new Error('A ' + type + ' type is already registered');\n }\n\n function verifyAndSetupAndAction(node, action) {\n var fn,\n i = getTypeIndex(node),\n counterAction;\n\n if (-1 < i) {\n patchIfNotAlready(node, protos[i]);\n i = 0;\n\n if (action === ATTACHED && !node[ATTACHED]) {\n node[DETACHED] = false;\n node[ATTACHED] = true;\n counterAction = 'connected';\n i = 1;\n\n if (IE8 && indexOf.call(targets, node) < 0) {\n targets.push(node);\n }\n } else if (action === DETACHED && !node[DETACHED]) {\n node[ATTACHED] = false;\n node[DETACHED] = true;\n counterAction = 'disconnected';\n i = 1;\n }\n\n if (i && (fn = node[action + CALLBACK] || node[counterAction + CALLBACK])) fn.call(node);\n }\n } // V1 in da House!\n\n\n function CustomElementRegistry() {}\n\n CustomElementRegistry.prototype = {\n constructor: CustomElementRegistry,\n // a workaround for the stubborn WebKit\n define: usableCustomElements ? function (name, Class, options) {\n if (options) {\n CERDefine(name, Class, options);\n } else {\n var NAME = name.toUpperCase();\n constructors[NAME] = {\n constructor: Class,\n create: [NAME]\n };\n nodeNames.set(Class, NAME);\n customElements.define(name, Class);\n }\n } : CERDefine,\n get: usableCustomElements ? function (name) {\n return customElements.get(name) || get(name);\n } : get,\n whenDefined: usableCustomElements ? function (name) {\n return Promise.race([customElements.whenDefined(name), whenDefined(name)]);\n } : whenDefined\n };\n\n function CERDefine(name, Class, options) {\n var is = options && options[EXTENDS] || '',\n CProto = Class.prototype,\n proto = create(CProto),\n attributes = Class.observedAttributes || empty,\n definition = {\n prototype: proto\n }; // TODO: is this needed at all since it's inherited?\n // defineProperty(proto, 'constructor', {value: Class});\n\n safeProperty(proto, CREATED_CALLBACK, {\n value: function value() {\n if (justCreated) justCreated = false;else if (!this[DRECEV1]) {\n this[DRECEV1] = true;\n new Class(this);\n if (CProto[CREATED_CALLBACK]) CProto[CREATED_CALLBACK].call(this);\n var info = constructors[nodeNames.get(Class)];\n\n if (!usableCustomElements || info.create.length > 1) {\n notifyAttributes(this);\n }\n }\n }\n });\n safeProperty(proto, ATTRIBUTE_CHANGED_CALLBACK, {\n value: function value(name) {\n if (-1 < indexOf.call(attributes, name)) {\n if (CProto[ATTRIBUTE_CHANGED_CALLBACK]) CProto[ATTRIBUTE_CHANGED_CALLBACK].apply(this, arguments);\n }\n }\n });\n\n if (CProto[CONNECTED_CALLBACK]) {\n safeProperty(proto, ATTACHED_CALLBACK, {\n value: CProto[CONNECTED_CALLBACK]\n });\n }\n\n if (CProto[DISCONNECTED_CALLBACK]) {\n safeProperty(proto, DETACHED_CALLBACK, {\n value: CProto[DISCONNECTED_CALLBACK]\n });\n }\n\n if (is) definition[EXTENDS] = is;\n name = name.toUpperCase();\n constructors[name] = {\n constructor: Class,\n create: is ? [is, secondArgument(name)] : [name]\n };\n nodeNames.set(Class, name);\n document[REGISTER_ELEMENT](name.toLowerCase(), definition);\n whenDefined(name);\n waitingList[name].r();\n }\n\n function get(name) {\n var info = constructors[name.toUpperCase()];\n return info && info.constructor;\n }\n\n function getIs(options) {\n return typeof options === 'string' ? options : options && options.is || '';\n }\n\n function notifyAttributes(self) {\n var callback = self[ATTRIBUTE_CHANGED_CALLBACK],\n attributes = callback ? self.attributes : empty,\n i = attributes.length,\n attribute;\n\n while (i--) {\n attribute = attributes[i]; // || attributes.item(i);\n\n callback.call(self, attribute.name || attribute.nodeName, null, attribute.value || attribute.nodeValue);\n }\n }\n\n function whenDefined(name) {\n name = name.toUpperCase();\n\n if (!(name in waitingList)) {\n waitingList[name] = {};\n waitingList[name].p = new Promise(function (resolve) {\n waitingList[name].r = resolve;\n });\n }\n\n return waitingList[name].p;\n }\n\n function polyfillV1() {\n if (customElements) delete window.customElements;\n defineProperty(window, 'customElements', {\n configurable: true,\n value: new CustomElementRegistry()\n });\n defineProperty(window, 'CustomElementRegistry', {\n configurable: true,\n value: CustomElementRegistry\n });\n\n for (var patchClass = function patchClass(name) {\n var Class = window[name];\n\n if (Class) {\n window[name] = function CustomElementsV1(self) {\n var info, isNative;\n if (!self) self = this;\n\n if (!self[DRECEV1]) {\n justCreated = true;\n info = constructors[nodeNames.get(self.constructor)];\n isNative = usableCustomElements && info.create.length === 1;\n self = isNative ? Reflect.construct(Class, empty, info.constructor) : document.createElement.apply(document, info.create);\n self[DRECEV1] = true;\n justCreated = false;\n if (!isNative) notifyAttributes(self);\n }\n\n return self;\n };\n\n window[name].prototype = Class.prototype;\n\n try {\n Class.prototype.constructor = window[name];\n } catch (WebKit) {\n fixGetClass = true;\n defineProperty(Class, DRECEV1, {\n value: window[name]\n });\n }\n }\n }, Classes = htmlClass.get(/^HTML[A-Z]*[a-z]/), i = Classes.length; i--; patchClass(Classes[i])) {}\n\n document.createElement = function (name, options) {\n var is = getIs(options);\n return is ? patchedCreateElement.call(this, name, secondArgument(is)) : patchedCreateElement.call(this, name);\n };\n\n if (!V0) {\n justSetup = true;\n document[REGISTER_ELEMENT]('');\n }\n } // if customElements is not there at all\n\n\n if (!customElements || /^force/.test(polyfill.type)) polyfillV1();else if (!polyfill.noBuiltIn) {\n // if available test extends work as expected\n try {\n (function (DRE, options, name) {\n var re = new RegExp('^$');\n options[EXTENDS] = 'a';\n DRE.prototype = create(HTMLAnchorElement.prototype);\n DRE.prototype.constructor = DRE;\n window.customElements.define(name, DRE, options);\n\n if (!re.test(document.createElement('a', {\n is: name\n }).outerHTML) || !re.test(new DRE().outerHTML)) {\n throw options;\n }\n })(function DRE() {\n return Reflect.construct(HTMLAnchorElement, [], DRE);\n }, {}, 'document-register-element-a');\n } catch (o_O) {\n // or force the polyfill if not\n // and keep internal original reference\n polyfillV1();\n }\n } // FireFox only issue\n\n if (!polyfill.noBuiltIn) {\n try {\n createElement.call(document, 'a', 'a');\n } catch (FireFox) {\n secondArgument = function secondArgument(is) {\n return {\n is: is.toLowerCase()\n };\n };\n }\n }\n}\n\nmodule.exports = installCustomElements;\ninstallCustomElements(global);\n/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./../../webpack/buildin/global.js */ \"./node_modules/webpack/buildin/global.js\")))\n\n//# sourceURL=webpack:///./node_modules/document-register-element/build/document-register-element.node.js?"); + +/***/ }) + +}]); \ No newline at end of file diff --git a/packages/uikit-workshop/dist/styleguide/js/2-chunk-e07784faf6fb566e89ab.js b/packages/uikit-workshop/dist/styleguide/js/2-chunk-e07784faf6fb566e89ab.js new file mode 100644 index 000000000..c97e16aac --- /dev/null +++ b/packages/uikit-workshop/dist/styleguide/js/2-chunk-e07784faf6fb566e89ab.js @@ -0,0 +1,15 @@ +(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[2],{ + +/***/ "../../../../node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js": +/*!****************************************************************************************************************!*\ + !*** /Users/sghoweri/sites/bolt-v2/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js ***! + \****************************************************************************************************************/ +/*! no static exports found */ +/*! ModuleConcatenation bailout: Module is not an ECMAScript module */ +/***/ (function(module, exports) { + +eval("/**\n@license @nocompile\nCopyright (c) 2018 The Polymer Project Authors. All rights reserved.\nThis code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt\nThe complete set of authors may be found at http://polymer.github.io/AUTHORS.txt\nThe complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt\nCode distributed by Google as part of the polymer project is also\nsubject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt\n*/\n(function () {\n 'use strict';\n\n (function () {\n if (void 0 === window.Reflect || void 0 === window.customElements || window.customElements.hasOwnProperty('polyfillWrapFlushCallback')) return;\n var a = HTMLElement;\n window.HTMLElement = function () {\n return Reflect.construct(a, [], this.constructor);\n }, HTMLElement.prototype = a.prototype, HTMLElement.prototype.constructor = HTMLElement, Object.setPrototypeOf(HTMLElement, a);\n })();\n})();\n\n//# sourceURL=webpack:////Users/sghoweri/sites/bolt-v2/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js?"); + +/***/ }) + +}]); \ No newline at end of file diff --git a/packages/uikit-workshop/dist/styleguide/js/patternlab-pattern.js b/packages/uikit-workshop/dist/styleguide/js/patternlab-pattern.js index d81ad59a7..298172bf1 100644 --- a/packages/uikit-workshop/dist/styleguide/js/patternlab-pattern.js +++ b/packages/uikit-workshop/dist/styleguide/js/patternlab-pattern.js @@ -1 +1,163 @@ -!function(t){var e={};function n(o){if(e[o])return e[o].exports;var r=e[o]={i:o,l:!1,exports:{}};return t[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)n.d(o,r,function(e){return t[e]}.bind(null,r));return o},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=32)}({10:function(t,e,n){"use strict";var o=n(6);new(n.n(o).a)(".pl-js-code-copy-btn").on("success",function(t){for(var e=document.querySelectorAll(".pl-js-code-copy-btn"),n=0;n0&&n.removeChild(n.childNodes[0]),document.getElementById("pl-pattern-extra-"+t).appendChild(e),document.getElementById("pl-pattern-extra-toggle-"+t).classList.add("pl-is-active"),document.getElementById("pl-pattern-extra-"+t).classList.add("pl-is-active")},close:function(t){r.active[t]=!1,document.getElementById("pl-pattern-extra-toggle-"+t).classList.remove("pl-is-active"),document.getElementById("pl-pattern-extra-"+t).classList.remove("pl-is-active")},collectAndSend:function(t,e,n){if(/\S/.test(t.innerHTML)){var o=JSON.parse(t.innerHTML);if(void 0!==o.patternName){var i=document.querySelector("#"+o.patternPartial+" > .pl-js-pattern-example");o.patternMarkup=null!==i?i.innerHTML:document.querySelector("body").innerHTML,r.patternQueryInfo(o,e,n)}}},highlightsHide:function(t){for(var e=void 0!==t?"#"+t+" > ":"",n=document.querySelectorAll(e+".pl-has-annotation"),o=0;o1,i=0;i0)for(var u=0;u span.pl-c-annotation-tip");null===d?a[u].insertBefore(c,a[u].firstChild):d.style.display="inline",a[u].onclick=function(t){return function(e){e.preventDefault(),e.stopPropagation();var n=JSON.stringify({event:"patternLab.annotationNumberClicked",displayNumber:t.displayNumber});window.parent.postMessage(n,r.targetOrigin)}}(l)}}else if(void 0!==e.event&&"patternLab.annotationsHighlightHide"===e.event)r.highlightsHide();else if(void 0!==e.event&&"patternLab.patternModalClose"===e.event){var f=[];for(var p in r.active)p&&f.push(p);for(var h=0;h0&&void 0!==arguments[0]?arguments[0]:{};this.action=t.action,this.container=t.container,this.emitter=t.emitter,this.target=t.target,this.text=t.text,this.trigger=t.trigger,this.selectedText=""}},{key:"initSelection",value:function(){this.text?this.selectFake():this.target&&this.selectTarget()}},{key:"selectFake",value:function(){var t=this,e="rtl"==document.documentElement.getAttribute("dir");this.removeFake(),this.fakeHandlerCallback=function(){return t.removeFake()},this.fakeHandler=this.container.addEventListener("click",this.fakeHandlerCallback)||!0,this.fakeElem=document.createElement("textarea"),this.fakeElem.style.fontSize="12pt",this.fakeElem.style.border="0",this.fakeElem.style.padding="0",this.fakeElem.style.margin="0",this.fakeElem.style.position="absolute",this.fakeElem.style[e?"right":"left"]="-9999px";var n=window.pageYOffset||document.documentElement.scrollTop;this.fakeElem.style.top=n+"px",this.fakeElem.setAttribute("readonly",""),this.fakeElem.value=this.text,this.container.appendChild(this.fakeElem),this.selectedText=(0,o.default)(this.fakeElem),this.copyText()}},{key:"removeFake",value:function(){this.fakeHandler&&(this.container.removeEventListener("click",this.fakeHandlerCallback),this.fakeHandler=null,this.fakeHandlerCallback=null),this.fakeElem&&(this.container.removeChild(this.fakeElem),this.fakeElem=null)}},{key:"selectTarget",value:function(){this.selectedText=(0,o.default)(this.target),this.copyText()}},{key:"copyText",value:function(){var t=void 0;try{t=document.execCommand(this.action)}catch(e){t=!1}this.handleResult(t)}},{key:"handleResult",value:function(t){this.emitter.emit(t?"success":"error",{action:this.action,text:this.selectedText,trigger:this.trigger,clearSelection:this.clearSelection.bind(this)})}},{key:"clearSelection",value:function(){this.trigger&&this.trigger.focus(),window.getSelection().removeAllRanges()}},{key:"destroy",value:function(){this.removeFake()}},{key:"action",set:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"copy";if(this._action=t,"copy"!==this._action&&"cut"!==this._action)throw new Error('Invalid "action" value, use either "copy" or "cut"')},get:function(){return this._action}},{key:"target",set:function(t){if(void 0!==t){if(!t||"object"!==(void 0===t?"undefined":r(t))||1!==t.nodeType)throw new Error('Invalid "target" value, use a valid Element');if("copy"===this.action&&t.hasAttribute("disabled"))throw new Error('Invalid "target" attribute. Please use "readonly" instead of "disabled" attribute');if("cut"===this.action&&(t.hasAttribute("readonly")||t.hasAttribute("disabled")))throw new Error('Invalid "target" attribute. You can\'t cut text from elements with "readonly" or "disabled" attributes');this._target=t}},get:function(){return this._target}}]),t}();t.exports=a})?o.apply(e,r):o)||(t.exports=i)},function(t,e,n){var o=n(6),r=n(5);t.exports=function(t,e,n){if(!t&&!e&&!n)throw new Error("Missing required arguments");if(!o.string(e))throw new TypeError("Second argument must be a String");if(!o.fn(n))throw new TypeError("Third argument must be a Function");if(o.node(t))return function(t,e,n){return t.addEventListener(e,n),{destroy:function(){t.removeEventListener(e,n)}}}(t,e,n);if(o.nodeList(t))return function(t,e,n){return Array.prototype.forEach.call(t,function(t){t.addEventListener(e,n)}),{destroy:function(){Array.prototype.forEach.call(t,function(t){t.removeEventListener(e,n)})}}}(t,e,n);if(o.string(t))return function(t,e,n){return r(document.body,t,e,n)}(t,e,n);throw new TypeError("First argument must be a String, HTMLElement, HTMLCollection, or NodeList")}},function(t,e){function n(){}n.prototype={on:function(t,e,n){var o=this.e||(this.e={});return(o[t]||(o[t]=[])).push({fn:e,ctx:n}),this},once:function(t,e,n){var o=this;function r(){o.off(t,r),e.apply(n,arguments)}return r._=e,this.on(t,r,n)},emit:function(t){for(var e=[].slice.call(arguments,1),n=((this.e||(this.e={}))[t]||[]).slice(),o=0,r=n.length;o0&&void 0!==arguments[0]?arguments[0]:{};this.action="function"==typeof t.action?t.action:this.defaultAction,this.target="function"==typeof t.target?t.target:this.defaultTarget,this.text="function"==typeof t.text?t.text:this.defaultText,this.container="object"===c(t.container)?t.container:document.body}},{key:"listenClick",value:function(t){var e=this;this.listener=(0,a.default)(t,"click",function(t){return e.onClick(t)})}},{key:"onClick",value:function(t){var e=t.delegateTarget||t.currentTarget;this.clipboardAction&&(this.clipboardAction=null),this.clipboardAction=new r.default({action:this.action(e),target:this.target(e),text:this.text(e),container:this.container,trigger:e,emitter:this})}},{key:"defaultAction",value:function(t){return d("action",t)}},{key:"defaultTarget",value:function(t){var e=d("target",t);if(e)return document.querySelector(e)}},{key:"defaultText",value:function(t){return d("text",t)}},{key:"destroy",value:function(){this.listener.destroy(),this.clipboardAction&&(this.clipboardAction.destroy(),this.clipboardAction=null)}}],[{key:"isSupported",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:["copy","cut"],e="string"==typeof t?[t]:t,n=!!document.queryCommandSupported;return e.forEach(function(t){n=n&&!!document.queryCommandSupported(t)}),n}}]),e}(i.default);function d(t,e){var n="data-clipboard-"+t;if(e.hasAttribute(n))return e.getAttribute(n)}t.exports=u})?o.apply(e,r):o)||(t.exports=i)},function(t,e){var n=9;if("undefined"!=typeof Element&&!Element.prototype.matches){var o=Element.prototype;o.matches=o.matchesSelector||o.mozMatchesSelector||o.msMatchesSelector||o.oMatchesSelector||o.webkitMatchesSelector}t.exports=function(t,e){for(;t&&t.nodeType!==n;){if("function"==typeof t.matches&&t.matches(e))return t;t=t.parentNode}}},function(t,e,n){var o=n(4);function r(t,e,n,r,i){var a=function(t,e,n,r){return function(n){n.delegateTarget=o(n.target,e),n.delegateTarget&&r.call(t,n)}}.apply(this,arguments);return t.addEventListener(n,a,i),{destroy:function(){t.removeEventListener(n,a,i)}}}t.exports=function(t,e,n,o,i){return"function"==typeof t.addEventListener?r.apply(null,arguments):"function"==typeof n?r.bind(null,document).apply(null,arguments):("string"==typeof t&&(t=document.querySelectorAll(t)),Array.prototype.map.call(t,function(t){return r(t,e,n,o,i)}))}},function(t,e){e.node=function(t){return void 0!==t&&t instanceof HTMLElement&&1===t.nodeType},e.nodeList=function(t){var n=Object.prototype.toString.call(t);return void 0!==t&&("[object NodeList]"===n||"[object HTMLCollection]"===n)&&"length"in t&&(0===t.length||e.node(t[0]))},e.string=function(t){return"string"==typeof t||t instanceof String},e.fn=function(t){return"[object Function]"===Object.prototype.toString.call(t)}},function(t,e){t.exports=function(t){var e;if("SELECT"===t.nodeName)t.focus(),e=t.value;else if("INPUT"===t.nodeName||"TEXTAREA"===t.nodeName){var n=t.hasAttribute("readonly");n||t.setAttribute("readonly",""),t.select(),t.setSelectionRange(0,t.value.length),n||t.removeAttribute("readonly"),e=t.value}else{t.hasAttribute("contenteditable")&&t.focus();var o=window.getSelection(),r=document.createRange();r.selectNodeContents(t),o.removeAllRanges(),o.addRange(r),e=o.toString()}return e}}])},t.exports=o()},8:function(t,e){if(window.self!==window.top){var n={event:"patternLab.pageLoad",path:window.location.toString().split("?")[0]};window.patternData=document.getElementById("pl-pattern-data-footer").innerHTML,window.patternData=JSON.parse(window.patternData),n.patternpartial=void 0!==window.patternData.patternPartial?window.patternData.patternPartial:"all",""!==window.patternData.lineage&&(n.lineage=window.patternData.lineage);var o="file:"===window.location.protocol?"*":window.location.protocol+"//"+window.location.host;window.parent.postMessage(n,o);for(var r=document.getElementsByTagName("a"),i=0;i 0 && arguments[0] !== undefined ? arguments[0] : {};\n this.action = options.action;\n this.container = options.container;\n this.emitter = options.emitter;\n this.target = options.target;\n this.text = options.text;\n this.trigger = options.trigger;\n this.selectedText = '';\n }\n }, {\n key: 'initSelection',\n value: function initSelection() {\n if (this.text) {\n this.selectFake();\n } else if (this.target) {\n this.selectTarget();\n }\n }\n }, {\n key: 'selectFake',\n value: function selectFake() {\n var _this = this;\n\n var isRTL = document.documentElement.getAttribute('dir') == 'rtl';\n this.removeFake();\n\n this.fakeHandlerCallback = function () {\n return _this.removeFake();\n };\n\n this.fakeHandler = this.container.addEventListener('click', this.fakeHandlerCallback) || true;\n this.fakeElem = document.createElement('textarea'); // Prevent zooming on iOS\n\n this.fakeElem.style.fontSize = '12pt'; // Reset box model\n\n this.fakeElem.style.border = '0';\n this.fakeElem.style.padding = '0';\n this.fakeElem.style.margin = '0'; // Move element out of screen horizontally\n\n this.fakeElem.style.position = 'absolute';\n this.fakeElem.style[isRTL ? 'right' : 'left'] = '-9999px'; // Move element to the same position vertically\n\n var yPosition = window.pageYOffset || document.documentElement.scrollTop;\n this.fakeElem.style.top = yPosition + 'px';\n this.fakeElem.setAttribute('readonly', '');\n this.fakeElem.value = this.text;\n this.container.appendChild(this.fakeElem);\n this.selectedText = (0, _select2.default)(this.fakeElem);\n this.copyText();\n }\n }, {\n key: 'removeFake',\n value: function removeFake() {\n if (this.fakeHandler) {\n this.container.removeEventListener('click', this.fakeHandlerCallback);\n this.fakeHandler = null;\n this.fakeHandlerCallback = null;\n }\n\n if (this.fakeElem) {\n this.container.removeChild(this.fakeElem);\n this.fakeElem = null;\n }\n }\n }, {\n key: 'selectTarget',\n value: function selectTarget() {\n this.selectedText = (0, _select2.default)(this.target);\n this.copyText();\n }\n }, {\n key: 'copyText',\n value: function copyText() {\n var succeeded = void 0;\n\n try {\n succeeded = document.execCommand(this.action);\n } catch (err) {\n succeeded = false;\n }\n\n this.handleResult(succeeded);\n }\n }, {\n key: 'handleResult',\n value: function handleResult(succeeded) {\n this.emitter.emit(succeeded ? 'success' : 'error', {\n action: this.action,\n text: this.selectedText,\n trigger: this.trigger,\n clearSelection: this.clearSelection.bind(this)\n });\n }\n }, {\n key: 'clearSelection',\n value: function clearSelection() {\n if (this.trigger) {\n this.trigger.focus();\n }\n\n window.getSelection().removeAllRanges();\n }\n }, {\n key: 'destroy',\n value: function destroy() {\n this.removeFake();\n }\n }, {\n key: 'action',\n set: function set() {\n var action = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'copy';\n this._action = action;\n\n if (this._action !== 'copy' && this._action !== 'cut') {\n throw new Error('Invalid \"action\" value, use either \"copy\" or \"cut\"');\n }\n },\n get: function get() {\n return this._action;\n }\n }, {\n key: 'target',\n set: function set(target) {\n if (target !== undefined) {\n if (target && (typeof target === 'undefined' ? 'undefined' : _typeof(target)) === 'object' && target.nodeType === 1) {\n if (this.action === 'copy' && target.hasAttribute('disabled')) {\n throw new Error('Invalid \"target\" attribute. Please use \"readonly\" instead of \"disabled\" attribute');\n }\n\n if (this.action === 'cut' && (target.hasAttribute('readonly') || target.hasAttribute('disabled'))) {\n throw new Error('Invalid \"target\" attribute. You can\\'t cut text from elements with \"readonly\" or \"disabled\" attributes');\n }\n\n this._target = target;\n } else {\n throw new Error('Invalid \"target\" value, use a valid Element');\n }\n }\n },\n get: function get() {\n return this._target;\n }\n }]);\n\n return ClipboardAction;\n }();\n\n module.exports = ClipboardAction;\n });\n /***/\n\n },\n /* 1 */\n\n /***/\n function (module, exports, __webpack_require__) {\n var is = __webpack_require__(6);\n\n var delegate = __webpack_require__(5);\n /**\n * Validates all params and calls the right\n * listener function based on its target type.\n *\n * @param {String|HTMLElement|HTMLCollection|NodeList} target\n * @param {String} type\n * @param {Function} callback\n * @return {Object}\n */\n\n\n function listen(target, type, callback) {\n if (!target && !type && !callback) {\n throw new Error('Missing required arguments');\n }\n\n if (!is.string(type)) {\n throw new TypeError('Second argument must be a String');\n }\n\n if (!is.fn(callback)) {\n throw new TypeError('Third argument must be a Function');\n }\n\n if (is.node(target)) {\n return listenNode(target, type, callback);\n } else if (is.nodeList(target)) {\n return listenNodeList(target, type, callback);\n } else if (is.string(target)) {\n return listenSelector(target, type, callback);\n } else {\n throw new TypeError('First argument must be a String, HTMLElement, HTMLCollection, or NodeList');\n }\n }\n /**\n * Adds an event listener to a HTML element\n * and returns a remove listener function.\n *\n * @param {HTMLElement} node\n * @param {String} type\n * @param {Function} callback\n * @return {Object}\n */\n\n\n function listenNode(node, type, callback) {\n node.addEventListener(type, callback);\n return {\n destroy: function destroy() {\n node.removeEventListener(type, callback);\n }\n };\n }\n /**\n * Add an event listener to a list of HTML elements\n * and returns a remove listener function.\n *\n * @param {NodeList|HTMLCollection} nodeList\n * @param {String} type\n * @param {Function} callback\n * @return {Object}\n */\n\n\n function listenNodeList(nodeList, type, callback) {\n Array.prototype.forEach.call(nodeList, function (node) {\n node.addEventListener(type, callback);\n });\n return {\n destroy: function destroy() {\n Array.prototype.forEach.call(nodeList, function (node) {\n node.removeEventListener(type, callback);\n });\n }\n };\n }\n /**\n * Add an event listener to a selector\n * and returns a remove listener function.\n *\n * @param {String} selector\n * @param {String} type\n * @param {Function} callback\n * @return {Object}\n */\n\n\n function listenSelector(selector, type, callback) {\n return delegate(document.body, selector, type, callback);\n }\n\n module.exports = listen;\n /***/\n },\n /* 2 */\n\n /***/\n function (module, exports) {\n function E() {// Keep this empty so it's easier to inherit from\n // (via https://github.com/lipsmack from https://github.com/scottcorgan/tiny-emitter/issues/3)\n }\n\n E.prototype = {\n on: function on(name, callback, ctx) {\n var e = this.e || (this.e = {});\n (e[name] || (e[name] = [])).push({\n fn: callback,\n ctx: ctx\n });\n return this;\n },\n once: function once(name, callback, ctx) {\n var self = this;\n\n function listener() {\n self.off(name, listener);\n callback.apply(ctx, arguments);\n }\n\n ;\n listener._ = callback;\n return this.on(name, listener, ctx);\n },\n emit: function emit(name) {\n var data = [].slice.call(arguments, 1);\n var evtArr = ((this.e || (this.e = {}))[name] || []).slice();\n var i = 0;\n var len = evtArr.length;\n\n for (i; i < len; i++) {\n evtArr[i].fn.apply(evtArr[i].ctx, data);\n }\n\n return this;\n },\n off: function off(name, callback) {\n var e = this.e || (this.e = {});\n var evts = e[name];\n var liveEvents = [];\n\n if (evts && callback) {\n for (var i = 0, len = evts.length; i < len; i++) {\n if (evts[i].fn !== callback && evts[i].fn._ !== callback) liveEvents.push(evts[i]);\n }\n } // Remove event from queue to prevent memory leak\n // Suggested by https://github.com/lazd\n // Ref: https://github.com/scottcorgan/tiny-emitter/commit/c6ebfaa9bc973b33d110a84a307742b7cf94c953#commitcomment-5024910\n\n\n liveEvents.length ? e[name] = liveEvents : delete e[name];\n return this;\n }\n };\n module.exports = E;\n /***/\n },\n /* 3 */\n\n /***/\n function (module, exports, __webpack_require__) {\n var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;\n\n (function (global, factory) {\n if (true) {\n !(__WEBPACK_AMD_DEFINE_ARRAY__ = [module, __webpack_require__(0), __webpack_require__(2), __webpack_require__(1)], __WEBPACK_AMD_DEFINE_FACTORY__ = factory, __WEBPACK_AMD_DEFINE_RESULT__ = typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ? __WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__) : __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));\n } else { var mod; }\n })(this, function (module, _clipboardAction, _tinyEmitter, _goodListener) {\n 'use strict';\n\n var _clipboardAction2 = _interopRequireDefault(_clipboardAction);\n\n var _tinyEmitter2 = _interopRequireDefault(_tinyEmitter);\n\n var _goodListener2 = _interopRequireDefault(_goodListener);\n\n function _interopRequireDefault(obj) {\n return obj && obj.__esModule ? obj : {\n default: obj\n };\n }\n\n var _typeof = typeof Symbol === \"function\" && _typeof2(Symbol.iterator) === \"symbol\" ? function (obj) {\n return _typeof2(obj);\n } : function (obj) {\n return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : _typeof2(obj);\n };\n\n function _classCallCheck(instance, Constructor) {\n if (!(instance instanceof Constructor)) {\n throw new TypeError(\"Cannot call a class as a function\");\n }\n }\n\n var _createClass = function () {\n function defineProperties(target, props) {\n for (var i = 0; i < props.length; i++) {\n var descriptor = props[i];\n descriptor.enumerable = descriptor.enumerable || false;\n descriptor.configurable = true;\n if (\"value\" in descriptor) descriptor.writable = true;\n Object.defineProperty(target, descriptor.key, descriptor);\n }\n }\n\n return function (Constructor, protoProps, staticProps) {\n if (protoProps) defineProperties(Constructor.prototype, protoProps);\n if (staticProps) defineProperties(Constructor, staticProps);\n return Constructor;\n };\n }();\n\n function _possibleConstructorReturn(self, call) {\n if (!self) {\n throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");\n }\n\n return call && (_typeof2(call) === \"object\" || typeof call === \"function\") ? call : self;\n }\n\n function _inherits(subClass, superClass) {\n if (typeof superClass !== \"function\" && superClass !== null) {\n throw new TypeError(\"Super expression must either be null or a function, not \" + _typeof2(superClass));\n }\n\n subClass.prototype = Object.create(superClass && superClass.prototype, {\n constructor: {\n value: subClass,\n enumerable: false,\n writable: true,\n configurable: true\n }\n });\n if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;\n }\n\n var Clipboard = function (_Emitter) {\n _inherits(Clipboard, _Emitter);\n /**\n * @param {String|HTMLElement|HTMLCollection|NodeList} trigger\n * @param {Object} options\n */\n\n\n function Clipboard(trigger, options) {\n _classCallCheck(this, Clipboard);\n\n var _this = _possibleConstructorReturn(this, (Clipboard.__proto__ || Object.getPrototypeOf(Clipboard)).call(this));\n\n _this.resolveOptions(options);\n\n _this.listenClick(trigger);\n\n return _this;\n }\n /**\n * Defines if attributes would be resolved using internal setter functions\n * or custom functions that were passed in the constructor.\n * @param {Object} options\n */\n\n\n _createClass(Clipboard, [{\n key: 'resolveOptions',\n value: function resolveOptions() {\n var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n this.action = typeof options.action === 'function' ? options.action : this.defaultAction;\n this.target = typeof options.target === 'function' ? options.target : this.defaultTarget;\n this.text = typeof options.text === 'function' ? options.text : this.defaultText;\n this.container = _typeof(options.container) === 'object' ? options.container : document.body;\n }\n }, {\n key: 'listenClick',\n value: function listenClick(trigger) {\n var _this2 = this;\n\n this.listener = (0, _goodListener2.default)(trigger, 'click', function (e) {\n return _this2.onClick(e);\n });\n }\n }, {\n key: 'onClick',\n value: function onClick(e) {\n var trigger = e.delegateTarget || e.currentTarget;\n\n if (this.clipboardAction) {\n this.clipboardAction = null;\n }\n\n this.clipboardAction = new _clipboardAction2.default({\n action: this.action(trigger),\n target: this.target(trigger),\n text: this.text(trigger),\n container: this.container,\n trigger: trigger,\n emitter: this\n });\n }\n }, {\n key: 'defaultAction',\n value: function defaultAction(trigger) {\n return getAttributeValue('action', trigger);\n }\n }, {\n key: 'defaultTarget',\n value: function defaultTarget(trigger) {\n var selector = getAttributeValue('target', trigger);\n\n if (selector) {\n return document.querySelector(selector);\n }\n }\n }, {\n key: 'defaultText',\n value: function defaultText(trigger) {\n return getAttributeValue('text', trigger);\n }\n }, {\n key: 'destroy',\n value: function destroy() {\n this.listener.destroy();\n\n if (this.clipboardAction) {\n this.clipboardAction.destroy();\n this.clipboardAction = null;\n }\n }\n }], [{\n key: 'isSupported',\n value: function isSupported() {\n var action = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ['copy', 'cut'];\n var actions = typeof action === 'string' ? [action] : action;\n var support = !!document.queryCommandSupported;\n actions.forEach(function (action) {\n support = support && !!document.queryCommandSupported(action);\n });\n return support;\n }\n }]);\n\n return Clipboard;\n }(_tinyEmitter2.default);\n /**\n * Helper function to retrieve attribute value.\n * @param {String} suffix\n * @param {Element} element\n */\n\n\n function getAttributeValue(suffix, element) {\n var attribute = 'data-clipboard-' + suffix;\n\n if (!element.hasAttribute(attribute)) {\n return;\n }\n\n return element.getAttribute(attribute);\n }\n\n module.exports = Clipboard;\n });\n /***/\n\n },\n /* 4 */\n\n /***/\n function (module, exports) {\n var DOCUMENT_NODE_TYPE = 9;\n /**\n * A polyfill for Element.matches()\n */\n\n if (typeof Element !== 'undefined' && !Element.prototype.matches) {\n var proto = Element.prototype;\n proto.matches = proto.matchesSelector || proto.mozMatchesSelector || proto.msMatchesSelector || proto.oMatchesSelector || proto.webkitMatchesSelector;\n }\n /**\n * Finds the closest parent that matches a selector.\n *\n * @param {Element} element\n * @param {String} selector\n * @return {Function}\n */\n\n\n function closest(element, selector) {\n while (element && element.nodeType !== DOCUMENT_NODE_TYPE) {\n if (typeof element.matches === 'function' && element.matches(selector)) {\n return element;\n }\n\n element = element.parentNode;\n }\n }\n\n module.exports = closest;\n /***/\n },\n /* 5 */\n\n /***/\n function (module, exports, __webpack_require__) {\n var closest = __webpack_require__(4);\n /**\n * Delegates event to a selector.\n *\n * @param {Element} element\n * @param {String} selector\n * @param {String} type\n * @param {Function} callback\n * @param {Boolean} useCapture\n * @return {Object}\n */\n\n\n function _delegate(element, selector, type, callback, useCapture) {\n var listenerFn = listener.apply(this, arguments);\n element.addEventListener(type, listenerFn, useCapture);\n return {\n destroy: function destroy() {\n element.removeEventListener(type, listenerFn, useCapture);\n }\n };\n }\n /**\n * Delegates event to a selector.\n *\n * @param {Element|String|Array} [elements]\n * @param {String} selector\n * @param {String} type\n * @param {Function} callback\n * @param {Boolean} useCapture\n * @return {Object}\n */\n\n\n function delegate(elements, selector, type, callback, useCapture) {\n // Handle the regular Element usage\n if (typeof elements.addEventListener === 'function') {\n return _delegate.apply(null, arguments);\n } // Handle Element-less usage, it defaults to global delegation\n\n\n if (typeof type === 'function') {\n // Use `document` as the first parameter, then apply arguments\n // This is a short way to .unshift `arguments` without running into deoptimizations\n return _delegate.bind(null, document).apply(null, arguments);\n } // Handle Selector-based usage\n\n\n if (typeof elements === 'string') {\n elements = document.querySelectorAll(elements);\n } // Handle Array-like based usage\n\n\n return Array.prototype.map.call(elements, function (element) {\n return _delegate(element, selector, type, callback, useCapture);\n });\n }\n /**\n * Finds closest match and invokes callback.\n *\n * @param {Element} element\n * @param {String} selector\n * @param {String} type\n * @param {Function} callback\n * @return {Function}\n */\n\n\n function listener(element, selector, type, callback) {\n return function (e) {\n e.delegateTarget = closest(e.target, selector);\n\n if (e.delegateTarget) {\n callback.call(element, e);\n }\n };\n }\n\n module.exports = delegate;\n /***/\n },\n /* 6 */\n\n /***/\n function (module, exports) {\n /**\n * Check if argument is a HTML element.\n *\n * @param {Object} value\n * @return {Boolean}\n */\n exports.node = function (value) {\n return value !== undefined && value instanceof HTMLElement && value.nodeType === 1;\n };\n /**\n * Check if argument is a list of HTML elements.\n *\n * @param {Object} value\n * @return {Boolean}\n */\n\n\n exports.nodeList = function (value) {\n var type = Object.prototype.toString.call(value);\n return value !== undefined && (type === '[object NodeList]' || type === '[object HTMLCollection]') && 'length' in value && (value.length === 0 || exports.node(value[0]));\n };\n /**\n * Check if argument is a string.\n *\n * @param {Object} value\n * @return {Boolean}\n */\n\n\n exports.string = function (value) {\n return typeof value === 'string' || value instanceof String;\n };\n /**\n * Check if argument is a function.\n *\n * @param {Object} value\n * @return {Boolean}\n */\n\n\n exports.fn = function (value) {\n var type = Object.prototype.toString.call(value);\n return type === '[object Function]';\n };\n /***/\n\n },\n /* 7 */\n\n /***/\n function (module, exports) {\n function select(element) {\n var selectedText;\n\n if (element.nodeName === 'SELECT') {\n element.focus();\n selectedText = element.value;\n } else if (element.nodeName === 'INPUT' || element.nodeName === 'TEXTAREA') {\n var isReadOnly = element.hasAttribute('readonly');\n\n if (!isReadOnly) {\n element.setAttribute('readonly', '');\n }\n\n element.select();\n element.setSelectionRange(0, element.value.length);\n\n if (!isReadOnly) {\n element.removeAttribute('readonly');\n }\n\n selectedText = element.value;\n } else {\n if (element.hasAttribute('contenteditable')) {\n element.focus();\n }\n\n var selection = window.getSelection();\n var range = document.createRange();\n range.selectNodeContents(element);\n selection.removeAllRanges();\n selection.addRange(range);\n selectedText = selection.toString();\n }\n\n return selectedText;\n }\n\n module.exports = select;\n /***/\n }])\n );\n});\n/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./../../webpack/buildin/module.js */ \"./node_modules/webpack/buildin/module.js\")(module)))\n\n//# sourceURL=webpack:///./node_modules/clipboard/dist/clipboard.js?"); + +/***/ }), + +/***/ "./node_modules/webpack/buildin/module.js": +/*!***********************************!*\ + !*** (webpack)/buildin/module.js ***! + \***********************************/ +/*! no static exports found */ +/*! ModuleConcatenation bailout: Module is not an ECMAScript module */ +/***/ (function(module, exports) { + +eval("module.exports = function (module) {\n if (!module.webpackPolyfill) {\n module.deprecate = function () {};\n\n module.paths = []; // module.parent = undefined by default\n\n if (!module.children) module.children = [];\n Object.defineProperty(module, \"loaded\", {\n enumerable: true,\n get: function get() {\n return module.l;\n }\n });\n Object.defineProperty(module, \"id\", {\n enumerable: true,\n get: function get() {\n return module.i;\n }\n });\n module.webpackPolyfill = 1;\n }\n\n return module;\n};\n\n//# sourceURL=webpack:///(webpack)/buildin/module.js?"); + +/***/ }), + +/***/ "./src/scripts/components/copy-to-clipboard.js": +/*!*****************************************************!*\ + !*** ./src/scripts/components/copy-to-clipboard.js ***! + \*****************************************************/ +/*! no exports provided */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var clipboard__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! clipboard */ \"./node_modules/clipboard/dist/clipboard.js\");\n/* harmony import */ var clipboard__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(clipboard__WEBPACK_IMPORTED_MODULE_0__);\n/**\n * Copy to clipboard functionality for code snippet examples\n */\n\nvar clipboard = new clipboard__WEBPACK_IMPORTED_MODULE_0___default.a('.pl-js-code-copy-btn');\nclipboard.on('success', function (e) {\n var copyButton = document.querySelectorAll('.pl-js-code-copy-btn');\n\n for (var i = 0; i < copyButton.length; i++) {\n copyButton[i].innerText = 'Copy';\n }\n\n e.trigger.textContent = 'Copied';\n});\n\n//# sourceURL=webpack:///./src/scripts/components/copy-to-clipboard.js?"); + +/***/ }), + +/***/ "./src/scripts/components/panels-util.js": +/*!***********************************************!*\ + !*** ./src/scripts/components/panels-util.js ***! + \***********************************************/ +/*! exports provided: panelsUtil */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"panelsUtil\", function() { return panelsUtil; });\n/**\n * Panels Util - for both styleguide and viewer\n */\nvar panelsUtil = {\n /**\n * Add click events to the template that was rendered\n * @param {String} the rendered template for the modal\n * @param {String} the pattern partial for the modal\n */\n addClickEvents: function addClickEvents(templateRendered, patternPartial) {\n var els = templateRendered.querySelectorAll('.pl-js-tab-link');\n\n for (var i = 0; i < els.length; ++i) {\n els[i].onclick = function (e) {\n e.preventDefault();\n var partial = this.getAttribute('data-patternpartial');\n var panelID = this.getAttribute('data-panelid');\n panelsUtil.show(partial, panelID);\n };\n }\n\n return templateRendered;\n },\n\n /**\n * Show a specific modal\n * @param {String} the pattern partial for the modal\n * @param {String} the ID of the panel to be shown\n */\n show: function show(patternPartial, panelID) {\n var activeTabClass = 'pl-is-active-tab'; // turn off all of the active tabs\n\n var allTabLinks = document.querySelectorAll(\".pl-js-tab-link\"); // hide all of the panels\n\n var allTabPanels = document.querySelectorAll(\".pl-js-tab-panel\"); // tabLink about to become active\n\n var activeTabLink = document.querySelector(\"#pl-\".concat(patternPartial, \"-\").concat(panelID, \"-tab\")); // tabPanelabout to become active\n\n var activeTabPanel = document.querySelector(\"#pl-\".concat(patternPartial, \"-\").concat(panelID, \"-panel\"));\n\n for (var i = 0; i < allTabLinks.length; ++i) {\n allTabLinks[i].classList.remove(activeTabClass);\n }\n\n for (var _i = 0; _i < allTabPanels.length; ++_i) {\n allTabPanels[_i].classList.remove(activeTabClass);\n }\n\n activeTabLink.classList.add(activeTabClass);\n activeTabPanel.classList.add(activeTabClass);\n }\n};\n\n//# sourceURL=webpack:///./src/scripts/components/panels-util.js?"); + +/***/ }), + +/***/ "./src/scripts/patternlab-pattern.js": +/*!*******************************************************!*\ + !*** ./src/scripts/patternlab-pattern.js + 1 modules ***! + \*******************************************************/ +/*! no exports provided */ +/*! ModuleConcatenation bailout: Cannot concat with ./src/scripts/components/copy-to-clipboard.js */ +/*! ModuleConcatenation bailout: Cannot concat with ./src/scripts/components/panels-util.js */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +eval("\n// EXTERNAL MODULE: ./src/scripts/utils/postmessage.js\nvar postmessage = __webpack_require__(\"./src/scripts/utils/postmessage.js\");\n\n// EXTERNAL MODULE: ./src/scripts/components/panels-util.js\nvar panels_util = __webpack_require__(\"./src/scripts/components/panels-util.js\");\n\n// EXTERNAL MODULE: ./src/scripts/components/copy-to-clipboard.js\nvar copy_to_clipboard = __webpack_require__(\"./src/scripts/components/copy-to-clipboard.js\");\n\n// CONCATENATED MODULE: ./src/scripts/components/modal-styleguide.js\n/**\n * \"Modal\" (aka Panel UI) for the Styleguide Layer - for both annotations and code/info\n */\n\n\nvar modalStyleguide = {\n // set up some defaults\n active: [],\n targetOrigin: window.location.protocol === 'file:' ? '*' : window.location.protocol + '//' + window.location.host,\n\n /**\n * initialize the modal window\n */\n onReady: function onReady() {\n // go through the panel toggles and add click event to the pattern extra toggle button\n var els = document.querySelectorAll('.pl-js-pattern-extra-toggle');\n\n for (var i = 0; i < els.length; ++i) {\n els[i].onclick = function (e) {\n var patternPartial = this.getAttribute('data-patternpartial');\n modalStyleguide.toggle(patternPartial);\n };\n }\n },\n\n /**\n * toggle the modal window open and closed based on clicking the pip\n * @param {String} the patternPartial that identifies what needs to be toggled\n */\n toggle: function toggle(patternPartial) {\n if (modalStyleguide.active[patternPartial] === undefined || !modalStyleguide.active[patternPartial]) {\n var el = document.getElementById('pl-pattern-data-' + patternPartial);\n modalStyleguide.collectAndSend(el, true, false);\n } else {\n modalStyleguide.highlightsHide();\n modalStyleguide.close(patternPartial);\n }\n },\n\n /**\n * open the modal window for a view-all entry\n * @param {String} the patternPartial that identifies what needs to be opened\n * @param {String} the content that should be inserted\n */\n open: function open(patternPartial, content) {\n // make sure templateRendered is modified to be an HTML element\n var div = document.createElement('div');\n div.innerHTML = content;\n content = document.createElement('div').appendChild(div).querySelector('div'); // add click events\n\n content = panels_util[\"panelsUtil\"].addClickEvents(content, patternPartial); // make sure the modal viewer and other options are off just in case\n\n modalStyleguide.close(patternPartial); // note it's turned on in the viewer\n\n modalStyleguide.active[patternPartial] = true; // make sure there's no content\n\n div = document.getElementById('pl-pattern-extra-' + patternPartial);\n\n if (div.childNodes.length > 0) {\n div.removeChild(div.childNodes[0]);\n } // add the content\n\n\n document.getElementById('pl-pattern-extra-' + patternPartial).appendChild(content); // show the modal\n\n document.getElementById('pl-pattern-extra-toggle-' + patternPartial).classList.add('pl-is-active');\n document.getElementById('pl-pattern-extra-' + patternPartial).classList.add('pl-is-active');\n },\n\n /**\n * close the modal window for a view-all entry\n * @param {String} the patternPartial that identifies what needs to be closed\n */\n close: function close(patternPartial) {\n // note that the modal viewer is no longer active\n modalStyleguide.active[patternPartial] = false; // hide the modal, look at info-panel.js\n\n document.getElementById('pl-pattern-extra-toggle-' + patternPartial).classList.remove('pl-is-active');\n document.getElementById('pl-pattern-extra-' + patternPartial).classList.remove('pl-is-active');\n },\n\n /**\n * get the data that needs to be send to the viewer for rendering\n * @param {Element} the identifier for the element that needs to be collected\n * @param {Boolean} if the refresh is of a view-all view and the content should be sent back\n * @param {Boolean} if the text in the dropdown should be switched\n */\n collectAndSend: function collectAndSend(el, iframePassback, switchText) {\n /**\n * Verify