npm - @epa-wg/custom-element-dist - Versions diffs - 0.0.32 → 0.0.34 - Mend

@epa-wg/custom-element-dist 0.0.32 → 0.0.34

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (300) hide show

package/src/material/components/badge.html ADDED Viewed

@@ -0,0 +1,239 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml">
+<head>
+    <meta charset="UTF-8">
+    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
+    <title>Components - custom-element - Material Design</title>
+    <link href="../../custom-element/demo/wc-square.svg" rel="icon"/>
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
+    <link crossorigin="anonymous" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
+          integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" rel="stylesheet"/>
+    <script type="importmap">
+        {
+          "imports": {
+            "@epa-wg/": "../../"
+          }
+        }
+    </script>
+    <script src="../../custom-element/module-url.js" type="module"></script>
+    <script src="../../custom-element/custom-element.js" type="module"></script>
+    <style>
+        @import "../angular.css";
+        @import "../material.css";
+        @import "../theme/semantic.css";
+        @import "../demo.css";
+        main{
+            display: flex; flex-wrap: wrap;
+            gap: 3rem;
+            padding: 5rem;
+            &>p{ min-width: 90%; }
+            html-demo-element
+            {   overflow: visible;
+                [slot="legend"]{ border-radius: 1rem 1rem 0 0; }
+                [slot="description"]{ padding: 0 1rem 1rem 1rem; dd{ padding: 0 !important;margin: 0; }}
+                [slot="description"] dd{ padding: 0; }
+            }
+            var{ color: darkgreen; font-weight: bold; }
+            html-demo-element { [slot="demo"] { display: flex; gap: 8rem; } } }
+            flex-3x{ display: inline-flex; flex-wrap: wrap;gap:3rem; max-width:12rem;}
+    </style>
+</head>
+<!--
+ToDO
+* docs w/ how to use
+-->
+<body>
+<template id="cem-badge">
+    <attribute name="text"
+            aria-description="Badge text content. Up to 4 characters including + sign."
+            ></attribute>
+    <attribute name="dot"
+            aria-description="attribute defines the small dot presentation without visible text. Default 'true' "
+            ></attribute>
+    <attribute name="color"
+            aria-description="semantic colors. Default is 'primary'. Values: primary|secondary|success|alert"
+            ></attribute>
+    <attribute name="align"
+            aria-description="Vertical & horizontal align. Default is 'top right'. Values: top|middle|bottom|left|center|right"
+            ></attribute>
+    <attribute name="invisible"
+            aria-description="Boolean. Default is 'false'. Values: true|false"
+            ></attribute>
+    <style>
+        &[dot]>*>dd{ height: 0; width: 0; min-width: 0.5rem; color: transparent; padding: 0; min-height: 0.5rem; }
+        &[invisible]>*>dd{ height: 0; width: 0; min-width: 0; color: transparent; padding: 0; min-height:0; }
+        &[align~=left]>*>dd{  --cem-badge-align-h: -100%; }
+        &[align~=center]>*>dd{  --cem-badge-align-h: -25%; }
+        &[align~=right]>*>dd{  --cem-badge-align-h: 50%; }
+        &[align~=top]>*>dd{  --cem-badge-align-v: -50%; }
+        &[align~=middle]>*>dd{  --cem-badge-align-v: 25%; }
+        &[align~=bottom]>*>dd{  --cem-badge-align-v: 75%; }
+        &{ position: relative; display: inline-block; --cem-badge-align-v: -50%; --cem-badge-align-h: 50%; }
+        &>*>dd{
+            /*position: absolute; top:-0.5rem; border-radius: 0.5rem; */
+            /*padding: 0.25rem; background-color: red;*/
+            display: flex ;
+            flex-direction: row;
+            flex-wrap: wrap;
+            -webkit-box-pack: center;
+            justify-content: center;
+            align-content: center;
+            -webkit-box-align: center;
+            align-items: center;
+            position: absolute;
+            box-sizing: border-box;
+            font-family: Roboto, Helvetica, Arial, sans-serif;
+            font-weight: 500;
+            font-size: 0.75rem;
+            min-width: 20px;
+            line-height: 1;
+            height: 20px;
+            z-index: 1;
+            background-color: var(--cem-badge-color, --cem-badge-color-primary);
+            color: var(--cem-badge-text-color,rgb(255, 255, 255));
+            top: 0;
+            right: 0;
+            transform: scale(1) translate(var(--cem-badge-align-h), var(--cem-badge-align-v));
+            transform-origin: 100% 0%;
+            padding: 0 6px;
+            border-radius: 10px;
+            border: var(--cem-badge-border, none);
+            transition: all 225ms cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        &[color="secondary"]>*>dd{ background-color: var(--cem-badge-color-secondary); }
+        &[color="success"]>*>dd{ background-color: var(--cem-badge-color-success); }
+        &[color="alert"]>*>dd{ background-color: var(--cem-badge-color-alert); }
+    </style>
+    <dd>{text}</dd>
+    <slot></slot>
+</template>
+<custom-element hidden src="#cem-badge" tag="cem-badge"></custom-element>
+<custom-element hidden src="./icon-link.html#cem-badge-link" tag="cem-badge-link"></custom-element>
+<custom-element hidden src="./icon-link.html#cem-icon-link" tag="cem-icon-link"></custom-element>
+<custom-element hidden src="./icon.html#cem-icon" tag="cem-icon"></custom-element>
+<header class="cem-theme-teal">
+    <custom-element src="../index.html#nav-head"></custom-element>
+</header>
+<main>
+    <aside>
+        <p><code>cem-badge</code> is badge component from &lt;custom-element&gt; Material suite based on the
+            <a href="https://m3.material.io/components/badges/overview">Material Design specification for Badges</a>.<br/>
+            Badges show notifications, counts, or status information on navigation items and icons.
+            Inspired by <a href="https://mui.com/material-ui/react-badge/">MUI</a>
+        </p>
+        <h1>Attributes</h1>
+        <div> <code>text</code> attribute defines the Up to 4 characters including + sign.</div>
+        <div> <code>dot</code> attribute defines the small dot presentation without visible text. Default 'true'. </div>
+        <div> <code>invisible</code> attribute hides badge. </div>
+        <div> <code>align</code> attribute defines the vertical & horizontal align. Default is 'top right'. Values: top|middle|bottom|left|center|right. </div>
+    </aside>
+    <html-demo-element legend="Variations">
+        <p slot="description">
+        </p>
+        <template>
+<cem-badge text="0"    color="secondary"> <cem-icon image="far fa-envelope"></cem-icon> </cem-badge>
+<cem-badge text="999+"                  > <cem-icon image="🛒" vertical="middle"></cem-icon>  </cem-badge>
+<cem-badge text="999+"  dot             > <cem-icon image="notifications" vertical="middle"></cem-icon>  </cem-badge>
+        </template>
+    </html-demo-element>
+    <html-demo-element legend="color attribute">
+        <p slot="description">
+            Semantic colors
+        </p>
+        <template>
+<cem-badge text="0"                     > <cem-icon image="✉"></cem-icon> </cem-badge>
+<cem-badge text="1"    color="primary"  > <cem-icon image="✉"></cem-icon> </cem-badge>
+<cem-badge text="2"    color="secondary"> <cem-icon image="✉"></cem-icon> </cem-badge>
+<cem-badge text="3"    color="success"  > <cem-icon image="✉"></cem-icon> </cem-badge>
+<cem-badge text="4"    color="alert"    > <cem-icon image="✉"></cem-icon> </cem-badge>
+        </template>
+    </html-demo-element>
+    <html-demo-element legend="custom color">
+        <p slot="description">
+            Override by CE
+        </p>
+        <template>
+<custom-element>
+    <template>
+        <style>
+            &
+            {   --cem-badge-text-color:red;
+                --cem-badge-color:#FF08;
+                --cem-badge-border: 1px blue solid;
+                cem-badge dd{box-shadow: -2px 3px 8px blue;}
+            }
+        </style>
+        <cem-badge text="123"> CUSTOM COLOR </cem-badge>
+    </template>
+</custom-element>
+        </template>
+    </html-demo-element>
+    <html-demo-element legend="invisible attribute">
+        <p slot="description">
+            hides badge, animated
+        </p>
+        <template>
+    <custom-element>
+        <template>
+            <label>
+                <input type="checkbox" slice="is-checked" value="on" />
+                invisible</label>
+<cem-badge text="1"  >
+    <if test="/datadom/slice/is-checked = 'on'">
+        <attribute name="invisible">on</attribute>
+    </if>
+    <cem-icon image="mail" ></cem-icon>
+</cem-badge>
+    &nbsp;
+<cem-badge dot>
+    <if test="/datadom/slice/is-checked = 'on'">
+        <attribute name="invisible">on</attribute>
+    </if>
+    <cem-icon image="mail" ></cem-icon>
+</cem-badge>
+        </template>
+    </custom-element>
+        </template>
+    </html-demo-element>
+    <html-demo-element legend="align attribute">
+        <p slot="description">
+            sets vertical( top, middle, bottom ) and horizontal( left, center, right) badge align.<br/>
+            Default is right top.
+        </p>
+        <template>
+<flex-3x>
+    <cem-badge text="1" align="left top"   ><cem-icon image="mail" ></cem-icon></cem-badge>
+    <cem-badge text="2" align="center top" ><cem-icon image="mail" ></cem-icon></cem-badge>
+    <cem-badge text="3" align="right top"  ><cem-icon image="mail" ></cem-icon></cem-badge>
+    <cem-badge text="4" align="left middle"   ><cem-icon image="mail" ></cem-icon></cem-badge>
+    <cem-badge text="5" align="center middle" ><cem-icon image="mail" ></cem-icon></cem-badge>
+    <cem-badge text="6" align="right middle"  ><cem-icon image="mail" ></cem-icon></cem-badge>
+    <cem-badge text="7" align="left bottom"   ><cem-icon image="mail" ></cem-icon></cem-badge>
+    <cem-badge text="8" align="center bottom" ><cem-icon image="mail" ></cem-icon></cem-badge>
+    <cem-badge text="9" align="right bottom"  ><cem-icon image="mail" ></cem-icon></cem-badge>
+</flex-3x>
+        </template>
+    </html-demo-element>
+</main>
+<footer>
+    <hr/>
+    <a href="../../LICENSE"> Code and documentation licensed under an Apache License 2.0 </a>
+</footer>
+<script src="https://unpkg.com/html-demo-element@1.0.8/html-demo-element.js" type="module"></script>
+</body>
+</html>

package/src/material/components/dropdown.html CHANGED Viewed

@@ -76,17 +76,14 @@
             <attribute name="open"></attribute>
             <attribute name="label"></attribute>
             <style>
-                dce-root {
+                &[open="false"]>*>aside{  max-height: 0; }
+                &>* {
                     position: relative;
                     --cem-dropdown-shadow: 0px 3px 1px -2px rgba(0, 0, 0, .2), 0px 2px 2px 0px rgba(0, 0, 0, .14), 0px 1px 5px 0px rgba(0, 0, 0, .12);
                     --cem-dropdown-max-height: 10rem;
                     --cem-dropdown-base-min-width: 8em;
-                    &[open="false"]{
-                        &>aside{  max-height: 0;
-                        }
-                    }
                     & > label {
                         min-width: var(--cem-dropdown-base-min-width);
                         display: inline-block;
@@ -132,11 +129,9 @@
         </template>
     </html-demo-element>
-    <html-demo-element
-            legend="Menu in dropdown"
-            description="Focus to see the cursor in input with label shifted upward" >
+    <html-demo-element legend="Menu in dropdown">
         <template>
-<cem-dropdown label="Vertical menu" open="true">
+<cem-dropdown label="Vertical menu" >
     <cem-menu direction="column">
         <a href="#">link 1</a>
         <a href="#">link 2</a>
@@ -146,14 +141,14 @@
         </template>
     </html-demo-element>
-    <html-demo-element description="Focus to see the cursor in input with label shifted upward "
-                       legend="Collapsing by slice">
+    <html-demo-element legend="Hide dropdown dynamically"
+                       description="open=false hides dropdown"
+                       >
         <template>
             <custom-element>
                 <template>
 <label><input slice="opened" type="checkbox" value="1" checked/>
         open</label><br/>
-//opened:'{//opened}'
 <cem-dropdown label="Vertical menu" open="{//opened='1'}">
     <cem-menu direction="column">
@@ -170,7 +165,6 @@
 </main>
 <footer>
     <hr/>
-    Powered by Syngrafact Corp. ©2024.<br/>
     <a href="../../LICENSE"> Code and documentation licensed under an Apache License 2.0 </a>
 </footer>
 <script src="https://unpkg.com/html-demo-element@1/html-demo-element.js" type="module"></script>

package/src/material/components/icon-link.html CHANGED Viewed

@@ -1,161 +1,161 @@
-<!DOCTYPE html>
-<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml">
-<head>
-    <meta charset="UTF-8">
-    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
-    <title>Components - custom-element - Material Design</title>
-    <link href="../../custom-element/demo/wc-square.svg" rel="icon"/>
-    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
-    <link crossorigin="anonymous" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
-          integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" rel="stylesheet"/>
-    <script type="importmap">
-        {
-          "imports": {
-            "@epa-wg/": "../../"
-          }
-        }
-    </script>
-    <script src="../../custom-element/module-url.js" type="module"></script>
-    <script src="../../custom-element/custom-element.js" type="module"></script>
-    <style>
-        @import "../angular.css";
-        @import "../material.css";
-        @import "../theme/semantic.css";
-        @import "../demo.css";
-        main{
-            display: flex; flex-wrap: wrap;
-            gap: 3rem;
-            padding: 5rem;
-            &>p{ min-width: 90%; }
-            html-demo-element
-            {   overflow: visible;
-                [slot="legend"]{ border-radius: 1rem 1rem 0 0; }
-                [slot="description"]{ padding: 0 1rem 1rem 1rem; dd{ padding: 0 !important;margin: 0; }}
-                [slot="description"] dd{ padding: 0; }
-            }
-        }
-    </style>
-</head>
-<body>
-<template id="cem-icon-link">
-    <attribute name="href"></attribute>
-    <attribute name="icon"></attribute>
-    <attribute aria-description="color appearance. Default value is 'normal'. Values: normal|primary|secondary|alert|blend"
-               name="kind"></attribute>
-    <style>
-        &:not([kind]) a, &[kind="normal"] a {
-            /*background-color: var(--mdc-theme-primary, #6200ee);*/
-        }
-        a {
-            display: inline-flex;
-            align-items: center;
-            gap: 0.5rem;
-            padding: 0.5rem 1rem;;
-            border-radius: 1.5rem;
-            background-color: var(--cem-action-primary-background);
-            transition: var(--cem-action-transition);
-            box-shadow: var(--cem-action-box-shadow);
-            &:hover {
-                background-color: var(--cem-action-primary-background-hover);
-                box-shadow: var(--cem-action-box-shadow-hover);
-            }
-            &:focus {
-                background-color: var(--cem-action-primary-background-focus);
-            }
-            &:active, &:focus:active {
-                background-color: var(--cem-action-primary-background-active);
-            }
-            &, &:visited {
-                text-decoration: none;
-                color: var(--mat-light-blue-900);
-            }
-            --icon-size: 2rem;
-        }
-        .icon {
-            font-size: var(--icon-size);
-            height: var(--icon-size);
-        }
-    </style>
-    <a href="{$href}">
-        <choose>
-            <when test="contains($icon,'/')"><img alt="DCE logo" class="icon" src="{$icon}"/></when>
-            <when test="contains($icon,'fa-')"><i class="icon {$icon}"></i></when>
-            <when test="$icon"><span class="icon material-icons">{$icon}</span></when>
-        </choose>
-        <slot></slot>
-    </a>
-</template>
-<custom-element hidden src="#cem-icon-link" tag="cem-icon-link"></custom-element>
-<header class="cem-theme-teal">
-    <custom-element src="../index.html#nav-head" ></custom-element>
-</header>
-<main>
-    <p><code>cem-icon-link</code> is button like component from &lt;custom-element&gt; Material suite based on the
-        <a href="https://material.io/components" >Material Design specification</a>.
-    </p>
-    <p>
-        <code>direction</code> attribute defines css <code>row</code> or <code>column</code> flex-direction.
-    </p>
-<html-demo-element legend="Image from importmap module"
-                   description="logo SVG with link to file in module">
-    <template>
-        <custom-element>
-            <template>
-                <module-url slice="cem-url" src="@epa-wg/material"></module-url>
-                <module-url slice="logo-url" src="@epa-wg/custom-element/demo/wc-square.svg"></module-url>
-                <cem-icon-link href="{//cem-url}/" icon="{//logo-url}"> custom-element</cem-icon-link>
-                <cem-icon-link icon="https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/1.svg">
-                    bulbasaur</cem-icon-link>
-            </template>
-        </custom-element>
-    </template>
-</html-demo-element>
-<html-demo-element legend="Google Material icon font" >
-    <p slot="description">
-        <a href="https://fonts.google.com/icons">Material Icon</a> example.
-    </p>
-    <template>
-        <cem-icon-link icon="recycling"> recycling</cem-icon-link>
-        <cem-icon-link icon="shopping_cart"> shopping_cart</cem-icon-link>
-    </template>
-</html-demo-element>
-<html-demo-element legend="Fontawesome" >
-    <p slot="description">
-        <a href="https://fontawesome.com/icons/">Fontawesome Icon</a> example.
-    </p>
-    <template>
-        <cem-icon-link icon="fab fa-github" > GitHub </cem-icon-link>
-        <cem-icon-link icon="fas fa-cloud-upload-alt" > Upload </cem-icon-link>
-    </template>
-</html-demo-element>
-</main>
-<footer>
-    <hr/>
-    Powered by Syngrafact Corp. ©2024.<br/>
-    <a href="../../LICENSE"> Code and documentation licensed under an Apache License 2.0 </a>
-</footer>
-<script type="module" src="https://unpkg.com/html-demo-element@1.0.8/html-demo-element.js"></script>
-</body>
+<!DOCTYPE html>
+<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml">
+<head>
+    <meta charset="UTF-8">
+    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
+    <title>Components - custom-element - Material Design</title>
+    <link href="../../custom-element/demo/wc-square.svg" rel="icon"/>
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
+    <link crossorigin="anonymous" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
+          integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" rel="stylesheet"/>
+    <script type="importmap">
+        {
+          "imports": {
+            "@epa-wg/": "../../"
+          }
+        }
+    </script>
+    <script src="../../custom-element/module-url.js" type="module"></script>
+    <script src="../../custom-element/custom-element.js" type="module"></script>
+    <style>
+        @import "../angular.css";
+        @import "../material.css";
+        @import "../theme/semantic.css";
+        @import "../demo.css";
+        main{
+            display: flex; flex-wrap: wrap;
+            gap: 3rem;
+            padding: 5rem;
+            &>p{ min-width: 90%; }
+            html-demo-element
+            {   overflow: visible;
+                [slot="legend"]{ border-radius: 1rem 1rem 0 0; }
+                [slot="description"]{ padding: 0 1rem 1rem 1rem; dd{ padding: 0 !important;margin: 0; }}
+                [slot="description"] dd{ padding: 0; }
+            }
+        }
+    </style>
+</head>
+<body>
+<template id="cem-icon-link">
+    <attribute name="href"></attribute>
+    <attribute name="icon"></attribute>
+    <attribute aria-description="color appearance. Default value is 'normal'. Values: normal|primary|secondary|alert|blend"
+               name="kind"></attribute>
+    <style>
+        &:not([kind]) a, &[kind="normal"] a {
+            /*background-color: var(--mdc-theme-primary, #6200ee);*/
+        }
+        a {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+            padding: 0.5rem 1rem;;
+            border-radius: 1.5rem;
+            background-color: var(--cem-action-primary-background);
+            transition: var(--cem-action-transition);
+            box-shadow: var(--cem-action-box-shadow);
+            &:hover {
+                background-color: var(--cem-action-primary-background-hover);
+                box-shadow: var(--cem-action-box-shadow-hover);
+            }
+            &:focus {
+                background-color: var(--cem-action-primary-background-focus);
+            }
+            &:active, &:focus:active {
+                background-color: var(--cem-action-primary-background-active);
+            }
+            &, &:visited {
+                text-decoration: none;
+                color: var(--mat-light-blue-900);
+            }
+            --icon-size: 2rem;
+            min-height: var(--icon-size);
+        }
+        .icon {
+            font-size: var(--icon-size);
+            height: var(--icon-size);
+        }
+    </style>
+    <a href="{$href}">
+        <choose>
+            <when test="contains($icon,'/')"><img alt="DCE logo" class="icon" src="{$icon}"/></when>
+            <when test="contains($icon,'fa-')"><i class="icon {$icon}"></i></when>
+            <when test="$icon"><span class="icon material-icons">{$icon}</span></when>
+        </choose>
+        <slot></slot>
+    </a>
+</template>
+<custom-element hidden src="#cem-icon-link" tag="cem-icon-link"></custom-element>
+<header class="cem-theme-teal">
+    <custom-element src="../index.html#nav-head" ></custom-element>
+</header>
+<main>
+    <p><code>cem-icon-link</code> is button like component from &lt;custom-element&gt; Material suite based on the
+        <a href="https://material.io/components" >Material Design specification</a>.
+    </p>
+    <p>
+        <code>direction</code> attribute defines css <code>row</code> or <code>column</code> flex-direction.
+    </p>
+<html-demo-element legend="Image from importmap module"
+                   description="logo SVG with link to file in module">
+    <template>
+        <custom-element>
+            <template>
+                <module-url slice="cem-url" src="@epa-wg/material"></module-url>
+                <module-url slice="logo-url" src="@epa-wg/custom-element/demo/wc-square.svg"></module-url>
+                <cem-icon-link href="{//cem-url}/" icon="{//logo-url}"> custom-element</cem-icon-link>
+                <cem-icon-link icon="https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/1.svg">
+                    bulbasaur</cem-icon-link>
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+<html-demo-element legend="Google Material icon font" >
+    <p slot="description">
+        <a href="https://fonts.google.com/icons">Material Icon</a> example.
+    </p>
+    <template>
+        <cem-icon-link icon="recycling"> recycling</cem-icon-link>
+        <cem-icon-link icon="shopping_cart"> shopping_cart</cem-icon-link>
+    </template>
+</html-demo-element>
+<html-demo-element legend="Fontawesome" >
+    <p slot="description">
+        <a href="https://fontawesome.com/icons/">Fontawesome Icon</a> example.
+    </p>
+    <template>
+        <cem-icon-link icon="fab fa-github" > GitHub </cem-icon-link>
+        <cem-icon-link icon="fas fa-cloud-upload-alt" > Upload </cem-icon-link>
+    </template>
+</html-demo-element>
+</main>
+<footer>
+    <hr/>
+    <a href="../../LICENSE"> Code and documentation licensed under an Apache License 2.0 </a>
+</footer>
+<script type="module" src="https://unpkg.com/html-demo-element@1.0.8/html-demo-element.js"></script>
+</body>
 </html>