kemet-ui 1.4.0 → 2.0.0

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

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

@@ -0,0 +1,85 @@
+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/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;AAEzB,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,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/components/kemet-avatar/kemet-avatar.d.ts

@@ -0,0 +1,43 @@
+import { LitElement } from 'lit';
+/**
+ * @since 1.4.0
+ * @status stable
+ *
+ * @tagname kemet-avatar
+ * @summary A representation of a person or thing.
+ *
+ * @prop {string} size - The size in pixels.
+ * @prop {string} image - Url to an image.
+ * @prop {string} label - Labels the avatar.
+ * @prop {string} initials - Initials of the user.
+ * @prop {boolean} circle - Displays in a circle.
+ * @prop {boolean} rounded - Displays with rounded corners
+ *
+ * @slot status - A slot for an icon or element that indicates the status of the avatar.
+ *
+ * @csspart initials - Contains the initials for the avatar.
+ *
+ * @cssproperty --kemet-avatar-color - The color of the text. Default: var(--kemet-color-white).
+ * @cssproperty --kemet-avatar-background-color - The color of the background. Default: var(--kemet-color-gray4).
+ * @cssproperty --kemet-avatar-rounded-radius - The border radius of the rounded type. Default: 1rem.
+ * @cssproperty --kemet-avatar-initials-margin - The space around the initials. Default: 1rem.
+ *
+ */
+export default class KemetAvatar extends LitElement {
+    static styles: import("lit").CSSResult[];
+    size: string;
+    image: string;
+    label: string;
+    initials: string;
+    circle: boolean;
+    rounded: boolean;
+    firstUpdated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    makeSize(): void;
+    makeContent(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-avatar': KemetAvatar;
+    }
+}

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

@@ -1,5 +1,7 @@
-import { html, css, LitElement } from 'lit';
-
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { stylesBase } from './styles';
 /**
  * @since 1.4.0
  * @status stable
@@ -24,95 +26,53 @@ import { html, css, LitElement } from 'lit';
  * @cssproperty --kemet-avatar-initials-margin - The space around the initials. Default: 1rem.
  *
  */
