diff --git a/config.toml b/config.toml index 5b22cb9..4060e92 100644 --- a/config.toml +++ b/config.toml @@ -4,5 +4,5 @@ baseURL = "/" theme = "inclusive-pattern-docs" [params] - description = "Documentation for the Inclusive Pattern Docs pattern library builder. This documentation is constructed using the builder itself." + description = "Documentation for the Infusion pattern library builder. This documentation is constructed using the builder itself." codePenUser = "Heydon" diff --git a/content/_index.md b/content/_index.md index 95b9566..a15e187 100644 --- a/content/_index.md +++ b/content/_index.md @@ -1,7 +1,8 @@ +++ date = "2017-06-26T18:27:58+01:00" -title = "The Name Of This Project/Site" - +title = "The Infusion Pattern Library Builder" +++ -This is your homepage. These are the contents of the `index.md` file, found in your `content` folder. +Welcome to **Infusion**: a pattern library builder with a focus on inclusive interface design. These are **Infusion's** docs, but they are also an example of a pattern library built with **Infusion**. + +To get started using **Infusion**, you'll first need to look at the {{% patternLink "Installation" %}} pattern. diff --git a/content/patterns/installation.md b/content/patterns/installation.md new file mode 100644 index 0000000..8263a62 --- /dev/null +++ b/content/patterns/installation.md @@ -0,0 +1,49 @@ ++++ +title = "Installation" ++++ + +**Infusion** is built using the static site engine, [Hugo](https://gohugo.io/), and NPM. The codebase is available to download on Github. Let's get set up step-by-step. + +## 1. Install Hugo + +First we need to install Hugo globally. + +### OSX users + +If you are a Mac user and have [Homebrew](https://brew.sh/) on your system, installing Hugo is simple: + +{{}}brew install hugo{{}} + +Alternatively, you can manually [install Hugo from a package](https://github.com/gohugoio/hugo/releases). You can verify the installation was successful by typing: + +{{}}hugo version{{}} + +### Windows users + +Installing on Windows is a bit more involved than on OSX. The authors of Hugo provide [a guide](https://gohugo.io/tutorials/installing-on-windows/) with instructions for technical and less technical users. + +## 2. Install Node & NPM + +It is entirely likely you already have Node and NPM installed on your system. If so, you can skip this step. Otherwise, [refer to NPM's own guide](https://docs.npmjs.com/getting-started/installing-node), which includes a video tutorial. + +## 3. Getting the files + +**Infusion** is hosted on Github. To start using it, you'll need to get the files from there. If you are comfortable with the command line, just fork the [github.com/heydon/inclusive-pattern-library](https://github.com/heydon/inclusive-pattern-library) repository, then do a `git clone` to your local system. Replace `[your username]` in the following: + +{{}}git clone https://github.com/[your username]/infusion-builder.git{{}} + +If the command line is not your thing, fork [github.com/heydon/inclusive-pattern-library](https://github.com/heydon/inclusive-pattern-library) in the browser and choose **Open in Desktop** from **Clone or download** (see figure 1, below). + +{{% figure caption="The Github web interface" %}} +![The open in desktop option, revealed when clicking clone or download](/images/open_in_desktop.png) +{{% /figure %}} + +{{% note %}} +If you do not have a version of the Github desktop client installed, follow the prompts after clicking **Open in Desktop**. +{{% /note %}} + +Once you have your local copy of the files, move to the root of that folder and in your terminal run an npm installation: + +{{}}npm install{{}} + +Now it's time to consult the {{% patternLink "Library setup" %}} pattern. diff --git a/content/patterns/pattern.md b/content/patterns/pattern.md deleted file mode 100644 index d845862..0000000 --- a/content/patterns/pattern.md +++ /dev/null @@ -1,6 +0,0 @@ -+++ -date = "2017-06-26T16:54:09+01:00" -title = "Pattern" -+++ - -Some content. diff --git a/content/patterns/project-setup.md b/content/patterns/project-setup.md new file mode 100644 index 0000000..28a71b4 --- /dev/null +++ b/content/patterns/project-setup.md @@ -0,0 +1,49 @@ ++++ +title = "Library setup" ++++ + +By now, you should have followed the {{% patternLink "Installation" %}} instructions. You should have Hugo and Node installed, and a local copy of a forked version of **Infusion**. You should also have run `npm install` in the root of that codebase. + +## "Cleaning" the content folder + +Before you can start documenting patterns, there are a few things still to do in order to get set up. At the moment, your version of **Infusion** is a facsimile of the original, containing all this documentation content. We want to delete that content and replace it with some starter content. There's a simple `clean` command for this. + +{{% warning %}} +If you are contributing to an existing **Infusion** library, do not run the following command. It will delete all of the patterns in that library. The `clean` command is just for libraries that you are starting from scratch. +{{% /warning %}} + +{{}}npm run clean{{}} + +This will leave your `content` folder with just an `_index.md` file and a `patterns` folder containing a single demonstration pattern file. Find out more about these in {{% patternLink "Library structure" %}}. + +## The `setup` command + +There's another command, `setup`, which you need to run to create an initial build and make sure git is aware of the `public` folder it generates. + +{{}}npm run setup{{}} + +## The config file + +You'll also want to name your library and configure one or two other things in the `config.toml` file that's found at the root of your project. Here's how that file looks: + +{{}} +languageCode = "en-us" +title = "Inclusive Pattern Docs" +baseURL = "/" +theme = "infusion" + +[params] + description = "Documentation for the Inclusive Pattern Docs pattern library builder. This documentation is constructed using the builder itself." + codePenUser = "Heydon" +{{}} + +* **title** — This is the library's name, like "Megacorp 5000 Pattern Library". You don't have to include the term "pattern library" if you don't want to. +* **theme** — This is the theme the library is using. Don't change this from "infusion". +* **description** — This is a short description of the library and comes under the logo. +* **codePenUser** — If you want to embed codePens in your pattern files, you need to supply a codePen username here. + +## Including a logo + +In the `static` folder, you'll find a `logo.png` file. Replace this file with your own company or project logo. Currently, only the PNG format is supported. + +Now that your logo's in place, everything should be ready. Where next? You can learn about {{% patternLink "Library structure" %}} to help you get writing, or find out how to serve the library locally and on Github Pages in {{% patternLink "Serving" %}}. diff --git a/content/patterns/serving.md b/content/patterns/serving.md new file mode 100644 index 0000000..1066a5d --- /dev/null +++ b/content/patterns/serving.md @@ -0,0 +1,23 @@ ++++ +title = "Serving" ++++ + +## Serving locally + +While you're creating content for your library, you'll probably want to see what the finished product looks like. Fortunately, **Infusion** is easy to serve locally using the `serve` command: + +{{}}npm run serve{{}} + +This will serve your working library on `localhost:1313`. Whenever you make changes to your library's files, the site will automatically rebuild. No need to refresh the web page! + +## Publishing on Github Pages + +The easiest way to host your pattern library so you have a link to share is to run the `host` command. This will build the library and push it to the local Github repository's `gh-pages` branch. + +{{}}npm run host{{}} + +You should now be able to find a "live" version of your library at `github.io/[your username]/[your library repo' name]`. + +{{% warning %}} +The `host` command *force* pushes the contents of the `public` folder to `gh-pages`. This is not in itself problematic since nothing is overwritten on the `master` branch. However, be aware that the command does not push your `master` branch changes to origin. You still have to commit and push any changes you've made locally. +{{% /warning %}} diff --git a/content/patterns/writing/_index.md b/content/patterns/writing/_index.md new file mode 100644 index 0000000..eb1689f --- /dev/null +++ b/content/patterns/writing/_index.md @@ -0,0 +1,3 @@ ++++ +title = "Writing" ++++ diff --git a/content/patterns/writing/library-structure.md b/content/patterns/writing/library-structure.md new file mode 100644 index 0000000..3ba5a85 --- /dev/null +++ b/content/patterns/writing/library-structure.md @@ -0,0 +1,48 @@ ++++ +title = "Library structure" ++++ + +Before you can set about documenting patterns, you need to know where everything goes. The simplest folder structure looks like this: + +``` +└── content + ├── _index.md + └── patterns + ├── name-of-my-pattern.md + └── name-of-my-other-pattern.md +``` + +* **_index.md** — This is the content for your home page +* **/patterns** — This is the folder where individual pattern files are kept + +## Subsections + +You may have noticed that this site's navigation is divided partly into subsections, with labels like "Writing". **Infusion** (or, rather, Hugo) allows you to create such subsections by simply nesting folders under the `/patterns` folder. In the following example, I have a subsection about different types of "popup" pattern. + +``` +└── content + ├── _index.md + └── patterns + ├── name-of-my-pattern.md + ├── name-of-my-other-pattern.md + └── popups + ├── _index.md + ├── popup-menu.md + └── tooltip.md +``` + +{{% note %}} +Note that subfolders like `/popups` must each have an `_index.md` file. This file doesn't need any content except the TOML metadata defining the title (name) of that subsection: + +``` ++++ +title = "Popups" ++++ +``` + +The `/patterns` folder itself does not need indexing explicitly in this way. + +**Infusion** does not currently support _sub_-subsections. +{{% /note %}} + +Now that you know where to put everything, it's time to talk about how to actually write individual patterns. Don't worry, it's pretty straightforward. Turn to {{% patternLink "Markdown & metadata" %}}. diff --git a/content/patterns/writing/markdown-and-metadata.md b/content/patterns/writing/markdown-and-metadata.md new file mode 100644 index 0000000..f985830 --- /dev/null +++ b/content/patterns/writing/markdown-and-metadata.md @@ -0,0 +1,31 @@ ++++ +title = "Markdown & metadata" +weight = 3 ++++ + +In **Infusion**, design patterns are documented using markdown. To create a new pattern file, just add a file with the `.md` extension to the `/patterns` folder. It's recommended you use "kebab case" to name the file ( words separated by hyphens). For example, a pattern with the title "Menu button" should probably have the filename `menu-button`. Then you get a nice clean URL: `your-company.com/patterns/menu-button`. + +If you're not familiar with writing markdown, there are a number of tutorials available. One of the best is [Mastering Markdown](https://guides.github.com/features/mastering-markdown/) offered by Github. There's also a [nice cheatsheet here](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet). + +## The metadata + +Like many static site generators, Hugo lets you add metadata to its markdown files. Hugo's brand of metadata is called TOML (although YAML is also accepted). The only thing you _have_ to put in the TOML is a `title` — like this: + +``` ++++ +title = "Menu button" ++++ +``` + +### Tags + +If you like, you can also tag the pattern so that it turns up in lists of similar content. You add tags in an array format. Note that all the TOML data is found at the top of the markdown file, between the `+++` lines. + +``` ++++ +title = "Menu button" +tags = ["interactive", "popup", "javascript"] ++++ +``` + +This will create links to tag pages listing content tagged with the same terms. diff --git a/content/patterns/writing/notes-and-warnings.md b/content/patterns/writing/notes-and-warnings.md new file mode 100644 index 0000000..45a7337 --- /dev/null +++ b/content/patterns/writing/notes-and-warnings.md @@ -0,0 +1,37 @@ ++++ +title = "Notes & warnings" ++++ + +**Infusion** acknowledges that simple markdown is limiting when it comes to writing compelling documentation, so it provides a number of "shortcodes". Shortcodes offer a simple syntax for including rich content. For example, **Infusion** provides shortcodes for including notes and warnings. + +## Notes + +You may wish to pick out some content in your pattern's documentation as a note — an aside to the main thrust of the pattern's description. This is possible using the following syntax: + +{{}} +{{% note %}} +This is a note! It's something the reader may like to know about but is supplementary to the main content. Use notes when something may be interesting but not critical. +{{% /note %}} +{{}} + +Notes render like this: + +{{% note %}} +This is a note! It's something the reader may like to know about but is supplementary to the main content. Use notes when something may be interesting but not critical. +{{% /note %}} + +## Warnings + +Warnings are like notes, but with more urgency. + +{{}} +{{% warning %}} +This is a warning! It's about something the reader should be careful to do or to avoid doing. Use warnings when something could go wrong. +{{% /warning %}} +{{}} + +Warning render like this: + +{{% warning %}} +This is a warning! It's about something the reader should be careful to do or to avoid doing. Use warnings when something could go wrong. +{{% /warning %}} diff --git a/package.json b/package.json index 7740c4d..5c61224 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ "clean": "rm -rf content && mkdir content && mkdir content/patterns && hugo new patterns/pattern.md && hugo new _index.md", "build": "hugo", "setup": "hugo && git add public", - "publish": "hugo && git push origin `git subtree split --prefix public master`:gh-pages --force" + "host": "hugo && git push origin `git subtree split --prefix public master`:gh-pages --force" }, "repository": { "type": "git", diff --git a/static/images/open_in_desktop.png b/static/images/open_in_desktop.png new file mode 100644 index 0000000..7255ad5 Binary files /dev/null and b/static/images/open_in_desktop.png differ diff --git a/themes/inclusive-pattern-docs/layouts/shortcodes/cmd.html b/themes/inclusive-pattern-docs/layouts/shortcodes/cmd.html new file mode 100644 index 0000000..b92ce12 --- /dev/null +++ b/themes/inclusive-pattern-docs/layouts/shortcodes/cmd.html @@ -0,0 +1 @@ +
{{ .Inner }}
diff --git a/themes/inclusive-pattern-docs/static/css/styles.css b/themes/inclusive-pattern-docs/static/css/styles.css index 9d940e9..b274e5c 100644 --- a/themes/inclusive-pattern-docs/static/css/styles.css +++ b/themes/inclusive-pattern-docs/static/css/styles.css @@ -1,16 +1,3 @@ - -/* - -Colors: -Blue color = #38608F -Dark blue color = #153B62 -Gold color = #FCB316 -Grey color = #707174 -Red color = #C83737 -Green color = #217844 - -*/ - *, *::before, *::after { font-family: inherit; color: inherit; @@ -59,7 +46,7 @@ img { :focus:not([tabindex="-1"]), [data-expands]:focus svg, .patterns a:focus span { - outline: 3px solid #FCB316; + outline: 3px solid #999; outline-offset: 2px; } @@ -100,9 +87,40 @@ kbd { vertical-align: 0.33em; } +pre { + overflow-x: auto; + padding: 1.5rem; + border: 1px solid; +} + code { font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; - font-size: 0.85rem; + font-size: 0.85em; +} + +.cmd { + padding: 0.75rem; + background: #111; +} + +.cmd code { + color: #fff; + white-space: nowrap; +} + +.cmd code::before { + content: '$'; + font-weight: bold; + padding-right: 0.25em; +} + +.cmd code::after { + content: ''; + display: inline-block; + width: 0.75em; + height: 1.25em; + background: #fff; + margin-left: 0.25em; } /* Lists */ @@ -196,6 +214,10 @@ th:empty { padding: 2.25rem; } +[role="contentinfo"] { + font-size: 0.85rem; +} + /* Patterns navigation */ .patterns { @@ -360,6 +382,7 @@ figcaption { main { display: block; counter-reset: fig; + min-height: 100vh; } figcaption::before { @@ -371,7 +394,6 @@ figcaption::before { /* Code blocks */ pre[class*=language-] { - padding: 0 !important; background: none; margin-top: 2.25rem; margin-bottom: 0; @@ -438,18 +460,19 @@ pre[class*=language-] code * { } .line-numbers code { - padding-left: 1.5rem; + padding-left: 2.25rem; margin-top: -1rem; + overflow-x: auto; + overflow-y: hidden; } .line-numbers { - padding-bottom: 2.25rem !important; + padding: 1.5rem !important; } .line-numbers .line-numbers-rows { margin-left: 2.25rem; top: 1.25rem; - border-right-style: dashed color: #111; } @@ -562,3 +585,38 @@ a .bookmark { [id^="demo-"] * { all: initial; } + +@media (max-width: 45em) { + + [role="banner"] { + position: static; + width: auto; + height: auto; + } + + .intro { + text-align: center; + } + + .intro-and-nav > div { + padding: 1.5rem; + } + + .logo img { + max-width: 15rem; + } + + .main-and-footer { + margin: 0; + } + + .patterns li { + margin: 0; + padding: 0.75rem 0; + font-size: 1rem; + } + + .patterns li + li { + border-top: 1px solid; + } +} diff --git a/themes/inclusive-pattern-docs/static/js/shadyDOM.min.js b/themes/inclusive-pattern-docs/static/js/shadyDOM.min.js deleted file mode 100644 index 6a6e9ea..0000000 --- a/themes/inclusive-pattern-docs/static/js/shadyDOM.min.js +++ /dev/null @@ -1,68 +0,0 @@ -(function(){ -/* - -Copyright (c) 2016 The Polymer Project Authors. All rights reserved. -This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt -The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt -The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt -Code distributed by Google as part of the polymer project is also -subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt -*/ -'use strict';function n(a,b){return{index:a,i:[],m:b}} -function aa(a,b,c,d){var e=0,h=0,g=0,f=0,k=Math.min(b-e,d-h);if(0==e&&0==h)a:{for(g=0;g]/g;function ja(a){switch(a){case "&":return"&";case "<":return"<";case ">":return">";case '"':return""";case "\u00a0":return" "}}function ka(a){for(var b={},c=0;c";break a;case Node.TEXT_NODE:f=f.data;f=k&&ma[k.localName]?f:f.replace(ia,ja);break a;case Node.COMMENT_NODE:f="\x3c!--"+f.data+"--\x3e";break a;default:throw window.console.error(f), -Error("not implemented");}}c+=f}return c};var I={},J=document.createTreeWalker(document,NodeFilter.SHOW_ALL,null,!1),K=document.createTreeWalker(document,NodeFilter.SHOW_ELEMENT,null,!1);function na(a){var b=[];J.currentNode=a;for(a=J.firstChild();a;)b.push(a),a=J.nextSibling();return b}I.parentNode=function(a){J.currentNode=a;return J.parentNode()};I.firstChild=function(a){J.currentNode=a;return J.firstChild()};I.lastChild=function(a){J.currentNode=a;return J.lastChild()};I.previousSibling=function(a){J.currentNode=a;return J.previousSibling()}; -I.nextSibling=function(a){J.currentNode=a;return J.nextSibling()};I.childNodes=na;I.parentElement=function(a){K.currentNode=a;return K.parentNode()};I.firstElementChild=function(a){K.currentNode=a;return K.firstChild()};I.lastElementChild=function(a){K.currentNode=a;return K.lastChild()};I.previousElementSibling=function(a){K.currentNode=a;return K.previousSibling()};I.nextElementSibling=function(a){K.currentNode=a;return K.nextSibling()}; -I.children=function(a){var b=[];K.currentNode=a;for(a=K.firstChild();a;)b.push(a),a=K.nextSibling();return b};I.innerHTML=function(a){return H(a,function(a){return na(a)})};I.textContent=function(a){if(a.nodeType!==Node.ELEMENT_NODE)return a.nodeValue;a=document.createTreeWalker(a,NodeFilter.SHOW_TEXT,null,!1);for(var b="",c;c=a.nextNode();)b+=c.nodeValue;return b};var M=Object.getOwnPropertyDescriptor(Element.prototype,"innerHTML")||Object.getOwnPropertyDescriptor(HTMLElement.prototype,"innerHTML"),N=document.implementation.createHTMLDocument("inert").createElement("div"),O=Object.getOwnPropertyDescriptor(Document.prototype,"activeElement"),oa={parentElement:{get:function(){var a=this.__shady&&this.__shady.parentNode;a&&a.nodeType!==Node.ELEMENT_NODE&&(a=null);return void 0!==a?a:I.parentElement(this)},configurable:!0},parentNode:{get:function(){var a=this.__shady&& -this.__shady.parentNode;return void 0!==a?a:I.parentNode(this)},configurable:!0},nextSibling:{get:function(){var a=this.__shady&&this.__shady.nextSibling;return void 0!==a?a:I.nextSibling(this)},configurable:!0},previousSibling:{get:function(){var a=this.__shady&&this.__shady.previousSibling;return void 0!==a?a:I.previousSibling(this)},configurable:!0},className:{get:function(){return this.getAttribute("class")||""},set:function(a){this.setAttribute("class",a)},configurable:!0},nextElementSibling:{get:function(){if(this.__shady&& -void 0!==this.__shady.nextSibling){for(var a=this.nextSibling;a&&a.nodeType!==Node.ELEMENT_NODE;)a=a.nextSibling;return a}return I.nextElementSibling(this)},configurable:!0},previousElementSibling:{get:function(){if(this.__shady&&void 0!==this.__shady.previousSibling){for(var a=this.previousSibling;a&&a.nodeType!==Node.ELEMENT_NODE;)a=a.previousSibling;return a}return I.previousElementSibling(this)},configurable:!0}},P={childNodes:{get:function(){var a;if(this.__shady&&void 0!==this.__shady.firstChild){if(!this.__shady.childNodes){this.__shady.childNodes= -[];for(var b=this.firstChild;b;b=b.nextSibling)this.__shady.childNodes.push(b)}a=this.__shady.childNodes}else a=I.childNodes(this);a.item=function(b){return a[b]};return a},configurable:!0},childElementCount:{get:function(){return this.children.length},configurable:!0},firstChild:{get:function(){var a=this.__shady&&this.__shady.firstChild;return void 0!==a?a:I.firstChild(this)},configurable:!0},lastChild:{get:function(){var a=this.__shady&&this.__shady.lastChild;return void 0!==a?a:I.lastChild(this)}, -configurable:!0},textContent:{get:function(){if(this.__shady&&void 0!==this.__shady.firstChild){for(var a=[],b=0,c=this.childNodes,d;d=c[b];b++)d.nodeType!==Node.COMMENT_NODE&&a.push(d.textContent);return a.join("")}return I.textContent(this)},set:function(a){if(this.nodeType!==Node.ELEMENT_NODE)this.nodeValue=a;else{for(;this.firstChild;)this.removeChild(this.firstChild);this.appendChild(document.createTextNode(a))}},configurable:!0},firstElementChild:{get:function(){if(this.__shady&&void 0!==this.__shady.firstChild){for(var a= -this.firstChild;a&&a.nodeType!==Node.ELEMENT_NODE;)a=a.nextSibling;return a}return I.firstElementChild(this)},configurable:!0},lastElementChild:{get:function(){if(this.__shady&&void 0!==this.__shady.lastChild){for(var a=this.lastChild;a&&a.nodeType!==Node.ELEMENT_NODE;)a=a.previousSibling;return a}return I.lastElementChild(this)},configurable:!0},children:{get:function(){var a;this.__shady&&void 0!==this.__shady.firstChild?a=Array.prototype.filter.call(this.childNodes,function(a){return a.nodeType=== -Node.ELEMENT_NODE}):a=I.children(this);a.item=function(b){return a[b]};return a},configurable:!0},innerHTML:{get:function(){var a="template"===this.localName?this.content:this;return this.__shady&&void 0!==this.__shady.firstChild?H(a):I.innerHTML(a)},set:function(a){for(var b="template"===this.localName?this.content:this;b.firstChild;)b.removeChild(b.firstChild);for(M&&M.set?M.set.call(N,a):N.innerHTML=a;N.firstChild;)b.appendChild(N.firstChild)},configurable:!0}},pa={shadowRoot:{get:function(){return this.__shady&& -this.__shady.root||null},set:function(a){this.__shady=this.__shady||{};this.__shady.root=a},configurable:!0}},Q={activeElement:{get:function(){var a;a=O&&O.get?O.get.call(document):p.g?void 0:document.activeElement;if(a&&a.nodeType){var b=!!u(this);if(this===document||b&&this.host!==a&&this.host.contains(a)){for(b=v(a);b&&b!==this;)a=b.host,b=v(a);a=this===document?b?null:a:b===this?a:null}else a=null}else a=null;return a},set:function(){},configurable:!0}}; -function R(a,b,c){for(var d in b){var e=Object.getOwnPropertyDescriptor(a,d);e&&e.configurable||!e&&c?Object.defineProperty(a,d,b[d]):c&&console.warn("Could not define",d,"on",a)}}function S(a){R(a,oa);R(a,P);R(a,Q)}var qa=p.g?function(){}:function(a){a.__shady&&a.__shady.N||(a.__shady=a.__shady||{},a.__shady.N=!0,R(a,oa,!0))},ra=p.g?function(){}:function(a){a.__shady&&a.__shady.L||(a.__shady=a.__shady||{},a.__shady.L=!0,R(a,P,!0),R(a,pa,!0))};function sa(a,b,c){qa(a);c=c||null;a.__shady=a.__shady||{};b.__shady=b.__shady||{};c&&(c.__shady=c.__shady||{});a.__shady.previousSibling=c?c.__shady.previousSibling:b.lastChild;var d=a.__shady.previousSibling;d&&d.__shady&&(d.__shady.nextSibling=a);(d=a.__shady.nextSibling=c)&&d.__shady&&(d.__shady.previousSibling=a);a.__shady.parentNode=b;c?c===b.__shady.firstChild&&(b.__shady.firstChild=a):(b.__shady.lastChild=a,b.__shady.firstChild||(b.__shady.firstChild=a));b.__shady.childNodes=null} -function T(a){if(!a.__shady||void 0===a.__shady.firstChild){a.__shady=a.__shady||{};a.__shady.firstChild=I.firstChild(a);a.__shady.lastChild=I.lastChild(a);ra(a);for(var b=a.__shady.childNodes=I.childNodes(a),c=0,d;c":return">";case '"':return""";case "\u00a0":return" "}}function Fb(a){for(var b={},c=0;c";break a;case Node.TEXT_NODE:h=h.data;h=l&&jd[l.localName]?h:h.replace(kd,Eb);break a;case Node.COMMENT_NODE:h="\x3c!--"+h.data+"--\x3e";break a;default:throw window.console.error(h),Error("not implemented");}}c+=h}return c}function M(a){A.currentNode=a;return A.parentNode()}function za(a){A.currentNode= +a;return A.firstChild()}function Aa(a){A.currentNode=a;return A.lastChild()}function Gb(a){A.currentNode=a;return A.previousSibling()}function Hb(a){A.currentNode=a;return A.nextSibling()}function W(a){var b=[];A.currentNode=a;for(a=A.firstChild();a;)b.push(a),a=A.nextSibling();return b}function Ib(a){B.currentNode=a;return B.parentNode()}function Jb(a){B.currentNode=a;return B.firstChild()}function Kb(a){B.currentNode=a;return B.lastChild()}function Lb(a){B.currentNode=a;return B.previousSibling()} +function Mb(a){B.currentNode=a;return B.nextSibling()}function Nb(a){var b=[];B.currentNode=a;for(a=B.firstChild();a;)b.push(a),a=B.nextSibling();return b}function Ob(a){return Ga(a,function(a){return W(a)})}function Pb(a){if(a.nodeType!==Node.ELEMENT_NODE)return a.nodeValue;a=document.createTreeWalker(a,NodeFilter.SHOW_TEXT,null,!1);for(var b="",c;c=a.nextNode();)b+=c.nodeValue;return b}function I(a,b,c){for(var d in b){var e=Object.getOwnPropertyDescriptor(a,d);e&&e.configurable||!e&&c?Object.defineProperty(a, +d,b[d]):c&&console.warn("Could not define",d,"on",a)}}function N(a){I(a,Qb);I(a,Ha);I(a,Ia)}function Rb(a,b,c){Ab(a);c=c||null;a.__shady=a.__shady||{};b.__shady=b.__shady||{};c&&(c.__shady=c.__shady||{});a.__shady.previousSibling=c?c.__shady.previousSibling:b.lastChild;var d=a.__shady.previousSibling;d&&d.__shady&&(d.__shady.nextSibling=a);(d=a.__shady.nextSibling=c)&&d.__shady&&(d.__shady.previousSibling=a);a.__shady.parentNode=b;c?c===b.__shady.firstChild&&(b.__shady.firstChild=a):(b.__shady.lastChild= +a,b.__shady.firstChild||(b.__shady.firstChild=a));b.__shady.childNodes=null}function Sb(a){var b=a.__shady&&a.__shady.parentNode,c,d=R(a);if(b||d){c=Tb(a);if(b){a.__shady=a.__shady||{};b.__shady=b.__shady||{};a===b.__shady.firstChild&&(b.__shady.firstChild=a.__shady.nextSibling);a===b.__shady.lastChild&&(b.__shady.lastChild=a.__shady.previousSibling);var e=a.__shady.previousSibling,f=a.__shady.nextSibling;e&&(e.__shady=e.__shady||{},e.__shady.nextSibling=f);f&&(f.__shady=f.__shady||{},f.__shady.previousSibling= +e);a.__shady.parentNode=a.__shady.previousSibling=a.__shady.nextSibling=void 0;void 0!==b.__shady.childNodes&&(b.__shady.childNodes=null)}if(e=d){for(var g,e=d.la(),f=0;f]/g,id=Fb("area base br col command embed hr img input keygen link meta param source track wbr".split(" ")),jd=Fb("style script xmp iframe noembed noframes plaintext noscript".split(" ")),A=document.createTreeWalker(document, +NodeFilter.SHOW_ALL,null,!1),B=document.createTreeWalker(document,NodeFilter.SHOW_ELEMENT,null,!1),Bd=Object.freeze({parentNode:M,firstChild:za,lastChild:Aa,previousSibling:Gb,nextSibling:Hb,childNodes:W,parentElement:Ib,firstElementChild:Jb,lastElementChild:Kb,previousElementSibling:Lb,nextElementSibling:Mb,children:Nb,innerHTML:Ob,textContent:Pb}),$a=Object.getOwnPropertyDescriptor(Element.prototype,"innerHTML")||Object.getOwnPropertyDescriptor(HTMLElement.prototype,"innerHTML"),ka=document.implementation.createHTMLDocument("inert").createElement("div"), +ab=Object.getOwnPropertyDescriptor(Document.prototype,"activeElement"),Qb={parentElement:{get:function(){var a=this.__shady&&this.__shady.parentNode;a&&a.nodeType!==Node.ELEMENT_NODE&&(a=null);return void 0!==a?a:Ib(this)},configurable:!0},parentNode:{get:function(){var a=this.__shady&&this.__shady.parentNode;return void 0!==a?a:M(this)},configurable:!0},nextSibling:{get:function(){var a=this.__shady&&this.__shady.nextSibling;return void 0!==a?a:Hb(this)},configurable:!0},previousSibling:{get:function(){var a= +this.__shady&&this.__shady.previousSibling;return void 0!==a?a:Gb(this)},configurable:!0},className:{get:function(){return this.getAttribute("class")||""},set:function(a){this.setAttribute("class",a)},configurable:!0},nextElementSibling:{get:function(){if(this.__shady&&void 0!==this.__shady.nextSibling){for(var a=this.nextSibling;a&&a.nodeType!==Node.ELEMENT_NODE;)a=a.nextSibling;return a}return Mb(this)},configurable:!0},previousElementSibling:{get:function(){if(this.__shady&&void 0!==this.__shady.previousSibling){for(var a= +this.previousSibling;a&&a.nodeType!==Node.ELEMENT_NODE;)a=a.previousSibling;return a}return Lb(this)},configurable:!0}},Ha={childNodes:{get:function(){var a;if(this.__shady&&void 0!==this.__shady.firstChild){if(!this.__shady.childNodes){this.__shady.childNodes=[];for(var b=this.firstChild;b;b=b.nextSibling)this.__shady.childNodes.push(b)}a=this.__shady.childNodes}else a=W(this);a.item=function(b){return a[b]};return a},configurable:!0},childElementCount:{get:function(){return this.children.length}, +configurable:!0},firstChild:{get:function(){var a=this.__shady&&this.__shady.firstChild;return void 0!==a?a:za(this)},configurable:!0},lastChild:{get:function(){var a=this.__shady&&this.__shady.lastChild;return void 0!==a?a:Aa(this)},configurable:!0},textContent:{get:function(){if(this.__shady&&void 0!==this.__shady.firstChild){for(var a=[],b=0,c=this.childNodes,d;d=c[b];b++)d.nodeType!==Node.COMMENT_NODE&&a.push(d.textContent);return a.join("")}return Pb(this)},set:function(a){if(this.nodeType!== +Node.ELEMENT_NODE)this.nodeValue=a;else{for(;this.firstChild;)this.removeChild(this.firstChild);this.appendChild(document.createTextNode(a))}},configurable:!0},firstElementChild:{get:function(){if(this.__shady&&void 0!==this.__shady.firstChild){for(var a=this.firstChild;a&&a.nodeType!==Node.ELEMENT_NODE;)a=a.nextSibling;return a}return Jb(this)},configurable:!0},lastElementChild:{get:function(){if(this.__shady&&void 0!==this.__shady.lastChild){for(var a=this.lastChild;a&&a.nodeType!==Node.ELEMENT_NODE;)a= +a.previousSibling;return a}return Kb(this)},configurable:!0},children:{get:function(){var a;this.__shady&&void 0!==this.__shady.firstChild?a=Array.prototype.filter.call(this.childNodes,function(a){return a.nodeType===Node.ELEMENT_NODE}):a=Nb(this);a.item=function(b){return a[b]};return a},configurable:!0},innerHTML:{get:function(){var a="template"===this.localName?this.content:this;return this.__shady&&void 0!==this.__shady.firstChild?Ga(a):Ob(a)},set:function(a){for(var b="template"===this.localName? +this.content:this;b.firstChild;)b.removeChild(b.firstChild);for($a&&$a.set?$a.set.call(ka,a):ka.innerHTML=a;ka.firstChild;)b.appendChild(ka.firstChild)},configurable:!0}},Ec={shadowRoot:{get:function(){return this.__shady&&this.__shady.root||null},set:function(a){this.__shady=this.__shady||{};this.__shady.root=a},configurable:!0}},Ia={activeElement:{get:function(){var a;a=ab&&ab.get?ab.get.call(document):C.P?void 0:document.activeElement;if(a&&a.nodeType){var b=!!E(this);if(this===document||b&&this.host!== +a&&this.host.contains(a)){for(b=R(a);b&&b!==this;)a=b.host,b=R(a);a=this===document?b?null:a:b===this?a:null}else a=null}else a=null;return a},set:function(){},configurable:!0}},Ab=C.P?function(){}:function(a){a.__shady&&a.__shady.Oa||(a.__shady=a.__shady||{},a.__shady.Oa=!0,I(a,Qb,!0))},zb=C.P?function(){}:function(a){a.__shady&&a.__shady.Ma||(a.__shady=a.__shady||{},a.__shady.Ma=!0,I(a,Ha,!0),I(a,Ec,!0))},la=null,Cd={blur:!0,focus:!0,focusin:!0,focusout:!0,click:!0,dblclick:!0,mousedown:!0,mouseenter:!0, +mouseleave:!0,mousemove:!0,mouseout:!0,mouseover:!0,mouseup:!0,wheel:!0,beforeinput:!0,input:!0,keydown:!0,keyup:!0,compositionstart:!0,compositionupdate:!0,compositionend:!0,touchstart:!0,touchend:!0,touchmove:!0,touchcancel:!0,pointerover:!0,pointerenter:!0,pointerdown:!0,pointermove:!0,pointerup:!0,pointercancel:!0,pointerout:!0,pointerleave:!0,gotpointercapture:!0,lostpointercapture:!0,dragstart:!0,drag:!0,dragenter:!0,dragleave:!0,dragover:!0,drop:!0,dragend:!0,DOMActivate:!0,DOMFocusIn:!0,DOMFocusOut:!0, +keypress:!0},mc={get composed(){!1!==this.isTrusted&&void 0===this.ha&&(this.ha=Cd[this.type]);return this.ha||!1},composedPath:function(){this.ta||(this.ta=Oa(this.__target,this.composed));return this.ta},get target(){return cc(this.currentTarget,this.composedPath())},get relatedTarget(){if(!this.ua)return null;this.va||(this.va=Oa(this.ua,!0));return cc(this.currentTarget,this.va)},stopPropagation:function(){Event.prototype.stopPropagation.call(this);this.ia=!0},stopImmediatePropagation:function(){Event.prototype.stopImmediatePropagation.call(this); +this.ia=this.La=!0}},Qa={focus:!0,blur:!0},Dd=Pa(window.Event),Ed=Pa(window.CustomEvent),Fd=Pa(window.MouseEvent),Gd="function"===typeof Event?Event:function(a,b){b=b||{};var c=document.createEvent("Event");c.initEvent(a,!!b.bubbles,!!b.cancelable);return c};z.prototype.Wa=function(){return this.root.querySelectorAll("slot")};z.prototype.pa=function(a){return a.localName&&"slot"==a.localName};z.prototype.na=function(){return this.root.oa()?this.g(this.c()):[]};z.prototype.c=function(){for(var a=[], +b=0,c=this.root.host.firstChild;c;c=c.nextSibling)a[b++]=c;return a};z.prototype.g=function(a){for(var b=[],c=this.root.la(),d=0,e=c.length,f;d "+b})));a=a.replace(Sd,function(a,b,c){return'[dir="'+c+'"] '+b+", "+b+'[dir="'+c+'"]'});return{value:a,Ua:b,stop:f}};q.prototype.u=function(a,b){a=a.split(Gc);a[0]+=b;return a.join(Gc)};q.prototype.U=function(a,b){var c=a.match(Hc); +return(c=c&&c[2].trim()||"")?c[0].match(Ic)?a.replace(Hc,function(a,c,f){return b+f}):c.split(Ic)[0]===b?c:Td:a.replace(bb,b)};q.prototype.N=function(a){a.selector=a.parsedSelector;this.v(a);this.j(a,this.H)};q.prototype.v=function(a){a.selector===Ud&&(a.selector="html")};q.prototype.H=function(a){return a.match(cb)?this.g(a,Jc):this.u(a.trim(),Jc)};hb.Object.defineProperties(q.prototype,{c:{configurable:!0,enumerable:!0,get:function(){return"style-scope"}}});var Od=/:(nth[-\w]+)\(([^)]+)\)/,Jc=":not(.style-scope)", +Fc=",",Qd=/(^|[\s>+~]+)((?:\[.+?\]|[^\s>+~=\[])+)/g,Ic=/[[.:#*]/,bb=":host",Ud=":root",cb="::slotted",Pd=new RegExp("^("+cb+")"),Hc=/(:host)(?:\(((?:\([^)(]*\)|[^)(]*)+?)\))/,Rd=/(?:::slotted)(?:\(((?:\([^)(]*\)|[^)(]*)+?)\))/,Sd=/(.*):dir\((?:(ltr|rtl))\)/,Nd=".",Gc=":",Md="class",Td="should_not_match",t=new q;r.get=function(a){return a?a.__styleInfo:null};r.set=function(a,b){return a.__styleInfo=b};r.prototype.c=function(){return this.D};r.prototype._getStyleRules=r.prototype.c;var Kc=function(a){return a.matches|| +a.matchesSelector||a.mozMatchesSelector||a.msMatchesSelector||a.oMatchesSelector||a.webkitMatchesSelector}(window.Element.prototype),Vd=navigator.userAgent.match("Trident");p.prototype.O=function(a){var b=this,c={},d=[],e=0;U(a,function(a){b.c(a);a.index=e++;b.N(a.m.cssText,c)},function(a){d.push(a)});a.b=d;a=[];for(var f in c)a.push(f);return a};p.prototype.c=function(a){if(!a.m){var b={},c={};this.b(a,c)&&(b.C=c,a.rules=null);b.cssText=this.M(a);a.m=b}};p.prototype.b=function(a,b){var c=a.m;if(c){if(c.C)return Object.assign(b, +c.C),!0}else{for(var c=a.parsedCssText,d;a=na.exec(c);){d=(a[2]||a[3]).trim();if("inherit"!==d||"unset"!==d)b[a[1].trim()]=d;d=!0}return d}};p.prototype.M=function(a){return this.U(a.parsedCssText)};p.prototype.U=function(a){return a.replace(Ld,"").replace(na,"")};p.prototype.N=function(a,b){for(var c;c=Jd.exec(a);){var d=c[1];":"!==c[2]&&(b[d]=!0)}};p.prototype.da=function(a){for(var b=Object.getOwnPropertyNames(a),c=0,d;c *"===f||"html"===f,h=0===f.indexOf(":host")&&!g;"shady"===c&&(g=f===e+" > *."+e||-1!==f.indexOf("html"),h=!g&&0===f.indexOf(e));"shadow"===c&&(g=":host > *"===f||"html"===f,h=h&&!g);if(g||h)c=e,h&&(u&&!b.w&&(b.w=t.l(b,t.g,t.h(a),e)),c=b.w||e),d({fb:c,Za:h,mb:g})}}; +p.prototype.ba=function(a,b){var c={},d={},e=this,f=b&&b.__cssBuild;U(b,function(b){e.fa(a,b,f,function(f){Kc.call(a.lb||a,f.fb)&&(f.Za?e.b(b,c):e.b(b,d))})},null,!0);return{cb:d,Ya:c}};p.prototype.ea=function(a,b,c){var d=this,e=P(a),f=t.f(e.is,e.T),g=new RegExp("(?:^|[^.#[:])"+(a.extends?"\\"+f.slice(0,-1)+"\\]":f)+"($|[.:[\\s>+~])"),e=r.get(a).D,h=this.h(e,c);return t.b(a,e,function(a){d.H(a,b);u||vc(a)||!a.cssText||(d.G(a,h),d.l(a,g,f,c))})};p.prototype.h=function(a,b){a=a.b;var c={};if(!u&&a)for(var d= +0,e=a[d];d=f._useCount&&f.parentNode&&f.parentNode.removeChild(f));u?e.a?(e.a.textContent=b,d=e.a):b&&(d=Ua(b,c,a.shadowRoot,e.b)):d?d.parentNode||(Vd&&-1this.c&&e.shift();this.cache[a]=e};ba.prototype.fetch=function(a,b,c){if(a=this.cache[a])for(var d=a.length-1;0<=d;d--){var e=a[d];if(this.a(e,b,c))return e}};if(!u){var Lc=new MutationObserver(yc), +Mc=function(a){Lc.observe(a,{childList:!0,subtree:!0})};if(window.customElements&&!window.customElements.polyfillWrapFlushCallback)Mc(document);else{var eb=function(){Mc(document.body)};window.HTMLImports?window.HTMLImports.whenReady(eb):requestAnimationFrame(function(){if("loading"===document.readyState){var a=function(){eb();document.removeEventListener("readystatechange",a)};document.addEventListener("readystatechange",a)}else eb()})}jb=function(){yc(Lc.takeRecords())}}var ja={},zd=Promise.resolve(), +Va=null,Ac=window.HTMLImports&&window.HTMLImports.whenReady||null,Wa,qa=null,aa=null;D.prototype.ya=function(){!this.enqueued&&aa&&(this.enqueued=!0,ib(aa))};D.prototype.b=function(a){a.__seenByShadyCSS||(a.__seenByShadyCSS=!0,this.customStyles.push(a),this.ya())};D.prototype.a=function(a){return a.__shadyCSSCachedStyle?a.__shadyCSSCachedStyle:a.getStyle?a.getStyle():a};D.prototype.c=function(){for(var a=this.customStyles,b=0;b