npm - kemet-ui - Versions diffs - 1.4.0 → 2.0.0 - Mend

kemet-ui 1.4.0 → 2.0.0

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 (946) hide show

package/dist/src/stories/templates/foundation/stories.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../../src/stories/templates/foundation/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,wBAAwB;CAChC,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmGhC,CAAC;AAEF,MAAM,iBAAiB,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6RnC,CAAC;AAEF,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuU9B,CAAC;AAEF,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkLhC,CAAC;AAGF,MAAM,CAAC,MAAM,MAAM,GAAU;IAC3B,MAAM,EAAE,cAAc;CACvB,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,MAAM,EAAE,iBAAiB;CAC1B,CAAA;AAED,MAAM,CAAC,MAAM,IAAI,GAAU;IACzB,MAAM,EAAE,YAAY;CACrB,CAAA;AAED,MAAM,CAAC,MAAM,MAAM,GAAU;IAC3B,MAAM,EAAE,cAAc;CACvB,CAAA","sourcesContent":["import { html } from 'lit';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nconst meta: Meta = {\n title: 'Templates / Foundation',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst AgencyTemplate = () => html`\n <header kemet-layout=\"flexrow\" kemet-align=\"middle\" kemet-autostack kemet-background-color=\"gray2\" kemet-padding-bottom=\"tiny:small medium:none\">\n <div kemet-margin-left=\"medium:normal\">\n <ul kemet-layout=\"flexlist\" kemet-align=\"middle\" kemet-gutters>\n <li><h2>Agency Name</h2></li>\n <li><a href=\"#one\">One</a></li>\n <li><a href=\"#two\">Two</a></li>\n </ul>\n </div>\n <div kemet-margin-right=\"medium:normal\" kemet-breakpoint=\"tiny:content\">\n <ul kemet-layout=\"flexlist\" kemet-gutters>\n <li><a href=\"#three\">Three</a></li>\n <li><a href=\"#four\">Four</a></li>\n <li><a href=\"#five\">Five</a></li>\n <li><a href=\"#six\">Six</a></li>\n </ul>\n </div>\n </header>\n\n <br />\n\n <section kemet-type-align=\"tiny:center\" kemet-margin=\"tiny:normal\">\n <h1>Changing the World Through Design</h1>\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris.</p>\n <ul kemet-layout=\"flexlist\" kemet-gutters>\n <li><kemet-button>Learn More</kemet-button></li>\n <li><kemet-button>Learn Less</kemet-button></li>\n </ul>\n </section>\n\n <br /><hr /><br />\n\n <section>\n <div kemet-layout=\"flexgrid\" kemet-gutters kemet-margin-left=\"tiny:normal\" kemet-margin-right=\"tiny:normal\">\n <div kemet-breakpoint=\"tiny:100 medium:50\">\n <img src=\"https://via.placeholder.com/1920x1080\" alt=\"A place holder\" style=\"max-width:100%;\" />\n </div>\n <div kemet-breakpoint=\"tiny:100 medium:50\" kemet-order=\"medium:minus-1\">\n <h1>Our Agency, our selves.</h1>\n <p>Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor.</p>\n </div>\n <div kemet-breakpoint=\"tiny:100 medium:33\">\n <h2>Photoshop</h2>\n <p>Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna.</p>\n </div>\n <div kemet-breakpoint=\"tiny:100 medium:33\">\n <h2>Javascript</h2>\n <p>Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna.</p>\n </div>\n <div kemet-breakpoint=\"tiny:100 medium:33\">\n <h2>Marketing</h2>\n <p>Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna.</p>\n </div>\n </div>\n </section>\n\n\n <hr /><br />\n\n <section kemet-layout=\"flexrow\" kemet-type-align=\"tiny:center\">\n <a href=\"#\"><div kemet-type-size=\"plus-6\">28</div>Websites</a>\n <a href=\"#\"><div kemet-type-size=\"plus-6\">43</div>Apps</a>\n <a href=\"#\"><div kemet-type-size=\"plus-6\">95</div>Ads</a>\n <a href=\"#\"><div kemet-type-size=\"plus-6\">59</div>Cakes</a>\n <a href=\"#\"><div kemet-type-size=\"plus-6\">18</div>Logos</a>\n </section>\n\n <br /><hr />\n\n <section>\n <div kemet-margin=\"tiny:normal\">\n <h2>Our Recent Work</h2>\n <div kemet-layout=\"flexgrid\" kemet-basis=\"tiny:1-columns medium:4-columns\" kemet-gutters=\"tiny:plus-3\">\n <div><img src=\"https://via.placeholder.com/1920x1080?text=Work\" alt=\"Work\" style=\"max-width:100%;\" /></div>\n <div><img src=\"https://via.placeholder.com/1920x1080?text=Work\" alt=\"Work\" style=\"max-width:100%;\" /></div>\n <div><img src=\"https://via.placeholder.com/1920x1080?text=Work\" alt=\"Work\" style=\"max-width:100%;\" /></div>\n <div><img src=\"https://via.placeholder.com/1920x1080?text=Work\" alt=\"Work\" style=\"max-width:100%;\" /></div>\n <div><img src=\"https://via.placeholder.com/1920x1080?text=Work\" alt=\"Work\" style=\"max-width:100%;\" /></div>\n <div><img src=\"https://via.placeholder.com/1920x1080?text=Work\" alt=\"Work\" style=\"max-width:100%;\" /></div>\n <div><img src=\"https://via.placeholder.com/1920x1080?text=Work\" alt=\"Work\" style=\"max-width:100%;\" /></div>\n <div><img src=\"https://via.placeholder.com/1920x1080?text=Work\" alt=\"Work\" style=\"max-width:100%;\" /></div>\n <div><img src=\"https://via.placeholder.com/1920x1080?text=Work\" alt=\"Work\" style=\"max-width:100%;\" /></div>\n <div><img src=\"https://via.placeholder.com/1920x1080?text=Work\" alt=\"Work\" style=\"max-width:100%;\" /></div>\n <div><img src=\"https://via.placeholder.com/1920x1080?text=Work\" alt=\"Work\" style=\"max-width:100%;\" /></div>\n <div><img src=\"https://via.placeholder.com/1920x1080?text=Work\" alt=\"Work\" style=\"max-width:100%;\" /></div>\n </div>\n </div>\n </section>\n\n <hr />\n\n <section kemet-margin=\"tiny:normal\">\n <div kemet-layout=\"flexlist\" kemet-gutters>\n <a href=\"#one\">One</a>\n <a href=\"#two\">Two</a>\n <a href=\"#three\">Three</a>\n <a href=\"#four\">Four</a>\n <div>\n </section>\n`;\n\nconst eCommerceTemplate = () => html`\n <header kemet-layout=\"flexrow\" kemet-align=\"middle\" kemet-autostack kemet-background-color=\"gray2\" kemet-padding-bottom=\"tiny:small medium:none\">\n <div kemet-margin-left=\"medium:normal\">\n <ul kemet-layout=\"flexlist\" kemet-align=\"middle\" kemet-gutters>\n <li><h2>Site Name</h2></li>\n <li><a href=\"#one\">One</a></li>\n <li><a href=\"#two\">Two</a></li>\n <li><a href=\"#three\">Three</a></li>\n </ul>\n </div>\n <div kemet-margin-right=\"medium:normal\" kemet-breakpoint=\"tiny:content\">\n <ul kemet-layout=\"flexlist\" kemet-gutters>\n <li><a href=\"#two\">Three</a></li>\n <li><a href=\"#one\">Four</a></li>\n <li><a href=\"#two\">Five</a></li>\n <li><a href=\"#three\">Six</a></li>\n </ul>\n </div>\n </header>\n\n <br /><hr /><br />\n\n <section kemet-margin=\"tiny:normal\">\n <h2 class=\"text-center\">Our Newest Product</h2>\n <hr /><br />\n <div kemet-layout=\"flexrow\" kemet-gutters=\"tiny:plus-3\" kemet-autostack>\n <div>\n <figure kemet-padding=\"tiny:smallest\" kemet-margin=\"tiny:none\" kemet-elevation=\"layer3\" kemet-border=\"all-1 solid gray1\">\n <svg width=\"100%\" height=\"370\">\n <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"#0c4a6e\"/>\n <text x=\"50%\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"middle\" fill=\"white\" font-size=\"1rem\">Look at me!</text>\n </svg>\n <h3>Nulla At Nulla Justo, Eget</h3>\n <span>$400</span>\n <p><kemet-button>Buy</kemet-button></p>\n </figure>\n </div>\n <div>\n <figure kemet-padding=\"tiny:smallest\" kemet-margin=\"tiny:none\" kemet-elevation=\"layer3\" kemet-border=\"all-1 solid gray1\">\n <svg width=\"100%\" height=\"370\">\n <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"#0c4a6e\"/>\n <text x=\"50%\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"middle\" fill=\"white\" font-size=\"1rem\">Look at me!</text>\n </svg>\n <h3>Nulla At Nulla Justo, Eget</h3>\n <span>$400</span>\n <p><kemet-button>Buy</kemet-button></p>\n </figure>\n </div>\n <div>\n <figure kemet-padding=\"tiny:smallest\" kemet-margin=\"tiny:none\" kemet-elevation=\"layer3\" kemet-border=\"all-1 solid gray1\">\n <svg width=\"100%\" height=\"370\">\n <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"#0c4a6e\"/>\n <text x=\"50%\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"middle\" fill=\"white\" font-size=\"1rem\">Look at me!</text>\n </svg>\n <h3>Nulla At Nulla Justo, Eget</h3>\n <span>$400</span>\n <p><kemet-button>Buy</kemet-button></p>\n </figure>\n </div>\n <div>\n <figure kemet-padding=\"tiny:smallest\" kemet-margin=\"tiny:none\" kemet-elevation=\"layer3\" kemet-border=\"all-1 solid gray1\">\n <svg width=\"100%\" height=\"370\">\n <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"#0c4a6e\"/>\n <text x=\"50%\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"middle\" fill=\"white\" font-size=\"1rem\">Look at me!</text>\n </svg>\n <h3>Nulla At Nulla Justo, Eget</h3>\n <span>$400</span>\n <p><kemet-button>Buy</kemet-button></p>\n </figure>\n </div>\n </div>\n </section>\n\n <hr />\n\n <svg width=\"100%\" height=\"150\">\n <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"#0c4a6e\"/>\n <text x=\"50%\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"middle\" fill=\"white\" font-size=\"2rem\">[Specials]</text>\n </svg>\n\n <hr />\n\n <section kemet-margin=\"tiny:normal\">\n <h2 class=\"text-center\">Some Other Near Products</h2>\n <hr /><br />\n <div kemet-layout=\"flexgrid\" kemet-gutters=\"tiny:plus-3\" kemet-basis=\"tiny:2-columns medium:3-columns large:6-columns\">\n <div>\n <figure kemet-padding=\"tiny:smallest\" kemet-margin=\"tiny:none\" kemet-elevation=\"layer3\" kemet-border=\"all-1 solid gray1\">\n <svg width=\"100%\" height=\"370\">\n <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"#0c4a6e\"/>\n <text x=\"50%\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"middle\" fill=\"white\" font-size=\"1rem\">Look at me!</text>\n </svg>\n <h3>Nulla At Nulla Justo, Eget</h3>\n <span>$400</span>\n <p><kemet-button>Buy</kemet-button></p>\n </figure>\n </div>\n <div>\n <figure kemet-padding=\"tiny:smallest\" kemet-margin=\"tiny:none\" kemet-elevation=\"layer3\" kemet-border=\"all-1 solid gray1\">\n <svg width=\"100%\" height=\"370\">\n <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"#0c4a6e\"/>\n <text x=\"50%\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"middle\" fill=\"white\" font-size=\"1rem\">Look at me!</text>\n </svg>\n <h3>Nulla At Nulla Justo, Eget</h3>\n <span>$400</span>\n <p><kemet-button>Buy</kemet-button></p>\n </figure>\n </div>\n <div>\n <figure kemet-padding=\"tiny:smallest\" kemet-margin=\"tiny:none\" kemet-elevation=\"layer3\" kemet-border=\"all-1 solid gray1\">\n <svg width=\"100%\" height=\"370\">\n <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"#0c4a6e\"/>\n <text x=\"50%\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"middle\" fill=\"white\" font-size=\"1rem\">Look at me!</text>\n </svg>\n <h3>Nulla At Nulla Justo, Eget</h3>\n <span>$400</span>\n <p><kemet-button>Buy</kemet-button></p>\n </figure>\n </div>\n <div>\n <figure kemet-padding=\"tiny:smallest\" kemet-margin=\"tiny:none\" kemet-elevation=\"layer3\" kemet-border=\"all-1 solid gray1\">\n <svg width=\"100%\" height=\"370\">\n <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"#0c4a6e\"/>\n <text x=\"50%\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"middle\" fill=\"white\" font-size=\"1rem\">Look at me!</text>\n </svg>\n <h3>Nulla At Nulla Justo, Eget</h3>\n <span>$400</span>\n <p><kemet-button>Buy</kemet-button></p>\n </figure>\n </div>\n <div>\n <figure kemet-padding=\"tiny:smallest\" kemet-margin=\"tiny:none\" kemet-elevation=\"layer3\" kemet-border=\"all-1 solid gray1\">\n <svg width=\"100%\" height=\"370\">\n <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"#0c4a6e\"/>\n <text x=\"50%\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"middle\" fill=\"white\" font-size=\"1rem\">Look at me!</text>\n </svg>\n <h3>Nulla At Nulla Justo, Eget</h3>\n <span>$400</span>\n <p><kemet-button>Buy</kemet-button></p>\n </figure>\n </div>\n <div>\n <figure kemet-padding=\"tiny:smallest\" kemet-margin=\"tiny:none\" kemet-elevation=\"layer3\" kemet-border=\"all-1 solid gray1\">\n <svg width=\"100%\" height=\"370\">\n <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"#0c4a6e\"/>\n <text x=\"50%\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"middle\" fill=\"white\" font-size=\"1rem\">Look at me!</text>\n </svg>\n <h3>Nulla At Nulla Justo, Eget</h3>\n <span>$400</span>\n <p><kemet-button>Buy</kemet-button></p>\n </figure>\n </div>\n </div>\n </section>\n\n <hr />\n\n <section kemet-layout=\"flexrow\" kemet-gutters kemet-autostack kemet-margin-left=\"tiny:normal\" kemet-margin-right=\"tiny:normal\">\n <div>\n <h3>Top Products</h3>\n <div kemet-layout=\"flexrow\">\n <div kemet-breakpoint=\"tiny:content\">\n <img src=\"https://via.placeholder.com/100x100\" width=\"100\" height=\"100\" alt=\"a placeholder\" kemet-margin-right=\"tiny:small\" />\n </div>\n <div>\n <strong>Nunc Eu Ullamcorper Orci</strong>\n <p>Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque.</p>\n </div>\n </div>\n <br />\n <div kemet-layout=\"flexrow\">\n <div kemet-breakpoint=\"tiny:content\">\n <img src=\"https://via.placeholder.com/100x100\" width=\"100\" height=\"100\" alt=\"a placeholder\" kemet-margin-right=\"tiny:small\" />\n </div>\n <div>\n <strong>Nunc Eu Ullamcorper Orci</strong>\n <p>Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque.</p>\n </div>\n </div>\n <br />\n <div kemet-layout=\"flexrow\">\n <div kemet-breakpoint=\"tiny:content\">\n <img src=\"https://via.placeholder.com/100x100\" width=\"100\" height=\"100\" alt=\"a placeholder\" kemet-margin-right=\"tiny:small\" />\n </div>\n <div>\n <strong>Nunc Eu Ullamcorper Orci</strong>\n <p>Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque.</p>\n </div>\n </div>\n </div>\n <div>\n <h3>Top Products</h3>\n <div kemet-layout=\"flexrow\">\n <div kemet-breakpoint=\"tiny:content\">\n <img src=\"https://via.placeholder.com/100x100\" width=\"100\" height=\"100\" alt=\"a placeholder\" kemet-margin-right=\"tiny:small\" />\n </div>\n <div>\n <strong>Nunc Eu Ullamcorper Orci</strong>\n <p>Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque.</p>\n </div>\n </div>\n <br />\n <div kemet-layout=\"flexrow\">\n <div kemet-breakpoint=\"tiny:content\">\n <img src=\"https://via.placeholder.com/100x100\" width=\"100\" height=\"100\" alt=\"a placeholder\" kemet-margin-right=\"tiny:small\" />\n </div>\n <div>\n <strong>Nunc Eu Ullamcorper Orci</strong>\n <p>Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque.</p>\n </div>\n </div>\n <br />\n <div kemet-layout=\"flexrow\">\n <div kemet-breakpoint=\"tiny:content\">\n <img src=\"https://via.placeholder.com/100x100\" width=\"100\" height=\"100\" alt=\"a placeholder\" kemet-margin-right=\"tiny:small\" />\n </div>\n <div>\n <strong>Nunc Eu Ullamcorper Orci</strong>\n <p>Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque.</p>\n </div>\n </div>\n </div>\n <div>\n <h3>Top Products</h3>\n <div kemet-layout=\"flexrow\">\n <div kemet-breakpoint=\"tiny:content\">\n <img src=\"https://via.placeholder.com/100x100\" width=\"100\" height=\"100\" alt=\"a placeholder\" kemet-margin-right=\"tiny:small\" />\n </div>\n <div>\n <strong>Nunc Eu Ullamcorper Orci</strong>\n <p>Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque.</p>\n </div>\n </div>\n <br />\n <div kemet-layout=\"flexrow\">\n <div kemet-breakpoint=\"tiny:content\">\n <img src=\"https://via.placeholder.com/100x100\" width=\"100\" height=\"100\" alt=\"a placeholder\" kemet-margin-right=\"tiny:small\" />\n </div>\n <div>\n <strong>Nunc Eu Ullamcorper Orci</strong>\n <p>Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque.</p>\n </div>\n </div>\n <br />\n <div kemet-layout=\"flexrow\">\n <div kemet-breakpoint=\"tiny:content\">\n <img src=\"https://via.placeholder.com/100x100\" width=\"100\" height=\"100\" alt=\"a placeholder\" kemet-margin-right=\"tiny:small\" />\n </div>\n <div>\n <strong>Nunc Eu Ullamcorper Orci</strong>\n <p>Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque.</p>\n </div>\n </div>\n </div>\n </section>\n\n <section kemet-margin-left=\"tiny:normal\" kemet-margin-right=\"tiny:normal\">\n <br /><br />\n <div>\n <h3>Vivamus Hendrerit Arcu Sed Erat Molestie</h3>\n <div kemet-layout=\"flexrow\" kemet-autostack>\n <div kemet-breakpoint=\"tiny:50\">\n <p>Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit.</p>\n <p>Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit.</p>\n </div>\n <div>\n <ul>\n <li><a href=\"#\">One</a></li>\n <li><a href=\"#\">Two</a></li>\n <li><a href=\"#\">Three</a></li>\n <li><a href=\"#\">Four</a></li>\n </ul>\n </div>\n <div>\n <ul>\n <li><a href=\"#\">One</a></li>\n <li><a href=\"#\">Two</a></li>\n <li><a href=\"#\">Three</a></li>\n <li><a href=\"#\">Four</a></li>\n </ul>\n </div>\n </div>\n </div>\n <br /><br />\n </section>\n`;\n\nconst NewsTemplate = () => html`\n <header kemet-padding=\"tiny:smallest\" kemet-background-color=\"gray2\">\n <section kemet-layout=\"flexrow\" kemet-align=\"middle\" kemet-autostack>\n <div>\n <ul kemet-layout=\"flexlist\" kemet-gutters>\n <li><a href=\"#one\">One</a></li>\n <li><a href=\"#two\">Two</a></li>\n <li><a href=\"#three\">Three</a></li>\n <li><a href=\"#four\">Four</a></li>\n </ul>\n </div>\n <div kemet-breakpoint=\"tiny:100 medium:30\">\n <kemet-input type=\"search\" icon-left=\"search\"></kemet-input>\n </div>\n </section>\n </header>\n\n <main kemet-padding=\"tiny:small\">\n <section>\n <div kemet-layout=\"flexrow\" kemet-gutters=\"tiny:plus-3\" kemet-flex-items>\n <div kemet-breakpoint=\"tiny:33\">\n <svg width=\"100%\" height=\"150\">\n <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"#0c4a6e\"/>\n <text x=\"50%\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"middle\" fill=\"white\" font-size=\"2rem\">[Logo]</text>\n </svg>\n </div>\n <div>\n <svg width=\"100%\" height=\"150\">\n <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"#0c4a6e\"/>\n <text x=\"50%\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"middle\" fill=\"white\" font-size=\"2rem\">[Advertisements]</text>\n </svg>\n </div>\n </div>\n </section>\n\n <nav kemet-hide=\"medium:down\" kemet-margin-top=\"tiny:small\">\n <svg width=\"100%\" height=\"100\">\n <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"#0c4a6e\"/>\n <text x=\"50%\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"middle\" fill=\"white\" font-size=\"2rem\">[Navigation]</text>\n </svg>\n </nav>\n\n <br />\n\n <section kemet-layout=\"flexrow\" kemet-autostack kemet-gutters=\"tiny:plus-3\">\n <div kemet-breakpoint=\"medium:66\">\n <svg width=\"100%\" height=\"100%\">\n <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"#0c4a6e\"/>\n <text x=\"50%\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"middle\" fill=\"white\" font-size=\"2rem\">[Promoted Article]</text>\n </svg>\n </div>\n <div kemet-layout=\"flexcolumn\" kemet-gutters=\"tiny:plus-3\" style=\"min-height:200px;\">\n <div>\n <svg width=\"100%\" height=\"100%\">\n <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"#0c4a6e\"/>\n <text x=\"50%\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"middle\" fill=\"white\" font-size=\"2rem\">[Article]</text>\n </svg>\n </div>\n <div>\n <svg width=\"100%\" height=\"100%\">\n <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"#0c4a6e\"/>\n <text x=\"50%\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"middle\" fill=\"white\" font-size=\"2rem\">[Article]</text>\n </svg>\n </div>\n </div>\n </section>\n\n <br />\n\n <section>\n <hr />\n <h2 kemet-type-align=\"center\" kemet-type-size=\"tiny:plus-4\">Breaking News</h2>\n <hr />\n <br />\n <div kemet-layout=\"flexgrid\" kemet-basis=\"tiny:2-columns medium:5-columns\" kemet-gutters>\n <div>\n <svg width=\"100%\" height=\"150\">\n <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"#0c4a6e\"/>\n <text x=\"50%\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"middle\" fill=\"white\" font-size=\"1rem\">Look at me!</text>\n </svg>\n </div>\n <div>\n <svg width=\"100%\" height=\"150\">\n <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"#0c4a6e\"/>\n <text x=\"50%\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"middle\" fill=\"white\" font-size=\"1rem\">Look at me!</text>\n </svg>\n </div>\n <div>\n <svg width=\"100%\" height=\"150\">\n <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"#0c4a6e\"/>\n <text x=\"50%\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"middle\" fill=\"white\" font-size=\"1rem\">Look at me!</text>\n </svg>\n </div>\n <div>\n <svg width=\"100%\" height=\"150\">\n <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"#0c4a6e\"/>\n <text x=\"50%\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"middle\" fill=\"white\" font-size=\"1rem\">Look at me!</text>\n </svg>\n </div>\n <div>\n <svg width=\"100%\" height=\"150\">\n <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"#0c4a6e\"/>\n <text x=\"50%\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"middle\" fill=\"white\" font-size=\"1rem\">Look at me!</text>\n </svg>\n </div>\n </div>\n </section>\n\n <br />\n\n <section>\n <hr />\n <h2 kemet-type-align=\"center\" kemet-type-size=\"tiny:plus-4\">Latest Stories</h2>\n <hr />\n <br />\n <div kemet-layout=\"flexgrid\" kemet-gutters=\"tiny:plus-3\">\n <article kemet-breakpoint=\"tiny:100 medium:66\">\n <div kemet-layout=\"flexrow\" kemet-gutters kemet-autostack>\n <div kemet-breakpoint=\"tiny:100 small:40\">\n <svg width=\"100%\" height=\"150\">\n <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"#0c4a6e\"/>\n <text x=\"50%\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"middle\" fill=\"white\" font-size=\"2rem\">[Thumbnail]</text>\n </svg>\n </div>\n <div>\n <h3><a href=\"#\">Death Star vaporizes it's own planet</a>.</h3>\n <ul kemet-layout=\"flexlist\" kemet-gutters>\n <li>By Thadeus<li>\n <li>11/23/16<li>\n <li>6 Comments<li>\n </ul>\n <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae impedit beatae, ipsum delectus aperiam nesciunt magni facilis ullam.</p>\n </div>\n </div>\n <hr />\n <div kemet-layout=\"flexrow\" kemet-gutters kemet-autostack>\n <div kemet-breakpoint=\"tiny:100 small:40\">\n <svg width=\"100%\" height=\"150\">\n <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"#0c4a6e\"/>\n <text x=\"50%\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"middle\" fill=\"white\" font-size=\"2rem\">[Thumbnail]</text>\n </svg>\n </div>\n <div>\n <h3><a href=\"#\">Death Star vaporizes it's own planet</a>.</h3>\n <ul kemet-layout=\"flexlist\" kemet-gutters>\n <li>By Thadeus<li>\n <li>11/23/16<li>\n <li>6 Comments<li>\n </ul>\n <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae impedit beatae, ipsum delectus aperiam nesciunt magni facilis ullam.</p>\n </div>\n </div>\n <hr />\n <div kemet-layout=\"flexrow\" kemet-gutters kemet-autostack>\n <div kemet-breakpoint=\"tiny:100 small:40\">\n <svg width=\"100%\" height=\"150\">\n <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"#0c4a6e\"/>\n <text x=\"50%\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"middle\" fill=\"white\" font-size=\"2rem\">[Thumbnail]</text>\n </svg>\n </div>\n <div>\n <h3><a href=\"#\">Death Star vaporizes it's own planet</a>.</h3>\n <ul kemet-layout=\"flexlist\" kemet-gutters>\n <li>By Thadeus<li>\n <li>11/23/16<li>\n <li>6 Comments<li>\n </ul>\n <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae impedit beatae, ipsum delectus aperiam nesciunt magni facilis ullam.</p>\n </div>\n </div>\n <hr />\n <div kemet-layout=\"flexrow\" kemet-gutters kemet-autostack>\n <div kemet-breakpoint=\"tiny:100 small:40\">\n <svg width=\"100%\" height=\"150\">\n <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"#0c4a6e\"/>\n <text x=\"50%\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"middle\" fill=\"white\" font-size=\"2rem\">[Thumbnail]</text>\n </svg>\n </div>\n <div>\n <h3><a href=\"#\">Death Star vaporizes it's own planet</a>.</h3>\n <ul kemet-layout=\"flexlist\" kemet-gutters>\n <li>By Thadeus<li>\n <li>11/23/16<li>\n <li>6 Comments<li>\n </ul>\n <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae impedit beatae, ipsum delectus aperiam nesciunt magni facilis ullam.</p>\n </div>\n </div>\n <hr />\n <div kemet-layout=\"flexrow\" kemet-gutters kemet-autostack>\n <div kemet-breakpoint=\"tiny:100 small:40\">\n <svg width=\"100%\" height=\"150\">\n <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"#0c4a6e\"/>\n <text x=\"50%\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"middle\" fill=\"white\" font-size=\"2rem\">[Thumbnail]</text>\n </svg>\n </div>\n <div>\n <h3><a href=\"#\">Death Star vaporizes it's own planet</a>.</h3>\n <ul kemet-layout=\"flexlist\" kemet-gutters>\n <li>By Thadeus<li>\n <li>11/23/16<li>\n <li>6 Comments<li>\n </ul>\n <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae impedit beatae, ipsum delectus aperiam nesciunt magni facilis ullam.</p>\n </div>\n </div>\n <hr />\n <div kemet-layout=\"flexrow\" kemet-gutters kemet-autostack>\n <div kemet-breakpoint=\"tiny:100 small:40\">\n <svg width=\"100%\" height=\"150\">\n <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"#0c4a6e\"/>\n <text x=\"50%\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"middle\" fill=\"white\" font-size=\"2rem\">[Thumbnail]</text>\n </svg>\n </div>\n <div>\n <h3><a href=\"#\">Death Star vaporizes it's own planet</a>.</h3>\n <ul kemet-layout=\"flexlist\" kemet-gutters>\n <li>By Thadeus<li>\n <li>11/23/16<li>\n <li>6 Comments<li>\n </ul>\n <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae impedit beatae, ipsum delectus aperiam nesciunt magni facilis ullam.</p>\n </div>\n </div>\n </article>\n <aside kemet-breakpoint=\"tiny:100 medium:33\">\n <div kemet-layout=\"flexgrid\" kemet-gutters>\n <div kemet-breakpoint=\"tiny:33\" kemet-type-align=\"center\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" height=\"67px\" id=\"twitter\" style=\"enable-background:new 0 0 67 67;\" version=\"1.1\" viewBox=\"0 0 67 67\" width=\"67px\" xml:space=\"preserve\"><path d=\"M38.167,22.283c-2.619,0.953-4.274,3.411-4.086,6.101 l0.063,1.038l-1.048-0.127c-3.813-0.487-7.145-2.139-9.974-4.915l-1.383-1.377l-0.356,1.017c-0.754,2.267-0.272,4.661,1.299,6.271 c0.838,0.89,0.649,1.017-0.796,0.487c-0.503-0.169-0.943-0.296-0.985-0.233c-0.146,0.149,0.356,2.076,0.754,2.839 c0.545,1.06,1.655,2.097,2.871,2.712l1.027,0.487l-1.215,0.021c-1.173,0-1.215,0.021-1.089,0.467 c0.419,1.377,2.074,2.839,3.918,3.475l1.299,0.444l-1.131,0.678c-1.676,0.976-3.646,1.526-5.616,1.567 C20.775,43.256,20,43.341,20,43.405c0,0.211,2.557,1.397,4.044,1.864c4.463,1.377,9.765,0.783,13.746-1.568 c2.829-1.674,5.657-5,6.978-8.221c0.713-1.715,1.425-4.851,1.425-6.354c0-0.975,0.063-1.102,1.236-2.267 c0.692-0.678,1.341-1.419,1.467-1.631c0.21-0.403,0.188-0.403-0.88-0.043c-1.781,0.636-2.033,0.551-1.152-0.402 c0.649-0.678,1.425-1.907,1.425-2.267c0-0.063-0.314,0.042-0.671,0.233c-0.377,0.212-1.215,0.53-1.844,0.72l-1.131,0.361l-1.027-0.7 c-0.566-0.381-1.361-0.805-1.781-0.932C40.766,21.902,39.131,21.944,38.167,22.283z M34,64C17.432,64,4,50.568,4,34 C4,17.431,17.432,4,34,4s30,13.431,30,30C64,50.568,50.568,64,34,64z\" style=\"fill-rule:evenodd;clip-rule:evenodd;fill:#598DCA;\"/></svg>\n <p><div>56,000</div><div>Followers</div></p>\n </div>\n <div kemet-breakpoint=\"tiny:33\" kemet-type-align=\"center\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" height=\"67px\" id=\"github\" style=\"enable-background:new 0 0 67 67;\" version=\"1.1\" viewBox=\"0 0 67 67\" width=\"67px\" xml:space=\"preserve\"><path d=\"M21.543,34.568c-0.054,0,0.592,1.367,0.61,1.367 c1.41,2.516,4.128,4.08,8.713,4.514c-0.654,0.488-1.44,1.414-1.549,2.484c-0.823,0.523-2.478,0.696-3.764,0.297 c-1.803-0.559-2.493-4.066-5.192-3.566c-0.584,0.107-0.468,0.486,0.037,0.809c0.823,0.523,1.597,1.178,2.194,2.571 c0.459,1.07,1.423,2.981,4.473,2.981c1.21,0,2.058-0.143,2.058-0.143s0.023,2.731,0.023,3.793c0,1.225-1.682,1.57-1.682,2.159 c0,0.233,0.557,0.255,1.004,0.255c0.884,0,2.723-0.725,2.723-1.998c0-1.011,0.017-4.41,0.017-5.006c0-1.3,0.709-1.712,0.709-1.712 s0.088,6.94-0.169,7.872c-0.302,1.094-0.847,0.939-0.847,1.427c0,0.726,2.214,0.179,2.948-1.416c0.567-1.239,0.319-8.05,0.319-8.05 l0.605-0.012c0,0,0.034,3.117,0.013,4.542c-0.021,1.476-0.122,3.342,0.77,4.222c0.586,0.579,2.484,1.594,2.484,0.666 c0-0.539-1.04-0.982-1.04-2.441v-6.715c0.831,0,0.706,2.208,0.706,2.208l0.061,4.103c0,0-0.184,1.494,1.645,2.119 c0.645,0.223,2.025,0.283,2.09-0.09c0.065-0.373-1.662-0.928-1.678-2.084c-0.01-0.707,0.032-1.119,0.032-4.187 c0-3.068-0.419-4.202-1.88-5.106c4.508-0.455,7.299-1.551,8.658-4.486c0.106,0.003,0.555-1.371,0.496-1.371 c0.305-1.108,0.47-2.419,0.502-3.971c-0.008-4.21-2.058-5.699-2.451-6.398c0.58-3.187-0.098-4.637-0.412-5.135 c-1.162-0.406-4.041,1.045-5.615,2.067c-2.564-0.737-7.986-0.666-10.019,0.19c-3.751-2.639-5.736-2.235-5.736-2.235 s-1.283,2.259-0.339,5.565c-1.234,1.546-2.154,2.64-2.154,5.539C20.906,31.83,21.102,33.292,21.543,34.568z M34,64 C17.432,64,4,50.568,4,34C4,17.431,17.432,4,34,4s30,13.431,30,30C64,50.568,50.568,64,34,64z\" style=\"fill-rule:evenodd;clip-rule:evenodd;fill:#333333;\"/></svg>\n <p><div>56,000</div><div>Followers</div></p>\n </div>\n <div kemet-breakpoint=\"tiny:33\" kemet-type-align=\"center\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" height=\"67px\" id=\"codepen\" enable-background=\"new 0 0 512 512\" version=\"1.1\" viewBox=\"0 0 512 512\" width=\"67px\" xml:space=\"preserve\"><circle cx=\"256\" cy=\"256\" id=\"ellipse\" r=\"256\"/><path d=\"M415.8,204.9c-0.1-0.4-0.1-0.8-0.2-1.1c-0.1-0.2-0.1-0.4-0.2-0.7c-0.1-0.3-0.2-0.7-0.4-1 c-0.1-0.2-0.2-0.4-0.3-0.7c-0.1-0.3-0.3-0.6-0.5-0.9c-0.1-0.2-0.2-0.4-0.4-0.6c-0.2-0.3-0.4-0.6-0.6-0.8c-0.1-0.2-0.3-0.4-0.5-0.6 c-0.2-0.3-0.4-0.5-0.7-0.7c-0.2-0.2-0.4-0.4-0.5-0.5c-0.2-0.2-0.5-0.4-0.8-0.7c-0.2-0.2-0.4-0.3-0.6-0.5c-0.1-0.1-0.1-0.1-0.2-0.2 L263.6,98.3c-4.6-3.1-10.6-3.1-15.3,0l-146.3,97.5c-0.1,0.1-0.1,0.1-0.2,0.2c-0.2,0.1-0.4,0.3-0.6,0.5c-0.3,0.2-0.5,0.4-0.8,0.7 c-0.2,0.2-0.4,0.4-0.5,0.5c-0.2,0.2-0.5,0.5-0.7,0.7c-0.2,0.2-0.3,0.4-0.5,0.6c-0.2,0.3-0.4,0.6-0.6,0.8c-0.1,0.2-0.3,0.4-0.4,0.6 c-0.2,0.3-0.3,0.6-0.5,0.9c-0.1,0.2-0.2,0.4-0.3,0.7c-0.1,0.3-0.2,0.7-0.4,1c-0.1,0.2-0.1,0.4-0.2,0.7c-0.1,0.4-0.2,0.8-0.2,1.1 c0,0.2-0.1,0.4-0.1,0.6c-0.1,0.6-0.1,1.2-0.1,1.8v97.5c0,0.6,0,1.2,0.1,1.8c0,0.2,0.1,0.4,0.1,0.6c0.1,0.4,0.1,0.8,0.2,1.2 c0.1,0.2,0.1,0.4,0.2,0.7c0.1,0.3,0.2,0.7,0.4,1c0.1,0.2,0.2,0.4,0.3,0.7c0.1,0.3,0.3,0.6,0.5,0.9c0.1,0.2,0.3,0.4,0.4,0.6 c0.2,0.3,0.4,0.6,0.6,0.8c0.1,0.2,0.3,0.4,0.5,0.6c0.2,0.3,0.4,0.5,0.7,0.7c0.2,0.2,0.4,0.4,0.5,0.5c0.2,0.2,0.5,0.4,0.8,0.7 c0.2,0.2,0.4,0.3,0.6,0.5c0.1,0.1,0.1,0.1,0.2,0.2l146.3,97.5c2.3,1.5,5,2.3,7.6,2.3c2.7,0,5.3-0.8,7.6-2.3l146.3-97.5 c0.1-0.1,0.2-0.1,0.2-0.2c0.2-0.2,0.4-0.3,0.6-0.5c0.3-0.2,0.5-0.4,0.8-0.7c0.2-0.2,0.4-0.4,0.5-0.5c0.2-0.2,0.5-0.5,0.7-0.7 c0.2-0.2,0.3-0.4,0.5-0.6c0.2-0.3,0.4-0.6,0.6-0.8c0.1-0.2,0.3-0.4,0.4-0.6c0.2-0.3,0.3-0.6,0.5-0.9c0.1-0.2,0.2-0.4,0.3-0.7 c0.1-0.3,0.2-0.7,0.4-1c0.1-0.2,0.2-0.4,0.2-0.7c0.1-0.4,0.2-0.8,0.2-1.2c0-0.2,0.1-0.4,0.1-0.6c0.1-0.6,0.1-1.2,0.1-1.8v-97.5 c0-0.6,0-1.2-0.1-1.8C415.9,205.2,415.8,205.1,415.8,204.9z M256,288.5L207.4,256l48.6-32.5l48.6,32.5L256,288.5z M242.3,199.6 l-59.6,39.9l-48.1-32.2l107.7-71.8C242.3,135.4,242.3,199.6,242.3,199.6z M157.9,256l-34.4,23v-46L157.9,256z M182.6,272.5 l59.6,39.9v64.1l-107.7-71.8L182.6,272.5z M269.7,312.4l59.6-39.9l48.1,32.2l-107.7,71.8V312.4z M354.1,256l34.4-23v46L354.1,256z M329.4,239.5l-59.6-39.9v-64.1l107.7,71.8L329.4,239.5z\" fill=\"#FFFFFF\"/></svg>\n <p><div>56,000</div><div>Followers</div></p>\n </div>\n <div kemet-breakpoint=\"tiny:33\" kemet-type-align=\"center\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" enable-background=\"new 0 0 512 512\" height=\"67px\" id=\"linkedin\" version=\"1.1\" viewBox=\"0 0 512 512\" width=\"67px\" xml:space=\"preserve\"><g><linearGradient gradientUnits=\"userSpaceOnUse\" id=\"SVGID_1_\" x1=\"8.9756\" x2=\"577.923\" y1=\"-78.99\" y2=\"557.6892\"><stop offset=\"0\" style=\"stop-color:#517FA6\"/><stop offset=\"1\" style=\"stop-color:#426699\"/></linearGradient><path d=\"M271.06,214.363v-0.525c-0.1,0.17-0.247,0.36-0.347,0.525H271.06z\" fill=\"url(#SVGID_1_)\"/><linearGradient gradientUnits=\"userSpaceOnUse\" id=\"SVGID_2_\" x1=\"-20.1191\" x2=\"548.8283\" y1=\"-52.9904\" y2=\"583.6888\"><stop offset=\"0\" style=\"stop-color:#517FA6\"/><stop offset=\"1\" style=\"stop-color:#426699\"/></linearGradient><path d=\"M256,7.098C118.535,7.098,7.098,118.535,7.098,256c0,137.465,111.437,248.902,248.902,248.902 c137.465,0,248.902-111.437,248.902-248.902C504.902,118.535,393.465,7.098,256,7.098z M187.455,352.802h-53.822V190.89h53.822 V352.802z M160.554,168.794h-0.363c-18.058,0-29.755-12.445-29.755-27.992c0-15.886,12.052-27.969,30.465-27.969 c18.421,0,29.747,12.083,30.102,27.969C191.004,156.349,179.323,168.794,160.554,168.794z M381.564,352.805h-53.822v-86.627 c0-21.759-7.792-36.613-27.271-36.613c-14.875,0-23.725,10.008-27.624,19.687c-1.42,3.464-1.783,8.276-1.783,13.125v90.425h-53.83 c0,0,0.718-146.718,0-161.912h53.827v22.948c7.149-11.015,19.927-26.754,48.518-26.754c35.43,0,61.983,23.138,61.986,72.871 V352.805z\" fill=\"url(#SVGID_2_)\"/></g></svg>\n <p><div>56,000</div><div>Followers</div></p>\n </div>\n <div kemet-breakpoint=\"tiny:33\" kemet-type-align=\"center\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" enable-background=\"new 0 0 512 512\" height=\"67px\" id=\"youtube\" version=\"1.1\" viewBox=\"0 0 512 512\" width=\"67px\" xml:space=\"preserve\"><g><linearGradient gradientUnits=\"userSpaceOnUse\" id=\"SVGID_1_\" x1=\"29.8503\" x2=\"443.0858\" y1=\"48.8522\" y2=\"462.0877\"><stop offset=\"0\" style=\"stop-color:#DD272D\"/><stop offset=\"0.5153\" style=\"stop-color:#CA2429\"/><stop offset=\"1\" style=\"stop-color:#B22025\"/></linearGradient><polygon fill=\"url(#SVGID_1_)\" points=\"217.949,313.149 313.196,256 217.949,198.851 \"/><linearGradient gradientUnits=\"userSpaceOnUse\" id=\"SVGID_2_\" x1=\"39.3513\" x2=\"452.5868\" y1=\"39.3513\" y2=\"452.5867\"><stop offset=\"0\" style=\"stop-color:#DD272D\"/><stop offset=\"0.5153\" style=\"stop-color:#CA2429\"/><stop offset=\"1\" style=\"stop-color:#B22025\"/></linearGradient><path d=\"M256,7.098C118.535,7.098,7.098,118.535,7.098,256c0,137.465,111.437,248.902,248.902,248.902 c137.465,0,248.902-111.437,248.902-248.902C504.902,118.535,393.465,7.098,256,7.098z M408.349,268.287 c0,26.307-3.048,52.605-3.048,52.605s-2.981,22.402-12.106,32.251c-11.592,12.935-24.574,13.011-30.527,13.773 C320.026,370.183,256,370.297,256,370.297s-79.227-0.771-103.601-3.267c-6.782-1.353-21.993-0.962-33.594-13.897 c-9.134-9.849-12.106-32.251-12.106-32.251s-3.048-26.289-3.048-52.605v-24.65c0-26.298,3.048-52.596,3.048-52.596 s2.981-22.412,12.106-32.279c11.601-12.935,24.574-13.011,30.527-13.744c42.633-3.305,106.592-3.305,106.592-3.305h0.143 c0,0,63.959,0,106.601,3.305c5.953,0.733,18.935,0.81,30.527,13.744c9.134,9.868,12.106,32.279,12.106,32.279 s3.048,26.298,3.048,52.605V268.287z\" fill=\"url(#SVGID_2_)\"/></g></svg>\n <p><div>56,000</div><div>Followers</div></p>\n </div>\n <div kemet-breakpoint=\"tiny:33\" kemet-type-align=\"center\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" enable-background=\"new 0 0 64 64\" height=\"67px\" version=\"1.1\" viewBox=\"0 0 64 64\" width=\"67px\" xml:space=\"preserve\"><g id=\"Layer_1\"><g><circle cx=\"32\" cy=\"32\" fill=\"#C75C5C\" r=\"32\"/></g><g opacity=\"0.2\"><g><path d=\"M49.982,31.003c-0.094-5.522-4.574-10.442-10.107-10.442c-3.2,0-6.019,1.674-7.875,4.131 c-1.856-2.457-4.676-4.131-7.875-4.131c-5.533,0-10.012,4.921-10.107,10.442H14c0,0.034,0.007,0.065,0.007,0.099 c0,0.025-0.007,0.049-0.007,0.076c0,0.155,0.038,0.272,0.045,0.421c0.495,14.071,17.813,19.84,17.813,19.84 s17.572-5.762,18.092-19.818C49.959,31.464,50,31.34,50,31.178c0-0.027-0.007-0.052-0.007-0.076c0-0.036,0.007-0.065,0.007-0.099 H49.982z\" fill=\"#231F20\"/></g></g><g><g><path d=\"M49.982,29.003c-0.094-5.522-4.574-10.442-10.107-10.442c-3.2,0-6.019,1.674-7.875,4.131 c-1.856-2.457-4.676-4.131-7.875-4.131c-5.533,0-10.012,4.921-10.107,10.442H14c0,0.034,0.007,0.065,0.007,0.099 c0,0.025-0.007,0.049-0.007,0.076c0,0.155,0.038,0.272,0.045,0.421c0.495,14.071,17.813,19.84,17.813,19.84 s17.572-5.762,18.092-19.818C49.959,29.464,50,29.34,50,29.178c0-0.027-0.007-0.052-0.007-0.076c0-0.036,0.007-0.065,0.007-0.099 H49.982z\" fill=\"#FFFFFF\"/></g></g></g><g id=\"heart\"/></svg>\n <p><div>56,000</div><div>Followers</div></p>\n </div>\n </div>\n <br />\n <h3>From our friends.</h3>\n <dummy-element label=\"Buy Me!\" height=\"200px\"></dummy-element>\n <br />\n\n <h3>Trending Posts</h3>\n <div kemet-layout=\"flexrow\" kemet-gutters>\n <div kemet-breakpoint=\"tiny:content\">\n <img src=\"https://via.placeholder.com/100x100\" alt=\"a placeholder\" />\n </div>\n <h4>All I need is a space suit and I'm ready to go.</h4>\n </div>\n <br />\n\n <div kemet-layout=\"flexrow\" kemet-gutters>\n <div kemet-breakpoint=\"tiny:content\">\n <img src=\"https://via.placeholder.com/100x100\" alt=\"a placeholder\" />\n </div>\n <h4>All I need is a space suit and I'm ready to go.</h4>\n </div>\n <br />\n\n <div kemet-layout=\"flexrow\" kemet-gutters>\n <div kemet-breakpoint=\"tiny:content\">\n <img src=\"https://via.placeholder.com/100x100\" alt=\"a placeholder\" />\n </div>\n <h4>All I need is a space suit and I'm ready to go.</h4>\n </div>\n <br />\n\n <div kemet-layout=\"flexrow\" kemet-gutters>\n <div kemet-breakpoint=\"tiny:content\">\n <img src=\"https://via.placeholder.com/100x100\" alt=\"a placeholder\" />\n </div>\n <h4>All I need is a space suit and I'm ready to go.</h4>\n </div>\n </aside>\n </div>\n </section>\n\n <section>\n <div kemet-layout=\"flexgrid\" kemet-gutters>\n <div kemet-breakpoint=\"tiny:100 large:33\">\n <h3>Flickr Images</h3>\n <ul kemet-layout=\"flexlist\" kemet-gutters=\"tiny:minus-3\">\n <li><img src=\"https://via.placeholder.com/75x75\" alt=\"a placeholder\" /></li>\n <li><img src=\"https://via.placeholder.com/75x75\" alt=\"a placeholder\" /></li>\n <li><img src=\"https://via.placeholder.com/75x75\" alt=\"a placeholder\" /></li>\n <li><img src=\"https://via.placeholder.com/75x75\" alt=\"a placeholder\" /></li>\n <li><img src=\"https://via.placeholder.com/75x75\" alt=\"a placeholder\" /></li>\n <li><img src=\"https://via.placeholder.com/75x75\" alt=\"a placeholder\" /></li>\n <li><img src=\"https://via.placeholder.com/75x75\" alt=\"a placeholder\" /></li>\n <li><img src=\"https://via.placeholder.com/75x75\" alt=\"a placeholder\" /></li>\n </ul>\n </div>\n <div kemet-breakpoint=\"tiny:100 medium:50 large:33\">\n <h3>Flickr Images</h3>\n <ul>\n <li>Space</li>\n <li>Galaxies</li>\n <li>Milky Way</li>\n <li>Black Holes</li>\n <li>Rebels</li>\n <li>Death Star</li>\n <li>Republic</li>\n <li>R2D2</li>\n </ul>\n </div>\n <div kemet-breakpoint=\"tiny:100 medium:50 large:33\">\n <h3>Random Mag</h3>\n <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti quam voluptatum vel repellat ab similique molestias molestiae ea omnis eos, id asperiores est praesentium, voluptate officia nulla aspernatur sequi aliquam.</p>\n </div>\n </div>\n </section>\n </main>\n`;\n\nconst TravelTemplate = () => html`\n <header kemet-layout=\"flexrow\" kemet-align=\"middle\" kemet-background-color=\"gray2\" kemet-autostack kemet-padding=\"tiny:smallest\">\n <div>\n <ul kemet-layout=\"flexlist\" kemet-gutters kemet-align=\"middle\">\n <li>\n <svg width=\"72px\" height=\"72px\" enable-background=\"new 0 0 128 128\" id=\"travel-logo\" version=\"1.1\" viewBox=\"0 0 128 128\" xml:space=\"preserve\">\n <path d=\"M42.2,40l-0.3,0.9h-0.4H41l-0.5,0.3l-2.6,1.6l-0.1,0l0.6-1.2l1-0.4l1.4-0.6l0-0.1L42.2,40 M30.8,40.4 L30.8,40.4l0.9,0.4l2,0.8l0.2,1.1l0.5,2.1l-2.6,1.6h2.9l0.2,1.1l-0.2,0.1L34,47.9l-0.3,0.8l-0.9,2.2L30.2,53l-0.6,0.5l0,0.4 l-1.9-0.5L25.8,53l-0.4,1.4H25h-0.7l-0.5,0.4L23,55.4C24.4,49.9,27.1,44.7,30.8,40.4 M36.8,46.4L36.4,47l-0.7,0.3l0.4-0.8H36.8 M34.9,68.8l1.3,1l0.6,0.5l0.8-0.1l1.5-0.2l0.7,1.9l0.4,1l1.1,0.2l1.4,0.3l0.8,1.6l0.3,0.6l0.6,0.3l0.2,0.1c2,1,4.1,2.1,6.1,3.1 l-0.1,0.7L49,82.1l-0.4,0.6l0.1,0.7l0.3,3l-0.6,1.4L47,88.1l-0.8,0.2l-0.4,0.6l-1.1,1.6L44,91.4l0.5,1l0.1,0.3l-0.9,2.2l-1.2,0.4 l-0.9,0.3l-0.3,0.9l-0.1,0.4c-0.9-0.5-1.8-1-2.6-1.6l0.3-1.1l0.1-0.6l-0.3-0.6L38,91.3l0.1-3.2l0-0.7l-0.4-0.6l-1.2-1.7l-0.1-0.2 l-0.2-0.2l-2.5-2.2l-2.2-4l0.5-1.8l0.2-0.7l-0.2-0.4l0.3-0.5l0.1-0.2l0.1-0.2l1.1-3l0.3,0.1v-2.2L34.9,68.8 M37.7,31.7 C27.1,38.6,20,50.5,19.9,64.1l3.1,1.8l3.2,0.9l1.4,1.8l2.2,1.6l1.3-0.2l0.9,0.4v0.3L30.7,74l-0.9,1.4l0.3,0.7l-0.8,2.6l2.8,5.1 l2.8,2.5l1.2,1.7L36,91.6l0.9,2.1l-0.6,2.5c1.7,1.2,3.5,2.3,5.4,3.3l1-1l0.5-1.2l2-0.7l1.5-3.9l-0.5-1l1.1-1.6l2.3-0.5l1.2-2.8 l-0.3-3.5l1.9-2.6l0.3-2.6c-2.5-1.3-5.1-2.6-7.6-3.9L44,71.7l-2.3-0.5l-1.2-3.3l-3.1,0.3l-2.6-1.9L32,68.7v0.4 c-0.8-0.2-2.2-0.3-3-0.7l-1-1.7v-1.9l-1.5,0.2c0.2-1.2,0.7-2.9,0.8-3.7h-1.1l-1.1,1.4l-1.1,0.5l-1.5-0.9l-0.2-1.9l0.3-2.1l2.3-1.8 h1.9l0.3-1l2.3,0.6l1.7,2.1l0.3-3.5l2.9-2.4l1.1-2.6l2.2-0.9l1.2-1.7l2.8-0.5l1.4-2c-1.4,0-2.8,0-4.2,0l2.6-1.6h1.9L46,42l0.3-1 l-0.9-0.9l-1.1-0.3l0.3-1l-0.8-1.6L42,37.9l0.3-1.4l-2.2-1.2l-1.7,3l0.2,1.1L36.9,40l-1.1,2.3l-0.5-2.1L32.4,39l-0.5-1.6l3.9-2.3 l1.7-1.6L37.7,31.7L37.7,31.7z\" fill=\"#3B97D3\"/>\n <path d=\"M37,34.9h1.5l0.8-1.7c0.7-0.5,1.3-0.9,2-1.4l1.5,0.5c1,0.7,2.1,1.4,3.1,2.1l1.5-1.4l-1.7-0.7l-0.8-1.6 l-2.9-0.3L42,29.5l-1,0.3c-0.2,0.1-0.3,0.2-0.5,0.2L40,31.1l-0.3-0.6c-0.2,0.1-0.5,0.3-0.7,0.4l0.1,1.1l-1.2,1L37,34.9z\" fill=\"#3B97D3\"/><polygon fill=\"#3B97D3\" points=\"46,45.3 46.9,43.9 45.5,42.8 \"/><path d=\"M58.9,27.4c0.4,0,0.8,0,1.1,0l0.7,0.3l-0.8,2.1c-2,0.9-3.9,1.6-5.8,2.2l-0.7,0.2l-0.2,0.4V32v-1.4v-1 l-0.8-0.6l-0.7-0.5l2.6-0.7C55.8,27.5,57.4,27.4,58.9,27.4 M58.9,25.4c-1.7,0-3.5,0.1-5.1,0.3l-4.9,1.3l-1.1,1.1l3.4,2.4V32 l-1.2,1.4l2,3.7l1.2-0.7l1.5-2.4c2.4-0.7,4.5-1.6,6.8-2.6l1.9-4.7l-2.8-1.1C60,25.4,59.4,25.4,58.9,25.4L58.9,25.4z\" fill=\"#3B97D3\"/><polygon fill=\"#3B97D3\" points=\"62.2,33.9 61.6,33.7 61.6,33.7 61.5,34.8 62.6,35.5 64.4,34.2 63.5,33.2 \"/><polygon fill=\"#3B97D3\" points=\"41.8,34.1 43.4,34.9 44,34.9 44,34.2 42.7,33.4 \"/><polygon fill=\"#3B97D3\" points=\"66.9,39.7 65.8,40 66.1,41.9 67.5,41.2 \"/><path d=\"M43.4,28.6L43.4,28.6L43.4,28.6C43.4,28.6,43.4,28.6,43.4,28.6z\" fill=\"#3B97D3\"/>\n <path d=\"M62.9,106c-1.3,0.1-2.7,0.2-4,0.2c-22.9,0-41.5-18.6-41.5-41.5S36,23.2,58.9,23.2 c22.9,0,41.5,18.6,41.5,41.5c0,8.2-2.4,15.8-6.5,22.3c2.1-1.1,4.4-2.5,6.5-3.6c2.6-5.7,4-12,4-18.7c0-25.1-20.4-45.5-45.5-45.5 S13.4,39.6,13.4,64.7s20.4,45.5,45.5,45.5c3,0,5.9-0.3,8.7-0.8C66.3,108.4,64.6,107.2,62.9,106z\" fill=\"#3B97D3\"/>\n <path d=\"M61.8,68.2c1.3,1.5,2.6,3,3.9,4.5l1.9-1.7l0.8,1l2.1-1.3l0.7,0.9h2.1l1.2,1.3l-0.7,2.3l1.5,1.7l-0.1,2.9 l1.1,2.1l-0.8,1.7c-0.1,1.3-0.2,2.6-0.2,3.9c0,0.1,0.1,0.2,0.1,0.3c0.5-0.2,1.2-0.4,2-0.4c0-0.1,0-0.1-0.1-0.2 c0-0.8,0.1-1.6,0.1-2.5c0-0.2,0-0.4,0-0.5l0.6-1.4c0.3-0.6,0.2-1.2,0-1.7l-0.8-1.6l0.1-2.4c0-0.5-0.2-1-0.5-1.4l-0.7-0.8l0.4-1.2 c0.2-0.7,0-1.4-0.4-2l-1.2-1.3c-0.4-0.4-0.9-0.6-1.5-0.6h-1.1l-0.1-0.1c-0.4-0.5-1-0.7-1.6-0.7c-0.4,0-0.7,0.1-1,0.3l-0.7,0.4 c-0.4-0.3-0.8-0.4-1.2-0.4c-0.5,0-0.9,0.2-1.3,0.5l-0.4,0.4c-0.8-0.9-1.6-1.8-2.4-2.7l-1-2.4l0.8-1.2c0.5-0.7,0.4-1.7-0.1-2.4 l1.1-2.6c1.2-1.5,2.4-2.9,3.7-4.3l1.9-0.5l2.4-0.3l1.1,0.3l2.5,2.5c0.4,0.4,0.9,0.6,1.4,0.6c0,0,0,0,0.1,0c0.6,0,1.1-0.3,1.4-0.7 l0.6-0.7l0.3-0.1l2.1,0.6c0.2,0,0.3,0.1,0.5,0.1h2c0.4,0,0.9-0.1,1.2-0.4l1.4-1c0.1-0.1,0.3-0.2,0.4-0.3l0.6-0.8 c0.4-0.5,0.5-1,0.4-1.6c-0.1-0.6-0.4-1.1-0.9-1.4L86,49.6c-0.3-0.2-0.6-0.3-0.9-0.3l-1.4-0.1c-0.5-0.7-1-1.4-1.6-2.1 c-0.4-0.4-0.9-0.6-1.4-0.6c-0.3,0-0.6,0.1-0.8,0.2l-0.1,0c-0.1-0.2-0.2-0.5-0.4-0.7l-1.5-1.5c-0.4-0.4-0.9-0.6-1.4-0.6h-0.6 c-0.6,0-1.2,0.3-1.5,0.7c-0.2-0.1-0.4-0.1-0.6-0.1c-0.1,0-0.3,0-0.4,0l-2.3,0.5c-0.1,0-0.2,0.1-0.3,0.1l-0.1-0.2l0.7-0.4 c0.7-0.4,1.1-1.2,1-2c0.1-0.1,0.2-0.2,0.3-0.4h0.5c0.3,0,0.5-0.1,0.8-0.2l1.7,0.4c0.1,0,0.3,0,0.4,0c0.5,0,0.9-0.2,1.3-0.5l2.3-1.9 c0.4-0.3,0.6-0.7,0.7-1.2l0-0.1l1.4-0.9c0.3-0.2,0.6-0.5,0.7-0.9l0,0c0.4,0.3,0.8,0.5,1.3,0.5c0.1,0,0.1,0,0.2,0 c0.2,0,0.4-0.1,0.6-0.1c5,4.7,8.6,10.7,10.3,17.2l-0.6-0.6c-0.4-0.4-0.9-0.6-1.4-0.6c-0.3,0-0.5,0-0.8,0.2c-0.7,0.3-1.2,1-1.2,1.8 v2.3c0,0.7,0.3,1.3,0.9,1.7l1.4,0.9l0.9,0.9c0.3,0.3,0.7,0.5,1.1,0.6l-0.2,0.2l-2.3,1.6c-0.1,0.1-0.2,0.1-0.2,0.2l-2,1.9 c-0.6,0.6-0.8,1.5-0.5,2.3c0.3,0.7,1,1.2,1.8,1.2c0,0,0.1,0,0.1,0l-1,2.6l-2.9,4.7c-0.2,0.3-0.3,0.7-0.3,1.1v4.9 c0,0.2,0,0.3,0.1,0.5l0.2,0.9l-1.3,0.8c-0.1,0.1-0.2,0.1-0.2,0.2l-1.8,1.5c-0.4,0.3-0.7,0.8-0.7,1.4c0,0,0,0,0,0 c0.7,0.1,1.4,0.2,2.1,0.2l-0.1-0.1l1.8-1.5l1.7-1.1l0.8-0.9l-0.5-1.9c0-1.6,0-3.3,0-4.9l3-4.9l1.8-4.5V67c-1.6,0.1-1.7,0.2-2.6,0.3 l2-1.9l2.5-1.8l1.3-1.6v-0.5c0-0.5,0.1-0.9,0.1-1.4c-0.6-0.6-0.5-1.1-0.8-1.7L95.3,60l-1-1l-1.6-1.1v-2.3l1.8,1.8l2-0.3 c0.3,0.3,0.7,0.6,1,0.9c-1.5-9.3-6.3-17.4-13.2-23.2l-0.7,0.9l-2-1.8h1.3c-1.2-0.8-2.5-2-3.7-2.8l-0.5-0.4l-3.1,0.7l-2.1,1.2v1.1 l-2.7,1.9l0.9,2.8l1.7-1.2l1.1,1.2l1.2,0.7l0.8-2.1L76,36.1l0.5-0.7l1.7-1.3H79l-0.7,1.2v1.6c0-0.2,1.4-0.3,2.1-0.4l-2,1.4l-0.2,0.9 l-2.3,1.9l-2.4-0.5v-1.4l-1.1,0.6l0.5,1.1h-1.7l-0.5,1l-1-1.2c-0.4-1-0.8-2.2-1.2-3h-1.3v1.4l0.8,0.7v1.6L67.7,43l1.8-0.4l0.4-0.4 l0.2,0.9l-1,0.5l-2.1,0.4l1.2,1.1l0.3,1h-1.5l-3.2,1.5V50H66l0.9,1.3l1.9-0.6l0.8-1.9l1.4-0.9l0.3-0.7l2.3-0.5l1.2,1.4l1.4,0.7 l-0.8,1.5l1.2-0.4l0.6-1.7L75.7,46h0.6l1.5,1.5l0.3,2.1l1.4,1.6l0.3-2.3l0.8-0.4c0.8,0.8,1.4,1.7,2,2.6l2.3,0.2l1.4,0.8L85.8,53 l-1.4,1h-2l-2.6-0.7l-1.4,0.3l-1,1.1l-2.9-2.9l-2-0.5l-2.9,0.3l-2.6,0.7c-1.5,1.7-2.9,3.3-4.3,5.1l-1.7,4l0.8,0.9l-1.4,2.1 L61.8,68.2z M67.4,48.6c-0.1-0.1-0.3-0.3-0.4-0.4l0.5-0.3h0.2L67.4,48.6z\" fill=\"#3B97D3\"/>\n <path d=\"M114.7,82.2c-1.6-2.2-6.5-1.4-8.5,0c-2,1.4-14.9,8.5-14.9,8.5s-8.5-1-12.6-1.4c-4.1-0.4-4.3,2.4-2.2,3.1 c2.2,0.8,4.7,2.8,4.7,2.8l-9.4,5.3c0,0-4.7-1.6-9.4-2.9s-5.7,1.2-3.5,2.9c2.2,1.8,11.8,8.6,11.8,8.6l14.1-5.7c0,0,0,3.7-0.2,5.7 c-0.2,2,1.6,5.1,3.7,1.8c2.2-3.3,6.9-12.4,6.9-12.4s13.6-8.5,16.1-10.2S116.3,84.3,114.7,82.2z M113.2,83.7c-0.1,0.3-0.4,1.2-3,2.9 c-2.5,1.7-15.9,10.1-16,10.2l-0.5,0.3l-0.3,0.5c0,0.1-4.7,9-6.8,12.2c0,0,0,0,0,0c0-0.2-0.1-0.4,0-0.5c0.2-2,0.2-5.7,0.2-5.9v-3 l-15.9,6.4c-2.3-1.7-8.4-6.1-10.5-7.7c0.3,0,0.8,0.1,1.4,0.3c4.6,1.3,9.3,2.9,9.4,2.9l0.8,0.3l12.8-7.2l-2.4-1.8 c-0.1-0.1-1.7-1.3-3.6-2.3c4.2,0.4,12,1.3,12.1,1.3l0.6,0.1l0.6-0.3c1.3-0.7,13.1-7.2,15.1-8.6c0.7-0.5,2.2-1,3.8-1 c1.1,0,1.7,0.3,1.9,0.5C113.2,83.5,113.2,83.6,113.2,83.7z\" fill=\"#2C3E50\"/>\n </svg>\n </li>\n <li><a href=\"#one\">One</a></li>\n <li><a href=\"#two\">Two</a></li>\n <li><a href=\"#three\">Three</a></li>\n </ul>\n </div>\n <div kemet-breakpoint=\"tiny:content\">\n <ul kemet-layout=\"flexlist\" kemet-gutters>\n <li><kemet-button>My Account</kemet-button></li>\n <li><kemet-button>Login</kemet-button></li>\n </ul>\n </div>\n </header>\n\n <br />\n\n <div kemet-hide=\"medium:up\">\n <svg width=\"100%\" height=\"150\">\n <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"#0c4a6e\"/>\n <text x=\"50%\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"middle\" fill=\"white\" font-size=\"2rem\">[Advertisements]</text>\n </svg>\n </div>\n\n <br />\n\n <section kemet-padding=\"tiny:small\">\n <div kemet-layout=\"flexrow\" kemet-autostack kemet-gutters=\"tiny:plus-2\">\n <div kemet-breakpoint=\"medium:40\">\n <h1>Close Your Eyes and Open Your Mind</h1>\n <p>There is beauty in space, and it is orderly. There is no weather, and there is regularity. It is predictable. Everything in space obeys the laws of physics. If you know these laws, and obey them, space will treat you kindly. It is predictable. Everything in space obeys the laws of physics. If you know these laws, and obey them, space will treat you kindly.</p>\n <ul kemet-layout=\"flexlist\" kemet-gutters>\n <li><kemet-button>Take a Tour</kemet-button></li>\n <li><kemet-button>Start a free trial</kemet-button></li>\n </ul>\n </div>\n <div kemet-hide=\"medium:down\">\n <svg width=\"100%\" height=\"100%\">\n <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"#0c4a6e\"/>\n <text x=\"50%\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"middle\" fill=\"white\" font-size=\"1.5rem\">[Advertisements]</text>\n </svg>\n </div>\n <form>\n <div kemet-elevation=\"layer4\" kemet-padding=\"tiny:normal\" kemet-border=\"all-1 solid primary\" style=\"height:100%\">\n <kemet-input type=\"text\" placeholder=\"Find your dream planet\" kemet-margin-bottom=\"tiny:smallest\"></kemet-input>\n <kemet-input type=\"text\" placeholder=\"Number of moons\" kemet-margin-bottom=\"tiny:smallest\"></kemet-input>\n <kemet-button kemet-margin-top=\"tiny:smallest\">Search Now</kemet-button>\n </div>\n </form>\n </div>\n </section>\n\n <br /><hr /><br />\n\n <section>\n <div kemet-padding=\"tiny:small\">\n <h2>Trending Planetary Destinations</h2>\n <div kemet-layout=\"flexgrid\" kemet-basis=\"tiny:1-columns medium:3-columns\" kemet-gutters=\"tiny:plus-3\" kemet-autostack>\n <div>\n <figure kemet-padding=\"tiny:normal\" kemet-margin=\"tiny:none\" kemet-elevation=\"layer3\">\n <svg width=\"100%\" height=\"370\">\n <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"#0c4a6e\"/>\n <text x=\"50%\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"middle\" fill=\"white\" font-size=\"1.5rem\">Look at me!</text>\n </svg>\n <h3>Copernican Revolution caused an uproar</h3>\n <p>Find Earth-like planets life outside the Solar System</p>\n </figure>\n </div>\n <div>\n <figure kemet-padding=\"tiny:normal\" kemet-margin=\"tiny:none\" kemet-elevation=\"layer3\">\n <svg width=\"100%\" height=\"370\">\n <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"#0c4a6e\"/>\n <text x=\"50%\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"middle\" fill=\"white\" font-size=\"1.5rem\">Look at me!</text>\n </svg>\n <h3>Copernican Revolution caused an uproar</h3>\n <p>Find Earth-like planets life outside the Solar System</p>\n </figure>\n </div>\n <div>\n <figure kemet-padding=\"tiny:normal\" kemet-margin=\"tiny:none\" kemet-elevation=\"layer3\">\n <svg width=\"100%\" height=\"370\">\n <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"#0c4a6e\"/>\n <text x=\"50%\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"middle\" fill=\"white\" font-size=\"1.5rem\">Look at me!</text>\n </svg>\n <h3>Copernican Revolution caused an uproar</h3>\n <p>Find Earth-like planets life outside the Solar System</p>\n </figure>\n </div>\n <div>\n <figure kemet-padding=\"tiny:normal\" kemet-margin=\"tiny:none\" kemet-elevation=\"layer3\">\n <svg width=\"100%\" height=\"370\">\n <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"#0c4a6e\"/>\n <text x=\"50%\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"middle\" fill=\"white\" font-size=\"1.5rem\">Look at me!</text>\n </svg>\n <h3>Copernican Revolution caused an uproar</h3>\n <p>Find Earth-like planets life outside the Solar System</p>\n </figure>\n </div>\n <div>\n <figure kemet-padding=\"tiny:normal\" kemet-margin=\"tiny:none\" kemet-elevation=\"layer3\">\n <svg width=\"100%\" height=\"370\">\n <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"#0c4a6e\"/>\n <text x=\"50%\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"middle\" fill=\"white\" font-size=\"1.5rem\">Look at me!</text>\n </svg>\n <h3>Copernican Revolution caused an uproar</h3>\n <p>Find Earth-like planets life outside the Solar System</p>\n </figure>\n </div>\n <div>\n <figure kemet-padding=\"tiny:normal\" kemet-margin=\"tiny:none\" kemet-elevation=\"layer3\">\n <svg width=\"100%\" height=\"370\">\n <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"#0c4a6e\"/>\n <text x=\"50%\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"middle\" fill=\"white\" font-size=\"1.5rem\">Look at me!</text>\n </svg>\n <h3>Copernican Revolution caused an uproar</h3>\n <p>Find Earth-like planets life outside the Solar System</p>\n </figure>\n </div>\n </div>\n <p kemet-type-align=\"center\">\n <kemet-button>Load More</kemet-button>\n </p>\n </div>\n </section>\n\n <br />\n\n <section kemet-background-color=\"gray1\" kemet-padding=\"tiny:small\">\n <div kemet-layout=\"flexrow\" kemet-gutters kemet-autostack>\n <div>\n <h3>Flickr Images</h3>\n <ul kemet-layout=\"flexcolumn\" kemet-gutters=\"tiny:minus-3\" kemet-padding=\"tiny:none\">\n <li><a href=\"#\">One</a></li>\n <li><a href=\"#\">Two</a></li>\n <li><a href=\"#\">Three</a></li>\n <li><a href=\"#\">Four</a></li>\n </ul>\n </div>\n <div>\n <h3>Solar Systems</h3>\n <ul kemet-layout=\"flexcolumn\" kemet-gutters=\"tiny:minus-3\" kemet-padding=\"tiny:none\">\n <li><a href=\"#\">One</a></li>\n <li><a href=\"#\">Two</a></li>\n <li><a href=\"#\">Three</a></li>\n <li><a href=\"#\">Four</a></li>\n </ul>\n </div>\n <div>\n <h3>Contact</h3>\n <ul kemet-layout=\"flexcolumn\" kemet-gutters=\"tiny:minus-3\" kemet-padding=\"tiny:none\">\n <li><a href=\"#\">Twitter</a></li>\n <li><a href=\"#\">YouTube</a></li>\n <li><a href=\"#\">LinkedIn</a></li>\n <li><a href=\"#\">Github</a></li>\n </ul>\n </div>\n <div>\n <h3>Offices</h3>\n <ul kemet-layout=\"flexcolumn\" kemet-gutters=\"tiny:minus-3\" kemet-padding=\"tiny:none\">\n <li><a href=\"#\">One</a></li>\n <li><a href=\"#\">Two</a></li>\n <li><a href=\"#\">Three</a></li>\n <li><a href=\"#\">Four</a></li>\n </ul>\n </div>\n </div>\n </section>\n`;\n\n\nexport const Agency: Story = {\n render: AgencyTemplate,\n}\n\nexport const eCommerce: Story = {\n render: eCommerceTemplate,\n}\n\nexport const News: Story = {\n render: NewsTemplate,\n}\n\nexport const Travel: Story = {\n render: TravelTemplate\n}\n"]}

package/dist/src/utilities/controllers/forms.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+export declare class FormSubmitController {
+    host: any;
+    form: any;
+    options: any;
+    constructor(host: any, options?: any);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    handleFormData(event: any): void;
+    handleFormSubmit(event: any): void;
+    submit(): void;
+}

package/dist/src/utilities/controllers/forms.js ADDED Viewed

@@ -0,0 +1,102 @@
+export class FormSubmitController {
+    constructor(host, options = undefined) {
+        (this.host = host).addController(this);
+        this.options = {
+            form: (input) => input.closest('form'),
+            name: (input) => input.name,
+            value: (input) => input.value,
+            disabled: (input) => input.disabled,
+            checkValidity: (input) => (typeof input.checkValidity === 'function' ? input.checkValidity() : true),
+            ...options,
+        };
+        this.handleFormData = this.handleFormData.bind(this);
+        this.handleFormSubmit = this.handleFormSubmit.bind(this);
+    }
+    hostConnected() {
+        this.form = this.options.form(this.host);
+        if (this.form) {
+            this.form.addEventListener('formdata', this.handleFormData);
+            this.form.addEventListener('submit', this.handleFormSubmit);
+        }
+    }
+    hostDisconnected() {
+        if (this.form) {
+            this.form.removeEventListener('formdata', this.handleFormData);
+            this.form.removeEventListener('submit', this.handleFormSubmit);
+            this.form = undefined;
+        }
+    }
+    handleFormData(event) {
+        var _a;
+        const disabled = this.options.disabled(this.host);
+        const name = this.options.name(this.host);
+        const value = this.options.value(this.host);
+        if (!disabled && typeof name === 'string' && typeof value !== 'undefined') {
+            if (Array.isArray(value)) {
+                value.forEach((val) => {
+                    var _a;
+                    (_a = event.formData) === null || _a === void 0 ? void 0 : _a.append(name, val.toString());
+                });
+            }
+            else {
+                (_a = event.formData) === null || _a === void 0 ? void 0 : _a.append(name, value.toString());
+            }
+        }
+    }
+    handleFormSubmit(event) {
+        const disabled = this.options.disabled(this.host);
+        const checkValidity = this.options.checkValidity;
+        this.form = this.options.form(this.host);
+        if (this.form && !this.form.noValidate && !disabled && !checkValidity(this.host)) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            const components = this.form.querySelectorAll('kemet-input, kemet-textarea, kemet-select, kemet-checkbox, kemet-radios');
+            components.forEach((component) => {
+                component.checkValidity();
+                if (!component.checkValidity()) {
+                    component.status = 'error';
+                    component.invalid = true;
+                    component.dispatchEvent(new CustomEvent('kemet-input-status', {
+                        bubbles: true,
+                        composed: true,
+                        detail: {
+                            status: 'error',
+                            validity: component.validity ? component.validity : {},
+                            element: component,
+                        },
+                    }));
+                }
+                if (component.checkLimitValidity && !component.checkLimitValidity()) {
+                    component.status = 'error';
+                    component.invalid = true;
+                    component.dispatchEvent(new CustomEvent('kemet-input-status', {
+                        bubbles: true,
+                        composed: true,
+                        detail: {
+                            status: 'error',
+                            validity: { passedLimit: true },
+                            element: component,
+                        },
+                    }));
+                }
+            });
+        }
+    }
+    submit() {
+        const button = document.createElement('button');
+        if (this.form) {
+            button.type = 'submit';
+            button.style.position = 'absolute';
+            button.style.width = '0';
+            button.style.height = '0';
+            button.style.clip = 'rect(0 0 0 0)';
+            button.style.clipPath = 'inset(50%)';
+            button.style.overflow = 'hidden';
+            button.style.whiteSpace = 'nowrap';
+            this.form.append(button);
+            button.click();
+            button.remove();
+        }
+    }
+}
+//# sourceMappingURL=forms.js.map

