kemet-ui 2.0.0 → 2.0.2

package/dist/components/kemet-alert/stories.js

@@ -1,77 +0,0 @@
-import { html, nothing } from 'lit';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import './kemet-alert';
-import '../kemet-tabs/kemet-tabs';
-import '../kemet-tabs/kemet-tab';
-import '../kemet-tabs/kemet-tab-panel';
-const meta = {
-    title: 'Components / Alert',
-    component: 'kemet-alert',
-};
-export default meta;
-const Template = ({ heading, text, icon, status, closable, border, opened, overlay, }) => {
-    const makeIcon = () => {
-        if (icon !== 'none') {
-            return html `<kemet-icon slot="icon" icon=${icon} size="24" ></kemet-icon>`;
-        }
-        return null;
-    };
-    return html `
-    <kemet-alert
-      status=${status}
-      ?closable=${closable}
-      ?opened=${opened}
-      border-status=${border}
-      overlay=${ifDefined(overlay !== 'none' ? overlay : null)}
-      kemet-margin=${ifDefined(overlay.indexOf('full') < 0 ? 'tiny:normal' : nothing)}>
-      ${makeIcon()}
-      <strong>${heading}</strong>
-      <br />
-      ${text}
-    </kemet-alert>
-  `;
-};
-export const Standard = {
-    render: (args) => Template(args),
-    args: {
-        heading: 'This is a heading.',
-        text: 'The brown fox jumped over the lazy dog.',
-        icon: 'gear',
-        status: 'standard',
-        closable: false,
-        border: 'left',
-        opened: true,
-        overlay: 'none',
-    },
-    argTypes: {
-        heading: {
-            control: { type: 'text' },
-        },
-        text: {
-            control: { type: 'text' },
-        },
-        icon: {
-            control: { type: 'select' },
-            options: ['none', 'info-circle', 'check-circle', 'gear', 'exclamation-circle'],
-        },
-        status: {
-            control: { type: 'select' },
-            options: ['standard', 'primary', 'success', 'warning', 'error'],
-        },
-        closable: {
-            control: { type: 'boolean' },
-        },
-        border: {
-            control: { type: 'select' },
-            options: ['none', 'top', 'right', 'bottom', 'left'],
-        },
-        opened: {
-            control: { type: 'boolean' },
-        },
-        overlay: {
-            control: { type: 'select' },
-            options: ['none', 'top-full', 'bottom-full', 'top-right', 'top-left', 'bottom-right', 'bottom-left'],
-        },
-    }
-};
-//# sourceMappingURL=stories.js.map

package/dist/components/kemet-alert/stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../src/components/kemet-alert/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAGzD,OAAO,eAAe,CAAC;AAEvB,OAAO,0BAA0B,CAAC;AAClC,OAAO,yBAAyB,CAAC;AACjC,OAAO,+BAA+B,CAAC;AAGvC,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,aAAa;CACzB,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,EAChB,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,MAAM,EACN,MAAM,EACN,OAAO,GACR,EAAE,EAAE;IACH,MAAM,QAAQ,GAAG,GAAG,EAAE;QACpB,IAAI,IAAI,KAAK,MAAM,EAAE;YACnB,OAAO,IAAI,CAAA,gCAAgC,IAAI,2BAA2B,CAAC;SAC5E;QAED,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;IAEF,OAAO,IAAI,CAAA;;eAEE,MAAM;kBACH,QAAQ;gBACV,MAAM;sBACA,MAAM;gBACZ,SAAS,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC;qBACzC,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC;QAC7E,QAAQ,EAAE;gBACF,OAAO;;QAEf,IAAI;;GAET,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,CAAC,IAAS,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IACrC,IAAI,EAAE;QACJ,OAAO,EAAE,oBAAoB;QAC7B,IAAI,EAAE,yCAAyC;QAC/C,IAAI,EAAE,MAAM;QACZ,MAAM,EAAE,UAAU;QAClB,QAAQ,EAAE,KAAK;QACf,MAAM,EAAE,MAAM;QACd,MAAM,EAAE,IAAI;QACZ,OAAO,EAAE,MAAM;KAChB;IACD,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,MAAM,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,EAAE,oBAAoB,CAAC;SAC/E;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC;SAChE;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,CAAC;SACpD;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;QACD,OAAO,EAAE;YACP,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,WAAW,EAAE,UAAU,EAAE,cAAc,EAAE,aAAa,CAAC;SACrG;KACF;CACF,CAAC","sourcesContent":["import { html, nothing } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport './kemet-alert';\n\nimport '../kemet-tabs/kemet-tabs';\nimport '../kemet-tabs/kemet-tab';\nimport '../kemet-tabs/kemet-tab-panel';\n\n\nconst meta: Meta = {\n  title: 'Components / Alert',\n  component: 'kemet-alert',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = ({\n  heading,\n  text,\n  icon,\n  status,\n  closable,\n  border,\n  opened,\n  overlay,\n}) => {\n  const makeIcon = () => {\n    if (icon !== 'none') {\n      return html`<kemet-icon slot=\"icon\" icon=${icon} size=\"24\" ></kemet-icon>`;\n    }\n\n    return null;\n  };\n\n  return html`\n    <kemet-alert\n      status=${status}\n      ?closable=${closable}\n      ?opened=${opened}\n      border-status=${border}\n      overlay=${ifDefined(overlay !== 'none' ? overlay : null)}\n      kemet-margin=${ifDefined(overlay.indexOf('full') < 0 ? 'tiny:normal' : nothing)}>\n      ${makeIcon()}\n      <strong>${heading}</strong>\n      <br />\n      ${text}\n    </kemet-alert>\n  `;\n};\n\nexport const Standard: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    heading: 'This is a heading.',\n    text: 'The brown fox jumped over the lazy dog.',\n    icon: 'gear',\n    status: 'standard',\n    closable: false,\n    border: 'left',\n    opened: true,\n    overlay: 'none',\n  },\n  argTypes: {\n    heading: {\n      control: { type: 'text' },\n    },\n    text: {\n      control: { type: 'text' },\n    },\n    icon: {\n      control: { type: 'select' },\n      options: ['none', 'info-circle', 'check-circle', 'gear', 'exclamation-circle'],\n    },\n    status: {\n      control: { type: 'select' },\n      options: ['standard', 'primary', 'success', 'warning', 'error'],\n    },\n    closable: {\n      control: { type: 'boolean' },\n    },\n    border: {\n      control: { type: 'select' },\n      options: ['none', 'top', 'right', 'bottom', 'left'],\n    },\n    opened: {\n      control: { type: 'boolean' },\n    },\n    overlay: {\n      control: { type: 'select' },\n      options: ['none', 'top-full', 'bottom-full', 'top-right', 'top-left', 'bottom-right', 'bottom-left'],\n    },\n  }\n};\n"]}

