kemet-ui 1.4.0 → 2.0.0

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -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 Example1: Story;
+export declare const Example2: Story;

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

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

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

@@ -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 Example1: Story;
+export declare const Example2: Story;

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

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

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

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

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

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

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

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

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

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

@@ -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 Standard: Story;
+export declare const Multiple: Story;

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

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

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

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

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

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

@@ -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 Standard: Story;
+export declare const Multiple: Story;