package/dist/src/utilities/controllers/forms.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"forms.js","sourceRoot":"","sources":["../../../../src/utilities/controllers/forms.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,oBAAoB;IAK/B,YAAY,IAAI,EAAE,OAAO,GAAG,SAAS;QACnC,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QACvC,IAAI,CAAC,OAAO,GAAG;YACb,IAAI,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC;YACtC,IAAI,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI;YAC3B,KAAK,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK;YAC7B,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ;YACnC,aAAa,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,OAAO,KAAK,CAAC,aAAa,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;YACpG,GAAG,OAAO;SACX,CAAC;QAEF,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACrD,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC3D,CAAC;IAED,aAAa;QACX,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAEzC,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;YAC5D,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;SAC7D;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;YAC/D,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;YAC/D,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC;SACvB;IACH,CAAC;IAED,cAAc,CAAC,KAAK;;QAClB,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAClD,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC1C,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE5C,IAAI,CAAC,QAAQ,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,OAAO,KAAK,KAAK,WAAW,EAAE;YACzE,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;gBACxB,KAAK,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;;oBACpB,MAAA,KAAK,CAAC,QAAQ,0CAAE,MAAM,CAAC,IAAI,EAAE,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC;gBAC/C,CAAC,CAAC,CAAC;aACJ;iBAAM;gBACL,MAAA,KAAK,CAAC,QAAQ,0CAAE,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;aAChD;SACF;IACH,CAAC;IAED,gBAAgB,CAAC,KAAK;QACpB,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAClD,MAAM,aAAa,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;QAEjD,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAEzC,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,QAAQ,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;YAChF,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,wBAAwB,EAAE,CAAC;YAEjC,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,yEAAyE,CAAC,CAAC;YAEzH,UAAU,CAAC,OAAO,CAAC,CAAC,SAAS,EAAE,EAAE;gBAC/B,SAAS,CAAC,aAAa,EAAE,CAAC;gBAE1B,IAAI,CAAC,SAAS,CAAC,aAAa,EAAE,EAAE;oBAC9B,SAAS,CAAC,MAAM,GAAG,OAAO,CAAC;oBAC3B,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC;oBAEzB,SAAS,CAAC,aAAa,CACrB,IAAI,WAAW,CAAC,oBAAoB,EAAE;wBACpC,OAAO,EAAE,IAAI;wBACb,QAAQ,EAAE,IAAI;wBACd,MAAM,EAAE;4BACN,MAAM,EAAE,OAAO;4BACf,QAAQ,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;4BACtD,OAAO,EAAE,SAAS;yBACnB;qBACF,CAAC,CACH,CAAC;iBACH;gBAED,IAAI,SAAS,CAAC,kBAAkB,IAAI,CAAC,SAAS,CAAC,kBAAkB,EAAE,EAAE;oBACnE,SAAS,CAAC,MAAM,GAAG,OAAO,CAAC;oBAC3B,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC;oBAEzB,SAAS,CAAC,aAAa,CACrB,IAAI,WAAW,CAAC,oBAAoB,EAAE;wBACpC,OAAO,EAAE,IAAI;wBACb,QAAQ,EAAE,IAAI;wBACd,MAAM,EAAE;4BACN,MAAM,EAAE,OAAO;4BACf,QAAQ,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE;4BAC/B,OAAO,EAAE,SAAS;yBACnB;qBACF,CAAC,CACH,CAAC;iBACH;YACH,CAAC,CAAC,CAAC;SACJ;IACH,CAAC;IAED,MAAM;QACJ,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAEhD,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,MAAM,CAAC,IAAI,GAAG,QAAQ,CAAC;YACvB,MAAM,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;YACnC,MAAM,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,CAAC;YACzB,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC;YAC1B,MAAM,CAAC,KAAK,CAAC,IAAI,GAAG,eAAe,CAAC;YACpC,MAAM,CAAC,KAAK,CAAC,QAAQ,GAAG,YAAY,CAAC;YACrC,MAAM,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;YACjC,MAAM,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,CAAC;YACnC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;YACzB,MAAM,CAAC,KAAK,EAAE,CAAC;YACf,MAAM,CAAC,MAAM,EAAE,CAAC;SACjB;IACH,CAAC;CACF","sourcesContent":["export class FormSubmitController {\n host;\n form;\n options;\n\n constructor(host, options = undefined) {\n (this.host = host).addController(this);\n this.options = {\n form: (input) => input.closest('form'),\n name: (input) => input.name,\n value: (input) => input.value,\n disabled: (input) => input.disabled,\n checkValidity: (input) => (typeof input.checkValidity === 'function' ? input.checkValidity() : true),\n ...options,\n };\n\n this.handleFormData = this.handleFormData.bind(this);\n this.handleFormSubmit = this.handleFormSubmit.bind(this);\n }\n\n hostConnected() {\n this.form = this.options.form(this.host);\n\n if (this.form) {\n this.form.addEventListener('formdata', this.handleFormData);\n this.form.addEventListener('submit', this.handleFormSubmit);\n }\n }\n\n hostDisconnected() {\n if (this.form) {\n this.form.removeEventListener('formdata', this.handleFormData);\n this.form.removeEventListener('submit', this.handleFormSubmit);\n this.form = undefined;\n }\n }\n\n handleFormData(event) {\n const disabled = this.options.disabled(this.host);\n const name = this.options.name(this.host);\n const value = this.options.value(this.host);\n\n if (!disabled && typeof name === 'string' && typeof value !== 'undefined') {\n if (Array.isArray(value)) {\n value.forEach((val) => {\n event.formData?.append(name, val.toString());\n });\n } else {\n event.formData?.append(name, value.toString());\n }\n }\n }\n\n handleFormSubmit(event) {\n const disabled = this.options.disabled(this.host);\n const checkValidity = this.options.checkValidity;\n\n this.form = this.options.form(this.host);\n\n if (this.form && !this.form.noValidate && !disabled && !checkValidity(this.host)) {\n event.preventDefault();\n event.stopImmediatePropagation();\n\n const components = this.form.querySelectorAll('kemet-input, kemet-textarea, kemet-select, kemet-checkbox, kemet-radios');\n\n components.forEach((component) => {\n component.checkValidity();\n\n if (!component.checkValidity()) {\n component.status = 'error';\n component.invalid = true;\n\n component.dispatchEvent(\n new CustomEvent('kemet-input-status', {\n bubbles: true,\n composed: true,\n detail: {\n status: 'error',\n validity: component.validity ? component.validity : {},\n element: component,\n },\n })\n );\n }\n\n if (component.checkLimitValidity && !component.checkLimitValidity()) {\n component.status = 'error';\n component.invalid = true;\n\n component.dispatchEvent(\n new CustomEvent('kemet-input-status', {\n bubbles: true,\n composed: true,\n detail: {\n status: 'error',\n validity: { passedLimit: true },\n element: component,\n },\n })\n );\n }\n });\n }\n }\n\n submit() {\n const button = document.createElement('button');\n\n if (this.form) {\n button.type = 'submit';\n button.style.position = 'absolute';\n button.style.width = '0';\n button.style.height = '0';\n button.style.clip = 'rect(0 0 0 0)';\n button.style.clipPath = 'inset(50%)';\n button.style.overflow = 'hidden';\n button.style.whiteSpace = 'nowrap';\n this.form.append(button);\n button.click();\n button.remove();\n }\n }\n}\n"]}

