kemet-ui 2.0.0 → 2.0.2

package/dist/src/components/kemet-upload/styles.js

@@ -1,169 +0,0 @@
-import { css } from 'lit';
-export const stylesUpload = css `
-  :host {
-    color: var(--kemet-upload-color, var(--kemet-color-white));
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    height: var(--kemet-upload-height, 364px);
-    border: var(--kemet-upload-border, 1rem solid var(--kemet-color-gray1-to-transparent));
-    background-color: var(--kemet-upload-background-color, var(--kemet-color-primary-to-transparent));
-  }
-
-  :host([mobile]) {
-    display: block;
-    height: auto;
-  }
-
-  input {
-    display: none;
-  }
-
-  .button {
-    cursor: pointer;
-    font-size: 1rem;
-    display: block;
-    color: var(--kemet-color-white);
-    padding: 0.5rem 1rem;
-    border: 1px solid var(--kemet-color-white);
-    background-color: transparent;
-  }
-
-  .upload {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin: var(--kemet-upload-margin);
-    flex-direction: column;
-    border: 2px dashed var(--kemet-color-white);
-  }
-
-  :host([over]) .upload {
-    background-color: green;
-  }
-
-  :host([mobile]) .upload {
-    height: 280px;
-  }
-
-  .files {
-    display: flex;
-    gap: 1rem;
-    flex-direction: column;
-    padding: 0 1rem;
-    overflow: auto;
-    background-color: var(--kemet-color-gray1-to-transparent);
-  }
-
-  :host([mobile]) .files {
-    padding: 0;
-    max-height: 280px;
-  }
-
-  .heading {
-    font-size: 1.25rem;
-    margin: 0 0 2rem 0;
-  }
-
-  :host([no-drag-drop]) .heading {
-    display: none;
-  }
-`;
-export const stylesUploadFile = css `
-  :host {
-    --kemet-upload-file-ripple-color: var(--kemet-color-primary);
-
-    color: var(--kemet-upload-file-color, var(--kemet-color-text));
-    display: grid;
-    gap: 1rem;
-    grid-template-columns: auto 1fr auto;
-    align-items: center;
-    height: 100%;
-    max-height: 50%;
-    padding: var(--kemet-upload-file-padding, 0.5rem 1rem);
-    border: var(--kemet-upload-file-border, 1px solid var(--kemet-color-primary));
-  }
-
-  :host([status='error']) {
-    border: 1px solid var(--kemet-color-error);
-  }
-
-  :host([status='complete']) {
-    border: 1px solid var(--kemet-color-success);
-  }
-
-  h3 {
-    margin: 0;
-  }
-
-  .percentage {
-    font-size: clamp(2rem, 3vw, 2.5rem);
-    align-self: center;
-    justify-self: center;
-  }
-
-  .indicator {
-    transform: scale(0.8);
-  }
-
-  :host([status='complete']) .message,
-  :host([status='complete']) .indicator {
-    color: var(--kemet-color-success);
-  }
-
-  :host([status='error']) .message,
-  :host([status='error']) .indicator {
-    color: var(--kemet-color-error);
-  }
-`;
-export const stylesLoaders = css `
-  .lds-ripple {
-    display: inline-block;
-    position: relative;
-    width: 80px;
-    height: 80px;
-  }
-
-  .lds-ripple div {
-    position: absolute;
-    border: 4px solid var(--kemet-upload-file-ripple-color);
-    opacity: 1;
-    border-radius: 50%;
-    animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
-  }
-
-  .lds-ripple div:nth-child(2) {
-    animation-delay: -0.5s;
-  }
-
-  @keyframes lds-ripple {
-    0% {
-      top: 36px;
-      left: 36px;
-      width: 0;
-      height: 0;
-      opacity: 0;
-    }
-    4.9% {
-      top: 36px;
-      left: 36px;
-      width: 0;
-      height: 0;
-      opacity: 0;
-    }
-    5% {
-      top: 36px;
-      left: 36px;
-      width: 0;
-      height: 0;
-      opacity: 1;
-    }
-    100% {
-      top: 0px;
-      left: 0px;
-      width: 72px;
-      height: 72px;
-      opacity: 0;
-    }
-  }
-`;
-//# sourceMappingURL=styles.js.map