package/dist/components/kemet-avatar/stories.d.ts

@@ -1,10 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
-import './kemet-avatar';
-import '../kemet-tabs/kemet-tabs';
-import '../kemet-tabs/kemet-tab';
-import '../kemet-tabs/kemet-tab-panel';
-declare const meta: Meta;
-export default meta;
-declare type Story = StoryObj;
-export declare const Standard: Story;
-export declare const Multiple: Story;

package/dist/components/kemet-avatar/stories.js

@@ -1,85 +0,0 @@
-import { html } from 'lit';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import './kemet-avatar';
-import '../kemet-tabs/kemet-tabs';
-import '../kemet-tabs/kemet-tab';
-import '../kemet-tabs/kemet-tab-panel';
-const meta = {
-    title: 'Components / Avatar',
-    component: 'kemet-avatar',
-};
-export default meta;
-const Template = ({ icon, image, circle, rounded, initials, status, }) => html `
-  <kemet-avatar
-    ?circle=${circle}
-    ?rounded=${rounded}
-    image="${ifDefined(image !== '' ? image : null)}"
-    initials="${ifDefined(initials !== '' ? initials : null)}"
-    kemet-margin="tiny:normal">
-    ${icon !== '' ? html `<kemet-icon icon=${icon} size="48" kemet-margin="tiny:smallest"></kemet-icon>` : null}
-    ${status ? html `<kemet-badge slot="status" status="success" kemet-border="all-2 solid white"></kemet-badge>` : null}
-  </kemet-avatar>
-`;
-const TemplateMultiple = ({ squeeze, numOfAvatars, }) => {
-    const avatars = [];
-    for (let i = 0; i < numOfAvatars; i += 1) {
-        avatars.push(html `<kemet-avatar circle image="https://via.placeholder.com/64x64" kemet-border="all-4 solid white"></kemet-avatar>\n`);
-    }
-    return html `
-    <style>
-      kemet-avatars {
-        --kemet-avatars-squeeze: ${squeeze};
-      }
-    </style>
-    <kemet-avatars kemet-margin="tiny:normal">
-      ${avatars}
-    </kemet-avatars>
-  `;
-};
-export const Standard = {
-    render: (args) => Template(args),
-    args: {
-        circle: true,
-        rounded: false,
-        image: 'https://via.placeholder.com/64x64',
-        initials: 'KU',
-        icon: 'person',
-        status: false,
-    },
-    argTypes: {
-        circle: {
-            control: { type: 'boolean' },
-        },
-        rounded: {
-            control: { type: 'boolean' },
-        },
-        image: {
-            control: { type: 'text' },
-        },
-        initials: {
-            control: { type: 'text' },
-        },
-        icon: {
-            control: { type: 'text' },
-        },
-        status: {
-            control: { type: 'boolean' },
-        },
-    }
-};
-export const Multiple = {
-    render: (args) => Template(args),
-    args: {
-        squeeze: '-1.5rem',
-        numOfAvatars: 3,
-    },
-    argTypes: {
-        squeeze: {
-            control: { type: 'text' },
-        },
-        numOfAvatars: {
-            control: { type: 'number' },
-        },
-    }
-};
-//# sourceMappingURL=stories.js.map