-
-export default class KemetAvatar extends LitElement {
-  static get styles() {
-    return [
-      css`
-        *,
-        *::before,
-        *::after {
-          box-sizing: border-box;
-        }
-
-        :host {
-          display: inline-flex;
-          color: var(--kemet-avatar-color, var(--kemet-color-white));
-          position: relative;
-          background-color: var(--kemet-avatar-background-color, var(--kemet-color-gray4));
-        }
-
-        :host([circle]) {
-          border-radius: 50%;
-        }
-
-        :host([circle]) > * {
-          border-radius: 50%;
-        }
-
-        :host([rounded]) {
-          border-radius: var(--kemet-avatar-rounded-radius, 1rem);
-        }
-
-        :host([rounded]) > * {
-          border-radius: var(--kemet-avatar-rounded-radius, 1rem);
-        }
-
-        .initials {
-          margin: var(--kemet-avatar-initials-margin, 1rem);
-        }
-
-        ::slotted(kemet-badge) {
-          position: absolute;
-          bottom: 0;
-          right: 0;
-          border-radius: 50%;
-        }
-      `,
-    ];
-  }
-
-  static get properties() {
-    return {
-      size: { type: Number },
-      image: { type: String },
-      label: { type: String },
-      initials: { type: String },
-      circle: { type: Boolean, reflect: true },
-      rounded: { type: Boolean, reflect: true },
-    };
-  }
-
-  firstUpdated() {
-    this.makeSize();
-  }
-
-  render() {
-    return html`
+let KemetAvatar = class KemetAvatar extends LitElement {
+    firstUpdated() {
+        this.makeSize();
+    }
+    render() {
+        return html `
       ${this.makeContent()}
       <slot name="status"></slot>
     `;
-  }
-
-  makeSize() {
-    if (this.size) {
-      this.style.width = `${this.size}px`;
-      this.style.height = `${this.size}px`;
     }
-  }
-
-  makeContent() {
-    if (this.image) {
-      return html`<img src=${this.image} alt=${this.label} />`;
+    makeSize() {
+        if (this.size) {
+            this.style.width = `${this.size}px`;
+            this.style.height = `${this.size}px`;
+        }
     }
-
-    if (this.initials) {
-      return html`<div part="initials" class="initials">${this.initials}</div>`;
+    makeContent() {
+        if (this.image) {
+            return html `<img src=${this.image} alt=${this.label} />`;
+        }
+        if (this.initials) {
+            return html `<div part="initials" class="initials">${this.initials}</div>`;
+        }
+        return html `<slot></slot>`;
     }
-
-    return html`<slot></slot>`;
-  }
-}
-
-// eslint-disable-next-line no-unused-expressions
-customElements.get('kemet-avatar') || customElements.define('kemet-avatar', KemetAvatar);
+};
+KemetAvatar.styles = [stylesBase];
+__decorate([
+    property({ type: String })
+], KemetAvatar.prototype, "size", void 0);
+__decorate([
+    property({ type: String })
+], KemetAvatar.prototype, "image", void 0);
+__decorate([
+    property({ type: String })
+], KemetAvatar.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], KemetAvatar.prototype, "initials", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], KemetAvatar.prototype, "circle", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], KemetAvatar.prototype, "rounded", void 0);
+KemetAvatar = __decorate([
+    customElement('kemet-avatar')
+], KemetAvatar);
+export default KemetAvatar;
+//# sourceMappingURL=kemet-avatar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kemet-avatar.js","sourceRoot":"","sources":["../../../src/components/kemet-avatar/kemet-avatar.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,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAGH,IAAqB,WAAW,GAAhC,MAAqB,WAAY,SAAQ,UAAU;IAqBjD,YAAY;QACV,IAAI,CAAC,QAAQ,EAAE,CAAC;IAClB,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,WAAW,EAAE;;KAErB,CAAC;IACJ,CAAC;IAED,QAAQ;QACN,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC;YACpC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC;SACtC;IACH,CAAC;IAED,WAAW;QACT,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,OAAO,IAAI,CAAA,YAAY,IAAI,CAAC,KAAK,QAAQ,IAAI,CAAC,KAAK,KAAK,CAAC;SAC1D;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO,IAAI,CAAA,yCAAyC,IAAI,CAAC,QAAQ,QAAQ,CAAC;SAC3E;QAED,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;CACF,CAAA;AAjDQ,kBAAM,GAAG,CAAC,UAAU,CAAC,CAAC;AAG7B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCACd;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACb;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACb;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CACV;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAC3B;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAC1B;AAnBE,WAAW;IAD/B,aAAa,CAAC,cAAc,CAAC;GACT,WAAW,CAkD/B;eAlDoB,WAAW","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { stylesBase } from './styles';\n\n/**\n * @since 1.4.0\n * @status stable\n *\n * @tagname kemet-avatar\n * @summary A representation of a person or thing.\n *\n * @prop {string} size - The size in pixels.\n * @prop {string} image - Url to an image.\n * @prop {string} label - Labels the avatar.\n * @prop {string} initials - Initials of the user.\n * @prop {boolean} circle - Displays in a circle.\n * @prop {boolean} rounded - Displays with rounded corners\n *\n * @slot status - A slot for an icon or element that indicates the status of the avatar.\n *\n * @csspart initials - Contains the initials for the avatar.\n *\n * @cssproperty --kemet-avatar-color - The color of the text. Default: var(--kemet-color-white).\n * @cssproperty --kemet-avatar-background-color - The color of the background. Default: var(--kemet-color-gray4).\n * @cssproperty --kemet-avatar-rounded-radius - The border radius of the rounded type. Default: 1rem.\n * @cssproperty --kemet-avatar-initials-margin - The space around the initials. Default: 1rem.\n *\n */\n\n@customElement('kemet-avatar')\nexport default class KemetAvatar extends LitElement {\n  static styles = [stylesBase];\n\n  @property({ type: String })\n  size: string;\n\n  @property({ type: String })\n  image: string;\n\n  @property({ type: String })\n  label: string;\n\n  @property({ type: String })\n  initials: string;\n\n  @property({ type: Boolean, reflect: true })\n  circle: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  rounded: boolean;\n\n  firstUpdated() {\n    this.makeSize();\n  }\n\n  render() {\n    return html`\n      ${this.makeContent()}\n      <slot name=\"status\"></slot>\n    `;\n  }\n\n  makeSize() {\n    if (this.size) {\n      this.style.width = `${this.size}px`;\n      this.style.height = `${this.size}px`;\n    }\n  }\n\n  makeContent() {\n    if (this.image) {\n      return html`<img src=${this.image} alt=${this.label} />`;\n    }\n\n    if (this.initials) {\n      return html`<div part=\"initials\" class=\"initials\">${this.initials}</div>`;\n    }\n\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-avatar': KemetAvatar\n  }\n}\n"]}

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