package/dist/src/components/kemet-upload/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/components/kemet-upload/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoE9B,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8ClC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkD/B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesUpload = css`\n  :host {\n    color: var(--kemet-upload-color, var(--kemet-color-white));\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    height: var(--kemet-upload-height, 364px);\n    border: var(--kemet-upload-border, 1rem solid var(--kemet-color-gray1-to-transparent));\n    background-color: var(--kemet-upload-background-color, var(--kemet-color-primary-to-transparent));\n  }\n\n  :host([mobile]) {\n    display: block;\n    height: auto;\n  }\n\n  input {\n    display: none;\n  }\n\n  .button {\n    cursor: pointer;\n    font-size: 1rem;\n    display: block;\n    color: var(--kemet-color-white);\n    padding: 0.5rem 1rem;\n    border: 1px solid var(--kemet-color-white);\n    background-color: transparent;\n  }\n\n  .upload {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin: var(--kemet-upload-margin);\n    flex-direction: column;\n    border: 2px dashed var(--kemet-color-white);\n  }\n\n  :host([over]) .upload {\n    background-color: green;\n  }\n\n  :host([mobile]) .upload {\n    height: 280px;\n  }\n\n  .files {\n    display: flex;\n    gap: 1rem;\n    flex-direction: column;\n    padding: 0 1rem;\n    overflow: auto;\n    background-color: var(--kemet-color-gray1-to-transparent);\n  }\n\n  :host([mobile]) .files {\n    padding: 0;\n    max-height: 280px;\n  }\n\n  .heading {\n    font-size: 1.25rem;\n    margin: 0 0 2rem 0;\n  }\n\n  :host([no-drag-drop]) .heading {\n    display: none;\n  }\n`;\n\nexport const stylesUploadFile = css`\n  :host {\n    --kemet-upload-file-ripple-color: var(--kemet-color-primary);\n\n    color: var(--kemet-upload-file-color, var(--kemet-color-text));\n    display: grid;\n    gap: 1rem;\n    grid-template-columns: auto 1fr auto;\n    align-items: center;\n    height: 100%;\n    max-height: 50%;\n    padding: var(--kemet-upload-file-padding, 0.5rem 1rem);\n    border: var(--kemet-upload-file-border, 1px solid var(--kemet-color-primary));\n  }\n\n  :host([status='error']) {\n    border: 1px solid var(--kemet-color-error);\n  }\n\n  :host([status='complete']) {\n    border: 1px solid var(--kemet-color-success);\n  }\n\n  h3 {\n    margin: 0;\n  }\n\n  .percentage {\n    font-size: clamp(2rem, 3vw, 2.5rem);\n    align-self: center;\n    justify-self: center;\n  }\n\n  .indicator {\n    transform: scale(0.8);\n  }\n\n  :host([status='complete']) .message,\n  :host([status='complete']) .indicator {\n    color: var(--kemet-color-success);\n  }\n\n  :host([status='error']) .message,\n  :host([status='error']) .indicator {\n    color: var(--kemet-color-error);\n  }\n`;\n\nexport const stylesLoaders = css`\n  .lds-ripple {\n    display: inline-block;\n    position: relative;\n    width: 80px;\n    height: 80px;\n  }\n\n  .lds-ripple div {\n    position: absolute;\n    border: 4px solid var(--kemet-upload-file-ripple-color);\n    opacity: 1;\n    border-radius: 50%;\n    animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;\n  }\n\n  .lds-ripple div:nth-child(2) {\n    animation-delay: -0.5s;\n  }\n\n  @keyframes lds-ripple {\n    0% {\n      top: 36px;\n      left: 36px;\n      width: 0;\n      height: 0;\n      opacity: 0;\n    }\n    4.9% {\n      top: 36px;\n      left: 36px;\n      width: 0;\n      height: 0;\n      opacity: 0;\n    }\n    5% {\n      top: 36px;\n      left: 36px;\n      width: 0;\n      height: 0;\n      opacity: 1;\n    }\n    100% {\n      top: 0px;\n      left: 0px;\n      width: 72px;\n      height: 72px;\n      opacity: 0;\n    }\n  }\n`;\n"]}

package/dist/src/components/kemet-upload/types.d.ts

@@ -1,21 +0,0 @@
-export interface KemetUploadInterface extends HTMLElement {
-    slug?: string;
-    accept?: string;
-    multiple?: boolean;
-    over?: boolean;
-    heading?: string;
-    mobile?: boolean;
-    breakpoint?: string;
-    noDragDrop?: boolean;
-    maxSize?: number;
-    buttonLabel?: string;
-}
-export interface KemetUploadFile extends HTMLElement {
-    name?: string;
-    loaded?: number;
-    size?: number;
-    type?: string;
-    status?: string;
-    percent?: number;
-    message?: string;
-}

package/dist/src/components/kemet-upload/types.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=types.js.map

package/dist/src/components/kemet-upload/types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/kemet-upload/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface KemetUploadInterface extends HTMLElement {\n  slug?: string,\n  accept?: string,\n  multiple?: boolean,\n  over?: boolean,\n  heading?: string,\n  mobile?: boolean,\n  breakpoint?: string,\n  noDragDrop?: boolean,\n  maxSize?: number,\n  buttonLabel?: string\n}\n\nexport interface KemetUploadFile extends HTMLElement {\n  name?: string,\n  loaded?: number,\n  size?: number,\n  type?: string,\n  status?: string,\n  percent?: number,\n  message?: string,\n}\n"]}