package/dist/components/kemet-avatar/stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../src/components/kemet-avatar/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAGzD,OAAO,gBAAgB,CAAC;AAExB,OAAO,0BAA0B,CAAC;AAClC,OAAO,yBAAyB,CAAC;AACjC,OAAO,+BAA+B,CAAC;AAEvC,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,cAAc;CAC1B,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,EAChB,IAAI,EACJ,KAAK,EACL,MAAM,EACN,OAAO,EACP,QAAQ,EACR,MAAM,GACP,EAAE,EAAE,CAAC,IAAI,CAAA;;cAEI,MAAM;eACL,OAAO;aACT,SAAS,CAAC,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;gBACnC,SAAS,CAAC,QAAQ,KAAK,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC;;MAEtD,IAAI,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAA,oBAAoB,IAAI,uDAAuD,CAAC,CAAC,CAAC,IAAI;MACxG,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA,6FAA6F,CAAC,CAAC,CAAC,IAAI;;CAEtH,CAAC;AAEF,MAAM,gBAAgB,GAAG,CAAC,EACxB,OAAO,EACP,YAAY,GACb,EAAE,EAAE;IACH,MAAM,OAAO,GAAG,EAAE,CAAC;IAEnB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,YAAY,EAAE,CAAC,IAAI,CAAC,EAAE;QACxC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,mHAAmH,CAAC,CAAC;KACvI;IAED,OAAO,IAAI,CAAA;;;mCAGsB,OAAO;;;;QAIlC,OAAO;;GAEZ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,CAAC,IAAS,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IACrC,IAAI,EAAE;QACJ,MAAM,EAAE,IAAI;QACZ,OAAO,EAAE,KAAK;QACd,KAAK,EAAE,mCAAmC;QAC1C,QAAQ,EAAE,IAAI;QACd,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,KAAK;KACd;IACD,QAAQ,EAAE;QACR,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;QACD,OAAO,EAAE;YACP,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;QACD,KAAK,EAAE;YACL,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;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,OAAO,EAAE,SAAS;QAClB,YAAY,EAAE,CAAC;KAChB;IACD,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,YAAY,EAAE;YACZ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;KACF;CACF,CAAC","sourcesContent":["import { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport './kemet-avatar';\n\nimport '../kemet-tabs/kemet-tabs';\nimport '../kemet-tabs/kemet-tab';\nimport '../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n  title: 'Components / Avatar',\n  component: 'kemet-avatar',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = ({\n  icon,\n  image,\n  circle,\n  rounded,\n  initials,\n  status,\n}) => html`\n  <kemet-avatar\n    ?circle=${circle}\n    ?rounded=${rounded}\n    image=\"${ifDefined(image !== '' ? image : null)}\"\n    initials=\"${ifDefined(initials !== '' ? initials : null)}\"\n    kemet-margin=\"tiny:normal\">\n    ${icon !== '' ? html`<kemet-icon icon=${icon} size=\"48\" kemet-margin=\"tiny:smallest\"></kemet-icon>` : null}\n    ${status ? html`<kemet-badge slot=\"status\" status=\"success\" kemet-border=\"all-2 solid white\"></kemet-badge>` : null}\n  </kemet-avatar>\n`;\n\nconst TemplateMultiple = ({\n  squeeze,\n  numOfAvatars,\n}) => {\n  const avatars = [];\n\n  for (let i = 0; i < numOfAvatars; i += 1) {\n    avatars.push(html`<kemet-avatar circle image=\"https://via.placeholder.com/64x64\" kemet-border=\"all-4 solid white\"></kemet-avatar>\\n`);\n  }\n\n  return html`\n    <style>\n      kemet-avatars {\n        --kemet-avatars-squeeze: ${squeeze};\n      }\n    </style>\n    <kemet-avatars kemet-margin=\"tiny:normal\">\n      ${avatars}\n    </kemet-avatars>\n  `;\n};\n\nexport const Standard: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    circle: true,\n    rounded: false,\n    image: 'https://via.placeholder.com/64x64',\n    initials: 'KU',\n    icon: 'person',\n    status: false,\n  },\n  argTypes: {\n    circle: {\n      control: { type: 'boolean' },\n    },\n    rounded: {\n      control: { type: 'boolean' },\n    },\n    image: {\n      control: { type: 'text' },\n    },\n    initials: {\n      control: { type: 'text' },\n    },\n    icon: {\n      control: { type: 'text' },\n    },\n    status: {\n      control: { type: 'boolean' },\n    },\n  }\n};\n\nexport const Multiple: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    squeeze: '-1.5rem',\n    numOfAvatars: 3,\n  },\n  argTypes: {\n    squeeze: {\n      control: { type: 'text' },\n    },\n    numOfAvatars: {\n      control: { type: 'number' },\n    },\n  }\n};\n"]}

package/dist/src/components/kemet-accordion/kemet-accordion-panel.d.ts

@@ -1,51 +0,0 @@
-import { LitElement } from 'lit';
-/**
- * @since 1.0.0
- * @status stable
- *
- * @tagname kemet-accordion-panel
- * @summary A blade for an accordion.
- *
- * @prop {boolean} opened - Determines the opened state of the panel
- * @prop {string} maxHeight - Sets the max height of the panel's body
- * @prop {string} slug - Uniquely identifies a panel for accessibility purposes
- *
- * @slot trigger - The trigger button that opens and closes the panel.
- * @slot body - The body content of the panel.
- * @slot icon - The icon for the panel.
- *
- * @cssproperty --kemet-accordion-panel-transition-speed - The speed of the opening and closing effect. Default: 0.3s.
- *
- * @csspart trigger - Contains the trigger for the panel.
- * @csspart body - Contains the body for the panel.
- *
- * @event kemet-accordion-panel-opened - Fires when a panel is opened
- * @event kemet-accordion-panel-closed - Fires when a panel is closed
- *
- */
-export default class KemetAccordionPanel extends LitElement {
-    static styles: import("lit").CSSResult[];
-    opened: boolean | undefined;
-    maxHeight: string;
-    slug: string;
-    /** @internal */
-    focusableSelector: string;
-    /** @internal */
-    bodyElement: HTMLElement | null;
-    /** @internal */
-    bodyElementFirst: HTMLElement | null | undefined;
-    /** @internal */
-    bodyElementLast: HTMLElement | null | undefined;
-    firstUpdated(): void;
-    updated(prevProps: any): void;
-    render(): import("lit-html").TemplateResult<1>;
-    toggle(): void;
-    focusableBodyElements(): void;
-    a11y(): void;
-    handleKeyDown(event: any): void;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'kemet-accordion-panel': KemetAccordionPanel;
-    }
-}