package/dist/src/utilities/misc/constants.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+export declare const keyCodes: {
+    ENTER: number;
+    SPACE: number;
+    ESC: number;
+};

package/dist/src/utilities/misc/constants.js ADDED Viewed

@@ -0,0 +1,6 @@
+export const keyCodes = {
+    ENTER: 13,
+    SPACE: 32,
+    ESC: 27,
+};
+//# sourceMappingURL=constants.js.map

package/dist/src/utilities/misc/constants.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../src/utilities/misc/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,EAAE;IACT,KAAK,EAAE,EAAE;IACT,GAAG,EAAE,EAAE;CACR,CAAC","sourcesContent":["export const keyCodes = {\n ENTER: 13,\n SPACE: 32,\n ESC: 27,\n};\n"]}

package/dist/src/utilities/misc/events.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const emitEvent: (element: any, name: any, detail: any, bubbles?: boolean, composed?: boolean) => void;

package/dist/src/utilities/misc/events.js ADDED Viewed

@@ -0,0 +1,4 @@
+export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {
+    element.dispatchEvent(new CustomEvent(name, { bubbles, composed, detail }));
+};
+//# sourceMappingURL=events.js.map

package/dist/src/utilities/misc/events.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"events.js","sourceRoot":"","sources":["../../../../src/utilities/misc/events.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,GAAG,IAAI,EAAE,QAAQ,GAAG,IAAI,EAAE,EAAE;IAClF,OAAO,CAAC,aAAa,CACnB,IAAI,WAAW,CAAC,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,CACrD,CAAC;AACJ,CAAC,CAAC","sourcesContent":["export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n element.dispatchEvent(\n new CustomEvent(name, { bubbles, composed, detail }),\n );\n};\n"]}