package/dist/src/stories/styles/borders/borders.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/borders/borders.stories.js

@@ -1,46 +0,0 @@
-import { html } from 'lit';
-import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-const meta = {
-    title: 'Styles / Border',
-};
-export default meta;
-const Template = ({ width = '1', side = 'all', style = 'solid', color = 'primary', radius = 'none', }) => {
-    const borderRadius = radius !== 'none' ? `kemet-border-radius="${radius}"` : null;
-    const template = `
-    <div kemet-border="${side}-${width} ${style} ${color}" ${borderRadius} kemet-margin="tiny:normal" kemet-padding="tiny:normal">The quick brown fox jumps over the lazy dog.</div>
-  `;
-    return html `${unsafeHTML(template)}`;
-};
-export const Standard = {
-    render: Template,
-    args: {
-        width: '1',
-        side: 'all',
-        style: 'solid',
-        color: 'auto',
-        radius: 'none',
-    },
-    argTypes: {
-        width: {
-            control: { type: 'select' },
-            options: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
-        },
-        side: {
-            control: { type: 'select' },
-            options: ['all', 'top', 'right', 'bottom', 'left', 'horizontal', 'vertical'],
-        },
-        style: {
-            control: { type: 'select' },
-            options: ['dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset', 'none', 'hidden'],
-        },
-        color: {
-            control: { type: 'select' },
-            options: ['auto', 'primary', 'black', 'white', 'gray1', 'gray2', 'gray3', 'gray4', 'gray5', 'gray6', 'gray7', 'gray8', 'gray9', 'gray10'],
-        },
-        radius: {
-            control: { type: 'select' },
-            options: ['none', 'small', 'medium', 'large'],
-        },
-    }
-};
-//# sourceMappingURL=borders.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"borders.stories.js","sourceRoot":"","sources":["../../../../../src/stories/styles/borders/borders.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,iBAAiB;CACzB,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,EAChB,KAAK,GAAG,GAAG,EACX,IAAI,GAAG,KAAK,EACZ,KAAK,GAAG,OAAO,EACf,KAAK,GAAG,SAAS,EACjB,MAAM,GAAG,MAAM,GAChB,EAAE,EAAE;IACH,MAAM,YAAY,GAAG,MAAM,KAAK,MAAM,CAAC,CAAC,CAAC,wBAAwB,MAAM,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC;IAElF,MAAM,QAAQ,GAAG;yBACM,IAAI,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,KAAK,YAAY;GACtE,CAAC;IAEF,OAAO,IAAI,CAAA,GAAG,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC;AACvC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,QAAQ;IAChB,IAAI,EAAE;QACJ,KAAK,EAAE,GAAG;QACV,IAAI,EAAE,KAAK;QACX,KAAK,EAAE,OAAO;QACd,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;KACf;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;SAC5D;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,YAAY,EAAE,UAAU,CAAC;SAC7E;QACD,KAAK,EAAE;YACL,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,CAAC;SACzG;QACD,KAAK,EAAE;YACL,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,CAAC;SAC1I;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC;SAC9C;KACF;CACF,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 / Border',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = ({\n  width = '1',\n  side = 'all',\n  style = 'solid',\n  color = 'primary',\n  radius = 'none',\n}) => {\n  const borderRadius = radius !== 'none' ? `kemet-border-radius=\"${radius}\"` : null;\n\n  const template = `\n    <div kemet-border=\"${side}-${width} ${style} ${color}\" ${borderRadius} kemet-margin=\"tiny:normal\" kemet-padding=\"tiny:normal\">The quick brown fox jumps over the lazy dog.</div>\n  `;\n\n  return html`${unsafeHTML(template)}`;\n};\n\nexport const Standard: Story = {\n  render: Template,\n  args: {\n    width: '1',\n    side: 'all',\n    style: 'solid',\n    color: 'auto',\n    radius: 'none',\n  },\n  argTypes: {\n    width: {\n      control: { type: 'select' },\n      options: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],\n    },\n    side: {\n      control: { type: 'select' },\n      options: ['all', 'top', 'right', 'bottom', 'left', 'horizontal', 'vertical'],\n    },\n    style: {\n      control: { type: 'select' },\n      options: ['dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset', 'none', 'hidden'],\n    },\n    color: {\n      control: { type: 'select' },\n      options: ['auto', 'primary', 'black', 'white', 'gray1', 'gray2', 'gray3', 'gray4', 'gray5', 'gray6', 'gray7', 'gray8', 'gray9', 'gray10'],\n    },\n    radius: {\n      control: { type: 'select' },\n      options: ['none', 'small', 'medium', 'large'],\n    },\n  }\n}\n"]}