package/dist/src/components/kemet-accordion/kemet-accordion-panel.js

@@ -1,136 +0,0 @@
-import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { emitEvent } from '../../utilities/misc/events';
-import { stylesPanel } from './styles';
-/**
- * @since 1.0.0
- * @status stable
- *
- * @tagname kemet-accordion-panel
- * @summary A blade for an accordion.
- *
- * @prop {boolean} opened - Determines the opened state of the panel
- * @prop {string} maxHeight - Sets the max height of the panel's body
- * @prop {string} slug - Uniquely identifies a panel for accessibility purposes
- *
- * @slot trigger - The trigger button that opens and closes the panel.
- * @slot body - The body content of the panel.
- * @slot icon - The icon for the panel.
- *
- * @cssproperty --kemet-accordion-panel-transition-speed - The speed of the opening and closing effect. Default: 0.3s.
- *
- * @csspart trigger - Contains the trigger for the panel.
- * @csspart body - Contains the body for the panel.
- *
- * @event kemet-accordion-panel-opened - Fires when a panel is opened
- * @event kemet-accordion-panel-closed - Fires when a panel is closed
- *
- */
-let KemetAccordionPanel = class KemetAccordionPanel extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.opened = undefined;
-        this.maxHeight = '0px';
-        this.slug = 'panel';
-    }
-    firstUpdated() {
-        var _a, _b;
-        this.focusableSelector = 'body, a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]';
-        this.bodyElement = this.querySelector('[slot="body"]');
-        this.bodyElementFirst = (_a = this.bodyElement) === null || _a === void 0 ? void 0 : _a.querySelector(':first-child');
-        this.bodyElementLast = (_b = this.bodyElement) === null || _b === void 0 ? void 0 : _b.querySelector(':last-child');
-        if (this.bodyElementFirst)
-            this.bodyElementFirst.style.marginTop = '0';
-        if (this.bodyElementLast)
-            this.bodyElementLast.style.marginBottom = '0';
-    }
-    updated(prevProps) {
-        var _a;
-        if (!prevProps.get('opened') && this.opened === true) {
-            this.maxHeight = `${(_a = this.bodyElement) === null || _a === void 0 ? void 0 : _a.offsetHeight}px`;
-            emitEvent(this, 'kemet-accordion-panel-opened', this);
-        }
-        if (prevProps.get('opened') && this.opened === false) {
-            this.maxHeight = '0px';
-            emitEvent(this, 'kemet-accordion-panel-closed', this);
-        }
-        this.a11y();
-        this.focusableBodyElements();
-    }
-    render() {
-        return html `
-      <button
-        class="trigger"
-        part="trigger"
-        @click=${() => this.toggle()}
-        @keydown=${event => this.handleKeyDown(event)}
-      >
-        <slot name="trigger"></slot>
-        <slot name="icon"></slot>
-      </button>
-      <section class="body" part="body" style="max-height:${this.maxHeight};">
-        <slot name="body"></slot>
-      </section>
-    `;
-    }
-    toggle() {
-        this.opened = !this.opened;
-    }
-    focusableBodyElements() {
-        var _a;
-        const focusableElements = (_a = this.bodyElement) === null || _a === void 0 ? void 0 : _a.querySelectorAll(this.focusableSelector);
-        if (this.opened) {
-            focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements.forEach((element) => {
-                element.removeAttribute('tabindex');
-            });
-        }
-        else {
-            focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements.forEach((element) => {
-                element.setAttribute('tabindex', '-1');
-            });
-        }
-    }
-    a11y() {
-        var _a, _b;
-        const trigger = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.trigger');
-        const body = (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.body');
-        trigger === null || trigger === void 0 ? void 0 : trigger.setAttribute('id', `${this.slug}-button`);
-        trigger === null || trigger === void 0 ? void 0 : trigger.setAttribute('aria-controls', `${this.slug}-content`);
-        body === null || body === void 0 ? void 0 : body.setAttribute('id', `${this.slug}-content`);
-        body === null || body === void 0 ? void 0 : body.setAttribute('aria-labelledby', `${this.slug}-button`);
-        body === null || body === void 0 ? void 0 : body.setAttribute('aria-hidden', `${!this.opened}`);
-    }
-    handleKeyDown(event) {
-        if (event.key === 'Space' || event.key === 'Enter') {
-            this.toggle();
-        }
-    }
-};
-KemetAccordionPanel.styles = [stylesPanel];
-__decorate([
-    property({ type: Boolean, reflect: true })
-], KemetAccordionPanel.prototype, "opened", void 0);
-__decorate([
-    property({ type: String, attribute: 'max-height' })
-], KemetAccordionPanel.prototype, "maxHeight", void 0);
-__decorate([
-    property({ type: String })
-], KemetAccordionPanel.prototype, "slug", void 0);
-__decorate([
-    state()
-], KemetAccordionPanel.prototype, "focusableSelector", void 0);
-__decorate([
-    state()
-], KemetAccordionPanel.prototype, "bodyElement", void 0);
-__decorate([
-    state()
-], KemetAccordionPanel.prototype, "bodyElementFirst", void 0);
-__decorate([
-    state()
-], KemetAccordionPanel.prototype, "bodyElementLast", void 0);
-KemetAccordionPanel = __decorate([
-    customElement('kemet-accordion-panel')
-], KemetAccordionPanel);
-export default KemetAccordionPanel;
-//# sourceMappingURL=kemet-accordion-panel.js.map

