kemet-ui 2.0.0 → 2.0.2

package/dist/src/stories/styles/flexlist/stories.js

@@ -1,45 +0,0 @@
-import { html } from 'lit';
-const meta = {
-    title: 'Styles / Flexlist',
-};
-export default meta;
-const TemplateExample1 = () => html `
-  <div kemet-layout="flexlist" kemet-gutters>
-    <div><div kemet-background-color="primary" kemet-color="white" kemet-padding="tiny:smallest">One</div></div>
-    <div><div kemet-background-color="primary" kemet-color="white" kemet-padding="tiny:smallest">Two</div></div>
-    <div><div kemet-background-color="primary" kemet-color="white" kemet-padding="tiny:smallest">Three</div></div>
-    <div><div kemet-background-color="primary" kemet-color="white" kemet-padding="tiny:smallest">Four</div></div>
-    <div><div kemet-background-color="primary" kemet-color="white" kemet-padding="tiny:smallest">Five</div></div>
-    <div><div kemet-background-color="primary" kemet-color="white" kemet-padding="tiny:smallest">Six</div></div>
-  </div>
-`;
-const TemplateExample2 = () => html `
-  <div kemet-layout="flexlist" kemet-gutters>
-    <div><div kemet-background-color="primary" kemet-color="white" kemet-padding="tiny:smallest">One</div></div>
-    <div><div kemet-background-color="primary" kemet-color="white" kemet-padding="tiny:smallest">Two</div></div>
-    <div><div kemet-background-color="primary" kemet-color="white" kemet-padding="tiny:smallest">Three</div></div>
-    <div kemet-order="medium:minus-1"><div kemet-background-color="gray5" kemet-color="white" kemet-padding="tiny:smallest">Four</div></div>
-    <div kemet-order="medium:minus-1"><div kemet-background-color="gray5" kemet-color="white" kemet-padding="tiny:smallest">Five</div></div>
-    <div><div kemet-background-color="primary" kemet-color="white" kemet-padding="tiny:smallest">Six</div></div>
-  </div>
-`;
-const TemplateExample3 = () => html `
-  <div kemet-layout="flexlist" kemet-gutters="">
-  <div><div kemet-background-color="primary" kemet-color="white" kemet-padding="tiny:smallest">One</div></div>
-    <div><div kemet-background-color="primary" kemet-color="white" kemet-padding="tiny:smallest">Two</div></div>
-    <div><div kemet-background-color="primary" kemet-color="white" kemet-padding="tiny:smallest">Three</div></div>
-    <div kemet-order="medium:plus-1"><div kemet-background-color="gray5" kemet-color="white" kemet-padding="tiny:smallest">Four</div></div>
-    <div kemet-order="medium:plus-1"><div kemet-background-color="gray5" kemet-color="white" kemet-padding="tiny:smallest">Five</div></div>
-    <div><div kemet-background-color="primary" kemet-color="white" kemet-padding="tiny:smallest">Six</div></div>
-  </div>
-`;
-export const Example1 = {
-    render: TemplateExample1,
-};
-export const Example2 = {
-    render: TemplateExample2,
-};
-export const Example3 = {
-    render: TemplateExample3,
-};
-//# sourceMappingURL=stories.js.map

