kemet-ui 1.4.0 → 2.0.1

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

@@ -0,0 +1,44 @@
+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/components/kemet-accordion/stories.js.map

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

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

@@ -0,0 +1,2 @@
+export declare const stylesBase: import("lit").CSSResult;
+export declare const stylesPanel: import("lit").CSSResult;

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

@@ -0,0 +1,42 @@
+import { css } from 'lit';
+export const stylesBase = css `
+:host {
+  display: block;
+}
+`;
+export const stylesPanel = css `
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  :host {
+    display: block;
+    padding: 1.5rem 1rem;
+    border-bottom: 1px solid var(--kemet-color-background);
+  }
+
+  .trigger {
+    color: inherit;
+    cursor: pointer;
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: 1fr auto;
+    width: 100%;
+    text-align: left;
+    padding: 0;
+    border: none;
+    background: none;
+  }
+
+  .body {
+    overflow: hidden;
+    transition: all var(--kemet-accordion-panel-transition-speed, 300ms) ease;
+  }
+
+  ::slotted([slot='body']) {
+    padding: 1rem 0;
+  }
+`;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-accordion/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAI,GAAG,CAAA;;;;CAI7B,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkC7B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesBase =  css`\n:host {\n  display: block;\n}\n`;\n\nexport const stylesPanel = css`\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n\n  :host {\n    display: block;\n    padding: 1.5rem 1rem;\n    border-bottom: 1px solid var(--kemet-color-background);\n  }\n\n  .trigger {\n    color: inherit;\n    cursor: pointer;\n    display: grid;\n    gap: 1rem;\n    grid-template-columns: 1fr auto;\n    width: 100%;\n    text-align: left;\n    padding: 0;\n    border: none;\n    background: none;\n  }\n\n  .body {\n    overflow: hidden;\n    transition: all var(--kemet-accordion-panel-transition-speed, 300ms) ease;\n  }\n\n  ::slotted([slot='body']) {\n    padding: 1rem 0;\n  }\n`;\n"]}

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