package/dist/src/components/kemet-accordion/kemet-accordion-panel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"kemet-accordion-panel.js","sourceRoot":"","sources":["../../../../src/components/kemet-accordion/kemet-accordion-panel.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { stylesPanel } from './styles';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-accordion-panel\n * @summary A blade for an accordion.\n *\n * @prop {boolean} opened - Determines the opened state of the panel\n * @prop {string} maxHeight - Sets the max height of the panel's body\n * @prop {string} slug - Uniquely identifies a panel for accessibility purposes\n *\n * @slot trigger - The trigger button that opens and closes the panel.\n * @slot body - The body content of the panel.\n * @slot icon - The icon for the panel.\n *\n * @cssproperty --kemet-accordion-panel-transition-speed - The speed of the opening and closing effect. Default: 0.3s.\n *\n * @csspart trigger - Contains the trigger for the panel.\n * @csspart body - Contains the body for the panel.\n *\n * @event kemet-accordion-panel-opened - Fires when a panel is opened\n * @event kemet-accordion-panel-closed - Fires when a panel is closed\n *\n */\n\n@customElement('kemet-accordion-panel')\nexport default class KemetAccordionPanel extends LitElement {\n  static styles = [stylesPanel];\n\n  @property({ type: Boolean, reflect: true })\n  opened: boolean | undefined = undefined;\n\n  @property({ type: String, attribute: 'max-height'})\n  maxHeight: string = '0px';\n\n  @property({ type: String })\n  slug: string = 'panel';\n\n  /** @internal */\n  @state()\n  focusableSelector: string;\n\n  /** @internal */\n  @state()\n  bodyElement: HTMLElement | null;\n\n  /** @internal */\n  @state()\n  bodyElementFirst: HTMLElement | null | undefined;\n\n  /** @internal */\n  @state()\n  bodyElementLast: HTMLElement | null | undefined;\n\n  firstUpdated() {\n    this.focusableSelector = 'body, a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]';\n    this.bodyElement = this.querySelector('[slot=\"body\"]');\n    this.bodyElementFirst = this.bodyElement?.querySelector(':first-child');\n    this.bodyElementLast = this.bodyElement?.querySelector(':last-child');\n\n    if (this.bodyElementFirst) this.bodyElementFirst.style.marginTop = '0';\n    if (this.bodyElementLast) this.bodyElementLast.style.marginBottom = '0';\n  }\n\n  updated(prevProps) {\n    if (!prevProps.get('opened') && this.opened === true) {\n      this.maxHeight = `${this.bodyElement?.offsetHeight}px`;\n      emitEvent(this, 'kemet-accordion-panel-opened', this);\n    }\n\n    if (prevProps.get('opened') && this.opened === false) {\n      this.maxHeight = '0px';\n      emitEvent(this, 'kemet-accordion-panel-closed', this);\n    }\n\n    this.a11y();\n    this.focusableBodyElements();\n  }\n\n  render() {\n    return html`\n      <button\n        class=\"trigger\"\n        part=\"trigger\"\n        @click=${() => this.toggle()}\n        @keydown=${event => this.handleKeyDown(event)}\n      >\n        <slot name=\"trigger\"></slot>\n        <slot name=\"icon\"></slot>\n      </button>\n      <section class=\"body\" part=\"body\" style=\"max-height:${this.maxHeight};\">\n        <slot name=\"body\"></slot>\n      </section>\n    `;\n  }\n\n  toggle() {\n    this.opened = !this.opened;\n  }\n\n  focusableBodyElements() {\n    const focusableElements = this.bodyElement?.querySelectorAll(this.focusableSelector);\n\n    if (this.opened) {\n      focusableElements?.forEach((element) => {\n        element.removeAttribute('tabindex');\n      });\n    } else {\n      focusableElements?.forEach((element) => {\n        element.setAttribute('tabindex', '-1');\n      });\n    }\n  }\n\n  a11y() {\n    const trigger = this.shadowRoot?.querySelector('.trigger');\n    const body = this.shadowRoot?.querySelector('.body');\n\n    trigger?.setAttribute('id', `${this.slug}-button`);\n    trigger?.setAttribute('aria-controls', `${this.slug}-content`);\n\n    body?.setAttribute('id', `${this.slug}-content`);\n    body?.setAttribute('aria-labelledby', `${this.slug}-button`);\n    body?.setAttribute('aria-hidden', `${!this.opened}`);\n  }\n\n  handleKeyDown(event) {\n    if (event.key === 'Space' || event.key === 'Enter') {\n      this.toggle();\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-accordion-panel': KemetAccordionPanel\n  }\n}\n"]}