package/dist/src/stories/styles/borders/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/borders/stories.js

@@ -1,46 +0,0 @@
-import { html } from 'lit';
-import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-const meta = {
-    title: 'Styles / Border',
-};
-export default meta;
-const Template = ({ width = '1', side = 'all', style = 'solid', color = 'primary', radius = 'none', }) => {
-    const borderRadius = radius !== 'none' ? `kemet-border-radius="${radius}"` : null;
-    const template = `
-    <div kemet-border="${side}-${width} ${style} ${color}" ${borderRadius} kemet-margin="tiny:normal" kemet-padding="tiny:normal">The quick brown fox jumps over the lazy dog.</div>
-  `;
-    return html `${unsafeHTML(template)}`;
-};
-export const Standard = {
-    render: Template,
-    args: {
-        width: '1',
-        side: 'all',
-        style: 'solid',
-        color: 'auto',
-        radius: 'none',
-    },
-    argTypes: {
-        width: {
-            control: { type: 'select' },
-            options: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
-        },
-        side: {
-            control: { type: 'select' },
-            options: ['all', 'top', 'right', 'bottom', 'left', 'horizontal', 'vertical'],
-        },
-        style: {
-            control: { type: 'select' },
-            options: ['dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset', 'none', 'hidden'],
-        },
-        color: {
-            control: { type: 'select' },
-            options: ['auto', 'primary', 'black', 'white', 'gray1', 'gray2', 'gray3', 'gray4', 'gray5', 'gray6', 'gray7', 'gray8', 'gray9', 'gray10'],
-        },
-        radius: {
-            control: { type: 'select' },
-            options: ['none', 'small', 'medium', 'large'],
-        },
-    }
-};
-//# sourceMappingURL=stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../../src/stories/styles/borders/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,iBAAiB;CACzB,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,EAChB,KAAK,GAAG,GAAG,EACX,IAAI,GAAG,KAAK,EACZ,KAAK,GAAG,OAAO,EACf,KAAK,GAAG,SAAS,EACjB,MAAM,GAAG,MAAM,GAChB,EAAE,EAAE;IACH,MAAM,YAAY,GAAG,MAAM,KAAK,MAAM,CAAC,CAAC,CAAC,wBAAwB,MAAM,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC;IAElF,MAAM,QAAQ,GAAG;yBACM,IAAI,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,KAAK,YAAY;GACtE,CAAC;IAEF,OAAO,IAAI,CAAA,GAAG,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC;AACvC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,QAAQ;IAChB,IAAI,EAAE;QACJ,KAAK,EAAE,GAAG;QACV,IAAI,EAAE,KAAK;QACX,KAAK,EAAE,OAAO;QACd,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;KACf;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;SAC5D;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,YAAY,EAAE,UAAU,CAAC;SAC7E;QACD,KAAK,EAAE;YACL,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,CAAC;SACzG;QACD,KAAK,EAAE;YACL,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,CAAC;SAC1I;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC;SAC9C;KACF;CACF,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 / Border',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = ({\n  width = '1',\n  side = 'all',\n  style = 'solid',\n  color = 'primary',\n  radius = 'none',\n}) => {\n  const borderRadius = radius !== 'none' ? `kemet-border-radius=\"${radius}\"` : null;\n\n  const template = `\n    <div kemet-border=\"${side}-${width} ${style} ${color}\" ${borderRadius} kemet-margin=\"tiny:normal\" kemet-padding=\"tiny:normal\">The quick brown fox jumps over the lazy dog.</div>\n  `;\n\n  return html`${unsafeHTML(template)}`;\n};\n\nexport const Standard: Story = {\n  render: Template,\n  args: {\n    width: '1',\n    side: 'all',\n    style: 'solid',\n    color: 'auto',\n    radius: 'none',\n  },\n  argTypes: {\n    width: {\n      control: { type: 'select' },\n      options: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],\n    },\n    side: {\n      control: { type: 'select' },\n      options: ['all', 'top', 'right', 'bottom', 'left', 'horizontal', 'vertical'],\n    },\n    style: {\n      control: { type: 'select' },\n      options: ['dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset', 'none', 'hidden'],\n    },\n    color: {\n      control: { type: 'select' },\n      options: ['auto', 'primary', 'black', 'white', 'gray1', 'gray2', 'gray3', 'gray4', 'gray5', 'gray6', 'gray7', 'gray8', 'gray9', 'gray10'],\n    },\n    radius: {\n      control: { type: 'select' },\n      options: ['none', 'small', 'medium', 'large'],\n    },\n  }\n}\n"]}

package/dist/src/stories/styles/borders.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/borders.stories.js