@@ -0,0 +1,9 @@
+export interface KemetAccordionInterface {
+    currentPanel: number;
+    togglePanels: boolean;
+}
+export interface KemetAccordionPanelInterface {
+    opened: boolean;
+    maxHeight: string;
+    slug: string;
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/kemet-accordion/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface KemetAccordionInterface {\n  currentPanel: number,\n  togglePanels: boolean,\n}\n\nexport interface KemetAccordionPanelInterface {\n  opened: boolean,\n  maxHeight: string,\n  slug: string,\n}\n"]}

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

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import '../kemet-alert';
+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/components/kemet-alert/docs/stories.js

@@ -0,0 +1,77 @@
+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/docs/stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-alert/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAGzD,OAAO,gBAAgB,CAAC;AAExB,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAE1C,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\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-alert/kemet-alert.d.ts

@@ -0,0 +1,52 @@
+import { LitElement } from 'lit';
+import { TypeStatus } from './types';
+/**
+ * @since 1.4.0
+ * @status stable
+ *
+ * @tagname kemet-alert
+ * @summary Calls out important messages and notifications.
+ *
+ * @prop {boolean} opened - Determines if the alert is opened or not.
+ * @prop {boolean} reveal - Fades in the alert when opened.
+ * @prop {boolean} closable - Adds a close button to the alert.
+ * @prop {string} borderStatus - Adds a border that indicates the status.
+ * @prop {boolean} hidden - Hides the element from document flow.
+ * @prop {string} overlay - Fixes the alert over content in specified position.
+ *
+ * @slot default - The contents of the alert.
+ *
+ * @event kemet-alert-opened - Fires when alert is opened.
+ * @event kemet-alert-closed - Fires when alert is closed.
+ *
+ * @csspart close - Container for the close button.
+ *
+ * @cssproperty --kemet-alert-padding - The padding on the alert. Default: 1rem.
+ * @cssproperty --kemet-alert-border-thickness - The thickness of the border. Default: 4px.
+ * @cssproperty --kemet-alert-status-color - The status color. Default: inherit.
+ * @cssproperty --kemet-alert-gap - The alert's gap. Default: var(--kemet-alert-padding).
+ * @cssproperty --kemet-alert-align-items - The alert's alignment. Default: center.
+ * @cssproperty --kemet-alert-border - The border around the alert. Default: 1px solid var(--kemet-color-gray2).
+ *
+ */
+export default class KemetAlert extends LitElement {
+    static styles: import("lit").CSSResult[];
+    opened: boolean;
+    reveal: boolean;
+    closable: boolean;
+    status: TypeStatus;
+    borderStatus: string;
+    hidden: boolean;
+    overlay: string;
+    shouldUpdate(prevProps: any): boolean;
+    firstUpdated(): void;
+    updated(prevProps: any): void;
+    render(): import("lit-html").TemplateResult<1>;
+    makeCloseBtn(): import("lit-html").TemplateResult<1>;
+    handleMotion(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-alert': KemetAlert;
+    }
+}

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

@@ -1,7 +1,8 @@
+import { __decorate } from "tslib";
 import { html, LitElement } from 'lit';
-import { emitEvent } from '../../utilities/misc/events.js';
-import { stylesBase } from './styles.js';
-
+import { customElement, property } from 'lit/decorators.js';
+import { emitEvent } from '../../utilities/misc/events';
+import { stylesBase } from './styles';
 /**
  * @since 1.4.0
  * @status stable
@@ -31,46 +32,27 @@ import { stylesBase } from './styles.js';
  * @cssproperty --kemet-alert-border - The border around the alert. Default: 1px solid var(--kemet-color-gray2).
  *
  */
-
-export default class KemetAlert extends LitElement {
-  static get styles() {
-    return [stylesBase];
-  }
-
-  static get properties() {
-    return {
-      opened: { type: Boolean, reflect: true },
-      reveal: { type: Boolean, reflect: true },
-      closable: { type: Boolean, reflect: true },
-      borderStatus: { type: String, reflect: true, attribute: 'border-status' },
-      hidden: { type: Boolean, reflect: true },
-      overlay: { type: String, reflect: true },
-    };
-  }
-
-  shouldUpdate(prevProps) {
-    if (prevProps.has('opened') && !prevProps.get('opened')) {
-      this.hidden = false;
-      this.reveal = true;
+let KemetAlert = class KemetAlert extends LitElement {
+    shouldUpdate(prevProps) {
+        if (prevProps.has('opened') && !prevProps.get('opened')) {
+            this.hidden = false;
+            this.reveal = true;
+        }
+        return true;
     }
-
-    return true;
-  }
-
-  firstUpdated() {
-    this.handleMotion();
-  }
-
-  updated(prevProps) {
-    if (!prevProps.get('opened') && this.opened === true) {
-      emitEvent(this, 'kemet-alert-opened', this);
-    } else {
-      emitEvent(this, 'kemet-alert-closed', this);
+    firstUpdated() {
+        this.handleMotion();
     }
-  }
-
-  render() {
-    return html`
+    updated(prevProps) {
+        if (!prevProps.get('opened') && this.opened === true) {
+            emitEvent(this, 'kemet-alert-opened', this);
+        }
+        else {
+            emitEvent(this, 'kemet-alert-closed', this);
+        }
+    }
+    render() {
+        return html `
       <slot name="icon"></slot>
       <div>
         <slot></slot>
@@ -79,28 +61,48 @@ export default class KemetAlert extends LitElement {
         ${this.makeCloseBtn()}
       </div>
     `;
-  }
-
-  makeCloseBtn() {
-    if (this.closable) {
-      return html`<kemet-icon icon="x-lg" @click=${() => { this.opened = false; }}></kemet-icon>`;
     }
-
-    return null;
-  }
-
-  handleMotion() {
-    this.addEventListener('transitionend', () => {
-      if (!this.opened) {
-        this.hidden = true;
-      }
-    });
-
-    this.addEventListener('animationend', () => {
-      this.reveal = false;
-    });
-  }
-}
-
-// eslint-disable-next-line no-unused-expressions
-customElements.get('kemet-alert') || customElements.define('kemet-alert', KemetAlert);
+    makeCloseBtn() {
+        if (this.closable) {
+            return html `<kemet-icon icon="x-lg" @click=${() => { this.opened = false; }}></kemet-icon>`;
+        }
+        return null;
+    }
+    handleMotion() {
+        this.addEventListener('transitionend', () => {
+            if (!this.opened) {
+                this.hidden = true;
+            }
+        });
+        this.addEventListener('animationend', () => {
+            this.reveal = false;
+        });
+    }
+};
+KemetAlert.styles = [stylesBase];
+__decorate([
+    property({ type: Boolean, reflect: true })
+], KemetAlert.prototype, "opened", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], KemetAlert.prototype, "reveal", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], KemetAlert.prototype, "closable", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], KemetAlert.prototype, "status", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'border-status' })
+], KemetAlert.prototype, "borderStatus", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], KemetAlert.prototype, "hidden", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], KemetAlert.prototype, "overlay", void 0);
+KemetAlert = __decorate([
+    customElement('kemet-alert')
+], KemetAlert);
+export default KemetAlert;
+//# sourceMappingURL=kemet-alert.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kemet-alert.js","sourceRoot":"","sources":["../../../src/components/kemet-alert/kemet-alert.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGtC;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAGH,IAAqB,UAAU,GAA/B,MAAqB,UAAW,SAAQ,UAAU;IAwBhD,YAAY,CAAC,SAAS;QACpB,IAAI,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;YACvD,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;YACpB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;SACpB;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAED,YAAY;QACV,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,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,oBAAoB,EAAE,IAAI,CAAC,CAAC;SAC7C;aAAM;YACL,SAAS,CAAC,IAAI,EAAE,oBAAoB,EAAE,IAAI,CAAC,CAAC;SAC7C;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;UAML,IAAI,CAAC,YAAY,EAAE;;KAExB,CAAC;IACJ,CAAC;IAED,YAAY;QACV,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO,IAAI,CAAA,kCAAkC,GAAG,EAAE,GAAG,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,CAAC,CAAC,gBAAgB,CAAC;SAC7F;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAED,YAAY;QACV,IAAI,CAAC,gBAAgB,CAAC,eAAe,EAAE,GAAG,EAAE;YAC1C,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;gBAChB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;aACpB;QACH,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,gBAAgB,CAAC,cAAc,EAAE,GAAG,EAAE;YACzC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACtB,CAAC,CAAC,CAAC;IACL,CAAC;CACF,CAAA;AA3EQ,iBAAM,GAAG,CAAC,UAAU,CAAC,CAAC;AAG7B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAC3B;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAC3B;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CACzB;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CACvB;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;gDACjD;AAGrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAC3B;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAC1B;AAtBG,UAAU;IAD9B,aAAa,CAAC,aAAa,CAAC;GACR,UAAU,CA4E9B;eA5EoB,UAAU","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { stylesBase } from './styles';\nimport { TypeStatus } from './types';\n\n/**\n * @since 1.4.0\n * @status stable\n *\n * @tagname kemet-alert\n * @summary Calls out important messages and notifications.\n *\n * @prop {boolean} opened - Determines if the alert is opened or not.\n * @prop {boolean} reveal - Fades in the alert when opened.\n * @prop {boolean} closable - Adds a close button to the alert.\n * @prop {string} borderStatus - Adds a border that indicates the status.\n * @prop {boolean} hidden - Hides the element from document flow.\n * @prop {string} overlay - Fixes the alert over content in specified position.\n *\n * @slot default - The contents of the alert.\n *\n * @event kemet-alert-opened - Fires when alert is opened.\n * @event kemet-alert-closed - Fires when alert is closed.\n *\n * @csspart close - Container for the close button.\n *\n * @cssproperty --kemet-alert-padding - The padding on the alert. Default: 1rem.\n * @cssproperty --kemet-alert-border-thickness - The thickness of the border. Default: 4px.\n * @cssproperty --kemet-alert-status-color - The status color. Default: inherit.\n * @cssproperty --kemet-alert-gap - The alert's gap. Default: var(--kemet-alert-padding).\n * @cssproperty --kemet-alert-align-items - The alert's alignment. Default: center.\n * @cssproperty --kemet-alert-border - The border around the alert. Default: 1px solid var(--kemet-color-gray2).\n *\n */\n\n@customElement('kemet-alert')\nexport default class KemetAlert extends LitElement {\n  static styles = [stylesBase];\n\n  @property({ type: Boolean, reflect: true })\n  opened: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  reveal: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  closable: boolean;\n\n  @property({ type: String, reflect: true })\n  status: TypeStatus;\n\n  @property({ type: String, reflect: true, attribute: 'border-status' })\n  borderStatus: string;\n\n  @property({ type: Boolean, reflect: true })\n  hidden: boolean;\n\n  @property({ type: String, reflect: true })\n  overlay: string;\n\n  shouldUpdate(prevProps) {\n    if (prevProps.has('opened') && !prevProps.get('opened')) {\n      this.hidden = false;\n      this.reveal = true;\n    }\n\n    return true;\n  }\n\n  firstUpdated() {\n    this.handleMotion();\n  }\n\n  updated(prevProps) {\n    if (!prevProps.get('opened') && this.opened === true) {\n      emitEvent(this, 'kemet-alert-opened', this);\n    } else {\n      emitEvent(this, 'kemet-alert-closed', this);\n    }\n  }\n\n  render() {\n    return html`\n      <slot name=\"icon\"></slot>\n      <div>\n        <slot></slot>\n      </div>\n      <div class=\"close\" part=\"close\">\n        ${this.makeCloseBtn()}\n      </div>\n    `;\n  }\n\n  makeCloseBtn() {\n    if (this.closable) {\n      return html`<kemet-icon icon=\"x-lg\" @click=${() => { this.opened = false; }}></kemet-icon>`;\n    }\n\n    return null;\n  }\n\n  handleMotion() {\n    this.addEventListener('transitionend', () => {\n      if (!this.opened) {\n        this.hidden = true;\n      }\n    });\n\n    this.addEventListener('animationend', () => {\n      this.reveal = false;\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-alert': KemetAlert\n  }\n}\n"]}

package/dist/components/kemet-alert/styles.d.ts

@@ -0,0 +1 @@
+export declare const stylesBase: import("lit").CSSResult;

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

@@ -1,6 +1,5 @@
 import { css } from 'lit';
-
-export const stylesBase = css`
+export const stylesBase = css `
   :host {
     --kemet-alert-padding: 1rem;
     --kemet-alert-border-thickness: 4px;
@@ -12,7 +11,7 @@ export const stylesBase = css`
     align-items: var(--kemet-alert-align-items, center);
     opacity: 0;
     padding: var(--kemet-alert-padding);
-    border: var(--kemet-alert-border, 1px solid var(--kemet-color-gray2));
+    border: var(--kemet-alert-border, 1px solid var(--kemet-alert-status-color));
     transition: opacity 300ms ease;
   }
 
@@ -37,7 +36,7 @@ export const stylesBase = css`
   }
 
   :host([status="standard"]) {
-    --kemet-alert-status-color: var(--kemet-color-black);
+    --kemet-alert-status-color: var(--kemet-color-text);
   }
 
   :host([status="primary"]) {
@@ -102,3 +101,4 @@ export const stylesBase = css`
     to { opacity: 1; }
   }
 `;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-alert/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqG5B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesBase = css`\n  :host {\n    --kemet-alert-padding: 1rem;\n    --kemet-alert-border-thickness: 4px;\n    --kemet-alert-status-color: inherit;\n\n    display: flex;\n    grid-template-columns: auto 1fr auto;\n    gap: var(--kemet-alert-gap, var(--kemet-alert-padding));\n    align-items: var(--kemet-alert-align-items, center);\n    opacity: 0;\n    padding: var(--kemet-alert-padding);\n    border: var(--kemet-alert-border, 1px solid var(--kemet-alert-status-color));\n    transition: opacity 300ms ease;\n  }\n\n  :host([opened]) {\n    opacity: 1;\n  }\n\n  :host([border-status=\"top\"]) {\n    border-top: var(--kemet-alert-border-thickness) solid var(--kemet-alert-status-color);\n  }\n\n  :host([border-status=\"right\"]) {\n    border-right: var(--kemet-alert-border-thickness) solid var(--kemet-alert-status-color);\n  }\n\n  :host([border-status=\"bottom\"]) {\n    border-bottom: var(--kemet-alert-border-thickness) solid var(--kemet-alert-status-color);\n  }\n\n  :host([border-status=\"left\"]) {\n    border-left: var(--kemet-alert-border-thickness) solid var(--kemet-alert-status-color);\n  }\n\n  :host([status=\"standard\"]) {\n    --kemet-alert-status-color: var(--kemet-color-text);\n  }\n\n  :host([status=\"primary\"]) {\n    --kemet-alert-status-color: var(--kemet-color-primary);\n  }\n\n  :host([status=\"success\"]) {\n    --kemet-alert-status-color: var(--kemet-color-success);\n  }\n\n  :host([status=\"warning\"]) {\n    --kemet-alert-status-color: var(--kemet-color-warning);\n  }\n\n  :host([status=\"error\"]) {\n    --kemet-alert-status-color: var(--kemet-color-error);\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  :host([reveal]) {\n    animation: fadeIn 300ms ease forwards;\n  }\n\n  :host([overlay]) {\n    position: fixed;\n  }\n\n  :host([overlay*=\"full\"]) {\n    width: 100%;\n  }\n\n  :host([overlay*=\"top\"]) {\n    top: 0;\n  }\n\n  :host([overlay*=\"bottom\"]) {\n    bottom: 0;\n  }\n\n  :host([overlay*=\"left\"]) {\n    left: 0;\n  }\n\n  :host([overlay*=\"right\"]) {\n    right: 0;\n  }\n\n  .close {\n    cursor: pointer;\n    margin-left: auto;\n  }\n\n  ::slotted(kemet-icon) {\n    color: var(--kemet-alert-status-color);\n  }\n\n  @keyframes fadeIn {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n`;\n"]}

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

@@ -0,0 +1,10 @@
+export declare type TypeStatus = 'standard' | 'error' | 'success' | 'warning' | 'primary';
+export interface KemetAlertInterface {
+    opened: boolean;
+    reveal: boolean;
+    closable: boolean;
+    borderStatus: string;
+    hidden: boolean;
+    overlay: string;
+    status: TypeStatus;
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/kemet-alert/types.ts"],"names":[],"mappings":"","sourcesContent":["export type TypeStatus = 'standard' | 'error' | 'success' | 'warning' | 'primary';\n\nexport interface KemetAlertInterface {\n  opened: boolean,\n  reveal: boolean,\n  closable: boolean,\n  borderStatus: string,\n  hidden: boolean,\n  overlay: string,\n  status: TypeStatus,\n}\n"]}

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

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import '../kemet-avatar';
+import '../kemet-avatars';
+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/docs/stories.js

@@ -0,0 +1,86 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import '../kemet-avatar';
+import '../kemet-avatars';
+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)}"
+  >
+    ${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 gray1"></kemet-avatar>\n`);
+    }
+    return html `
+    <style>
+      kemet-avatars {
+        --kemet-avatars-squeeze: ${squeeze};
+      }
+    </style>
+    <kemet-avatars>
+      ${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) => TemplateMultiple(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/docs/stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-avatar/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAGzD,OAAO,iBAAiB,CAAC;AACzB,OAAO,kBAAkB,CAAC;AAE1B,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAE1C,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,gBAAgB,CAAC,IAAI,CAAC;IAC7C,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';\nimport '../kemet-avatars';\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  >\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 gray1\"></kemet-avatar>\\n`);\n  }\n\n  return html`\n    <style>\n      kemet-avatars {\n        --kemet-avatars-squeeze: ${squeeze};\n      }\n    </style>\n    <kemet-avatars>\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) => TemplateMultiple(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"]}