@@ -0,0 +1,20 @@
+import { LitElement } from 'lit';
+/**
+ * @since 1.4.0
+ * @status stable
+ *
+ * @tagname kemet-avatars
+ * @summary Groups multiple avatars.
+ *
+ * @cssproperty --kemet-avatars-squeeze - The space between avatars. Default: -1.5rem.
+ *
+ */
+export default class KemetAvatars extends LitElement {
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-avatars': KemetAvatars;
+    }
+}

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

@@ -1,5 +1,7 @@
-import { html, css, LitElement } from 'lit';
-
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { stylesAvatars } from './styles';
 /**
  * @since 1.4.0
  * @status stable
@@ -10,32 +12,14 @@ import { html, css, LitElement } from 'lit';
  * @cssproperty --kemet-avatars-squeeze - The space between avatars. Default: -1.5rem.
  *
  */
-
-export default class KemetAvatars extends LitElement {
-  static get styles() {
-    return [
-      css`
-        *,
-        *::before,
-        *::after {
-          box-sizing: border-box;
-        }
-
-        :host {
-          display: inline-flex;
-        }
-
-        ::slotted(kemet-avatar:not(:first-of-type)) {
-          margin-left: var(--kemet-avatars-squeeze, -1.5rem);
-        }
-      `,
-    ];
-  }
-
-  render() {
-    return html`<slot></slot>`;
-  }
-}
-
-// eslint-disable-next-line no-unused-expressions
-customElements.get('kemet-avatars') || customElements.define('kemet-avatars', KemetAvatars);
+let KemetAvatars = class KemetAvatars extends LitElement {
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+KemetAvatars.styles = [stylesAvatars];
+KemetAvatars = __decorate([
+    customElement('kemet-avatars')
+], KemetAvatars);
+export default KemetAvatars;
+//# sourceMappingURL=kemet-avatars.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kemet-avatars.js","sourceRoot":"","sources":["../../../src/components/kemet-avatar/kemet-avatars.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC;;;;;;;;;GASG;AAGH,IAAqB,YAAY,GAAjC,MAAqB,YAAa,SAAQ,UAAU;IAGlD,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;CACF,CAAA;AALQ,mBAAM,GAAG,CAAC,aAAa,CAAC,CAAC;AADb,YAAY;IADhC,aAAa,CAAC,eAAe,CAAC;GACV,YAAY,CAMhC;eANoB,YAAY","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { stylesAvatars } from './styles';\n\n/**\n * @since 1.4.0\n * @status stable\n *\n * @tagname kemet-avatars\n * @summary Groups multiple avatars.\n *\n * @cssproperty --kemet-avatars-squeeze - The space between avatars. Default: -1.5rem.\n *\n */\n\n@customElement('kemet-avatars')\nexport default class KemetAvatars extends LitElement {\n  static styles = [stylesAvatars];\n\n  render() {\n    return html`<slot></slot>`;\n  }\n}\n\n// eslint-disable-next-line no-unused-expressions\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-avatars': KemetAvatars\n  }\n}\n"]}

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

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

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

@@ -0,0 +1 @@
+{"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/components/kemet-avatar/styles.d.ts

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

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

@@ -0,0 +1,58 @@
+import { css } from 'lit';
+export const stylesBase = css `
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  :host {
+    display: inline-flex;
+    color: var(--kemet-avatar-color, var(--kemet-color-white));
+    position: relative;
+    background-color: var(--kemet-avatar-background-color, var(--kemet-color-gray4));
+  }
+
+  :host([circle]) {
+    border-radius: 50%;
+  }
+
+  :host([circle]) > * {
+    border-radius: 50%;
+  }
+
+  :host([rounded]) {
+    border-radius: var(--kemet-avatar-rounded-radius, 1rem);
+  }
+
+  :host([rounded]) > * {
+    border-radius: var(--kemet-avatar-rounded-radius, 1rem);
+  }
+
+  .initials {
+    margin: var(--kemet-avatar-initials-margin, 1rem);
+  }
+
+  ::slotted(kemet-badge) {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    border-radius: 50%;
+  }
+`;
+export const stylesAvatars = css `
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  :host {
+    display: inline-flex;
+  }
+
+  ::slotted(kemet-avatar:not(:first-of-type)) {
+    margin-left: var(--kemet-avatars-squeeze, -1.5rem);
+  }
+`;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-avatar/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwC5B,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;CAc/B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesBase = css`\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n\n  :host {\n    display: inline-flex;\n    color: var(--kemet-avatar-color, var(--kemet-color-white));\n    position: relative;\n    background-color: var(--kemet-avatar-background-color, var(--kemet-color-gray4));\n  }\n\n  :host([circle]) {\n    border-radius: 50%;\n  }\n\n  :host([circle]) > * {\n    border-radius: 50%;\n  }\n\n  :host([rounded]) {\n    border-radius: var(--kemet-avatar-rounded-radius, 1rem);\n  }\n\n  :host([rounded]) > * {\n    border-radius: var(--kemet-avatar-rounded-radius, 1rem);\n  }\n\n  .initials {\n    margin: var(--kemet-avatar-initials-margin, 1rem);\n  }\n\n  ::slotted(kemet-badge) {\n    position: absolute;\n    bottom: 0;\n    right: 0;\n    border-radius: 50%;\n  }\n`;\n\nexport const stylesAvatars = css`\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n\n  :host {\n    display: inline-flex;\n  }\n\n  ::slotted(kemet-avatar:not(:first-of-type)) {\n    margin-left: var(--kemet-avatars-squeeze, -1.5rem);\n  }\n`;\n"]}

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

@@ -0,0 +1,8 @@
+export interface KemetAvatar {
+    size: string;
+    image: string;
+    label: string;
+    initials: string;
+    circle: boolean;
+    rounded: boolean;
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/kemet-avatar/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface KemetAvatar {\n  size: string,\n  image: string,\n  label: string,\n  initials: string,\n  circle: boolean,\n  rounded: boolean,\n}\n"]}

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

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

@@ -0,0 +1,40 @@
+import { html } from 'lit';
+import '../kemet-badge';
+import '../../kemet-tabs/kemet-tabs';
+import '../../kemet-tabs/kemet-tab';
+import '../../kemet-tabs/kemet-tab-panel';
+const meta = {
+    title: 'Components / Badge',
+    component: 'kemet-Badge',
+};
+export default meta;
+const Template = ({ status = 'primary', pill = false, circle = false, circlePadding = 8, }) => html `
+  <kemet-badge status=${status} ?pill=${pill} ?circle=${circle} circle-padding=${circlePadding}>
+    ${circle ? html `<kemet-icon icon="cart3"></kemet-icon>&nbsp;3` : 'Badge'}
+  </kemet-badge>
+`;
+export const Standard = {
+    render: args => Template(args),
+    args: {
+        status: 'primary',
+        pill: false,
+        circle: false,
+        circlePadding: 8,
+    },
+    argTypes: {
+        status: {
+            control: { type: 'select' },
+            options: ['standard', 'primary', 'success', 'warning', 'error'],
+        },
+        pill: {
+            control: { type: 'boolean' },
+        },
+        circle: {
+            control: { type: 'boolean' },
+        },
+        circlePadding: {
+            control: { type: 'number' },
+        },
+    }
+};
+//# sourceMappingURL=stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-badge/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,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,MAAM,GAAG,SAAS,EAClB,IAAI,GAAG,KAAK,EACZ,MAAM,GAAG,KAAK,EACd,aAAa,GAAG,CAAC,GAClB,EAAE,EAAE,CAAC,IAAI,CAAA;wBACc,MAAM,UAAU,IAAI,YAAY,MAAM,mBAAmB,aAAa;MACxF,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA,+CAA+C,CAAC,CAAC,CAAC,OAAO;;CAE3E,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC9B,IAAI,EAAE;QACJ,MAAM,EAAE,SAAS;QACjB,IAAI,EAAE,KAAK;QACX,MAAM,EAAE,KAAK;QACb,aAAa,EAAE,CAAC;KACjB;IACD,QAAQ,EAAE;QACR,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,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;QACD,aAAa,EAAE;YACb,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;KACF;CACF,CAAC","sourcesContent":["import { html } from 'lit';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-badge';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n  title: 'Components / Badge',\n  component: 'kemet-Badge',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = ({\n  status = 'primary',\n  pill = false,\n  circle = false,\n  circlePadding = 8,\n}) => html`\n  <kemet-badge status=${status} ?pill=${pill} ?circle=${circle} circle-padding=${circlePadding}>\n    ${circle ? html`<kemet-icon icon=\"cart3\"></kemet-icon>&nbsp;3` : 'Badge'}\n  </kemet-badge>\n`;\n\nexport const Standard: Story = {\n  render: args => Template(args),\n  args: {\n    status: 'primary',\n    pill: false,\n    circle: false,\n    circlePadding: 8,\n  },\n  argTypes: {\n    status: {\n      control: { type: 'select' },\n      options: ['standard', 'primary', 'success', 'warning', 'error'],\n    },\n    pill: {\n      control: { type: 'boolean' },\n    },\n    circle: {\n      control: { type: 'boolean' },\n    },\n    circlePadding: {\n      control: { type: 'number' },\n    },\n  }\n};\n"]}