@@ -1,46 +0,0 @@
-import { html } from 'lit';
-import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-const meta = {
-    title: 'Styles / Border',
-};
-export default meta;
-const Template = ({ width = '1', side = 'all', style = 'solid', color = 'primary', radius = 'none', }) => {
-    const borderRadius = radius !== 'none' ? `kemet-border-radius="${radius}"` : null;
-    const template = `
-    <div kemet-border="${side}-${width} ${style} ${color}" ${borderRadius} kemet-margin="tiny:normal" kemet-padding="tiny:normal">The quick brown fox jumps over the lazy dog.</div>
-  `;
-    return html `${unsafeHTML(template)}`;
-};
-export const Standard = {
-    render: Template,
-    args: {
-        width: '1',
-        side: 'all',
-        style: 'solid',
-        color: 'auto',
-        radius: 'none',
-    },
-    argTypes: {
-        width: {
-            control: { type: 'select' },
-            options: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
-        },
-        side: {
-            control: { type: 'select' },
-            options: ['all', 'top', 'right', 'bottom', 'left', 'horizontal', 'vertical'],
-        },
-        style: {
-            control: { type: 'select' },
-            options: ['dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset', 'none', 'hidden'],
-        },
-        color: {
-            control: { type: 'select' },
-            options: ['auto', 'primary', 'black', 'white', 'gray1', 'gray2', 'gray3', 'gray4', 'gray5', 'gray6', 'gray7', 'gray8', 'gray9', 'gray10'],
-        },
-        radius: {
-            control: { type: 'select' },
-            options: ['none', 'small', 'medium', 'large'],
-        },
-    }
-};
-//# sourceMappingURL=borders.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"borders.stories.js","sourceRoot":"","sources":["../../../../src/stories/styles/borders.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,iBAAiB;CACzB,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,EAChB,KAAK,GAAG,GAAG,EACX,IAAI,GAAG,KAAK,EACZ,KAAK,GAAG,OAAO,EACf,KAAK,GAAG,SAAS,EACjB,MAAM,GAAG,MAAM,GAChB,EAAE,EAAE;IACH,MAAM,YAAY,GAAG,MAAM,KAAK,MAAM,CAAC,CAAC,CAAC,wBAAwB,MAAM,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC;IAElF,MAAM,QAAQ,GAAG;yBACM,IAAI,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,KAAK,YAAY;GACtE,CAAC;IAEF,OAAO,IAAI,CAAA,GAAG,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC;AACvC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,QAAQ;IAChB,IAAI,EAAE;QACJ,KAAK,EAAE,GAAG;QACV,IAAI,EAAE,KAAK;QACX,KAAK,EAAE,OAAO;QACd,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;KACf;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;SAC5D;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,YAAY,EAAE,UAAU,CAAC;SAC7E;QACD,KAAK,EAAE;YACL,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,CAAC;SACzG;QACD,KAAK,EAAE;YACL,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,CAAC;SAC1I;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC;SAC9C;KACF;CACF,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 / Border',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = ({\n  width = '1',\n  side = 'all',\n  style = 'solid',\n  color = 'primary',\n  radius = 'none',\n}) => {\n  const borderRadius = radius !== 'none' ? `kemet-border-radius=\"${radius}\"` : null;\n\n  const template = `\n    <div kemet-border=\"${side}-${width} ${style} ${color}\" ${borderRadius} kemet-margin=\"tiny:normal\" kemet-padding=\"tiny:normal\">The quick brown fox jumps over the lazy dog.</div>\n  `;\n\n  return html`${unsafeHTML(template)}`;\n};\n\nexport const Standard: Story = {\n  render: Template,\n  args: {\n    width: '1',\n    side: 'all',\n    style: 'solid',\n    color: 'auto',\n    radius: 'none',\n  },\n  argTypes: {\n    width: {\n      control: { type: 'select' },\n      options: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],\n    },\n    side: {\n      control: { type: 'select' },\n      options: ['all', 'top', 'right', 'bottom', 'left', 'horizontal', 'vertical'],\n    },\n    style: {\n      control: { type: 'select' },\n      options: ['dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset', 'none', 'hidden'],\n    },\n    color: {\n      control: { type: 'select' },\n      options: ['auto', 'primary', 'black', 'white', 'gray1', 'gray2', 'gray3', 'gray4', 'gray5', 'gray6', 'gray7', 'gray8', 'gray9', 'gray10'],\n    },\n    radius: {\n      control: { type: 'select' },\n      options: ['none', 'small', 'medium', 'large'],\n    },\n  }\n}\n"]}

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

@@ -1 +0,0 @@
-export declare const Standard: any;

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