package/dist/src/components/kemet-accordion/kemet-accordion.d.ts

@@ -1,37 +0,0 @@
-import { LitElement } from 'lit';
-/**
- * @since 1.0.0
- * @status stable
- *
- * @tagname kemet-accordion
- * @summary A component that acts like a standard accordion.
- *
- * @prop {number} currentPanel - The index value for the most recently opened panel
- * @prop {boolean} togglePanels - Support for closing all inactive panels when one is opened
- *
- */
-export default class KemetAccordion extends LitElement {
-    static styles: import("lit").CSSResult[];
-    currentPanel: number;
-    togglePanels: boolean;
-    /** @internal */
-    panels: any;
-    /** @internal */
-    onKeyDown: (event: any) => any;
-    /** @internal */
-    currentPanelFocus: number;
-    constructor();
-    firstUpdated(): void;
-    render(): import("lit-html").TemplateResult<1>;
-    handleSlotChange(): void;
-    handlePanelOpened(event: any): void;
-    navigatePanels(direction: any): void;
-    handleKeyDown(event: any): void;
-    expandAll(): void;
-    collapseAll(): void;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'kemet-accordion': KemetAccordion;
-    }
-}

package/dist/src/components/kemet-accordion/kemet-accordion.js

@@ -1,129 +0,0 @@
-import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { stylesBase } from './styles';
-/**
- * @since 1.0.0
- * @status stable
- *
- * @tagname kemet-accordion
- * @summary A component that acts like a standard accordion.
- *
- * @prop {number} currentPanel - The index value for the most recently opened panel
- * @prop {boolean} togglePanels - Support for closing all inactive panels when one is opened
- *
- */
-let KemetAccordion = class KemetAccordion extends LitElement {
-    constructor() {
-        super();
-        this.togglePanels = false;
-        // bindings
-        this.addEventListener('kemet-accordion-panel-opened', this.handlePanelOpened.bind(this));
-    }
-    firstUpdated() {
-        this.onKeyDown = event => this.handleKeyDown(event);
-    }
-    render() {
-        return html `<slot @slotchange=${() => this.handleSlotChange()}></slot>`;
-    }
-    handleSlotChange() {
-        this.panels = this.querySelectorAll('kemet-accordion-panel');
-        this.panels.forEach((panel) => {
-            panel.removeEventListener('keydown', this.onKeyDown);
-            panel.addEventListener('keydown', this.onKeyDown);
-        });
-    }
-    handlePanelOpened(event) {
-        if (this.togglePanels) {
-            this.panels.forEach((panel) => {
-                if (panel !== event.detail) {
-                    panel.opened = false;
-                }
-            });
-        }
-    }
-    navigatePanels(direction) {
-        switch (direction) {
-            case 'home':
-                this.currentPanel = 0;
-                break;
-            case 'end':
-                this.currentPanel = this.panels.length - 1;
-                break;
-            case 'next':
-                this.currentPanel += 1;
-                break;
-            case 'prev':
-                this.currentPanel -= 1;
-                break;
-            default:
-                this.currentPanelFocus = 0;
-                break;
-        }
-        if (this.currentPanel > this.panels.length - 1)
-            this.currentPanel = 0;
-        if (this.currentPanel < 0)
-            this.currentPanel = this.panels.length - 1;
-        this.panels[this.currentPanel].shadowRoot.querySelector('button').focus();
-    }
-    handleKeyDown(event) {
-        switch (event.key) {
-            case 'Enter':
-            case 'Space':
-                event.preventDefault();
-                event.target.click();
-                break;
-            case 'ArrowLeft':
-            case 'ArrowUp':
-                event.preventDefault();
-                this.navigatePanels('prev');
-                break;
-            case 'ArrowRight':
-            case 'ArrowDown':
-                event.preventDefault();
-                this.navigatePanels('next');
-                break;
-            case 'End':
-                event.preventDefault();
-                this.navigatePanels('end');
-                break;
-            case 'Home':
-                event.preventDefault();
-                this.navigatePanels('home');
-                break;
-            default:
-                break;
-        }
-    }
-    expandAll() {
-        this.panels.forEach((panel) => {
-            panel.opened = true;
-        });
-    }
-    collapseAll() {
-        this.panels.forEach((panel) => {
-            panel.opened = false;
-        });
-    }
-};
-KemetAccordion.styles = [stylesBase];
-__decorate([
-    property({ type: Number })
-], KemetAccordion.prototype, "currentPanel", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'toggle-panels ' })
-], KemetAccordion.prototype, "togglePanels", void 0);
-__decorate([
-    state()
-], KemetAccordion.prototype, "panels", void 0);
-__decorate([
-    state()
-], KemetAccordion.prototype, "onKeyDown", void 0);
-__decorate([
-    state()
-], KemetAccordion.prototype, "currentPanelFocus", void 0);
-KemetAccordion = __decorate([
-    customElement('kemet-accordion')
-], KemetAccordion);
-export default KemetAccordion;
-//# sourceMappingURL=kemet-accordion.js.map