package/dist/styles/kemet.base.css ADDED Viewed

@@ -0,0 +1,106 @@
+*,
+*::after,
+*::before {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+:root {
+  --kemet-color-white: rgb(255, 255, 255);
+  --kemet-color-white-10: rgba(255, 255, 255, 0.1);
+  --kemet-color-white-20: rgba(255, 255, 255, 0.2);
+  --kemet-color-white-30: rgba(255, 255, 255, 0.3);
+  --kemet-color-white-40: rgba(255, 255, 255, 0.4);
+  --kemet-color-white-50: rgba(255, 255, 255, 0.5);
+  --kemet-color-white-60: rgba(255, 255, 255, 0.6);
+  --kemet-color-white-70: rgba(255, 255, 255, 0.7);
+  --kemet-color-white-80: rgba(255, 255, 255, 0.8);
+  --kemet-color-white-90: rgba(255, 255, 255, 0.9);
+  --kemet-color-white-rich: rgb(242, 242, 242);
+  --kemet-color-black: rgb(0, 0, 0);
+  --kemet-color-black-10: rgba(0, 0, 0, 0.1);
+  --kemet-color-black-20: rgba(0, 0, 0, 0.2);
+  --kemet-color-black-30: rgba(0, 0, 0, 0.3);
+  --kemet-color-black-40: rgba(0, 0, 0, 0.4);
+  --kemet-color-black-50: rgba(0, 0, 0, 0.5);
+  --kemet-color-black-60: rgba(0, 0, 0, 0.6);
+  --kemet-color-black-70: rgba(0, 0, 0, 0.7);
+  --kemet-color-black-80: rgba(0, 0, 0, 0.8);
+  --kemet-color-black-90: rgba(0, 0, 0, 0.9);
+  --kemet-color-gray1: #eff2f1;
+  --kemet-color-gray2: #d7d7d7;
+  --kemet-color-gray3: #bebebe;
+  --kemet-color-gray4: #a4a4a4;
+  --kemet-color-gray5: #8b8b8b;
+  --kemet-color-gray6: #727270;
+  --kemet-color-gray7: #585858;
+  --kemet-color-gray8: #3f3f3f;
+  --kemet-color-gray9: #262626;
+  --kemet-color-gray10: #0c0c0c;
+  --kemet-color-primary: rgb(12, 74, 110);
+  --kemet-color-primary-10: rgba(12, 74, 110, 0.1);
+  --kemet-color-primary-20: rgba(12, 74, 110, 0.2);
+  --kemet-color-primary-30: rgba(12, 74, 110, 0.3);
+  --kemet-color-primary-40: rgba(12, 74, 110, 0.4);
+  --kemet-color-primary-50: rgba(12, 74, 110, 0.5);
+  --kemet-color-primary-60: rgba(12, 74, 110, 0.6);
+  --kemet-color-primary-70: rgba(12, 74, 110, 0.7);
+  --kemet-color-primary-80: rgba(12, 74, 110, 0.8);
+  --kemet-color-primary-90: rgba(12, 74, 110, 0.9);
+  --kemet-color-error: rgb(197, 48, 48);
+  --kemet-color-success: rgb(22, 163, 74);
+  --kemet-color-neutral: rgb(82, 82, 91);
+  --kemet-color-warning: rgb(217, 119, 6);
+  --kemet-color-text: var(--kemet-color-gray9);
+  --kemet-color-foreground: var(--kemet-color-white);
+  --kemet-color-background: var(--kemet-color-primary);
+  --kemet-color-white-to-black: var(--kemet-color-white);
+  --kemet-color-white-to-primary: var(--kemet-color-white);
+  --kemet-color-gray1-to-transparent: var(--kemet-color-gray1);
+  --kemet-color-primary-to-transparent: var(--kemet-color-primary);
+  --kemet-border-radius-small: 3px;
+  --kemet-border-radius-medium: 6px;
+  --kemet-border-radius-large: 12px;
+  --kemet-elevation-none: 0 0 rgba(0, 0, 0, 0);
+  --kemet-elevation-layer1: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --kemet-elevation-layer2: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
+  --kemet-elevation-layer3: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+  --kemet-elevation-layer4: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+  --kemet-elevation-layer5: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+  --kemet-elevation-layer6: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  --kemet-elevation-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
+  --kemet-spacer-none: 0;
+  --kemet-spacer-auto: auto;
+  --kemet-spacer-small: 1.5rem;
+  --kemet-spacer-smaller: 1rem;
+  --kemet-spacer-smallest: 0.5rem;
+  --kemet-spacer-normal: 2rem;
+  --kemet-spacer-large: 2.5rem;
+  --kemet-spacer-larger: 3rem;
+  --kemet-spacer-largest: 3.5rem;
+  --kemet-upload-margin: 1rem;
+}
+html {
+  color: var(--kemet-color-text);
+}
+[theme=dark] {
+  --kemet-color-text: var(--kemet-color-white);
+  --kemet-color-foreground: var(--kemet-color-primary);
+  --kemet-color-background: var(--kemet-color-white);
+  --kemet-color-white-to-black: var(--kemet-color-black);
+  --kemet-color-white-to-primary: var(--kemet-color-primary);
+  --kemet-color-gray1-to-transparent: transparent;
+  --kemet-color-primary-to-transparent: transparent;
+  --kemet-upload-margin: 0;
+  --kemet-elevation-none: none;
+  --kemet-elevation-layer1: none;
+  --kemet-elevation-layer2: none;
+  --kemet-elevation-layer3: none;
+  --kemet-elevation-layer4: none;
+  --kemet-elevation-layer5: none;
+  --kemet-elevation-layer6: none;
+  --kemet-elevation-inner: none;
+}
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9zdHlsZXMva2VtZXQuYmFzZS5zY3NzIiwia2VtZXQuYmFzZS5jc3MiLCIuLi8uLi9zcmMvc3R5bGVzL3NoYXJlZC9faGVscGVycy5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVBOzs7RUFHRSw4QkFBQTtVQUFBLHNCQUFBO0FDREY7O0FDd2FFO0VBR0ksdUNBQUE7RUFBQSxnREFBQTtFQUFBLGdEQUFBO0VBQUEsZ0RBQUE7RUFBQSxnREFBQTtFQUFBLGdEQUFBO0VBQUEsZ0RBQUE7RUFBQSxnREFBQTtFQUFBLGdEQUFBO0VBQUEsZ0RBQUE7RUFBQSw0Q0FBQTtFQUFBLGlDQUFBO0VBQUEsMENBQUE7RUFBQSwwQ0FBQTtFQUFBLDBDQUFBO0VBQUEsMENBQUE7RUFBQSwwQ0FBQTtFQUFBLDBDQUFBO0VBQUEsMENBQUE7RUFBQSwwQ0FBQTtFQUFBLDBDQUFBO0VBQUEsNEJBQUE7RUFBQSw0QkFBQTtFQUFBLDRCQUFBO0VBQUEsNEJBQUE7RUFBQSw0QkFBQTtFQUFBLDRCQUFBO0VBQUEsNEJBQUE7RUFBQSw0QkFBQTtFQUFBLDRCQUFBO0VBQUEsNkJBQUE7RUFBQSx1Q0FBQTtFQUFBLGdEQUFBO0VBQUEsZ0RBQUE7RUFBQSxnREFBQTtFQUFBLGdEQUFBO0VBQUEsZ0RBQUE7RUFBQSxnREFBQTtFQUFBLGdEQUFBO0VBQUEsZ0RBQUE7RUFBQSxnREFBQTtFQUFBLHFDQUFBO0VBQUEsdUNBQUE7RUFBQSxzQ0FBQTtFQUFBLHVDQUFBO0VBQUEsNENBQUE7RUFBQSxrREFBQTtFQUFBLG9EQUFBO0VBR0Ysc0RBQUE7RUFDQSx3REFBQTtFQUNBLDREQUFBO0VBQ0EsZ0VBQUE7RUFJRSxnQ0FBQTtFQUFBLGlDQUFBO0VBQUEsaUNBQUE7RUFLQSw0Q0FBQTtFQUFBLHlEQUFBO0VBQUEsMkZBQUE7RUFBQSw4RkFBQTtFQUFBLGdHQUFBO0VBQUEsaUdBQUE7RUFBQSwrREFBQTtFQUFBLDhEQUFBO0VBS0Esc0JBQUE7RUFBQSx5QkFBQTtFQUFBLDRCQUFBO0VBQUEsNEJBQUE7RUFBQSwrQkFBQTtFQUFBLDJCQUFBO0VBQUEsNEJBQUE7RUFBQSwyQkFBQTtFQUFBLDhCQUFBO0VBSUYsMkJBQUE7QUR2WEo7O0FEdEVBO0VBQ0UsOEJBQUE7QUN5RUY7O0FEdEVBO0VBRUUsNENBQUE7RUFDQSxvREFBQTtFQUNBLGtEQUFBO0VBQ0Esc0RBQUE7RUFDQSwwREFBQTtFQUNBLCtDQUFBO0VBQ0EsaURBQUE7RUFFQSx3QkFBQTtFRWlVRSw0QkFBQTtFQUFBLDhCQUFBO0VBQUEsOEJBQUE7RUFBQSw4QkFBQTtFQUFBLDhCQUFBO0VBQUEsOEJBQUE7RUFBQSw4QkFBQTtFQUFBLDZCQUFBO0FEbFBKIiwiZmlsZSI6ImtlbWV0LmJhc2UuY3NzIn0= */

package/dist/styles/kemet.base.css.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sourceRoot":"","sources":["../../src/styles/kemet.base.scss","../../src/styles/shared/_helpers.scss"],"names":[],"mappings":"AAEA;AAAA;AAAA;EAGE;;;ACuaA;EAGI;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAGF;EACA;EACA;EACA;EAIE;EAAA;EAAA;EAKA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAKA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAIF;;;AD7bJ;EACE;;;AAGF;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;ECiUE;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA","file":"kemet.base.css"}