kemet-ui 2.0.2 → 3.0.0

package/dist/components/kemet-drawer/docs/stories.js

@@ -1,4 +1,5 @@
 import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import '../kemet-drawer';
 import '../../kemet-button/kemet-button';
 import '../../kemet-tabs/kemet-tabs';
@@ -7,32 +8,31 @@ import '../../kemet-tabs/kemet-tab-panel';
 const meta = {
     title: 'Components / Drawer',
     component: 'kemet-drawer',
+    argTypes: {
+        effect: {
+            control: { type: 'select' },
+            options: ['slide', 'reveal', 'push', 'scale'],
+        },
+        side: {
+            control: { type: 'select' },
+            options: ['top', 'right', 'bottom', 'left'],
+        },
+    },
 };
 export default meta;
-const Template = ({ width = '300px', height = '100%', color = '#fafafa', backgroundColor = '#202020', opened = false, effect = 'slide', side = 'left', overlay = false, overlayColor = 'rgba(0,0,0,0.2)', }) => {
-    setTimeout(() => {
-        const docsStoryWrapper = document.querySelector('.docs-story > div');
-        if (docsStoryWrapper)
-            docsStoryWrapper.style.padding = '0';
-    }, 100);
+const Template = (args) => {
     return html `
-    <style>
-      kemet-drawer {
-        --kemet-drawer-width: ${width};
-        --kemet-drawer-height: ${height};
-        --kemet-drawer-color: ${color};
-        --kemet-drawer-background-color: ${backgroundColor};
-        --kemet-drawer-overlay-color: ${overlayColor};
-      }
-    </style>
-    <kemet-drawer ?opened=${opened} effect="${effect}" side="${side}" ?overlay=${overlay}>
-      <nav slot="navigation" kemet-padding="tiny:large">
+    <kemet-drawer ?opened=${args.opened} effect="${ifDefined(args.effect)}" side="${ifDefined(args.side)}" ?overlay=${args.overlay}>
+      <nav slot="navigation" kemet-padding="2xl">
         <p>Your navigation goes here.</p>
         <kemet-button @click=${(event) => toggleDrawer(event)}>Toggle the Drawer</kemet-button>
       </nav>
       <section slot="content">
-        <div kemet-padding="tiny:large">
-          <p>Your content goes here.</p>
+        <div kemet-padding="2xl">
+          <h2>Your content goes here.</h2>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+          <p>Pharetra magna ac placerat vestibulum lectus. Placerat duis ultricies lacus sed turpis tincidunt id aliquet. Turpis egestas maecenas pharetra convallis posuere. Gravida in fermentum et sollicitudin ac orci phasellus egestas. Faucibus a pellentesque sit amet porttitor eget. Vitae aliquet nec ullamcorper sit. Nisi lacus sed viverra tellus in hac habitasse platea. Aenean sed adipiscing diam donec adipiscing. Nunc eget lorem dolor sed. Fermentum dui faucibus in ornare quam viverra. Eget arcu dictum varius duis at consectetur lorem donec.</p>
+          <br />
           <kemet-button @click=${(event) => toggleDrawer(event)}>Toggle the Drawer</kemet-button>
         </div>
       </section>
@@ -45,47 +45,46 @@ const toggleDrawer = (event) => {
 };
 export const Standard = {
     render: args => Template(args),
-    argTypes: {
-        width: {
-            control: { type: 'text' },
-        },
-        height: {
-            control: { type: 'text' },
-        },
-        color: {
-            control: { type: 'color' },
-        },
-        backgroundColor: {
-            control: { type: 'color' },
-        },
-        opened: {
-            control: { type: 'boolean' },
-        },
-        effect: {
-            control: { type: 'select' },
-            options: ['slide', 'reveal', 'push', 'scale'],
-        },
-        side: {
-            control: { type: 'select' },
-            options: ['top', 'right', 'bottom', 'left'],
-        },
-        overlay: {
-            control: { type: 'boolean' },
-        },
-        overlayColor: {
-            control: { type: 'color' },
-        },
-    },
+};
+export const Overlay = {
+    render: args => Template(args),
     args: {
-        width: '300px',
-        height: '100%',
-        color: '#fafafa',
-        backgroundColor: '#202020',
-        opened: false,
-        effect: 'slide',
-        side: 'left',
-        overlay: false,
-        overlayColor: 'rgba(0,0,0,0.2)',
-    },
+        overlay: true,
+    }
+};
+export const Top = {
+    render: args => Template(args),
+    args: {
+        overlay: true,
+        side: 'top'
+    }
+};
+export const Right = {
+    render: args => Template(args),
+    args: {
+        overlay: true,
+        side: 'right'
+    }
+};
+export const Bottom = {
+    render: args => Template(args),
+    args: {
+        overlay: true,
+        side: 'bottom'
+    }
+};
+export const Push = {
+    render: args => Template(args),
+    args: {
+        overlay: true,
+        effect: 'push'
+    }
+};
+export const Scale = {
+    render: args => Template(args),
+    args: {
+        overlay: true,
+        effect: 'scale'
+    }
 };
 //# sourceMappingURL=stories.js.map

package/dist/components/kemet-drawer/docs/stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-drawer/docs/stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-drawer';\n\nimport '../../kemet-button/kemet-button';\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n  title: 'Components / Drawer',\n  component: 'kemet-drawer',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = ({\n  width = '300px',\n  height = '100%',\n  color = '#fafafa',\n  backgroundColor = '#202020',\n  opened = false,\n  effect = 'slide',\n  side = 'left',\n  overlay = false,\n  overlayColor = 'rgba(0,0,0,0.2)',\n}) => {\n  setTimeout(() => {\n    const docsStoryWrapper = document.querySelector('.docs-story > div') as HTMLElement;\n    if (docsStoryWrapper) docsStoryWrapper.style.padding = '0';\n  }, 100);\n\n  return html`\n    <style>\n      kemet-drawer {\n        --kemet-drawer-width: ${width};\n        --kemet-drawer-height: ${height};\n        --kemet-drawer-color: ${color};\n        --kemet-drawer-background-color: ${backgroundColor};\n        --kemet-drawer-overlay-color: ${overlayColor};\n      }\n    </style>\n    <kemet-drawer ?opened=${opened} effect=\"${effect}\" side=\"${side}\" ?overlay=${overlay}>\n      <nav slot=\"navigation\" kemet-padding=\"tiny:large\">\n        <p>Your navigation goes here.</p>\n        <kemet-button @click=${(event) => toggleDrawer(event)}>Toggle the Drawer</kemet-button>\n      </nav>\n      <section slot=\"content\">\n        <div kemet-padding=\"tiny:large\">\n          <p>Your content goes here.</p>\n          <kemet-button @click=${(event) => toggleDrawer(event)}>Toggle the Drawer</kemet-button>\n        </div>\n      </section>\n    </kemet-drawer>\n  `;\n};\n\nconst toggleDrawer = (event) => {\n  const drawer = event.target.closest('kemet-drawer');\n  drawer.opened = !drawer.opened;\n};\n\nexport const Standard: Story = {\n  render: args => Template(args),\n  argTypes: {\n    width: {\n      control: { type: 'text' },\n    },\n    height: {\n      control: { type: 'text' },\n    },\n    color: {\n      control: { type: 'color' },\n    },\n    backgroundColor: {\n      control: { type: 'color' },\n    },\n    opened: {\n      control: { type: 'boolean' },\n    },\n    effect: {\n      control: { type: 'select' },\n      options: ['slide', 'reveal', 'push', 'scale'],\n    },\n    side: {\n      control: { type: 'select' },\n      options: ['top', 'right', 'bottom', 'left'],\n    },\n    overlay: {\n      control: { type: 'boolean' },\n    },\n    overlayColor: {\n      control: { type: 'color' },\n    },\n  },\n  args: {\n    width: '300px',\n    height: '100%',\n    color: '#fafafa',\n    backgroundColor: '#202020',\n    opened: false,\n    effect: 'slide',\n    side: 'left',\n    overlay: false,\n    overlayColor: 'rgba(0,0,0,0.2)',\n  },\n};\n"]}
+{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-drawer/docs/stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-drawer';\n\nimport '../../kemet-button/kemet-button';\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n  title: 'Components / Drawer',\n  component: 'kemet-drawer',\n  argTypes: {\n    effect: {\n      control: { type: 'select' },\n      options: ['slide', 'reveal', 'push', 'scale'],\n    },\n    side: {\n      control: { type: 'select' },\n      options: ['top', 'right', 'bottom', 'left'],\n    },\n  },\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = (args) => {\n  return html`\n    <kemet-drawer ?opened=${args.opened} effect=\"${ifDefined(args.effect)}\" side=\"${ifDefined(args.side)}\" ?overlay=${args.overlay}>\n      <nav slot=\"navigation\" kemet-padding=\"2xl\">\n        <p>Your navigation goes here.</p>\n        <kemet-button @click=${(event) => toggleDrawer(event)}>Toggle the Drawer</kemet-button>\n      </nav>\n      <section slot=\"content\">\n        <div kemet-padding=\"2xl\">\n          <h2>Your content goes here.</h2>\n          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n          <p>Pharetra magna ac placerat vestibulum lectus. Placerat duis ultricies lacus sed turpis tincidunt id aliquet. Turpis egestas maecenas pharetra convallis posuere. Gravida in fermentum et sollicitudin ac orci phasellus egestas. Faucibus a pellentesque sit amet porttitor eget. Vitae aliquet nec ullamcorper sit. Nisi lacus sed viverra tellus in hac habitasse platea. Aenean sed adipiscing diam donec adipiscing. Nunc eget lorem dolor sed. Fermentum dui faucibus in ornare quam viverra. Eget arcu dictum varius duis at consectetur lorem donec.</p>\n          <br />\n          <kemet-button @click=${(event) => toggleDrawer(event)}>Toggle the Drawer</kemet-button>\n        </div>\n      </section>\n    </kemet-drawer>\n  `;\n};\n\nconst toggleDrawer = (event) => {\n  const drawer = event.target.closest('kemet-drawer');\n  drawer.opened = !drawer.opened;\n};\n\nexport const Standard: Story = {\n  render: args => Template(args),\n};\n\nexport const Overlay: Story = {\n  render: args => Template(args),\n  args: {\n    overlay: true,\n  }\n};\n\nexport const Top: Story = {\n  render: args => Template(args),\n  args: {\n    overlay: true,\n    side: 'top'\n  }\n};\n\nexport const Right: Story = {\n  render: args => Template(args),\n  args: {\n    overlay: true,\n    side: 'right'\n  }\n};\n\nexport const Bottom: Story = {\n  render: args => Template(args),\n  args: {\n    overlay: true,\n    side: 'bottom'\n  }\n};\n\nexport const Push: Story = {\n  render: args => Template(args),\n  args: {\n    overlay: true,\n    effect: 'push'\n  }\n};\n\nexport const Scale: Story = {\n  render: args => Template(args),\n  args: {\n    overlay: true,\n    effect: 'scale'\n  }\n};\n"]}

package/dist/components/kemet-drawer/kemet-drawer.d.ts

@@ -21,11 +21,11 @@ import { TypeEffect, TypeSide } from './types';
  * @csspart content
  * @csspart wrapper
  *
- * @cssproperty --kemet-drawer-width - The width of the drawer. Default: 300px.
- * @cssproperty --kemet-drawer-height - The height of the drawer. Default:  100%.
- * @cssproperty --kemet-drawer-color - The text color of the drawer. Default:  #fafafa.
- * @cssproperty --kemet-drawer-background-color - The background color of the drawer. Default: #202020.
- * @cssproperty --kemet-drawer-overlay-color - The color of the overlay. Default: rgba(0, 0, 0, 0.2).
+ * @cssproperty --kemet-drawer-width - The width of the drawer.
+ * @cssproperty --kemet-drawer-height - The height of the drawer.
+ * @cssproperty --kemet-drawer-color - The text color of the drawer.
+ * @cssproperty --kemet-drawer-background-color - The background color of the drawer.
+ * @cssproperty --kemet-drawer-overlay-color - The color of the overlay.
  *
  * @event kemet-drawer-opened - Fires when the drawer opens.
  * @event kemet-drawer-closed - Fires when the drawer closes.

package/dist/components/kemet-drawer/kemet-drawer.js

@@ -24,11 +24,11 @@ import { emitEvent } from '../../utilities/misc/events';
  * @csspart content
  * @csspart wrapper
  *
- * @cssproperty --kemet-drawer-width - The width of the drawer. Default: 300px.
- * @cssproperty --kemet-drawer-height - The height of the drawer. Default:  100%.
- * @cssproperty --kemet-drawer-color - The text color of the drawer. Default:  #fafafa.
- * @cssproperty --kemet-drawer-background-color - The background color of the drawer. Default: #202020.
- * @cssproperty --kemet-drawer-overlay-color - The color of the overlay. Default: rgba(0, 0, 0, 0.2).
+ * @cssproperty --kemet-drawer-width - The width of the drawer.
+ * @cssproperty --kemet-drawer-height - The height of the drawer.
+ * @cssproperty --kemet-drawer-color - The text color of the drawer.
+ * @cssproperty --kemet-drawer-background-color - The background color of the drawer.
+ * @cssproperty --kemet-drawer-overlay-color - The color of the overlay.
  *
  * @event kemet-drawer-opened - Fires when the drawer opens.
  * @event kemet-drawer-closed - Fires when the drawer closes.

package/dist/components/kemet-drawer/kemet-drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"kemet-drawer.js","sourceRoot":"","sources":["../../../src/components/kemet-drawer/kemet-drawer.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAGxD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAGH,IAAqB,WAAW,GAAhC,MAAqB,WAAY,SAAQ,UAAU;IAAnD;;QAIE,WAAM,GAAY,SAAS,CAAC;QAG5B,WAAM,GAAe,OAAO,CAAC;QAG7B,SAAI,GAAa,MAAM,CAAC;QAGxB,YAAO,GAAY,KAAK,CAAC;IAqC3B,CAAC;IAnCC,YAAY;QACV,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;YACvC,MAAM,aAAa,GAAG,KAAK,CAAC,MAAqB,CAAC;YAClD,IAAI,IAAI,CAAC,MAAM,IAAI,aAAa,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,cAAc,EAAE;gBACzE,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;aACrB;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED,OAAO,CAAC,SAAS;QACf,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC,MAAM,KAAK,IAAI,EAAE;YACpD,SAAS,CAAC,IAAI,EAAE,qBAAqB,EAAE,IAAI,CAAC,CAAC;SAC9C;QAED,IAAI,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC,MAAM,KAAK,KAAK,EAAE;YACpD,SAAS,CAAC,IAAI,EAAE,qBAAqB,EAAE,IAAI,CAAC,CAAC;SAC9C;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;;;KAaV,CAAC;IACJ,CAAC;CACF,CAAA;AAjDQ,kBAAM,GAAG,CAAC,UAAU,EAAE,aAAa,CAAC,CAAC;AAG5C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CACf;AAG5B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CACb;AAG7B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAClB;AAGxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAClB;AAbN,WAAW;IAD/B,aAAa,CAAC,cAAc,CAAC;GACT,WAAW,CAkD/B;eAlDoB,WAAW","sourcesContent":["import { LitElement, html } from 'lit';\nimport { stylesBase, stylesEffects } from './styles';\nimport { customElement, property } from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { TypeEffect, TypeSide } from './types';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-drawer\n * @summary A component that adds an off-canvas menu with different effects.\n *\n * @prop {boolean} opened - Determines if the drawer is opened or not.\n * @prop {string} effect - The animation effect for opening and closing the drawer. Values include: (slide | reveal | push | scale)\n * @prop {string} side - Allows you to control which side the drawer opens from. Values include: (left | right | top | bottom)\n * @prop {boolean} overlay - Adds a overlay over the content section of the Drawer when opened\n *\n * @slot navigation - The off-screen nav area of your app or site\n * @slot content - The main content area of your app or site.\n *\n * @csspart container\n * @csspart drawer\n * @csspart pusher\n * @csspart content\n * @csspart wrapper\n *\n * @cssproperty --kemet-drawer-width - The width of the drawer. Default: 300px.\n * @cssproperty --kemet-drawer-height - The height of the drawer. Default:  100%.\n * @cssproperty --kemet-drawer-color - The text color of the drawer. Default:  #fafafa.\n * @cssproperty --kemet-drawer-background-color - The background color of the drawer. Default: #202020.\n * @cssproperty --kemet-drawer-overlay-color - The color of the overlay. Default: rgba(0, 0, 0, 0.2).\n *\n * @event kemet-drawer-opened - Fires when the drawer opens.\n * @event kemet-drawer-closed - Fires when the drawer closes.\n *\n */\n\n@customElement('kemet-drawer')\nexport default class KemetDrawer extends LitElement {\n  static styles = [stylesBase, stylesEffects];\n\n  @property({ type: Boolean, reflect: true })\n  opened: boolean = undefined;\n\n  @property({ type: String, reflect: true })\n  effect: TypeEffect = 'slide';\n\n  @property({ type: String, reflect: true })\n  side: TypeSide = 'left';\n\n  @property({ type: Boolean, reflect: true })\n  overlay: boolean = false;\n\n  firstUpdated() {\n    this.addEventListener('click', (event) => {\n      const targetElement = event.target as HTMLElement;\n      if (this.opened && targetElement.tagName.toLowerCase() === 'kemet-drawer') {\n        this.opened = false;\n      }\n    });\n  }\n\n  updated(prevProps) {\n    if (!prevProps.get('opened') && this.opened === true) {\n      emitEvent(this, 'kemet-drawer-opened', this);\n    }\n\n    if (prevProps.get('opened') && this.opened === false) {\n      emitEvent(this, 'kemet-drawer-closed', this);\n    }\n  }\n\n  render() {\n    return html`\n      <section class=\"off-canvas\" part=\"container\">\n        <nav class=\"off-canvas__nav\" part=\"drawer\" title=\"Drawer\">\n          <slot name=\"navigation\"></slot>\n        </nav>\n        <div class=\"off-canvas__pusher\" part=\"pusher\">\n          <div class=\"off-canvas__content\" part=\"content\">\n            <div class=\"off-canvas__wrapper\" part=\"wrapper\">\n              <slot name=\"content\"></slot>\n            </div>\n          </div>\n        </div>\n      </section>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-drawer': KemetDrawer\n  }\n}\n"]}
+{"version":3,"file":"kemet-drawer.js","sourceRoot":"","sources":["../../../src/components/kemet-drawer/kemet-drawer.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAGxD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAGH,IAAqB,WAAW,GAAhC,MAAqB,WAAY,SAAQ,UAAU;IAAnD;;QAIE,WAAM,GAAY,SAAS,CAAC;QAG5B,WAAM,GAAe,OAAO,CAAC;QAG7B,SAAI,GAAa,MAAM,CAAC;QAGxB,YAAO,GAAY,KAAK,CAAC;IAqC3B,CAAC;IAnCC,YAAY;QACV,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;YACvC,MAAM,aAAa,GAAG,KAAK,CAAC,MAAqB,CAAC;YAClD,IAAI,IAAI,CAAC,MAAM,IAAI,aAAa,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,cAAc,EAAE;gBACzE,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;aACrB;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED,OAAO,CAAC,SAAS;QACf,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC,MAAM,KAAK,IAAI,EAAE;YACpD,SAAS,CAAC,IAAI,EAAE,qBAAqB,EAAE,IAAI,CAAC,CAAC;SAC9C;QAED,IAAI,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC,MAAM,KAAK,KAAK,EAAE;YACpD,SAAS,CAAC,IAAI,EAAE,qBAAqB,EAAE,IAAI,CAAC,CAAC;SAC9C;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;;;KAaV,CAAC;IACJ,CAAC;CACF,CAAA;AAjDQ,kBAAM,GAAG,CAAC,UAAU,EAAE,aAAa,CAAC,CAAC;AAG5C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CACf;AAG5B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CACb;AAG7B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAClB;AAGxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAClB;AAbN,WAAW;IAD/B,aAAa,CAAC,cAAc,CAAC;GACT,WAAW,CAkD/B;eAlDoB,WAAW","sourcesContent":["import { LitElement, html } from 'lit';\nimport { stylesBase, stylesEffects } from './styles';\nimport { customElement, property } from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { TypeEffect, TypeSide } from './types';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-drawer\n * @summary A component that adds an off-canvas menu with different effects.\n *\n * @prop {boolean} opened - Determines if the drawer is opened or not.\n * @prop {string} effect - The animation effect for opening and closing the drawer. Values include: (slide | reveal | push | scale)\n * @prop {string} side - Allows you to control which side the drawer opens from. Values include: (left | right | top | bottom)\n * @prop {boolean} overlay - Adds a overlay over the content section of the Drawer when opened\n *\n * @slot navigation - The off-screen nav area of your app or site\n * @slot content - The main content area of your app or site.\n *\n * @csspart container\n * @csspart drawer\n * @csspart pusher\n * @csspart content\n * @csspart wrapper\n *\n * @cssproperty --kemet-drawer-width - The width of the drawer.\n * @cssproperty --kemet-drawer-height - The height of the drawer.\n * @cssproperty --kemet-drawer-color - The text color of the drawer.\n * @cssproperty --kemet-drawer-background-color - The background color of the drawer.\n * @cssproperty --kemet-drawer-overlay-color - The color of the overlay.\n *\n * @event kemet-drawer-opened - Fires when the drawer opens.\n * @event kemet-drawer-closed - Fires when the drawer closes.\n *\n */\n\n@customElement('kemet-drawer')\nexport default class KemetDrawer extends LitElement {\n  static styles = [stylesBase, stylesEffects];\n\n  @property({ type: Boolean, reflect: true })\n  opened: boolean = undefined;\n\n  @property({ type: String, reflect: true })\n  effect: TypeEffect = 'slide';\n\n  @property({ type: String, reflect: true })\n  side: TypeSide = 'left';\n\n  @property({ type: Boolean, reflect: true })\n  overlay: boolean = false;\n\n  firstUpdated() {\n    this.addEventListener('click', (event) => {\n      const targetElement = event.target as HTMLElement;\n      if (this.opened && targetElement.tagName.toLowerCase() === 'kemet-drawer') {\n        this.opened = false;\n      }\n    });\n  }\n\n  updated(prevProps) {\n    if (!prevProps.get('opened') && this.opened === true) {\n      emitEvent(this, 'kemet-drawer-opened', this);\n    }\n\n    if (prevProps.get('opened') && this.opened === false) {\n      emitEvent(this, 'kemet-drawer-closed', this);\n    }\n  }\n\n  render() {\n    return html`\n      <section class=\"off-canvas\" part=\"container\">\n        <nav class=\"off-canvas__nav\" part=\"drawer\" title=\"Drawer\">\n          <slot name=\"navigation\"></slot>\n        </nav>\n        <div class=\"off-canvas__pusher\" part=\"pusher\">\n          <div class=\"off-canvas__content\" part=\"content\">\n            <div class=\"off-canvas__wrapper\" part=\"wrapper\">\n              <slot name=\"content\"></slot>\n            </div>\n          </div>\n        </div>\n      </section>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-drawer': KemetDrawer\n  }\n}\n"]}

package/dist/components/kemet-drawer/styles.js

@@ -8,6 +8,12 @@ export const stylesBase = css `
   }
 
   :host {
+    --kemet-drawer-overlay-color: rgb(var(--kemet-color-black) / 20%);
+    --kemet-drawer-width: 300px;
+    --kemet-drawer-height: 100%;
+    --kemet-drawer-color: rgb(var(--kemet-color-gray-50));
+    --kemet-drawer-background-color: rgb(var(--kemet-color-gray-950));
+
     width: 100%;
   }
 
@@ -59,7 +65,7 @@ export const stylesBase = css `
     right: 0;
     width: 0;
     height: 0;
-    background: var(--kemet-drawer-overlay-color, rgba(0, 0, 0, 0.2));
+    background: var(--kemet-drawer-overlay-color);
     content: '';
     opacity: 0;
     transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
@@ -92,10 +98,10 @@ export const stylesBase = css `
   /* -------------------------------------- */
 
   .off-canvas__nav {
-    width: var(--kemet-drawer-width, 300px);
-    height: var(--kemet-drawer-height, 100%);
-    color: var(--kemet-drawer-color, #fafafa);
-    background: var(--kemet-drawer-background-color, #202020);
+    width: var(--kemet-drawer-width);
+    height: var(--kemet-drawer-height);
+    color: var(--kemet-drawer-color);
+    background: var(--kemet-drawer-background-color);
   }
 `;
 export const stylesEffects = css `
@@ -119,13 +125,13 @@ export const stylesEffects = css `
   }
 
   :host([effect='slide'][side='right'][opened]) .off-canvas__nav {
-    transform: translate3d(calc(100vw - var(--kemet-drawer-width, 300px)), 0, 0);
+    transform: translate3d(calc(100vw - var(--kemet-drawer-width)), 0, 0);
   }
 
   :host([effect='slide'][side='top']) .off-canvas__nav {
     width: 100vw;
     height: var(--kemet-drawer-height, 100vh);
-    transform: translate3d(0, calc(var(--kemet-drawer-height, 100vh) * -1), 0);
+    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);
   }
 
   :host([effect='slide'][side='top'][opened]) .off-canvas__nav {
@@ -139,12 +145,12 @@ export const stylesEffects = css `
   }
 
   :host([effect='slide'][side='bottom'][opened]) .off-canvas__nav {
-    transform: translate3d(0, calc(100vh - var(--kemet-drawer-height, 100vh)), 0);
+    transform: translate3d(0, calc(100vh - var(--kemet-drawer-height)), 0);
   }
 
   /* reveal */
   :host([effect='reveal'][opened]) .off-canvas__pusher {
-    transform: translate3d(var(--kemet-drawer-width, 300px), 0, 0);
+    transform: translate3d(var(--kemet-drawer-width), 0, 0);
   }
 
   :host([effect='reveal']) .off-canvas__nav {
@@ -169,13 +175,13 @@ export const stylesEffects = css `
   }
 
   :host([effect='reveal'][side='right'][opened]) .off-canvas__nav {
-    transform: translate3d(calc(100vw - var(--kemet-drawer-width, 300px)), 0, 0);
+    transform: translate3d(calc(100vw - var(--kemet-drawer-width)), 0, 0);
   }
 
   :host([effect='reveal'][side='top']) .off-canvas__nav {
     width: 100vw;
     height: var(--kemet-drawer-height, 100vh);
-    transform: translate3d(0, calc(var(--kemet-drawer-height, 100vh) * -1), 0);
+    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);
   }
 
   :host([effect='reveal'][side='top'][opened]) .off-canvas__nav {
@@ -183,7 +189,7 @@ export const stylesEffects = css `
   }
 
   :host([effect='reveal'][side='top'][opened]) .off-canvas__pusher {
-    transform: translate3d(0, var(--kemet-drawer-height, 100vh), 0);
+    transform: translate3d(0, var(--kemet-drawer-height), 0);
   }
 
   :host([effect='reveal'][side='bottom']) .off-canvas__nav {
@@ -193,16 +199,16 @@ export const stylesEffects = css `
   }
 
   :host([effect='reveal'][side='bottom'][opened]) .off-canvas__nav {
-    transform: translate3d(0, calc(100vh - var(--kemet-drawer-height, 100vh)), 0);
+    transform: translate3d(0, calc(100vh - var(--kemet-drawer-height)), 0);
   }
 
   :host([effect='reveal'][side='bottom'][opened]) .off-canvas__pusher {
-    transform: translate3d(0, calc(var(--kemet-drawer-height, 100vh) * -1), 0);
+    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);
   }
 
   /* push */
   :host([effect='push'][opened]) .off-canvas__pusher {
-    transform: translate3d(var(--kemet-drawer-width, 300px), 0, 0);
+    transform: translate3d(var(--kemet-drawer-width), 0, 0);
   }
 
   :host([effect='push']) .off-canvas__nav {
@@ -220,7 +226,7 @@ export const stylesEffects = css `
   }
 
   :host([effect='push'][side='right'][opened]) .off-canvas__pusher {
-    transform: translate3d(calc(var(--kemet-drawer-width, 300px) * -1), 0, 0);
+    transform: translate3d(calc(var(--kemet-drawer-width) * -1), 0, 0);
   }
 
   :host([effect='push'][side='right']) .off-canvas__nav {
@@ -228,13 +234,13 @@ export const stylesEffects = css `
   }
 
   :host([effect='push'][side='right'][opened]) .off-canvas__nav {
-    transform: translate3d(calc(100vw - var(--kemet-drawer-width, 300px)), 0, 0);
+    transform: translate3d(calc(100vw - var(--kemet-drawer-width)), 0, 0);
   }
 
   :host([effect='push'][side='top']) .off-canvas__nav {
     width: 100vw;
     height: var(--kemet-drawer-height, 100vh);
-    transform: translate3d(0, calc(var(--kemet-drawer-height, 100vh) * -1), 0);
+    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);
   }
 
   :host([effect='push'][side='top'][opened]) .off-canvas__nav {
@@ -242,21 +248,21 @@ export const stylesEffects = css `
   }
 
   :host([effect='push'][side='top'][opened]) .off-canvas__pusher {
-    transform: translate3d(0, var(--kemet-drawer-height, 100vh), 0);
+    transform: translate3d(0, var(--kemet-drawer-height), 0);
   }
 
   :host([effect='push'][side='bottom']) .off-canvas__nav {
     width: 100vw;
-    height: var(--kemet-drawer-height, 100vh);
+    height: var(--kemet-drawer-height);
     transform: translate3d(0, ${unsafeCSS(documentHeight)}, 0);
   }
 
   :host([effect='push'][side='bottom'][opened]) .off-canvas__nav {
-    transform: translate3d(0, calc(100vh - var(--kemet-drawer-height, 100vh)), 0);
+    transform: translate3d(0, calc(100vh - var(--kemet-drawer-height)), 0);
   }
 
   :host([effect='push'][side='bottom'][opened]) .off-canvas__pusher {
-    transform: translate3d(0, calc(var(--kemet-drawer-height, 100vh) * -1), 0);
+    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);
   }
 
   /* scale */
@@ -288,13 +294,13 @@ export const stylesEffects = css `
   }
 
   :host([effect='scale'][side='right'][opened]) .off-canvas__nav {
-    transform: translate3d(calc(100vw - var(--kemet-drawer-width, 300px)), 0, 0);
+    transform: translate3d(calc(100vw - var(--kemet-drawer-width)), 0, 0);
   }
 
   :host([effect='scale'][side='top']) .off-canvas__nav {
     width: 100vw;
     height: var(--kemet-drawer-height, 100vh);
-    transform: translate3d(0, calc(var(--kemet-drawer-height, 100vh) * -1), 0);
+    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);
   }
 
   :host([effect='scale'][side='top'][opened]) .off-canvas__nav {
@@ -308,7 +314,7 @@ export const stylesEffects = css `
   }
 
   :host([effect='scale'][side='bottom'][opened]) .off-canvas__nav {
-    transform: translate3d(0, calc(100vh - var(--kemet-drawer-height, 100vh)), 0);
+    transform: translate3d(0, calc(100vh - var(--kemet-drawer-height)), 0);
   }
 `;
 //# sourceMappingURL=styles.js.map

package/dist/components/kemet-drawer/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-drawer/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AAErC,MAAM,cAAc,GAAG,GAAG,QAAQ,CAAC,eAAe,CAAC,YAAY,IAAI,CAAC;AAEpE,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiG5B,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAqCA,SAAS,CAAC,cAAc,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAsDzB,SAAS,CAAC,cAAc,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCA2DzB,SAAS,CAAC,cAAc,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAwDzB,SAAS,CAAC,cAAc,CAAC;;;;;;CAMxD,CAAC","sourcesContent":["import { css, unsafeCSS } from 'lit';\n\nconst documentHeight = `${document.documentElement.scrollHeight}px`;\n\nexport const stylesBase = css`\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n\n  :host {\n    width: 100%;\n  }\n\n  .off-canvas {\n    position: relative;\n    overflow: hidden;\n  }\n\n  .off-canvas__nav {\n    position: fixed;\n    top: 0;\n    left: 0;\n    z-index: 100;\n    visibility: hidden;\n    height: 100%;\n    transition: all 0.5s;\n  }\n\n  .off-canvas__nav::after {\n    position: absolute;\n    top: 0;\n    right: 0;\n    width: 100%;\n    height: 100%;\n    background: rgba(0, 0, 0, 0.2);\n    content: '';\n    opacity: 1;\n    transition: opacity 0.5s;\n  }\n\n  :host([opened]) .off-canvas__nav::after {\n    width: 0;\n    height: 0;\n    opacity: 0;\n    transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;\n  }\n\n  .off-canvas__pusher {\n    position: relative;\n    left: 0;\n    z-index: 99;\n    height: 100%;\n    transition: transform 0.5s;\n  }\n\n  :host([overlay]) .off-canvas__pusher::after {\n    position: absolute;\n    top: 0;\n    right: 0;\n    width: 0;\n    height: 0;\n    background: var(--kemet-drawer-overlay-color, rgba(0, 0, 0, 0.2));\n    content: '';\n    opacity: 0;\n    transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;\n  }\n\n  :host([opened]) .off-canvas__pusher::after {\n    width: 100%;\n    height: 100%;\n    opacity: 1;\n    transition: opacity 0.5s;\n    transform: scale(2);\n  }\n\n  .off-canvas__content {\n    position: relative;\n    /* overflow-y: scroll; */\n    min-height: 100vh;\n  }\n\n  .off-canvas__wrapper {\n    position: relative;\n  }\n\n  ::slotted([slot=\"content\"]) {\n    min-height: 100vh;\n  }\n\n  /* -------------------------------------- */\n  /* custom properties */\n  /* -------------------------------------- */\n\n  .off-canvas__nav {\n    width: var(--kemet-drawer-width, 300px);\n    height: var(--kemet-drawer-height, 100%);\n    color: var(--kemet-drawer-color, #fafafa);\n    background: var(--kemet-drawer-background-color, #202020);\n  }\n`;\n\nexport const stylesEffects = css`\n  /* slide */\n  :host([effect='slide']) .off-canvas__nav {\n    visibility: visible;\n    transform: translate3d(-100%, 0, 0);\n  }\n\n  :host([effect='slide'][opened]) .off-canvas__nav {\n    visibility: visible;\n    transform: translate3d(0, 0, 0);\n  }\n\n  :host([effect='slide']) .off-canvas__nav:after {\n    display: none;\n  }\n\n  :host([effect='slide'][side='right']) .off-canvas__nav {\n    transform: translate3d(100vw, 0, 0);\n  }\n\n  :host([effect='slide'][side='right'][opened]) .off-canvas__nav {\n    transform: translate3d(calc(100vw - var(--kemet-drawer-width, 300px)), 0, 0);\n  }\n\n  :host([effect='slide'][side='top']) .off-canvas__nav {\n    width: 100vw;\n    height: var(--kemet-drawer-height, 100vh);\n    transform: translate3d(0, calc(var(--kemet-drawer-height, 100vh) * -1), 0);\n  }\n\n  :host([effect='slide'][side='top'][opened]) .off-canvas__nav {\n    transform: translate3d(0, 0, 0);\n  }\n\n  :host([effect='slide'][side='bottom']) .off-canvas__nav {\n    width: 100vw;\n    height: var(--kemet-drawer-height, 100vh);\n    transform: translate3d(0, ${unsafeCSS(documentHeight)}, 0);\n  }\n\n  :host([effect='slide'][side='bottom'][opened]) .off-canvas__nav {\n    transform: translate3d(0, calc(100vh - var(--kemet-drawer-height, 100vh)), 0);\n  }\n\n  /* reveal */\n  :host([effect='reveal'][opened]) .off-canvas__pusher {\n    transform: translate3d(var(--kemet-drawer-width, 300px), 0, 0);\n  }\n\n  :host([effect='reveal']) .off-canvas__nav {\n    z-index: 1;\n  }\n\n  :host([effect='reveal'][opened]) .off-canvas__nav {\n    visibility: visible;\n    transition: transform 0.5s;\n  }\n\n  :host([effect='reveal']) .off-canvas__nav::after {\n    display: none;\n  }\n\n  :host([effect='reveal'][side='right'][opened]) .off-canvas__pusher {\n    transform: translate3d(0, 0, 0);\n  }\n\n  :host([effect='reveal'][side='right']) .off-canvas__nav {\n    transform: translate3d(100vw, 0, 0);\n  }\n\n  :host([effect='reveal'][side='right'][opened]) .off-canvas__nav {\n    transform: translate3d(calc(100vw - var(--kemet-drawer-width, 300px)), 0, 0);\n  }\n\n  :host([effect='reveal'][side='top']) .off-canvas__nav {\n    width: 100vw;\n    height: var(--kemet-drawer-height, 100vh);\n    transform: translate3d(0, calc(var(--kemet-drawer-height, 100vh) * -1), 0);\n  }\n\n  :host([effect='reveal'][side='top'][opened]) .off-canvas__nav {\n    transform: translate3d(0, 0, 0);\n  }\n\n  :host([effect='reveal'][side='top'][opened]) .off-canvas__pusher {\n    transform: translate3d(0, var(--kemet-drawer-height, 100vh), 0);\n  }\n\n  :host([effect='reveal'][side='bottom']) .off-canvas__nav {\n    width: 100vw;\n    height: var(--kemet-drawer-height, 100vh);\n    transform: translate3d(0, ${unsafeCSS(documentHeight)}, 0);\n  }\n\n  :host([effect='reveal'][side='bottom'][opened]) .off-canvas__nav {\n    transform: translate3d(0, calc(100vh - var(--kemet-drawer-height, 100vh)), 0);\n  }\n\n  :host([effect='reveal'][side='bottom'][opened]) .off-canvas__pusher {\n    transform: translate3d(0, calc(var(--kemet-drawer-height, 100vh) * -1), 0);\n  }\n\n  /* push */\n  :host([effect='push'][opened]) .off-canvas__pusher {\n    transform: translate3d(var(--kemet-drawer-width, 300px), 0, 0);\n  }\n\n  :host([effect='push']) .off-canvas__nav {\n    transform: translate3d(-100%, 0, 0);\n  }\n\n  :host([effect='push'][opened]) .off-canvas__nav {\n    visibility: visible;\n    transition: transform 0.5s;\n    transform: translate3d(0, 0, 0);\n  }\n\n  :host([effect='push']) .off-canvas__nav::after {\n    display: none;\n  }\n\n  :host([effect='push'][side='right'][opened]) .off-canvas__pusher {\n    transform: translate3d(calc(var(--kemet-drawer-width, 300px) * -1), 0, 0);\n  }\n\n  :host([effect='push'][side='right']) .off-canvas__nav {\n    transform: translate3d(100vw, 0, 0);\n  }\n\n  :host([effect='push'][side='right'][opened]) .off-canvas__nav {\n    transform: translate3d(calc(100vw - var(--kemet-drawer-width, 300px)), 0, 0);\n  }\n\n  :host([effect='push'][side='top']) .off-canvas__nav {\n    width: 100vw;\n    height: var(--kemet-drawer-height, 100vh);\n    transform: translate3d(0, calc(var(--kemet-drawer-height, 100vh) * -1), 0);\n  }\n\n  :host([effect='push'][side='top'][opened]) .off-canvas__nav {\n    transform: translate3d(0, 0, 0);\n  }\n\n  :host([effect='push'][side='top'][opened]) .off-canvas__pusher {\n    transform: translate3d(0, var(--kemet-drawer-height, 100vh), 0);\n  }\n\n  :host([effect='push'][side='bottom']) .off-canvas__nav {\n    width: 100vw;\n    height: var(--kemet-drawer-height, 100vh);\n    transform: translate3d(0, ${unsafeCSS(documentHeight)}, 0);\n  }\n\n  :host([effect='push'][side='bottom'][opened]) .off-canvas__nav {\n    transform: translate3d(0, calc(100vh - var(--kemet-drawer-height, 100vh)), 0);\n  }\n\n  :host([effect='push'][side='bottom'][opened]) .off-canvas__pusher {\n    transform: translate3d(0, calc(var(--kemet-drawer-height, 100vh) * -1), 0);\n  }\n\n  /* scale */\n  :host([effect='scale']) .off-canvas__pusher {\n    transform-style: preserve-3d;\n  }\n\n  :host([effect='scale'][opened]) .off-canvas__pusher {\n    transform: translate3d(0, 0, 0) scale(0.95);\n  }\n\n  :host([effect='scale']) .off-canvas__nav {\n    opacity: 1;\n    transform: translate3d(-100%, 0, 0);\n  }\n\n  :host([effect='scale'][opened]) .off-canvas__nav {\n    visibility: visible;\n    transition: transform 0.5s;\n    transform: translate3d(0, 0, 0);\n  }\n\n  :host([effect='scale']) .off-canvas__nav::after {\n    display: none;\n  }\n\n  :host([effect='scale'][side='right']) .off-canvas__nav {\n    transform: translate3d(100vw, 0, 0);\n  }\n\n  :host([effect='scale'][side='right'][opened]) .off-canvas__nav {\n    transform: translate3d(calc(100vw - var(--kemet-drawer-width, 300px)), 0, 0);\n  }\n\n  :host([effect='scale'][side='top']) .off-canvas__nav {\n    width: 100vw;\n    height: var(--kemet-drawer-height, 100vh);\n    transform: translate3d(0, calc(var(--kemet-drawer-height, 100vh) * -1), 0);\n  }\n\n  :host([effect='scale'][side='top'][opened]) .off-canvas__nav {\n    transform: translate3d(0, 0, 0);\n  }\n\n  :host([effect='scale'][side='bottom']) .off-canvas__nav {\n    width: 100vw;\n    height: var(--kemet-drawer-height, 100vh);\n    transform: translate3d(0, ${unsafeCSS(documentHeight)}, 0);\n  }\n\n  :host([effect='scale'][side='bottom'][opened]) .off-canvas__nav {\n    transform: translate3d(0, calc(100vh - var(--kemet-drawer-height, 100vh)), 0);\n  }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-drawer/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AAErC,MAAM,cAAc,GAAG,GAAG,QAAQ,CAAC,eAAe,CAAC,YAAY,IAAI,CAAC;AAEpE,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuG5B,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAqCA,SAAS,CAAC,cAAc,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAsDzB,SAAS,CAAC,cAAc,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCA2DzB,SAAS,CAAC,cAAc,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAwDzB,SAAS,CAAC,cAAc,CAAC;;;;;;CAMxD,CAAC","sourcesContent":["import { css, unsafeCSS } from 'lit';\n\nconst documentHeight = `${document.documentElement.scrollHeight}px`;\n\nexport const stylesBase = css`\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n\n  :host {\n    --kemet-drawer-overlay-color: rgb(var(--kemet-color-black) / 20%);\n    --kemet-drawer-width: 300px;\n    --kemet-drawer-height: 100%;\n    --kemet-drawer-color: rgb(var(--kemet-color-gray-50));\n    --kemet-drawer-background-color: rgb(var(--kemet-color-gray-950));\n\n    width: 100%;\n  }\n\n  .off-canvas {\n    position: relative;\n    overflow: hidden;\n  }\n\n  .off-canvas__nav {\n    position: fixed;\n    top: 0;\n    left: 0;\n    z-index: 100;\n    visibility: hidden;\n    height: 100%;\n    transition: all 0.5s;\n  }\n\n  .off-canvas__nav::after {\n    position: absolute;\n    top: 0;\n    right: 0;\n    width: 100%;\n    height: 100%;\n    background: rgba(0, 0, 0, 0.2);\n    content: '';\n    opacity: 1;\n    transition: opacity 0.5s;\n  }\n\n  :host([opened]) .off-canvas__nav::after {\n    width: 0;\n    height: 0;\n    opacity: 0;\n    transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;\n  }\n\n  .off-canvas__pusher {\n    position: relative;\n    left: 0;\n    z-index: 99;\n    height: 100%;\n    transition: transform 0.5s;\n  }\n\n  :host([overlay]) .off-canvas__pusher::after {\n    position: absolute;\n    top: 0;\n    right: 0;\n    width: 0;\n    height: 0;\n    background: var(--kemet-drawer-overlay-color);\n    content: '';\n    opacity: 0;\n    transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;\n  }\n\n  :host([opened]) .off-canvas__pusher::after {\n    width: 100%;\n    height: 100%;\n    opacity: 1;\n    transition: opacity 0.5s;\n    transform: scale(2);\n  }\n\n  .off-canvas__content {\n    position: relative;\n    /* overflow-y: scroll; */\n    min-height: 100vh;\n  }\n\n  .off-canvas__wrapper {\n    position: relative;\n  }\n\n  ::slotted([slot=\"content\"]) {\n    min-height: 100vh;\n  }\n\n  /* -------------------------------------- */\n  /* custom properties */\n  /* -------------------------------------- */\n\n  .off-canvas__nav {\n    width: var(--kemet-drawer-width);\n    height: var(--kemet-drawer-height);\n    color: var(--kemet-drawer-color);\n    background: var(--kemet-drawer-background-color);\n  }\n`;\n\nexport const stylesEffects = css`\n  /* slide */\n  :host([effect='slide']) .off-canvas__nav {\n    visibility: visible;\n    transform: translate3d(-100%, 0, 0);\n  }\n\n  :host([effect='slide'][opened]) .off-canvas__nav {\n    visibility: visible;\n    transform: translate3d(0, 0, 0);\n  }\n\n  :host([effect='slide']) .off-canvas__nav:after {\n    display: none;\n  }\n\n  :host([effect='slide'][side='right']) .off-canvas__nav {\n    transform: translate3d(100vw, 0, 0);\n  }\n\n  :host([effect='slide'][side='right'][opened]) .off-canvas__nav {\n    transform: translate3d(calc(100vw - var(--kemet-drawer-width)), 0, 0);\n  }\n\n  :host([effect='slide'][side='top']) .off-canvas__nav {\n    width: 100vw;\n    height: var(--kemet-drawer-height, 100vh);\n    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);\n  }\n\n  :host([effect='slide'][side='top'][opened]) .off-canvas__nav {\n    transform: translate3d(0, 0, 0);\n  }\n\n  :host([effect='slide'][side='bottom']) .off-canvas__nav {\n    width: 100vw;\n    height: var(--kemet-drawer-height, 100vh);\n    transform: translate3d(0, ${unsafeCSS(documentHeight)}, 0);\n  }\n\n  :host([effect='slide'][side='bottom'][opened]) .off-canvas__nav {\n    transform: translate3d(0, calc(100vh - var(--kemet-drawer-height)), 0);\n  }\n\n  /* reveal */\n  :host([effect='reveal'][opened]) .off-canvas__pusher {\n    transform: translate3d(var(--kemet-drawer-width), 0, 0);\n  }\n\n  :host([effect='reveal']) .off-canvas__nav {\n    z-index: 1;\n  }\n\n  :host([effect='reveal'][opened]) .off-canvas__nav {\n    visibility: visible;\n    transition: transform 0.5s;\n  }\n\n  :host([effect='reveal']) .off-canvas__nav::after {\n    display: none;\n  }\n\n  :host([effect='reveal'][side='right'][opened]) .off-canvas__pusher {\n    transform: translate3d(0, 0, 0);\n  }\n\n  :host([effect='reveal'][side='right']) .off-canvas__nav {\n    transform: translate3d(100vw, 0, 0);\n  }\n\n  :host([effect='reveal'][side='right'][opened]) .off-canvas__nav {\n    transform: translate3d(calc(100vw - var(--kemet-drawer-width)), 0, 0);\n  }\n\n  :host([effect='reveal'][side='top']) .off-canvas__nav {\n    width: 100vw;\n    height: var(--kemet-drawer-height, 100vh);\n    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);\n  }\n\n  :host([effect='reveal'][side='top'][opened]) .off-canvas__nav {\n    transform: translate3d(0, 0, 0);\n  }\n\n  :host([effect='reveal'][side='top'][opened]) .off-canvas__pusher {\n    transform: translate3d(0, var(--kemet-drawer-height), 0);\n  }\n\n  :host([effect='reveal'][side='bottom']) .off-canvas__nav {\n    width: 100vw;\n    height: var(--kemet-drawer-height, 100vh);\n    transform: translate3d(0, ${unsafeCSS(documentHeight)}, 0);\n  }\n\n  :host([effect='reveal'][side='bottom'][opened]) .off-canvas__nav {\n    transform: translate3d(0, calc(100vh - var(--kemet-drawer-height)), 0);\n  }\n\n  :host([effect='reveal'][side='bottom'][opened]) .off-canvas__pusher {\n    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);\n  }\n\n  /* push */\n  :host([effect='push'][opened]) .off-canvas__pusher {\n    transform: translate3d(var(--kemet-drawer-width), 0, 0);\n  }\n\n  :host([effect='push']) .off-canvas__nav {\n    transform: translate3d(-100%, 0, 0);\n  }\n\n  :host([effect='push'][opened]) .off-canvas__nav {\n    visibility: visible;\n    transition: transform 0.5s;\n    transform: translate3d(0, 0, 0);\n  }\n\n  :host([effect='push']) .off-canvas__nav::after {\n    display: none;\n  }\n\n  :host([effect='push'][side='right'][opened]) .off-canvas__pusher {\n    transform: translate3d(calc(var(--kemet-drawer-width) * -1), 0, 0);\n  }\n\n  :host([effect='push'][side='right']) .off-canvas__nav {\n    transform: translate3d(100vw, 0, 0);\n  }\n\n  :host([effect='push'][side='right'][opened]) .off-canvas__nav {\n    transform: translate3d(calc(100vw - var(--kemet-drawer-width)), 0, 0);\n  }\n\n  :host([effect='push'][side='top']) .off-canvas__nav {\n    width: 100vw;\n    height: var(--kemet-drawer-height, 100vh);\n    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);\n  }\n\n  :host([effect='push'][side='top'][opened]) .off-canvas__nav {\n    transform: translate3d(0, 0, 0);\n  }\n\n  :host([effect='push'][side='top'][opened]) .off-canvas__pusher {\n    transform: translate3d(0, var(--kemet-drawer-height), 0);\n  }\n\n  :host([effect='push'][side='bottom']) .off-canvas__nav {\n    width: 100vw;\n    height: var(--kemet-drawer-height);\n    transform: translate3d(0, ${unsafeCSS(documentHeight)}, 0);\n  }\n\n  :host([effect='push'][side='bottom'][opened]) .off-canvas__nav {\n    transform: translate3d(0, calc(100vh - var(--kemet-drawer-height)), 0);\n  }\n\n  :host([effect='push'][side='bottom'][opened]) .off-canvas__pusher {\n    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);\n  }\n\n  /* scale */\n  :host([effect='scale']) .off-canvas__pusher {\n    transform-style: preserve-3d;\n  }\n\n  :host([effect='scale'][opened]) .off-canvas__pusher {\n    transform: translate3d(0, 0, 0) scale(0.95);\n  }\n\n  :host([effect='scale']) .off-canvas__nav {\n    opacity: 1;\n    transform: translate3d(-100%, 0, 0);\n  }\n\n  :host([effect='scale'][opened]) .off-canvas__nav {\n    visibility: visible;\n    transition: transform 0.5s;\n    transform: translate3d(0, 0, 0);\n  }\n\n  :host([effect='scale']) .off-canvas__nav::after {\n    display: none;\n  }\n\n  :host([effect='scale'][side='right']) .off-canvas__nav {\n    transform: translate3d(100vw, 0, 0);\n  }\n\n  :host([effect='scale'][side='right'][opened]) .off-canvas__nav {\n    transform: translate3d(calc(100vw - var(--kemet-drawer-width)), 0, 0);\n  }\n\n  :host([effect='scale'][side='top']) .off-canvas__nav {\n    width: 100vw;\n    height: var(--kemet-drawer-height, 100vh);\n    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);\n  }\n\n  :host([effect='scale'][side='top'][opened]) .off-canvas__nav {\n    transform: translate3d(0, 0, 0);\n  }\n\n  :host([effect='scale'][side='bottom']) .off-canvas__nav {\n    width: 100vw;\n    height: var(--kemet-drawer-height, 100vh);\n    transform: translate3d(0, ${unsafeCSS(documentHeight)}, 0);\n  }\n\n  :host([effect='scale'][side='bottom'][opened]) .off-canvas__nav {\n    transform: translate3d(0, calc(100vh - var(--kemet-drawer-height)), 0);\n  }\n`;\n"]}

package/dist/components/kemet-drawer/types.d.ts

@@ -1,8 +1,2 @@
 export declare type TypeEffect = 'slide' | 'reveal' | 'push' | 'scale';
 export declare type TypeSide = 'left' | 'right' | 'top' | 'bottom';
-export interface KemetDrawerInterface extends HTMLElement {
-    opened?: boolean;
-    effect?: TypeEffect;
-    side?: TypeSide;
-    overlay?: boolean;
-}

package/dist/components/kemet-drawer/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/kemet-drawer/types.ts"],"names":[],"mappings":"","sourcesContent":["export type TypeEffect = 'slide' | 'reveal' | 'push' | 'scale';\nexport type TypeSide = 'left' | 'right' | 'top' | 'bottom';\n\nexport interface KemetDrawerInterface extends HTMLElement {\n  opened?: boolean,\n  effect?: TypeEffect,\n  side?: TypeSide,\n  overlay?: boolean,\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/kemet-drawer/types.ts"],"names":[],"mappings":"","sourcesContent":["export type TypeEffect = 'slide' | 'reveal' | 'push' | 'scale';\nexport type TypeSide = 'left' | 'right' | 'top' | 'bottom';\n\n"]}

package/dist/components/kemet-fab/docs/stories.d.ts

@@ -8,4 +8,7 @@ declare const meta: Meta;
 export default meta;
 declare type Story = StoryObj;
 export declare const Standard: Story;
+export declare const Outlined: Story;
+export declare const Disabled: Story;
+export declare const Pill: Story;
 export declare const Multiple: Story;

package/dist/components/kemet-fab/docs/stories.js

@@ -8,12 +8,15 @@ import '../../kemet-tabs/kemet-tab-panel';
 const meta = {
     title: 'Components / FAB',
     component: 'kemet-fab',
+    args: {
+        label: 'Action',
+    }
 };
 export default meta;
-const Template = ({ label = 'Action', outlined = false, disabled = false, pill = false, expandPoint, collapsePoint, expanded = false, }) => html `
-  <kemet-fab ?expanded=${expanded} ?outlined=${outlined} ?disabled=${disabled} ?pill=${pill} expand-point=${ifDefined(expandPoint || null)} collapse-point=${ifDefined(collapsePoint || null)}>
+const Template = (args) => html `
+  <kemet-fab ?expanded=${args.expanded} ?outlined=${args.outlined} ?disabled=${args.disabled} ?pill=${args.pill} expand-point=${ifDefined(args.expandPoint || null)} collapse-point=${ifDefined(args.collapsePoint || null)}>
     <kemet-icon slot="icon" icon="pencil-square" size="24"></kemet-icon>
-    ${label}
+    ${args.label}
   </kemet-fab>
 `;
 const TemplateMultiple = () => html `
@@ -30,7 +33,7 @@ const TemplateMultiple = () => html `
       align-items: flex-end;
     }
   </style>
-  <ul class="fabs" kemet-layout="flexcolumn" kemet-gutters kemet-margin="tiny:none" kemet-padding="tiny:none">
+  <ul class="fabs" kemet-layout="flexcolumn" kemet-gutters kemet-margin="none" kemet-padding="none">
     <li>
       <kemet-fab pill>
         <kemet-icon slot="icon" icon="envelope" size="24"></kemet-icon> Email
@@ -50,36 +53,24 @@ const TemplateMultiple = () => html `
 `;
 export const Standard = {
     render: (args) => Template(args),
+};
+export const Outlined = {
+    render: (args) => Template(args),
     args: {
-        label: 'Action',
-        outlined: false,
-        disabled: false,
-        pill: false,
-        expanded: false,
+        outlined: true,
+    },
+};
+export const Disabled = {
+    render: (args) => Template(args),
+    args: {
+        disabled: true,
+    },
+};
+export const Pill = {
+    render: (args) => Template(args),
+    args: {
+        pill: true,
     },
-    argTypes: {
-        label: {
-            control: { type: 'text' },
-        },
-        outlined: {
-            control: { type: 'boolean' },
-        },
-        disabled: {
-            control: { type: 'boolean' },
-        },
-        pill: {
-            control: { type: 'boolean' },
-        },
-        expandPoint: {
-            control: { type: 'number' },
-        },
-        collapsePoint: {
-            control: { type: 'number' },
-        },
-        expanded: {
-            control: { type: 'boolean' },
-        },
-    }
 };
 export const Multiple = {
     render: () => TemplateMultiple(),

package/dist/components/kemet-fab/docs/stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-fab/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAGzD,OAAO,cAAc,CAAC;AACtB,OAAO,6BAA6B,CAAC;AAErC,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAE1C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,WAAW;CACvB,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,EAChB,KAAK,GAAG,QAAQ,EAChB,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,IAAI,GAAG,KAAK,EACZ,WAAW,EACX,aAAa,EACb,QAAQ,GAAG,KAAK,GACjB,EAAE,EAAE,CAAC,IAAI,CAAA;yBACe,QAAQ,cAAc,QAAQ,cAAc,QAAQ,UAAU,IAAI,iBAAiB,SAAS,CAAC,WAAW,IAAI,IAAI,CAAC,mBAAmB,SAAS,CAAC,aAAa,IAAI,IAAI,CAAC;;MAEvL,KAAK;;CAEV,CAAC;AAEF,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BlC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,CAAC,IAAS,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IACrC,IAAI,EAAE;QACJ,KAAK,EAAE,QAAQ;QACf,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;QACf,IAAI,EAAE,KAAK;QACX,QAAQ,EAAE,KAAK;KAChB;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;QACD,WAAW,EAAE;YACX,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;QACD,aAAa,EAAE;YACb,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,GAAG,EAAE,CAAC,gBAAgB,EAAE;CACjC,CAAA","sourcesContent":["import { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-fab';\nimport '../../kemet-icon/kemet-icon';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n  title: 'Components / FAB',\n  component: 'kemet-fab',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = ({\n  label = 'Action',\n  outlined = false,\n  disabled = false,\n  pill = false,\n  expandPoint,\n  collapsePoint,\n  expanded = false,\n}) => html`\n  <kemet-fab ?expanded=${expanded} ?outlined=${outlined} ?disabled=${disabled} ?pill=${pill} expand-point=${ifDefined(expandPoint || null)} collapse-point=${ifDefined(collapsePoint || null)}>\n    <kemet-icon slot=\"icon\" icon=\"pencil-square\" size=\"24\"></kemet-icon>\n    ${label}\n  </kemet-fab>\n`;\n\nconst TemplateMultiple = () => html`\n  <style>\n    .fabs {\n      position: fixed;\n      bottom: 1rem;\n      right: 1rem;\n      z-index: 99;\n    }\n\n    .fabs li {\n      display: flex;\n      align-items: flex-end;\n    }\n  </style>\n  <ul class=\"fabs\" kemet-layout=\"flexcolumn\" kemet-gutters kemet-margin=\"tiny:none\" kemet-padding=\"tiny:none\">\n    <li>\n      <kemet-fab pill>\n        <kemet-icon slot=\"icon\" icon=\"envelope\" size=\"24\"></kemet-icon> Email\n      </kemet-fab>\n    </li>\n    <li>\n      <kemet-fab pill>\n        <kemet-icon slot=\"icon\" icon=\"calendar\" size=\"24\"></kemet-icon> Calendar\n      </kemet-fab>\n    </li>\n    <li>\n      <kemet-fab pill>\n        <kemet-icon slot=\"icon\" icon=\"pencil-square\" size=\"24\"></kemet-icon> Edit\n      </kemet-fab>\n    </li>\n  </ul>\n`;\n\nexport const Standard: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    label: 'Action',\n    outlined: false,\n    disabled: false,\n    pill: false,\n    expanded: false,\n  },\n  argTypes: {\n    label: {\n      control: { type: 'text' },\n    },\n    outlined: {\n      control: { type: 'boolean' },\n    },\n    disabled: {\n      control: { type: 'boolean' },\n    },\n    pill: {\n      control: { type: 'boolean' },\n    },\n    expandPoint: {\n      control: { type: 'number' },\n    },\n    collapsePoint: {\n      control: { type: 'number' },\n    },\n    expanded: {\n      control: { type: 'boolean' },\n    },\n  }\n};\n\nexport const Multiple: Story = {\n  render: () => TemplateMultiple(),\n}\n"]}
+{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-fab/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAGzD,OAAO,cAAc,CAAC;AACtB,OAAO,6BAA6B,CAAC;AAErC,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAE1C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,WAAW;IACtB,IAAI,EAAE;QACJ,KAAK,EAAE,QAAQ;KAChB;CACF,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;yBACN,IAAI,CAAC,QAAQ,cAAc,IAAI,CAAC,QAAQ,cAAc,IAAI,CAAC,QAAQ,UAAU,IAAI,CAAC,IAAI,iBAAiB,SAAS,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,mBAAmB,SAAS,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC;;MAErN,IAAI,CAAC,KAAK;;CAEf,CAAC;AAEF,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BlC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,CAAC,IAAS,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;CACtC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,CAAC,IAAS,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IACrC,IAAI,EAAE;QACJ,QAAQ,EAAE,IAAI;KACf;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,CAAC,IAAS,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IACrC,IAAI,EAAE;QACJ,QAAQ,EAAE,IAAI;KACf;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAU;IACzB,MAAM,EAAE,CAAC,IAAS,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IACrC,IAAI,EAAE;QACJ,IAAI,EAAE,IAAI;KACX;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,GAAG,EAAE,CAAC,gBAAgB,EAAE;CACjC,CAAA","sourcesContent":["import { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-fab';\nimport '../../kemet-icon/kemet-icon';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n  title: 'Components / FAB',\n  component: 'kemet-fab',\n  args: {\n    label: 'Action',\n  }\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = (args) => html`\n  <kemet-fab ?expanded=${args.expanded} ?outlined=${args.outlined} ?disabled=${args.disabled} ?pill=${args.pill} expand-point=${ifDefined(args.expandPoint || null)} collapse-point=${ifDefined(args.collapsePoint || null)}>\n    <kemet-icon slot=\"icon\" icon=\"pencil-square\" size=\"24\"></kemet-icon>\n    ${args.label}\n  </kemet-fab>\n`;\n\nconst TemplateMultiple = () => html`\n  <style>\n    .fabs {\n      position: fixed;\n      bottom: 1rem;\n      right: 1rem;\n      z-index: 99;\n    }\n\n    .fabs li {\n      display: flex;\n      align-items: flex-end;\n    }\n  </style>\n  <ul class=\"fabs\" kemet-layout=\"flexcolumn\" kemet-gutters kemet-margin=\"none\" kemet-padding=\"none\">\n    <li>\n      <kemet-fab pill>\n        <kemet-icon slot=\"icon\" icon=\"envelope\" size=\"24\"></kemet-icon> Email\n      </kemet-fab>\n    </li>\n    <li>\n      <kemet-fab pill>\n        <kemet-icon slot=\"icon\" icon=\"calendar\" size=\"24\"></kemet-icon> Calendar\n      </kemet-fab>\n    </li>\n    <li>\n      <kemet-fab pill>\n        <kemet-icon slot=\"icon\" icon=\"pencil-square\" size=\"24\"></kemet-icon> Edit\n      </kemet-fab>\n    </li>\n  </ul>\n`;\n\nexport const Standard: Story = {\n  render: (args: any) => Template(args),\n};\n\nexport const Outlined: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    outlined: true,\n  },\n};\n\nexport const Disabled: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    disabled: true,\n  },\n};\n\nexport const Pill: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    pill: true,\n  },\n};\n\nexport const Multiple: Story = {\n  render: () => TemplateMultiple(),\n}\n"]}