@@ -1,15 +0,0 @@
-import { html } from 'lit';
-const Template = ({ layer = 'layer3' }) => html `
-  <div kemet-elevation=${layer} kemet-padding="tiny:normal" kemet-margin="tiny:normal">The quick brown fox jumps over the lazy dog.</div>
-`;
-export const Standard = Template.bind({});
-Standard.args = {
-    layer: 'layer3',
-};
-Standard.argTypes = {
-    layer: {
-        control: { type: 'select' },
-        options: ['none', 'layer1', 'layer2', 'layer3', 'layer4', 'layer5', 'layer6', 'inner'],
-    },
-};
-//# sourceMappingURL=elevation.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"elevation.stories.js","sourceRoot":"","sources":["../../../../../src/stories/styles/elevation/elevation.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAE3B,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,GAAG,QAAQ,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;yBACtB,KAAK;CAC7B,CAAC;AACF,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,GAAG;IACd,KAAK,EAAE,QAAQ;CAChB,CAAC;AACF,QAAQ,CAAC,QAAQ,GAAG;IAClB,KAAK,EAAE;QACL,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;QAC3B,OAAO,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,CAAC;KACvF;CACF,CAAC","sourcesContent":["import { html } from 'lit';\n\nconst Template = ({ layer = 'layer3' }) => html`\n  <div kemet-elevation=${layer} kemet-padding=\"tiny:normal\" kemet-margin=\"tiny:normal\">The quick brown fox jumps over the lazy dog.</div>\n`;\nexport const Standard = Template.bind({});\nStandard.args = {\n  layer: 'layer3',\n};\nStandard.argTypes = {\n  layer: {\n    control: { type: 'select' },\n    options: ['none', 'layer1', 'layer2', 'layer3', 'layer4', 'layer5', 'layer6', 'inner'],\n  },\n};\n"]}

package/dist/src/stories/styles/elevation/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/elevation/stories.js

@@ -1,21 +0,0 @@
-import { html } from 'lit';
-const meta = {
-    title: 'Styles / Elevation',
-};
-export default meta;
-const Template = ({ layer = 'layer3' }) => html `
-  <div kemet-elevation=${layer} kemet-padding="tiny:normal" kemet-margin="tiny:normal">The quick brown fox jumps over the lazy dog.</div>
-`;
-export const Standard = {
-    render: Template,
-    args: {
-        layer: 'layer3',
-    },
-    argTypes: {
-        layer: {
-            control: { type: 'select' },
-            options: ['none', 'layer1', 'layer2', 'layer3', 'layer4', 'layer5', 'layer6', 'inner'],
-        },
-    }
-};
-//# sourceMappingURL=stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../../src/stories/styles/elevation/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,oBAAoB;CAC5B,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,GAAG,QAAQ,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;yBACtB,KAAK;CAC7B,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,QAAQ;IAChB,IAAI,EAAE;QACJ,KAAK,EAAE,QAAQ;KAChB;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,CAAC;SACvF;KACF;CACF,CAAA","sourcesContent":["import { html } from 'lit';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nconst meta: Meta = {\n  title: 'Styles / Elevation',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = ({ layer = 'layer3' }) => html`\n  <div kemet-elevation=${layer} kemet-padding=\"tiny:normal\" kemet-margin=\"tiny:normal\">The quick brown fox jumps over the lazy dog.</div>\n`;\n\nexport const Standard: Story = {\n  render: Template,\n  args: {\n    layer: 'layer3',\n  },\n  argTypes: {\n    layer: {\n      control: { type: 'select' },\n      options: ['none', 'layer1', 'layer2', 'layer3', 'layer4', 'layer5', 'layer6', 'inner'],\n    },\n  }\n}\n"]}

package/dist/src/stories/styles/flexcolumn/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 Example1: Story;
-export declare const Example2: Story;

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

