kemet-ui 1.3.1 → 2.0.0

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

@@ -0,0 +1,41 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,60 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,159 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,8 @@
+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;