package/dist/src/components/kemet-accordion/kemet-accordion.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"kemet-accordion.js","sourceRoot":"","sources":["../../../../src/components/kemet-accordion/kemet-accordion.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { stylesBase } from './styles';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-accordion\n * @summary A component that acts like a standard accordion.\n *\n * @prop {number} currentPanel - The index value for the most recently opened panel\n * @prop {boolean} togglePanels - Support for closing all inactive panels when one is opened\n *\n */\n\n@customElement('kemet-accordion')\nexport default class KemetAccordion extends LitElement {\n  static styles = [stylesBase];\n\n  @property({ type: Number })\n  currentPanel: number;\n\n  @property({ type: Boolean, attribute: 'toggle-panels '})\n  togglePanels: boolean = false;\n\n  /** @internal */\n  @state()\n  panels: any;\n\n  /** @internal */\n  @state()\n  onKeyDown: (event: any) => any;\n\n  /** @internal */\n  @state()\n  currentPanelFocus: number;\n\n  constructor() {\n    super();\n\n    // bindings\n    this.addEventListener('kemet-accordion-panel-opened', this.handlePanelOpened.bind(this));\n  }\n\n  firstUpdated() {\n    this.onKeyDown = event => this.handleKeyDown(event);\n  }\n\n  render() {\n    return html`<slot @slotchange=${() => this.handleSlotChange()}></slot>`;\n  }\n\n  handleSlotChange() {\n    this.panels = this.querySelectorAll('kemet-accordion-panel');\n\n    this.panels.forEach((panel) => {\n      panel.removeEventListener('keydown', this.onKeyDown);\n      panel.addEventListener('keydown', this.onKeyDown);\n    });\n  }\n\n  handlePanelOpened(event) {\n    if (this.togglePanels) {\n      this.panels.forEach((panel: any) => {\n        if (panel !== event.detail) {\n          panel.opened = false;\n        }\n      });\n    }\n  }\n\n  navigatePanels(direction) {\n    switch (direction) {\n      case 'home':\n        this.currentPanel = 0;\n        break;\n      case 'end':\n        this.currentPanel = this.panels.length - 1;\n        break;\n      case 'next':\n        this.currentPanel += 1;\n        break;\n      case 'prev':\n        this.currentPanel -= 1;\n        break;\n      default:\n        this.currentPanelFocus = 0;\n        break;\n    }\n\n    if (this.currentPanel > this.panels.length - 1) this.currentPanel = 0;\n    if (this.currentPanel < 0) this.currentPanel = this.panels.length - 1;\n\n    this.panels[this.currentPanel].shadowRoot.querySelector('button').focus();\n  }\n\n  handleKeyDown(event) {\n    switch (event.key) {\n      case 'Enter':\n      case 'Space':\n        event.preventDefault();\n        event.target.click();\n        break;\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        event.preventDefault();\n        this.navigatePanels('prev');\n        break;\n      case 'ArrowRight':\n      case 'ArrowDown':\n        event.preventDefault();\n        this.navigatePanels('next');\n        break;\n      case 'End':\n        event.preventDefault();\n        this.navigatePanels('end');\n        break;\n      case 'Home':\n        event.preventDefault();\n        this.navigatePanels('home');\n        break;\n      default:\n        break;\n    }\n  }\n\n  expandAll() {\n    this.panels.forEach((panel) => {\n      panel.opened = true;\n    });\n  }\n\n  collapseAll() {\n    this.panels.forEach((panel) => {\n      panel.opened = false;\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-accordion': KemetAccordion\n  }\n}\n"]}