@@ -1,44 +0,0 @@
-import { html } from 'lit';
-const meta = {
-    title: 'Styles / Flexcolumn',
-};
-export default meta;
-const TemplateExample1 = () => html `
-  <section kemet-layout="flexcolumn" kemet-gutters style="height:300px;">
-    <div><div kemet-background-color="primary" kemet-color="white" kemet-padding="tiny:smallest">1</div></div>
-    <div><div kemet-background-color="primary" kemet-color="white" kemet-padding="tiny:smallest">2</div></div>
-    <div><div kemet-background-color="primary" kemet-color="white" kemet-padding="tiny:smallest">3</div></div>
-  </section>
-`;
-const TemplateExample2 = () => html `
-  <section kemet-layout="flexcolumn" kemet-gutters style="height:300px;">
-    <div kemet-fit-content><div kemet-background-color="primary" kemet-color="white" kemet-padding="tiny:smallest">1</div></div>
-    <div><div kemet-background-color="primary" kemet-color="white" kemet-padding="tiny:smallest">2</div></div>
-    <div><div kemet-background-color="primary" kemet-color="white" kemet-padding="tiny:smallest">3</div></div>
-  </section>
-`;
-export const Example1 = {
-    render: TemplateExample1,
-    args: {
-        layer: 'layer3',
-    },
-    argTypes: {
-        layer: {
-            control: { type: 'select' },
-            options: ['none', 'layer1', 'layer2', 'layer3', 'layer4', 'layer5', 'layer6', 'inner'],
-        },
-    }
-};
-export const Example2 = {
-    render: TemplateExample2,
-    args: {
-        layer: 'layer3',
-    },
-    argTypes: {
-        layer: {
-            control: { type: 'select' },
-            options: ['none', 'layer1', 'layer2', 'layer3', 'layer4', 'layer5', 'layer6', 'inner'],
-        },
-    }
-};
-//# sourceMappingURL=stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../../src/stories/styles/flexcolumn/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,gBAAgB,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;CAMlC,CAAC;AAEF,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;CAMlC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,gBAAgB;IACxB,IAAI,EAAE;QACJ,KAAK,EAAE,QAAQ;KAChB;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,CAAC;SACvF;KACF;CACF,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,gBAAgB;IACxB,IAAI,EAAE;QACJ,KAAK,EAAE,QAAQ;KAChB;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,CAAC;SACvF;KACF;CACF,CAAA","sourcesContent":["import { html } from 'lit';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nconst meta: Meta = {\n  title: 'Styles / Flexcolumn',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst TemplateExample1 = () => html`\n  <section kemet-layout=\"flexcolumn\" kemet-gutters style=\"height:300px;\">\n    <div><div kemet-background-color=\"primary\" kemet-color=\"white\" kemet-padding=\"tiny:smallest\">1</div></div>\n    <div><div kemet-background-color=\"primary\" kemet-color=\"white\" kemet-padding=\"tiny:smallest\">2</div></div>\n    <div><div kemet-background-color=\"primary\" kemet-color=\"white\" kemet-padding=\"tiny:smallest\">3</div></div>\n  </section>\n`;\n\nconst TemplateExample2 = () => html`\n  <section kemet-layout=\"flexcolumn\" kemet-gutters style=\"height:300px;\">\n    <div kemet-fit-content><div kemet-background-color=\"primary\" kemet-color=\"white\" kemet-padding=\"tiny:smallest\">1</div></div>\n    <div><div kemet-background-color=\"primary\" kemet-color=\"white\" kemet-padding=\"tiny:smallest\">2</div></div>\n    <div><div kemet-background-color=\"primary\" kemet-color=\"white\" kemet-padding=\"tiny:smallest\">3</div></div>\n  </section>\n`;\n\nexport const Example1: Story = {\n  render: TemplateExample1,\n  args: {\n    layer: 'layer3',\n  },\n  argTypes: {\n    layer: {\n      control: { type: 'select' },\n      options: ['none', 'layer1', 'layer2', 'layer3', 'layer4', 'layer5', 'layer6', 'inner'],\n    },\n  }\n}\n\nexport const Example2: Story = {\n  render: TemplateExample2,\n  args: {\n    layer: 'layer3',\n  },\n  argTypes: {\n    layer: {\n      control: { type: 'select' },\n      options: ['none', 'layer1', 'layer2', 'layer3', 'layer4', 'layer5', 'layer6', 'inner'],\n    },\n  }\n}\n\n"]}

package/dist/src/stories/styles/flexgrid/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 Example1: Story;
-export declare const Example2: Story;

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