package/dist/src/stories/styles/flexlist/stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../../src/stories/styles/flexlist/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,mBAAmB;CAC3B,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;CASlC,CAAC;AAEF,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;CASlC,CAAC;AAEF,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;CASlC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,gBAAgB;CACzB,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,gBAAgB;CACzB,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,gBAAgB;CACzB,CAAA","sourcesContent":["import { html } from 'lit';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nconst meta: Meta = {\n  title: 'Styles / Flexlist',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst TemplateExample1 = () => html`\n  <div kemet-layout=\"flexlist\" kemet-gutters>\n    <div><div kemet-background-color=\"primary\" kemet-color=\"white\" kemet-padding=\"tiny:smallest\">One</div></div>\n    <div><div kemet-background-color=\"primary\" kemet-color=\"white\" kemet-padding=\"tiny:smallest\">Two</div></div>\n    <div><div kemet-background-color=\"primary\" kemet-color=\"white\" kemet-padding=\"tiny:smallest\">Three</div></div>\n    <div><div kemet-background-color=\"primary\" kemet-color=\"white\" kemet-padding=\"tiny:smallest\">Four</div></div>\n    <div><div kemet-background-color=\"primary\" kemet-color=\"white\" kemet-padding=\"tiny:smallest\">Five</div></div>\n    <div><div kemet-background-color=\"primary\" kemet-color=\"white\" kemet-padding=\"tiny:smallest\">Six</div></div>\n  </div>\n`;\n\nconst TemplateExample2 = () => html`\n  <div kemet-layout=\"flexlist\" kemet-gutters>\n    <div><div kemet-background-color=\"primary\" kemet-color=\"white\" kemet-padding=\"tiny:smallest\">One</div></div>\n    <div><div kemet-background-color=\"primary\" kemet-color=\"white\" kemet-padding=\"tiny:smallest\">Two</div></div>\n    <div><div kemet-background-color=\"primary\" kemet-color=\"white\" kemet-padding=\"tiny:smallest\">Three</div></div>\n    <div kemet-order=\"medium:minus-1\"><div kemet-background-color=\"gray5\" kemet-color=\"white\" kemet-padding=\"tiny:smallest\">Four</div></div>\n    <div kemet-order=\"medium:minus-1\"><div kemet-background-color=\"gray5\" kemet-color=\"white\" kemet-padding=\"tiny:smallest\">Five</div></div>\n    <div><div kemet-background-color=\"primary\" kemet-color=\"white\" kemet-padding=\"tiny:smallest\">Six</div></div>\n  </div>\n`;\n\nconst TemplateExample3 = () => html`\n  <div kemet-layout=\"flexlist\" kemet-gutters=\"\">\n  <div><div kemet-background-color=\"primary\" kemet-color=\"white\" kemet-padding=\"tiny:smallest\">One</div></div>\n    <div><div kemet-background-color=\"primary\" kemet-color=\"white\" kemet-padding=\"tiny:smallest\">Two</div></div>\n    <div><div kemet-background-color=\"primary\" kemet-color=\"white\" kemet-padding=\"tiny:smallest\">Three</div></div>\n    <div kemet-order=\"medium:plus-1\"><div kemet-background-color=\"gray5\" kemet-color=\"white\" kemet-padding=\"tiny:smallest\">Four</div></div>\n    <div kemet-order=\"medium:plus-1\"><div kemet-background-color=\"gray5\" kemet-color=\"white\" kemet-padding=\"tiny:smallest\">Five</div></div>\n    <div><div kemet-background-color=\"primary\" kemet-color=\"white\" kemet-padding=\"tiny:smallest\">Six</div></div>\n  </div>\n`;\n\nexport const Example1: Story = {\n  render: TemplateExample1,\n}\n\nexport const Example2: Story = {\n  render: TemplateExample2,\n}\n\nexport const Example3: Story = {\n  render: TemplateExample3,\n}\n"]}

package/dist/src/stories/styles/flexrow/stories.d.ts

@@ -1,10 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
-declare const meta: Meta;
-export default meta;
-declare type Story = StoryObj;
-export declare const Example1: Story;
-export declare const Example2: Story;
-export declare const Example3: Story;
-export declare const Example4: Story;
-export declare const Example5: Story;
-export declare const Example6: Story;

package/dist/src/stories/styles/flexrow/stories.js

@@ -1,77 +0,0 @@
-import { html } from 'lit';
-const meta = {
-    title: 'Styles / Flexrow',
-};
-export default meta;
-const TemplateExample1 = () => html `
-  <section kemet-layout="flexrow">
-    <div><div kemet-background-color="auto" kemet-color="auto" kemet-padding="tiny:smallest">1</div></div>
-    <div><div kemet-background-color="auto" kemet-color="auto" kemet-padding="tiny:smallest">2</div></div>
-    <div><div kemet-background-color="auto" kemet-color="auto" kemet-padding="tiny:smallest">3</div></div>
-    <div><div kemet-background-color="auto" kemet-color="auto" kemet-padding="tiny:smallest">4</div></div>
-  </section>
-`;
-const TemplateExample2 = () => html `
-  <section kemet-layout="flexrow" kemet-autostack kemet-gutters>
-    <div><div kemet-background-color="auto" kemet-color="auto" kemet-padding="tiny:smallest">1</div></div>
-    <div><div kemet-background-color="auto" kemet-color="auto" kemet-padding="tiny:smallest">2</div></div>
-    <div><div kemet-background-color="auto" kemet-color="auto" kemet-padding="tiny:smallest">3</div></div>
-    <div><div kemet-background-color="auto" kemet-color="auto" kemet-padding="tiny:smallest">4</div></div>
-  </section>
-`;
-const TemplateExample3 = () => html `
-  <section kemet-layout="flexrow" kemet-gutters="tiny:none medium:default large:plus-6">
-    <div kemet-breakpoint="medium:33"><div kemet-background-color="auto" kemet-color="auto" kemet-padding="tiny:smallest">1</div></div>
-    <div><div kemet-background-color="auto" kemet-color="auto" kemet-padding="tiny:smallest">2</div></div>
-    <div><div kemet-background-color="auto" kemet-color="auto" kemet-padding="tiny:smallest">3</div></div>
-    <div><div kemet-background-color="auto" kemet-color="auto" kemet-padding="tiny:smallest">4</div></div>
-  </section>
-`;
-const TemplateExample4 = () => html `
-  <section kemet-layout="flexrow" kemet-gutters="minus-1">
-    <div kemet-breakpoint="tiny:content"><div kemet-background-color="auto" kemet-color="auto" kemet-padding="tiny:smallest">❤️</div></div>
-    <div><div kemet-background-color="auto" kemet-color="auto" kemet-padding="tiny:smallest">2</div></div>
-    <div><div kemet-background-color="auto" kemet-color="auto" kemet-padding="tiny:smallest">3</div></div>
-    <div kemet-breakpoint="tiny:50"><div kemet-background-color="auto" kemet-color="auto" kemet-padding="tiny:smallest">4</div></div>
-  </section>
-`;
-const TemplateExample5 = () => html `
-  <section kemet-layout="flexrow" kemet-gutters="plus-1" kemet-align="middle" style="height: 64px;">
-    <div kemet-align="bottom">
-      <div kemet-background-color="auto" kemet-color="auto" kemet-padding="tiny:smallest">1</div>
-    </div>
-    <div><div kemet-background-color="auto" kemet-color="auto" kemet-padding="tiny:smallest">2</div></div>
-    <div kemet-align="top">
-      <div kemet-background-color="auto" kemet-color="auto" kemet-padding="tiny:smallest">3</div>
-    </div>
-    <div><div kemet-background-color="auto" kemet-color="auto" kemet-padding="tiny:smallest">4</div></div>
-    <div kemet-align="bottom">
-      <div kemet-background-color="auto" kemet-color="auto" kemet-padding="tiny:smallest">5</div>
-    </div>
-  </section>
-`;
-const TemplateExample6 = () => html `
-  <section kemet-layout="flexrow" kemet-align-cross="between">
-    <div kemet-breakpoint="tiny:66"><div kemet-background-color="auto" kemet-color="auto" kemet-padding="tiny:smallest">Left</div></div>
-    <div kemet-breakpoint="tiny:content"><div kemet-background-color="auto" kemet-color="auto" kemet-padding="tiny:smallest">Right</div></div>
-  </section>
-`;
-export const Example1 = {
-    render: TemplateExample1,
-};
-export const Example2 = {
-    render: TemplateExample2,
-};
-export const Example3 = {
-    render: TemplateExample3,
-};
-export const Example4 = {
-    render: TemplateExample4,
-};
-export const Example5 = {
-    render: TemplateExample5,
-};
-export const Example6 = {
-    render: TemplateExample6,
-};
-//# sourceMappingURL=stories.js.map

package/dist/src/stories/styles/flexrow/stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../../src/stories/styles/flexrow/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,kBAAkB;CAC1B,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;CAOlC,CAAC;AAEF,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;CAOlC,CAAC;AAEF,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;CAOlC,CAAC;AAEF,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;CAOlC,CAAC;AAEF,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;CAclC,CAAC;AAEF,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;CAKlC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,gBAAgB;CACzB,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,gBAAgB;CACzB,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,gBAAgB;CACzB,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,gBAAgB;CACzB,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,gBAAgB;CACzB,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,gBAAgB;CACzB,CAAA","sourcesContent":["import { html } from 'lit';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nconst meta: Meta = {\n  title: 'Styles / Flexrow',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst TemplateExample1 = () => html`\n  <section kemet-layout=\"flexrow\">\n    <div><div kemet-background-color=\"auto\" kemet-color=\"auto\" kemet-padding=\"tiny:smallest\">1</div></div>\n    <div><div kemet-background-color=\"auto\" kemet-color=\"auto\" kemet-padding=\"tiny:smallest\">2</div></div>\n    <div><div kemet-background-color=\"auto\" kemet-color=\"auto\" kemet-padding=\"tiny:smallest\">3</div></div>\n    <div><div kemet-background-color=\"auto\" kemet-color=\"auto\" kemet-padding=\"tiny:smallest\">4</div></div>\n  </section>\n`;\n\nconst TemplateExample2 = () => html`\n  <section kemet-layout=\"flexrow\" kemet-autostack kemet-gutters>\n    <div><div kemet-background-color=\"auto\" kemet-color=\"auto\" kemet-padding=\"tiny:smallest\">1</div></div>\n    <div><div kemet-background-color=\"auto\" kemet-color=\"auto\" kemet-padding=\"tiny:smallest\">2</div></div>\n    <div><div kemet-background-color=\"auto\" kemet-color=\"auto\" kemet-padding=\"tiny:smallest\">3</div></div>\n    <div><div kemet-background-color=\"auto\" kemet-color=\"auto\" kemet-padding=\"tiny:smallest\">4</div></div>\n  </section>\n`;\n\nconst TemplateExample3 = () => html`\n  <section kemet-layout=\"flexrow\" kemet-gutters=\"tiny:none medium:default large:plus-6\">\n    <div kemet-breakpoint=\"medium:33\"><div kemet-background-color=\"auto\" kemet-color=\"auto\" kemet-padding=\"tiny:smallest\">1</div></div>\n    <div><div kemet-background-color=\"auto\" kemet-color=\"auto\" kemet-padding=\"tiny:smallest\">2</div></div>\n    <div><div kemet-background-color=\"auto\" kemet-color=\"auto\" kemet-padding=\"tiny:smallest\">3</div></div>\n    <div><div kemet-background-color=\"auto\" kemet-color=\"auto\" kemet-padding=\"tiny:smallest\">4</div></div>\n  </section>\n`;\n\nconst TemplateExample4 = () => html`\n  <section kemet-layout=\"flexrow\" kemet-gutters=\"minus-1\">\n    <div kemet-breakpoint=\"tiny:content\"><div kemet-background-color=\"auto\" kemet-color=\"auto\" kemet-padding=\"tiny:smallest\">❤️</div></div>\n    <div><div kemet-background-color=\"auto\" kemet-color=\"auto\" kemet-padding=\"tiny:smallest\">2</div></div>\n    <div><div kemet-background-color=\"auto\" kemet-color=\"auto\" kemet-padding=\"tiny:smallest\">3</div></div>\n    <div kemet-breakpoint=\"tiny:50\"><div kemet-background-color=\"auto\" kemet-color=\"auto\" kemet-padding=\"tiny:smallest\">4</div></div>\n  </section>\n`;\n\nconst TemplateExample5 = () => html`\n  <section kemet-layout=\"flexrow\" kemet-gutters=\"plus-1\" kemet-align=\"middle\" style=\"height: 64px;\">\n    <div kemet-align=\"bottom\">\n      <div kemet-background-color=\"auto\" kemet-color=\"auto\" kemet-padding=\"tiny:smallest\">1</div>\n    </div>\n    <div><div kemet-background-color=\"auto\" kemet-color=\"auto\" kemet-padding=\"tiny:smallest\">2</div></div>\n    <div kemet-align=\"top\">\n      <div kemet-background-color=\"auto\" kemet-color=\"auto\" kemet-padding=\"tiny:smallest\">3</div>\n    </div>\n    <div><div kemet-background-color=\"auto\" kemet-color=\"auto\" kemet-padding=\"tiny:smallest\">4</div></div>\n    <div kemet-align=\"bottom\">\n      <div kemet-background-color=\"auto\" kemet-color=\"auto\" kemet-padding=\"tiny:smallest\">5</div>\n    </div>\n  </section>\n`;\n\nconst TemplateExample6 = () => html`\n  <section kemet-layout=\"flexrow\" kemet-align-cross=\"between\">\n    <div kemet-breakpoint=\"tiny:66\"><div kemet-background-color=\"auto\" kemet-color=\"auto\" kemet-padding=\"tiny:smallest\">Left</div></div>\n    <div kemet-breakpoint=\"tiny:content\"><div kemet-background-color=\"auto\" kemet-color=\"auto\" kemet-padding=\"tiny:smallest\">Right</div></div>\n  </section>\n`;\n\nexport const Example1: Story = {\n  render: TemplateExample1,\n}\n\nexport const Example2: Story = {\n  render: TemplateExample2,\n}\n\nexport const Example3: Story = {\n  render: TemplateExample3,\n}\n\nexport const Example4: Story = {\n  render: TemplateExample4,\n}\n\nexport const Example5: Story = {\n  render: TemplateExample5,\n}\n\nexport const Example6: Story = {\n  render: TemplateExample6,\n}\n"]}

package/dist/src/stories/styles/spacing/stories.d.ts

@@ -1,6 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
-declare const meta: Meta;
-export default meta;
-declare type Story = StoryObj;
-export declare const Standard: Story;
-export declare const Multiple: Story;

package/dist/src/stories/styles/spacing/stories.js

@@ -1,49 +0,0 @@
-import { html } from 'lit';
-import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-const meta = {
-    title: 'Styles / Spacing',
-};
-export default meta;
-const Template = ({ type = 'padding', side = 'all', breakpoint = 'tiny', space = 'normal', }) => {
-    const sideAttr = side !== 'all' ? `-${side}` : '';
-    const template = `
-    <div kemet-${type}${sideAttr}="${breakpoint}:${space}">The quick brown fox jumps over the lazy dog.</div>
-  `;
-    return html `${unsafeHTML(template)}`;
-};
-const TemplateMultiple = () => html `
-  <div kemet-padding="small:normal medium:none large:largest">
-    This will have responsive margins of normal at small, none at medium, and large at largest.
-  </div>
-`;
-export const Standard = {
-    render: Template,
-    args: {
-        type: 'padding',
-        side: 'all',
-        breakpoint: 'tiny',
-        space: 'normal',
-    },
-    argTypes: {
-        type: {
-            control: { type: 'radio' },
-            options: ['padding', 'margin'],
-        },
-        side: {
-            control: { type: 'select' },
-            options: ['all', 'top', 'right', 'bottom', 'left'],
-        },
-        breakpoint: {
-            control: { type: 'select' },
-            options: ['tiny', 'small', 'medium', 'large', 'huge'],
-        },
-        space: {
-            control: { type: 'select' },
-            options: ['none', 'smallest', 'smaller', 'small', 'normal', 'large', 'larger', 'largest'],
-        },
-    },
-};
-export const Multiple = {
-    render: TemplateMultiple,
-};
-//# sourceMappingURL=stories.js.map

package/dist/src/stories/styles/spacing/stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../../src/stories/styles/spacing/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAG3D,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,kBAAkB;CAC1B,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,EAChB,IAAI,GAAG,SAAS,EAChB,IAAI,GAAG,KAAK,EACZ,UAAU,GAAG,MAAM,EACnB,KAAK,GAAG,QAAQ,GACjB,EAAE,EAAE;IACH,MAAM,QAAQ,GAAG,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IAClD,MAAM,QAAQ,GAAG;iBACF,IAAI,GAAG,QAAQ,KAAK,UAAU,IAAI,KAAK;GACrD,CAAC;IAEF,OAAO,IAAI,CAAA,GAAG,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC;AACvC,CAAC,CAAC;AAEF,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;;;CAIlC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,QAAQ;IAChB,IAAI,EAAE;QACJ,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,KAAK;QACX,UAAU,EAAE,MAAM;QAClB,KAAK,EAAE,QAAQ;KAChB;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YAC1B,OAAO,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC;SAC/B;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,CAAC;SACnD;QACD,UAAU,EAAE;YACV,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,CAAC;SACtD;QACD,KAAK,EAAE;YACL,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,CAAC;SAC1F;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,gBAAgB;CACzB,CAAA","sourcesContent":["import { html } from 'lit';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nconst meta: Meta = {\n  title: 'Styles / Spacing',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = ({\n  type = 'padding',\n  side = 'all',\n  breakpoint = 'tiny',\n  space = 'normal',\n}) => {\n  const sideAttr = side !== 'all' ? `-${side}` : '';\n  const template = `\n    <div kemet-${type}${sideAttr}=\"${breakpoint}:${space}\">The quick brown fox jumps over the lazy dog.</div>\n  `;\n\n  return html`${unsafeHTML(template)}`;\n};\n\nconst TemplateMultiple = () => html`\n  <div kemet-padding=\"small:normal medium:none large:largest\">\n    This will have responsive margins of normal at small, none at medium, and large at largest.\n  </div>\n`;\n\nexport const Standard: Story = {\n  render: Template,\n  args: {\n    type: 'padding',\n    side: 'all',\n    breakpoint: 'tiny',\n    space: 'normal',\n  },\n  argTypes: {\n    type: {\n      control: { type: 'radio' },\n      options: ['padding', 'margin'],\n    },\n    side: {\n      control: { type: 'select' },\n      options: ['all', 'top', 'right', 'bottom', 'left'],\n    },\n    breakpoint: {\n      control: { type: 'select' },\n      options: ['tiny', 'small', 'medium', 'large', 'huge'],\n    },\n    space: {\n      control: { type: 'select' },\n      options: ['none', 'smallest', 'smaller', 'small', 'normal', 'large', 'larger', 'largest'],\n    },\n  },\n};\n\nexport const Multiple: Story = {\n  render: TemplateMultiple,\n}\n"]}

package/dist/src/stories/styles/typealignment/stories.d.ts

@@ -1,5 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
-declare const meta: Meta;
-export default meta;
-declare type Story = StoryObj;
-export declare const Standard: Story;

package/dist/src/stories/styles/typealignment/stories.js

@@ -1,14 +0,0 @@
-import { html } from 'lit';
-const meta = {
-    title: 'Styles / Type Alignment',
-};
-export default meta;
-const Template = () => html `
-  <p kemet-type-align="tiny:left medium:center large:right">
-    Watch me change alignment at breakpoints.
-  </p>
-`;
-export const Standard = {
-    render: Template,
-};
-//# sourceMappingURL=stories.js.map

package/dist/src/stories/styles/typealignment/stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../../src/stories/styles/typealignment/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,yBAAyB;CACjC,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;;;CAI1B,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,QAAQ;CACjB,CAAA","sourcesContent":["import { html } from 'lit';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nconst meta: Meta = {\n  title: 'Styles / Type Alignment',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = () => html`\n  <p kemet-type-align=\"tiny:left medium:center large:right\">\n    Watch me change alignment at breakpoints.\n  </p>\n`;\n\nexport const Standard: Story = {\n  render: Template,\n}\n"]}

package/dist/src/stories/styles/typography/stories.d.ts

@@ -1,6 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
-declare const meta: Meta;
-export default meta;
-declare type Story = StoryObj;
-export declare const Standard: Story;
-export declare const Multiple: Story;

package/dist/src/stories/styles/typography/stories.js

@@ -1,41 +0,0 @@
-import { html } from 'lit';
-const meta = {
-    title: 'Styles / Typography',
-};
-export default meta;
-const Template = ({ label = 'The quick brown fox jumps over the lazy dog.', breakpoint = 'none', size = 'plus-2', }) => {
-    const kemetSize = breakpoint === 'none' ? size : `${breakpoint}:${size}`;
-    return html `
-    <p kemet-type-size="${kemetSize}">${label}</p>
-  `;
-};
-const TemplateMultiple = () => html `
-  <p kemet-type-size="tiny:minus-2 medium:plus-2 large:plus-4">
-    Watch me change size at breakpoints.
-  </p>
-`;
-export const Standard = {
-    render: Template,
-    args: {
-        label: 'The quick brown fox jumps over the lazy dog.',
-        breakpoint: 'none',
-        size: 'plus-2',
-    },
-    argTypes: {
-        label: {
-            control: { type: 'text' },
-        },
-        breakpoint: {
-            control: { type: 'select' },
-            options: ['none', 'tiny', 'small', 'medium', 'large', 'huge'],
-        },
-        size: {
-            control: { type: 'select' },
-            options: ['minus-3', 'minus-2', 'minus-1', 'base', 'plus-1', 'plus-2', 'plus-3', 'plus-4', 'plus-5', 'plus-6'],
-        },
-    }
-};
-export const Multiple = {
-    render: TemplateMultiple,
-};
-//# sourceMappingURL=stories.js.map

package/dist/src/stories/styles/typography/stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../../src/stories/styles/typography/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,qBAAqB;CAC7B,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,EAChB,KAAK,GAAG,8CAA8C,EACtD,UAAU,GAAG,MAAM,EACnB,IAAI,GAAG,QAAQ,GAChB,EAAE,EAAE;IACH,MAAM,SAAS,GAAG,UAAU,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,UAAU,IAAI,IAAI,EAAE,CAAC;IAEzE,OAAO,IAAI,CAAA;0BACa,SAAS,KAAK,KAAK;GAC1C,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;;;CAIlC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,QAAQ;IAChB,IAAI,EAAE;QACJ,KAAK,EAAE,8CAA8C;QACrD,UAAU,EAAE,MAAM;QAClB,IAAI,EAAE,QAAQ;KACf;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,UAAU,EAAE;YACV,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,CAAC;SAC9D;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAC;SAC/G;KACF;CACF,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,gBAAgB;CACzB,CAAA","sourcesContent":["import { html } from 'lit';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nconst meta: Meta = {\n  title: 'Styles / Typography',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = ({\n  label = 'The quick brown fox jumps over the lazy dog.',\n  breakpoint = 'none',\n  size = 'plus-2',\n}) => {\n  const kemetSize = breakpoint === 'none' ? size : `${breakpoint}:${size}`;\n\n  return html`\n    <p kemet-type-size=\"${kemetSize}\">${label}</p>\n  `;\n};\n\nconst TemplateMultiple = () => html`\n  <p kemet-type-size=\"tiny:minus-2 medium:plus-2 large:plus-4\">\n    Watch me change size at breakpoints.\n  </p>\n`;\n\nexport const Standard: Story = {\n  render: Template,\n  args: {\n    label: 'The quick brown fox jumps over the lazy dog.',\n    breakpoint: 'none',\n    size: 'plus-2',\n  },\n  argTypes: {\n    label: {\n      control: { type: 'text' },\n    },\n    breakpoint: {\n      control: { type: 'select' },\n      options: ['none', 'tiny', 'small', 'medium', 'large', 'huge'],\n    },\n    size: {\n      control: { type: 'select' },\n      options: ['minus-3', 'minus-2', 'minus-1', 'base', 'plus-1', 'plus-2', 'plus-3', 'plus-4', 'plus-5', 'plus-6'],\n    },\n  }\n}\n\nexport const Multiple: Story = {\n  render: TemplateMultiple,\n}\n"]}

package/dist/src/stories/styles/visibility/stories.d.ts

@@ -1,6 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
-declare const meta: Meta;
-export default meta;
-declare type Story = StoryObj;
-export declare const Show: Story;
-export declare const Hide: Story;

package/dist/src/stories/styles/visibility/stories.js

@@ -1,60 +0,0 @@
-import { html } from 'lit';
-const meta = {
-    title: 'Styles / Visibility',
-};
-export default meta;
-const TemplateShow = ({ label = 'This will show at the specified parameters.', breakpoint = 'medium', direction = 'up', }) => {
-    const kemetShow = direction === 'only' ? breakpoint : `${breakpoint}:${direction}`;
-    return html `
-    <p kemet-show="${kemetShow}" class="box" style="display:none;">${label}</p>
-  `;
-};
-const TemplateHide = ({ label = 'This will hide at the specified parameters.', breakpoint = 'medium', direction = 'down', }) => {
-    const kemetHide = direction === 'only' ? breakpoint : `${breakpoint}:${direction}`;
-    return html `
-    <p kemet-hide="${kemetHide}" class="box">${label}</p>
-  `;
-};
-export const Show = {
-    render: TemplateShow,
-    args: {
-        label: 'This will show at he specified parameters.',
-        breakpoint: 'medium',
-        direction: 'up',
-    },
-    argTypes: {
-        label: {
-            control: { type: 'text' },
-        },
-        breakpoint: {
-            control: { type: 'select' },
-            options: ['tiny', 'small', 'medium', 'large', 'huge'],
-        },
-        direction: {
-            control: { type: 'radio' },
-            options: ['only', 'up', 'down'],
-        },
-    }
-};
-export const Hide = {
-    render: TemplateHide,
-    args: {
-        label: 'This will hide at he specified parameters.',
-        breakpoint: 'medium',
-        direction: 'down',
-    },
-    argTypes: {
-        label: {
-            control: { type: 'text' },
-        },
-        breakpoint: {
-            control: { type: 'select' },
-            options: ['tiny', 'small', 'medium', 'large', 'huge'],
-        },
-        direction: {
-            control: { type: 'radio' },
-            options: ['only', 'up', 'down'],
-        },
-    }
-};
-//# sourceMappingURL=stories.js.map

package/dist/src/stories/styles/visibility/stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../../src/stories/styles/visibility/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,qBAAqB;CAC7B,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,YAAY,GAAG,CAAC,EACpB,KAAK,GAAG,6CAA6C,EACrD,UAAU,GAAG,QAAQ,EACrB,SAAS,GAAG,IAAI,GACjB,EAAE,EAAE;IACH,MAAM,SAAS,GAAG,SAAS,KAAK,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,UAAU,IAAI,SAAS,EAAE,CAAC;IAEnF,OAAO,IAAI,CAAA;qBACQ,SAAS,uCAAuC,KAAK;GACvE,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,EACpB,KAAK,GAAG,6CAA6C,EACrD,UAAU,GAAG,QAAQ,EACrB,SAAS,GAAG,MAAM,GACnB,EAAE,EAAE;IACH,MAAM,SAAS,GAAG,SAAS,KAAK,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,UAAU,IAAI,SAAS,EAAE,CAAC;IAEnF,OAAO,IAAI,CAAA;qBACQ,SAAS,iBAAiB,KAAK;GACjD,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAU;IACzB,MAAM,EAAE,YAAY;IACpB,IAAI,EAAE;QACJ,KAAK,EAAE,4CAA4C;QACnD,UAAU,EAAE,QAAQ;QACpB,SAAS,EAAE,IAAI;KAChB;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,UAAU,EAAE;YACV,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,CAAC;SACtD;QACD,SAAS,EAAE;YACT,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YAC1B,OAAO,EAAE,CAAC,MAAM,EAAE,IAAI,EAAE,MAAM,CAAC;SAChC;KACF;CACF,CAAA;AAED,MAAM,CAAC,MAAM,IAAI,GAAU;IACzB,MAAM,EAAE,YAAY;IACpB,IAAI,EAAE;QACJ,KAAK,EAAE,4CAA4C;QACnD,UAAU,EAAE,QAAQ;QACpB,SAAS,EAAE,MAAM;KAClB;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,UAAU,EAAE;YACV,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,CAAC;SACtD;QACD,SAAS,EAAE;YACT,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YAC1B,OAAO,EAAE,CAAC,MAAM,EAAE,IAAI,EAAE,MAAM,CAAC;SAChC;KACF;CACF,CAAA","sourcesContent":["import { html } from 'lit';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nconst meta: Meta = {\n  title: 'Styles / Visibility',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst TemplateShow = ({\n  label = 'This will show at the specified parameters.',\n  breakpoint = 'medium',\n  direction = 'up',\n}) => {\n  const kemetShow = direction === 'only' ? breakpoint : `${breakpoint}:${direction}`;\n\n  return html`\n    <p kemet-show=\"${kemetShow}\" class=\"box\" style=\"display:none;\">${label}</p>\n  `;\n};\n\nconst TemplateHide = ({\n  label = 'This will hide at the specified parameters.',\n  breakpoint = 'medium',\n  direction = 'down',\n}) => {\n  const kemetHide = direction === 'only' ? breakpoint : `${breakpoint}:${direction}`;\n\n  return html`\n    <p kemet-hide=\"${kemetHide}\" class=\"box\">${label}</p>\n  `;\n};\n\nexport const Show: Story = {\n  render: TemplateShow,\n  args: {\n    label: 'This will show at he specified parameters.',\n    breakpoint: 'medium',\n    direction: 'up',\n  },\n  argTypes: {\n    label: {\n      control: { type: 'text' },\n    },\n    breakpoint: {\n      control: { type: 'select' },\n      options: ['tiny', 'small', 'medium', 'large', 'huge'],\n    },\n    direction: {\n      control: { type: 'radio' },\n      options: ['only', 'up', 'down'],\n    },\n  }\n}\n\nexport const Hide: Story = {\n  render: TemplateHide,\n  args: {\n    label: 'This will hide at he specified parameters.',\n    breakpoint: 'medium',\n    direction: 'down',\n  },\n  argTypes: {\n    label: {\n      control: { type: 'text' },\n    },\n    breakpoint: {\n      control: { type: 'select' },\n      options: ['tiny', 'small', 'medium', 'large', 'huge'],\n    },\n    direction: {\n      control: { type: 'radio' },\n      options: ['only', 'up', 'down'],\n    },\n  }\n}\n"]}

package/dist/src/stories/templates/bootstrap/stories.d.ts

@@ -1,6 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
-import '../../../components/kemet-button/kemet-button';
-declare const meta: Meta;
-export default meta;
-declare type Story = StoryObj;
-export declare const Checkout: Story;

package/dist/src/stories/templates/bootstrap/stories.js

@@ -1,159 +0,0 @@
-import { html } from 'lit';
-import '../../../components/kemet-button/kemet-button';
-const meta = {
-    title: 'Templates / Bootstrap',
-};
-export default meta;
-const handleFormSubmit = (event) => {
-    const form = event.srcElement;
-    const formData = new FormData(form);
-    for (const pair of formData.entries()) {
-        console.log(`${pair[0]}: ${pair[1]}`);
-    }
-};
-const CheckoutTemplate = () => html `
-  <main style="max-width:1280px;" kemet-margin="tiny:auto" kemet-padding="tiny:small">
-    <header kemet-type-align="center">
-      <kemet-icon icon="cart3" size="128" kemet-color="white" kemet-border-radius="large" kemet-background-color="primary" kemet-padding="tiny:small"></kemet-icon>
-      <h1 kemet-margin="tiny:normal">Checkout Form</h1>
-      <p kemet-type-size="plus-2" kemet-padding-left="tiny:largest" kemet-padding-right="tiny:largest">This form is a recreation of Bootstrap's Checkout example. It's been recreated using Kemet UI Core API styles and components. It serves as an example of doing validation with web components using Kemet UI.</p>
-    </header>
-    <section kemet-layout="flexrow" kemet-autostack kemet-gutters="tiny:largest" kemet-margin-top="tiny:normal">
-      <form kemet-margin-top="tiny:normal medium:none" @submit=${event => handleFormSubmit(event)}>
-        <h2 kemet-margin="tiny:none">Billing address</h2>
-        <div kemet-layout="flexrow" kemet-gutters kemet-margin-top="tiny:normal">
-          <kemet-field slug="first-name" label="First Name*" message="First name is required.">
-            <kemet-input required slot="input" name="first-name" rounded></kemet-input>
-          </kemet-field>
-          <kemet-field slug="last-name" label="Last Name*" message="Last name is required.">
-            <kemet-input required slot="input" name="last-name" rounded></kemet-input>
-          </kemet-field>
-        </div>
-        <kemet-field slug="username" label="Username*" message="Username is required." kemet-margin-top="tiny:small">
-          <kemet-input required slot="input" name="username" icon-left="person-fill" rounded></kemet-input>
-        </kemet-field>
-        <kemet-field slug="email" label="Email*" message="Invalid email." kemet-margin-top="tiny:small">
-          <kemet-input required slot="input" type="email" name="email" icon-left="envelope-fill" rounded></kemet-input>
-        </kemet-field>
-        <kemet-field slug="address" label="Address*" message="Address is required." kemet-margin-top="tiny:small">
-          <kemet-input required slot="input" name="address" icon-left="geo-alt-fill" rounded></kemet-input>
-        </kemet-field>
-        <kemet-field slug="address2" label="Address 2" kemet-margin-top="tiny:small">
-          <kemet-input slot="input" name="address2" icon-left="geo-alt-fill" rounded></kemet-input>
-        </kemet-field>
-        <div kemet-layout="flexrow" kemet-gutters kemet-margin-top="tiny:small">
-          <kemet-field slug="country" label="Country*" message="Country is required.">
-            <kemet-select required slot="input" name="country" rounded>
-              <kemet-option></kemet-option>
-              <kemet-option value="usa" label="United States"></kemet-option>
-              <kemet-option value="canada" label="Canada"></kemet-option>
-              <kemet-option value="mexico" label="Mexico"></kemet-option>
-            </kemet-select>
-          </kemet-field>
-          <kemet-field slug="state" label="State*" message="State is required.">
-            <kemet-select required slot="input" name="state" rounded>
-              <kemet-option></kemet-option>
-              <kemet-option value="MI" label="Michigan"></kemet-option>
-              <kemet-option value="NY" label="New York"></kemet-option>
-              <kemet-option value="CA" label="California"></kemet-option>
-            </kemet-select>
-          </kemet-field>
-          <kemet-field slug="zipcode" label="ZipCode*" message="ZipCode is required.">
-            <kemet-input required slot="input" name="zipcode" rounded></kemet-input>
-          </kemet-field>
-        </div>
-        <br /><hr /><br />
-        <kemet-toggle name="same-address" label="Shipping address is the same as my billing address" kemet-margin-bottom="tiny:smallest"></kemet-toggle>
-        <kemet-toggle name="save-information" label="Save this information for next time" kemet-margin-bottom="tiny:normal"></kemet-toggle>
-        <hr />
-        <h2>Payment</h2>
-        <kemet-radios required name="payment" message="You must select a payment type." kemet-margin-top="tiny:normal">
-          <kemet-radio value="credit-card" label="Credit Card"></kemet-radio>
-          <kemet-radio value="debit-card" label="Debit Card"></kemet-radio>
-          <kemet-radio value="pay-pay" label="PayPal"></kemet-radio>
-        </kemet-radios>
-        <div kemet-layout="flexgrid" kemet-gutters kemet-margin-top="tiny:small">
-          <kemet-field slug="name-on-card" label="Name on card*" message="Name is required." kemet-breakpoint="tiny:100 medium:50">
-            <kemet-input required slot="input" name="name-on-card" icon-left="person-fill" rounded></kemet-input>
-          </kemet-field>
-          <kemet-field slug="credit-card-number" label="Credit card number*" message="Credit card is required." kemet-breakpoint="tiny:100 medium:50">
-            <kemet-input required slot="input" name="credit-card-number" icon-left="credit-card" rounded></kemet-input>
-          </kemet-field>
-          <kemet-field slug="expiration" label="Expiration*" message="Expiration is not valid." kemet-breakpoint="tiny:100 medium:25">
-            <kemet-input required slot="input" name="address" rounded></kemet-input>
-          </kemet-field>
-          <kemet-field slug="cvv" label="CVV*" message="CVV is not valid." kemet-breakpoint="tiny:100 medium:25">
-            <kemet-input required slot="input" name="cvv" rounded></kemet-input>
-          </kemet-field>
-        </div>
-        <kemet-checkbox required filled rounded name="terms" label="Do you agree to our terms of service?" message="You must agree to the terms." kemet-margin-top="tiny:small" kemet-margin-bottom="tiny:normal"></kemet-checkbox>
-        <br /><hr /><br />
-        <kemet-button kemet-layout="flexrow" type="rounded">CONTINUE TO CHECKOUT</kemet-button>
-      </form>
-      <aside kemet-breakpoint="tiny:100 medium:33" kemet-margin-top="tiny:normal medium:none" kemet-order="tiny:minus-1 medium:none">
-        <div kemet-layout="flexrow" kemet-align="middle" kemet-margin-bottom="tiny:normal">
-          <h2 kemet-margin="tiny:none" kemet-color="gray4">Your cart</h2>
-          <div kemet-breakpoint="tiny:content">
-            <kemet-badge status="standard" circle>3</kemet-badge>
-          </div>
-        </div>
-        <ul kemet-layout="flexcolumn" kemet-border-radius="medium" kemet-margin="tiny:none" kemet-padding="tiny:none" kemet-border="all-1 solid gray2">
-          <li>
-            <div kemet-layout="flexrow" kemet-padding="tiny:small" kemet-border="bottom-1 solid gray2">
-              <div>
-                <h3 kemet-margin="tiny:none">Product Name</h3>
-                <span kemet-color="gray4">Brief description</span>
-              </div>
-              <span kemet-breakpoint="tiny:content" kemet-type-size="plus-1" kemet-color="gray4">$12</span>
-            </div>
-          </li>
-          <li>
-            <div kemet-layout="flexrow" kemet-padding="tiny:small" kemet-border="bottom-1 solid gray2">
-              <div>
-                <h3 kemet-margin="tiny:none">Second product</h3>
-                <span kemet-color="gray4">Brief description</span>
-              </div>
-              <span kemet-breakpoint="tiny:content" kemet-type-size="plus-1" kemet-color="gray4">$8</span>
-            </div>
-          </li>
-          <li>
-            <div kemet-layout="flexrow" kemet-padding="tiny:small" kemet-border="bottom-1 solid gray2">
-              <div>
-                <h3 kemet-margin="tiny:none">Third item</h3>
-                <span kemet-color="gray4">Brief description</span>
-              </div>
-              <span kemet-breakpoint="tiny:content" kemet-type-size="plus-1" kemet-color="gray4">$8</span>
-            </div>
-          </li>
-          <li>
-            <div kemet-layout="flexrow" kemet-padding="tiny:small" kemet-border="bottom-1 solid gray2" kemet-color="success">
-              <div>
-                <h3 kemet-margin="tiny:none">Promo code</h3>
-                <span>EXAMPLE CODE</span>
-              </div>
-              <span kemet-breakpoint="tiny:content" kemet-type-size="plus-1"> -$5</span>
-            </div>
-          </li>
-          <li>
-            <div kemet-layout="flexrow" kemet-padding="tiny:small">
-              <h3 kemet-margin="tiny:none">Total (USD)</h3>
-              <strong kemet-breakpoint="tiny:content" kemet-type-size="plus-1">$20</strong>
-            </div>
-          </li>
-        </ul>
-      </aside>
-    </section>
-    <footer kemet-type-align="center">
-      <p>&copy; 2022 Company Name</p>
-      <ul kemet-layout="flexlist" kemet-gutters>
-        <li><a href="#">Privacy</a></li>
-        <li><a href="#">Terms</a></li>
-        <li><a href="#">Support</a></li>
-      </ul>
-    </footer>
-  </main>
-`;
-export const Checkout = {
-    render: CheckoutTemplate,
-};
-//# sourceMappingURL=stories.js.map

package/dist/src/stories/templates/bootstrap/stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../../src/stories/templates/bootstrap/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,OAAO,+CAA+C,CAAC;AAEvD,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,uBAAuB;CAC/B,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,gBAAgB,GAAG,CAAC,KAAK,EAAE,EAAE;IACjC,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC;IAC9B,MAAM,QAAQ,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAQ,CAAC;IAE3C,KAAK,MAAM,IAAI,IAAI,QAAQ,CAAC,OAAO,EAAE,EAAE;QACrC,OAAO,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;KACvC;AACH,CAAC,CAAC;AAEF,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;iEAQ8B,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAAC,KAAK,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqIhG,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,gBAAgB;CACzB,CAAA","sourcesContent":["import { html } from 'lit';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../../../components/kemet-button/kemet-button';\n\nconst meta: Meta = {\n  title: 'Templates / Bootstrap',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst handleFormSubmit = (event) => {\n  const form = event.srcElement;\n  const formData = new FormData(form) as any;\n\n  for (const pair of formData.entries()) {\n    console.log(`${pair[0]}: ${pair[1]}`);\n  }\n};\n\nconst CheckoutTemplate = () => html`\n  <main style=\"max-width:1280px;\" kemet-margin=\"tiny:auto\" kemet-padding=\"tiny:small\">\n    <header kemet-type-align=\"center\">\n      <kemet-icon icon=\"cart3\" size=\"128\" kemet-color=\"white\" kemet-border-radius=\"large\" kemet-background-color=\"primary\" kemet-padding=\"tiny:small\"></kemet-icon>\n      <h1 kemet-margin=\"tiny:normal\">Checkout Form</h1>\n      <p kemet-type-size=\"plus-2\" kemet-padding-left=\"tiny:largest\" kemet-padding-right=\"tiny:largest\">This form is a recreation of Bootstrap's Checkout example. It's been recreated using Kemet UI Core API styles and components. It serves as an example of doing validation with web components using Kemet UI.</p>\n    </header>\n    <section kemet-layout=\"flexrow\" kemet-autostack kemet-gutters=\"tiny:largest\" kemet-margin-top=\"tiny:normal\">\n      <form kemet-margin-top=\"tiny:normal medium:none\" @submit=${event => handleFormSubmit(event)}>\n        <h2 kemet-margin=\"tiny:none\">Billing address</h2>\n        <div kemet-layout=\"flexrow\" kemet-gutters kemet-margin-top=\"tiny:normal\">\n          <kemet-field slug=\"first-name\" label=\"First Name*\" message=\"First name is required.\">\n            <kemet-input required slot=\"input\" name=\"first-name\" rounded></kemet-input>\n          </kemet-field>\n          <kemet-field slug=\"last-name\" label=\"Last Name*\" message=\"Last name is required.\">\n            <kemet-input required slot=\"input\" name=\"last-name\" rounded></kemet-input>\n          </kemet-field>\n        </div>\n        <kemet-field slug=\"username\" label=\"Username*\" message=\"Username is required.\" kemet-margin-top=\"tiny:small\">\n          <kemet-input required slot=\"input\" name=\"username\" icon-left=\"person-fill\" rounded></kemet-input>\n        </kemet-field>\n        <kemet-field slug=\"email\" label=\"Email*\" message=\"Invalid email.\" kemet-margin-top=\"tiny:small\">\n          <kemet-input required slot=\"input\" type=\"email\" name=\"email\" icon-left=\"envelope-fill\" rounded></kemet-input>\n        </kemet-field>\n        <kemet-field slug=\"address\" label=\"Address*\" message=\"Address is required.\" kemet-margin-top=\"tiny:small\">\n          <kemet-input required slot=\"input\" name=\"address\" icon-left=\"geo-alt-fill\" rounded></kemet-input>\n        </kemet-field>\n        <kemet-field slug=\"address2\" label=\"Address 2\" kemet-margin-top=\"tiny:small\">\n          <kemet-input slot=\"input\" name=\"address2\" icon-left=\"geo-alt-fill\" rounded></kemet-input>\n        </kemet-field>\n        <div kemet-layout=\"flexrow\" kemet-gutters kemet-margin-top=\"tiny:small\">\n          <kemet-field slug=\"country\" label=\"Country*\" message=\"Country is required.\">\n            <kemet-select required slot=\"input\" name=\"country\" rounded>\n              <kemet-option></kemet-option>\n              <kemet-option value=\"usa\" label=\"United States\"></kemet-option>\n              <kemet-option value=\"canada\" label=\"Canada\"></kemet-option>\n              <kemet-option value=\"mexico\" label=\"Mexico\"></kemet-option>\n            </kemet-select>\n          </kemet-field>\n          <kemet-field slug=\"state\" label=\"State*\" message=\"State is required.\">\n            <kemet-select required slot=\"input\" name=\"state\" rounded>\n              <kemet-option></kemet-option>\n              <kemet-option value=\"MI\" label=\"Michigan\"></kemet-option>\n              <kemet-option value=\"NY\" label=\"New York\"></kemet-option>\n              <kemet-option value=\"CA\" label=\"California\"></kemet-option>\n            </kemet-select>\n          </kemet-field>\n          <kemet-field slug=\"zipcode\" label=\"ZipCode*\" message=\"ZipCode is required.\">\n            <kemet-input required slot=\"input\" name=\"zipcode\" rounded></kemet-input>\n          </kemet-field>\n        </div>\n        <br /><hr /><br />\n        <kemet-toggle name=\"same-address\" label=\"Shipping address is the same as my billing address\" kemet-margin-bottom=\"tiny:smallest\"></kemet-toggle>\n        <kemet-toggle name=\"save-information\" label=\"Save this information for next time\" kemet-margin-bottom=\"tiny:normal\"></kemet-toggle>\n        <hr />\n        <h2>Payment</h2>\n        <kemet-radios required name=\"payment\" message=\"You must select a payment type.\" kemet-margin-top=\"tiny:normal\">\n          <kemet-radio value=\"credit-card\" label=\"Credit Card\"></kemet-radio>\n          <kemet-radio value=\"debit-card\" label=\"Debit Card\"></kemet-radio>\n          <kemet-radio value=\"pay-pay\" label=\"PayPal\"></kemet-radio>\n        </kemet-radios>\n        <div kemet-layout=\"flexgrid\" kemet-gutters kemet-margin-top=\"tiny:small\">\n          <kemet-field slug=\"name-on-card\" label=\"Name on card*\" message=\"Name is required.\" kemet-breakpoint=\"tiny:100 medium:50\">\n            <kemet-input required slot=\"input\" name=\"name-on-card\" icon-left=\"person-fill\" rounded></kemet-input>\n          </kemet-field>\n          <kemet-field slug=\"credit-card-number\" label=\"Credit card number*\" message=\"Credit card is required.\" kemet-breakpoint=\"tiny:100 medium:50\">\n            <kemet-input required slot=\"input\" name=\"credit-card-number\" icon-left=\"credit-card\" rounded></kemet-input>\n          </kemet-field>\n          <kemet-field slug=\"expiration\" label=\"Expiration*\" message=\"Expiration is not valid.\" kemet-breakpoint=\"tiny:100 medium:25\">\n            <kemet-input required slot=\"input\" name=\"address\" rounded></kemet-input>\n          </kemet-field>\n          <kemet-field slug=\"cvv\" label=\"CVV*\" message=\"CVV is not valid.\" kemet-breakpoint=\"tiny:100 medium:25\">\n            <kemet-input required slot=\"input\" name=\"cvv\" rounded></kemet-input>\n          </kemet-field>\n        </div>\n        <kemet-checkbox required filled rounded name=\"terms\" label=\"Do you agree to our terms of service?\" message=\"You must agree to the terms.\" kemet-margin-top=\"tiny:small\" kemet-margin-bottom=\"tiny:normal\"></kemet-checkbox>\n        <br /><hr /><br />\n        <kemet-button kemet-layout=\"flexrow\" type=\"rounded\">CONTINUE TO CHECKOUT</kemet-button>\n      </form>\n      <aside kemet-breakpoint=\"tiny:100 medium:33\" kemet-margin-top=\"tiny:normal medium:none\" kemet-order=\"tiny:minus-1 medium:none\">\n        <div kemet-layout=\"flexrow\" kemet-align=\"middle\" kemet-margin-bottom=\"tiny:normal\">\n          <h2 kemet-margin=\"tiny:none\" kemet-color=\"gray4\">Your cart</h2>\n          <div kemet-breakpoint=\"tiny:content\">\n            <kemet-badge status=\"standard\" circle>3</kemet-badge>\n          </div>\n        </div>\n        <ul kemet-layout=\"flexcolumn\" kemet-border-radius=\"medium\" kemet-margin=\"tiny:none\" kemet-padding=\"tiny:none\" kemet-border=\"all-1 solid gray2\">\n          <li>\n            <div kemet-layout=\"flexrow\" kemet-padding=\"tiny:small\" kemet-border=\"bottom-1 solid gray2\">\n              <div>\n                <h3 kemet-margin=\"tiny:none\">Product Name</h3>\n                <span kemet-color=\"gray4\">Brief description</span>\n              </div>\n              <span kemet-breakpoint=\"tiny:content\" kemet-type-size=\"plus-1\" kemet-color=\"gray4\">$12</span>\n            </div>\n          </li>\n          <li>\n            <div kemet-layout=\"flexrow\" kemet-padding=\"tiny:small\" kemet-border=\"bottom-1 solid gray2\">\n              <div>\n                <h3 kemet-margin=\"tiny:none\">Second product</h3>\n                <span kemet-color=\"gray4\">Brief description</span>\n              </div>\n              <span kemet-breakpoint=\"tiny:content\" kemet-type-size=\"plus-1\" kemet-color=\"gray4\">$8</span>\n            </div>\n          </li>\n          <li>\n            <div kemet-layout=\"flexrow\" kemet-padding=\"tiny:small\" kemet-border=\"bottom-1 solid gray2\">\n              <div>\n                <h3 kemet-margin=\"tiny:none\">Third item</h3>\n                <span kemet-color=\"gray4\">Brief description</span>\n              </div>\n              <span kemet-breakpoint=\"tiny:content\" kemet-type-size=\"plus-1\" kemet-color=\"gray4\">$8</span>\n            </div>\n          </li>\n          <li>\n            <div kemet-layout=\"flexrow\" kemet-padding=\"tiny:small\" kemet-border=\"bottom-1 solid gray2\" kemet-color=\"success\">\n              <div>\n                <h3 kemet-margin=\"tiny:none\">Promo code</h3>\n                <span>EXAMPLE CODE</span>\n              </div>\n              <span kemet-breakpoint=\"tiny:content\" kemet-type-size=\"plus-1\"> -$5</span>\n            </div>\n          </li>\n          <li>\n            <div kemet-layout=\"flexrow\" kemet-padding=\"tiny:small\">\n              <h3 kemet-margin=\"tiny:none\">Total (USD)</h3>\n              <strong kemet-breakpoint=\"tiny:content\" kemet-type-size=\"plus-1\">$20</strong>\n            </div>\n          </li>\n        </ul>\n      </aside>\n    </section>\n    <footer kemet-type-align=\"center\">\n      <p>&copy; 2022 Company Name</p>\n      <ul kemet-layout=\"flexlist\" kemet-gutters>\n        <li><a href=\"#\">Privacy</a></li>\n        <li><a href=\"#\">Terms</a></li>\n        <li><a href=\"#\">Support</a></li>\n      </ul>\n    </footer>\n  </main>\n`;\n\nexport const Checkout: Story = {\n  render: CheckoutTemplate,\n}\n"]}

package/dist/src/stories/templates/foundation/stories.d.ts

@@ -1,8 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
-declare const meta: Meta;
-export default meta;
-declare type Story = StoryObj;
-export declare const Agency: Story;
-export declare const eCommerce: Story;
-export declare const News: Story;
-export declare const Travel: Story;