package/dist/src/components/kemet-accordion/stories.d.ts

@@ -1,10 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
-import './kemet-accordion';
-import './kemet-accordion-panel';
-import '../kemet-tabs/kemet-tabs';
-import '../kemet-tabs/kemet-tab';
-import '../kemet-tabs/kemet-tab-panel';
-declare const meta: Meta;
-export default meta;
-declare type Story = StoryObj;
-export declare const Standard: Story;

package/dist/src/components/kemet-accordion/stories.js

@@ -1,44 +0,0 @@
-import { html } from 'lit';
-import './kemet-accordion';
-import './kemet-accordion-panel';
-import '../kemet-tabs/kemet-tabs';
-import '../kemet-tabs/kemet-tab';
-import '../kemet-tabs/kemet-tab-panel';
-const meta = {
-    title: 'Components / Accordion',
-    component: 'kemet-accordion',
-};
-export default meta;
-const Template = ({ togglePanels = false, }) => html `
-  <kemet-accordion ?toggle-panels=${togglePanels} kemet-elevation="layer4">
-    <kemet-accordion-panel>
-      <h3 slot="trigger">Trigger 1</h3>
-      <kemet-icon slot="icon" icon="chevron-down" size="18"></kemet-icon>
-      <div slot="body">
-        <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
-      </div>
-    </kemet-accordion-panel>
-    <kemet-accordion-panel>
-      <h3 slot="trigger">Trigger 2</h3>
-      <kemet-icon slot="icon" icon="chevron-down" size="18"></kemet-icon>
-      <div slot="body">
-        <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
-      </div>
-    </kemet-accordion-panel>
-    <kemet-accordion-panel>
-      <h3 slot="trigger">Trigger 3</h3>
-      <kemet-icon slot="icon" icon="chevron-down" size="18"></kemet-icon>
-      <div slot="body">
-        <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
-      </div>
-    </kemet-accordion-panel>
-  </kemet-accordion>
-`;
-export const Standard = {
-    render: args => Template(args),
-    args: {
-        currentPanel: 0,
-        togglePanels: true,
-    },
-};
-//# sourceMappingURL=stories.js.map

package/dist/src/components/kemet-accordion/stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-accordion/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,yBAAyB,CAAC;AAEjC,OAAO,0BAA0B,CAAC;AAClC,OAAO,yBAAyB,CAAC;AACjC,OAAO,+BAA+B,CAAC;AAEvC,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,wBAAwB;IAC/B,SAAS,EAAE,iBAAiB;CAC7B,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,EAChB,YAAY,GAAG,KAAK,GACrB,EAAE,EAAE,CAAC,IAAI,CAAA;oCAC0B,YAAY;;;;;;;;;;;;;;;;;;;;;;;CAuB/C,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC9B,IAAI,EAAE;QACJ,YAAY,EAAE,CAAC;QACf,YAAY,EAAE,IAAI;KACnB;CACF,CAAC","sourcesContent":["import { html } from 'lit';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport './kemet-accordion';\nimport './kemet-accordion-panel';\n\nimport '../kemet-tabs/kemet-tabs';\nimport '../kemet-tabs/kemet-tab';\nimport '../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n  title: 'Components / Accordion',\n  component: 'kemet-accordion',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = ({\n  togglePanels = false,\n}) => html`\n  <kemet-accordion ?toggle-panels=${togglePanels} kemet-elevation=\"layer4\">\n    <kemet-accordion-panel>\n      <h3 slot=\"trigger\">Trigger 1</h3>\n      <kemet-icon slot=\"icon\" icon=\"chevron-down\" size=\"18\"></kemet-icon>\n      <div slot=\"body\">\n        <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>\n      </div>\n    </kemet-accordion-panel>\n    <kemet-accordion-panel>\n      <h3 slot=\"trigger\">Trigger 2</h3>\n      <kemet-icon slot=\"icon\" icon=\"chevron-down\" size=\"18\"></kemet-icon>\n      <div slot=\"body\">\n        <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>\n      </div>\n    </kemet-accordion-panel>\n    <kemet-accordion-panel>\n      <h3 slot=\"trigger\">Trigger 3</h3>\n      <kemet-icon slot=\"icon\" icon=\"chevron-down\" size=\"18\"></kemet-icon>\n      <div slot=\"body\">\n        <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>\n      </div>\n    </kemet-accordion-panel>\n  </kemet-accordion>\n`;\n\nexport const Standard: Story = {\n  render: args => Template(args),\n  args: {\n    currentPanel: 0,\n    togglePanels: true,\n  },\n};\n"]}