@@ -1,44 +0,0 @@
-import { html } from 'lit';
-const meta = {
-    title: 'Styles / Flexgrid',
-};
-export default meta;
-const TemplateExample1 = () => html `
-  <section kemet-layout="flexgrid" kemet-gutters="plus-1">
-    <div kemet-breakpoint="tiny:100 medium:33 large:25">
-      <div kemet-background-color="primary" kemet-color="white" kemet-padding="tiny:smallest">1</div>
-    </div>
-    <div kemet-breakpoint="tiny:50 medium:33 large:25">
-      <div kemet-background-color="primary" kemet-color="white" kemet-padding="tiny:smallest">2</div>
-    </div>
-    <div kemet-breakpoint="tiny:50 medium:33 large:25">
-      <div kemet-background-color="primary" kemet-color="white" kemet-padding="tiny:smallest">3</div>
-    </div>
-    <div kemet-breakpoint="tiny:100 medium:100 large:25">
-      <div kemet-background-color="primary" kemet-color="white" kemet-padding="tiny:smallest">4</div>
-    </div>
-  </section>
-`;
-const TemplateExample2 = () => html `
-  <section kemet-layout="flexgrid" kemet-gutters kemet-basis="tiny:4-columns medium:6-columns huge:12-columns">
-    <div><div kemet-background-color="primary" kemet-color="white" kemet-padding="tiny:smallest">1</div></div>
-    <div><div kemet-background-color="primary" kemet-color="white" kemet-padding="tiny:smallest">2</div></div>
-    <div><div kemet-background-color="primary" kemet-color="white" kemet-padding="tiny:smallest">3</div></div>
-    <div><div kemet-background-color="primary" kemet-color="white" kemet-padding="tiny:smallest">4</div></div>
-    <div><div kemet-background-color="primary" kemet-color="white" kemet-padding="tiny:smallest">5</div></div>
-    <div><div kemet-background-color="primary" kemet-color="white" kemet-padding="tiny:smallest">6</div></div>
-    <div><div kemet-background-color="primary" kemet-color="white" kemet-padding="tiny:smallest">7</div></div>
-    <div><div kemet-background-color="primary" kemet-color="white" kemet-padding="tiny:smallest">8</div></div>
-    <div><div kemet-background-color="primary" kemet-color="white" kemet-padding="tiny:smallest">9</div></div>
-    <div><div kemet-background-color="primary" kemet-color="white" kemet-padding="tiny:smallest">10</div></div>
-    <div><div kemet-background-color="primary" kemet-color="white" kemet-padding="tiny:smallest">11</div></div>
-    <div><div kemet-background-color="primary" kemet-color="white" kemet-padding="tiny:smallest">12</div></div>
-  </section>
-`;
-export const Example1 = {
-    render: TemplateExample1,
-};
-export const Example2 = {
-    render: TemplateExample2,
-};
-//# sourceMappingURL=stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../../src/stories/styles/flexgrid/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;;;;;;;;;;;;;;;CAelC,CAAC;AAEF,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;CAelC,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","sourcesContent":["import { html } from 'lit';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nconst meta: Meta = {\n  title: 'Styles / Flexgrid',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst TemplateExample1 = () => html`\n  <section kemet-layout=\"flexgrid\" kemet-gutters=\"plus-1\">\n    <div kemet-breakpoint=\"tiny:100 medium:33 large:25\">\n      <div kemet-background-color=\"primary\" kemet-color=\"white\" kemet-padding=\"tiny:smallest\">1</div>\n    </div>\n    <div kemet-breakpoint=\"tiny:50 medium:33 large:25\">\n      <div kemet-background-color=\"primary\" kemet-color=\"white\" kemet-padding=\"tiny:smallest\">2</div>\n    </div>\n    <div kemet-breakpoint=\"tiny:50 medium:33 large:25\">\n      <div kemet-background-color=\"primary\" kemet-color=\"white\" kemet-padding=\"tiny:smallest\">3</div>\n    </div>\n    <div kemet-breakpoint=\"tiny:100 medium:100 large:25\">\n      <div kemet-background-color=\"primary\" kemet-color=\"white\" kemet-padding=\"tiny:smallest\">4</div>\n    </div>\n  </section>\n`;\n\nconst TemplateExample2 = () => html`\n  <section kemet-layout=\"flexgrid\" kemet-gutters kemet-basis=\"tiny:4-columns medium:6-columns huge:12-columns\">\n    <div><div kemet-background-color=\"primary\" kemet-color=\"white\" kemet-padding=\"tiny:smallest\">1</div></div>\n    <div><div kemet-background-color=\"primary\" kemet-color=\"white\" kemet-padding=\"tiny:smallest\">2</div></div>\n    <div><div kemet-background-color=\"primary\" kemet-color=\"white\" kemet-padding=\"tiny:smallest\">3</div></div>\n    <div><div kemet-background-color=\"primary\" kemet-color=\"white\" kemet-padding=\"tiny:smallest\">4</div></div>\n    <div><div kemet-background-color=\"primary\" kemet-color=\"white\" kemet-padding=\"tiny:smallest\">5</div></div>\n    <div><div kemet-background-color=\"primary\" kemet-color=\"white\" kemet-padding=\"tiny:smallest\">6</div></div>\n    <div><div kemet-background-color=\"primary\" kemet-color=\"white\" kemet-padding=\"tiny:smallest\">7</div></div>\n    <div><div kemet-background-color=\"primary\" kemet-color=\"white\" kemet-padding=\"tiny:smallest\">8</div></div>\n    <div><div kemet-background-color=\"primary\" kemet-color=\"white\" kemet-padding=\"tiny:smallest\">9</div></div>\n    <div><div kemet-background-color=\"primary\" kemet-color=\"white\" kemet-padding=\"tiny:smallest\">10</div></div>\n    <div><div kemet-background-color=\"primary\" kemet-color=\"white\" kemet-padding=\"tiny:smallest\">11</div></div>\n    <div><div kemet-background-color=\"primary\" kemet-color=\"white\" kemet-padding=\"tiny:smallest\">12</div></div>\n  </section>\n`;\n\nexport const Example1: Story = {\n  render: TemplateExample1,\n}\n\nexport const Example2: Story = {\n  render: TemplateExample2,\n}\n\n"]}

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

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