kemet-ui 2.0.2 → 3.0.0

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

@@ -1 +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"]}
+{"version":3,"file":"kemet-alert.js","sourceRoot":"","sources":["../../../src/components/kemet-alert/kemet-alert.ts"],"names":[],"mappings":"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","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.\n * @cssproperty --kemet-alert-border-thickness - The thickness of the border.\n * @cssproperty --kemet-alert-status-color - The status color. Default: inherit.\n * @cssproperty --kemet-alert-align-items - The alert's alignment.\n * @cssproperty --kemet-alert-border - The border around the alert.\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 = 'standard';\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.js

@@ -4,14 +4,16 @@ export const stylesBase = css `
     --kemet-alert-padding: 1rem;
     --kemet-alert-border-thickness: 4px;
     --kemet-alert-status-color: inherit;
+    --kemet-alert-align-items: center;
+    --kemet-alert-border: 1px solid rgb(var(--kemet-alert-status-color));
 
     display: flex;
     grid-template-columns: auto 1fr auto;
-    gap: var(--kemet-alert-gap, var(--kemet-alert-padding));
-    align-items: var(--kemet-alert-align-items, center);
+    gap: var(--kemet-alert-padding);
+    align-items: var(--kemet-alert-align-items);
     opacity: 0;
     padding: var(--kemet-alert-padding);
-    border: var(--kemet-alert-border, 1px solid var(--kemet-alert-status-color));
+    border: var(--kemet-alert-border);
     transition: opacity 300ms ease;
   }
 
@@ -20,19 +22,19 @@ export const stylesBase = css `
   }
 
   :host([border-status="top"]) {
-    border-top: var(--kemet-alert-border-thickness) solid var(--kemet-alert-status-color);
+    border-top: var(--kemet-alert-border-thickness) solid rgb(var(--kemet-alert-status-color));
   }
 
   :host([border-status="right"]) {
-    border-right: var(--kemet-alert-border-thickness) solid var(--kemet-alert-status-color);
+    border-right: var(--kemet-alert-border-thickness) solid rgb(var(--kemet-alert-status-color));
   }
 
   :host([border-status="bottom"]) {
-    border-bottom: var(--kemet-alert-border-thickness) solid var(--kemet-alert-status-color);
+    border-bottom: var(--kemet-alert-border-thickness) solid rgb(var(--kemet-alert-status-color));
   }
 
   :host([border-status="left"]) {
-    border-left: var(--kemet-alert-border-thickness) solid var(--kemet-alert-status-color);
+    border-left: var(--kemet-alert-border-thickness) solid rgb(var(--kemet-alert-status-color));
   }
 
   :host([status="standard"]) {
@@ -93,7 +95,7 @@ export const stylesBase = css `
   }
 
   ::slotted(kemet-icon) {
-    color: var(--kemet-alert-status-color);
+    color: rgb(var(--kemet-alert-status-color));
   }
 
   @keyframes fadeIn {

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

@@ -1 +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"]}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuG5B,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    --kemet-alert-align-items: center;\n    --kemet-alert-border: 1px solid rgb(var(--kemet-alert-status-color));\n\n    display: flex;\n    grid-template-columns: auto 1fr auto;\n    gap: var(--kemet-alert-padding);\n    align-items: var(--kemet-alert-align-items);\n    opacity: 0;\n    padding: var(--kemet-alert-padding);\n    border: var(--kemet-alert-border);\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 rgb(var(--kemet-alert-status-color));\n  }\n\n  :host([border-status=\"right\"]) {\n    border-right: var(--kemet-alert-border-thickness) solid rgb(var(--kemet-alert-status-color));\n  }\n\n  :host([border-status=\"bottom\"]) {\n    border-bottom: var(--kemet-alert-border-thickness) solid rgb(var(--kemet-alert-status-color));\n  }\n\n  :host([border-status=\"left\"]) {\n    border-left: var(--kemet-alert-border-thickness) solid rgb(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: rgb(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

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

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

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

@@ -8,4 +8,8 @@ declare const meta: Meta;
 export default meta;
 declare type Story = StoryObj;
 export declare const Standard: Story;
+export declare const Initials: Story;
+export declare const Image: Story;
+export declare const Circle: Story;
+export declare const Status: Story;
 export declare const Multiple: Story;

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

@@ -8,28 +8,48 @@ import '../../kemet-tabs/kemet-tab-panel';
 const meta = {
     title: 'Components / Avatar',
     component: 'kemet-avatar',
+    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 default meta;
-const Template = ({ icon, image, circle, rounded, initials, status, }) => html `
+const Template = (args) => html `
   <kemet-avatar
-    ?circle=${circle}
-    ?rounded=${rounded}
-    image="${ifDefined(image !== '' ? image : null)}"
-    initials="${ifDefined(initials !== '' ? initials : null)}"
+    ?circle=${args.circle}
+    ?rounded=${args.rounded}
+    image="${ifDefined(args.image !== '' ? args.image : null)}"
+    initials="${ifDefined(args.initials !== '' ? args.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}
+    ${args.icon !== '' && args.icon ? html `<kemet-icon icon=${args.icon} size="48" kemet-margin="xs"></kemet-icon>` : null}
+    ${args.status ? html `<kemet-badge slot="status" status="success" kemet-border="all-2 solid white"></kemet-badge>` : null}
   </kemet-avatar>
 `;
-const TemplateMultiple = ({ squeeze, numOfAvatars, }) => {
+const TemplateMultiple = (args) => {
     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`);
+    for (let i = 0; i < args.numOfAvatars; i += 1) {
+        avatars.push(html `<kemet-avatar circle image="https://via.placeholder.com/64x64" kemet-border="all-4 solid gray-50"></kemet-avatar>\n`);
     }
     return html `
     <style>
       kemet-avatars {
-        --kemet-avatars-squeeze: ${squeeze};
+        --kemet-avatars-squeeze: ${args.squeeze};
       }
     </style>
     <kemet-avatars>
@@ -38,34 +58,36 @@ const TemplateMultiple = ({ squeeze, numOfAvatars, }) => {
   `;
 };
 export const Standard = {
+    render: (args) => Template(args),
+    args: {
+        icon: 'person',
+    }
+};
+export const Initials = {
+    render: (args) => Template(args),
+    args: {
+        initials: 'KU',
+    }
+};
+export const Image = {
+    render: (args) => Template(args),
+    args: {
+        image: 'https://via.placeholder.com/64x64',
+    }
+};
+export const Circle = {
     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 Status = {
+    render: (args) => Template(args),
+    args: {
+        circle: true,
+        image: 'https://via.placeholder.com/64x64',
+        status: true,
     }
 };
 export const Multiple = {

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

@@ -1 +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"]}
+{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-avatar/docs/stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-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  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};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = (args) => html`\n  <kemet-avatar\n    ?circle=${args.circle}\n    ?rounded=${args.rounded}\n    image=\"${ifDefined(args.image !== '' ? args.image : null)}\"\n    initials=\"${ifDefined(args.initials !== '' ? args.initials : null)}\"\n  >\n    ${args.icon !== '' && args.icon ? html`<kemet-icon icon=${args.icon} size=\"48\" kemet-margin=\"xs\"></kemet-icon>` : null}\n    ${args.status ? html`<kemet-badge slot=\"status\" status=\"success\" kemet-border=\"all-2 solid white\"></kemet-badge>` : null}\n  </kemet-avatar>\n`;\n\nconst TemplateMultiple = (args) => {\n  const avatars = [];\n\n  for (let i = 0; i < args.numOfAvatars; i += 1) {\n    avatars.push(html`<kemet-avatar circle image=\"https://via.placeholder.com/64x64\" kemet-border=\"all-4 solid gray-50\"></kemet-avatar>\\n`);\n  }\n\n  return html`\n    <style>\n      kemet-avatars {\n        --kemet-avatars-squeeze: ${args.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    icon: 'person',\n  }\n};\n\nexport const Initials: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    initials: 'KU',\n  }\n};\n\nexport const Image: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    image: 'https://via.placeholder.com/64x64',\n  }\n};\n\nexport const Circle: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    circle: true,\n    image: 'https://via.placeholder.com/64x64',\n  }\n};\n\nexport const Status: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    circle: true,\n    image: 'https://via.placeholder.com/64x64',\n    status: true,\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"]}

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

@@ -17,10 +17,10 @@ import { LitElement } from 'lit';
  *
  * @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.
+ * @cssproperty --kemet-avatar-color - The color of the text.
+ * @cssproperty --kemet-avatar-background-color - The color of the background.
+ * @cssproperty --kemet-avatar-rounded-radius - The border radius of the rounded type.
+ * @cssproperty --kemet-avatar-initials-margin - The space around the initials.
  *
  */
 export default class KemetAvatar extends LitElement {

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

@@ -20,10 +20,10 @@ import { stylesBase } from './styles';
  *
  * @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.
+ * @cssproperty --kemet-avatar-color - The color of the text.
+ * @cssproperty --kemet-avatar-background-color - The color of the background.
+ * @cssproperty --kemet-avatar-rounded-radius - The border radius of the rounded type.
+ * @cssproperty --kemet-avatar-initials-margin - The space around the initials.
  *
  */
 let KemetAvatar = class KemetAvatar extends LitElement {

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

@@ -1 +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"]}
+{"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.\n * @cssproperty --kemet-avatar-background-color - The color of the background.\n * @cssproperty --kemet-avatar-rounded-radius - The border radius of the rounded type.\n * @cssproperty --kemet-avatar-initials-margin - The space around the initials.\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/styles.js

@@ -7,37 +7,42 @@ export const stylesBase = css `
   }
 
   :host {
+    --kemet-avatar-color: rgb(var(--kemet-color-white));
+    --kemet-avatar-background-color: rgb(var(--kemet-color-gray-300));
+    --kemet-avatar-rounded-radius: 1rem;
+    --kemet-avatar-initials-margin: 1rem;
+
     display: inline-flex;
-    color: var(--kemet-avatar-color, var(--kemet-color-white));
+    color: var(--kemet-color-white);
     position: relative;
-    background-color: var(--kemet-avatar-background-color, var(--kemet-color-gray4));
+    background-color: var(--kemet-avatar-background-color);
   }
 
   :host([circle]) {
-    border-radius: 50%;
+    border-radius: var(--kemet-border-radius-circle);
   }
 
   :host([circle]) > * {
-    border-radius: 50%;
+    border-radius: var(--kemet-border-radius-circle);
   }
 
   :host([rounded]) {
-    border-radius: var(--kemet-avatar-rounded-radius, 1rem);
+    border-radius: var(--kemet-avatar-rounded-radius);
   }
 
   :host([rounded]) > * {
-    border-radius: var(--kemet-avatar-rounded-radius, 1rem);
+    border-radius: var(--kemet-avatar-rounded-radius);
   }
 
   .initials {
-    margin: var(--kemet-avatar-initials-margin, 1rem);
+    margin: var(--kemet-avatar-initials-margin);
   }
 
   ::slotted(kemet-badge) {
     position: absolute;
     bottom: 0;
     right: 0;
-    border-radius: 50%;
+    border-radius: var(--kemet-border-radius-circle);
   }
 `;
 export const stylesAvatars = css `
@@ -48,11 +53,13 @@ export const stylesAvatars = css `
   }
 
   :host {
+    --kemet-avatars-squeeze: -1.5rem;
+
     display: inline-flex;
   }
 
   ::slotted(kemet-avatar:not(:first-of-type)) {
-    margin-left: var(--kemet-avatars-squeeze, -1.5rem);
+    margin-left: var(--kemet-avatars-squeeze);
   }
 `;
 //# sourceMappingURL=styles.js.map

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

@@ -1 +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"]}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6C5B,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;CAgB/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    --kemet-avatar-color: rgb(var(--kemet-color-white));\n    --kemet-avatar-background-color: rgb(var(--kemet-color-gray-300));\n    --kemet-avatar-rounded-radius: 1rem;\n    --kemet-avatar-initials-margin: 1rem;\n\n    display: inline-flex;\n    color: var(--kemet-color-white);\n    position: relative;\n    background-color: var(--kemet-avatar-background-color);\n  }\n\n  :host([circle]) {\n    border-radius: var(--kemet-border-radius-circle);\n  }\n\n  :host([circle]) > * {\n    border-radius: var(--kemet-border-radius-circle);\n  }\n\n  :host([rounded]) {\n    border-radius: var(--kemet-avatar-rounded-radius);\n  }\n\n  :host([rounded]) > * {\n    border-radius: var(--kemet-avatar-rounded-radius);\n  }\n\n  .initials {\n    margin: var(--kemet-avatar-initials-margin);\n  }\n\n  ::slotted(kemet-badge) {\n    position: absolute;\n    bottom: 0;\n    right: 0;\n    border-radius: var(--kemet-border-radius-circle);\n  }\n`;\n\nexport const stylesAvatars = css`\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n\n  :host {\n    --kemet-avatars-squeeze: -1.5rem;\n\n    display: inline-flex;\n  }\n\n  ::slotted(kemet-avatar:not(:first-of-type)) {\n    margin-left: var(--kemet-avatars-squeeze);\n  }\n`;\n"]}

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

@@ -3,7 +3,13 @@ import '../kemet-badge';
 import '../../kemet-tabs/kemet-tabs';
 import '../../kemet-tabs/kemet-tab';
 import '../../kemet-tabs/kemet-tab-panel';
+import '../../kemet-icon/kemet-icon';
 declare const meta: Meta;
 export default meta;
 declare type Story = StoryObj;
 export declare const Standard: Story;
+export declare const Pill: Story;
+export declare const Circle: Story;
+export declare const Success: Story;
+export declare const Warning: Story;
+export declare const Error: Story;

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

@@ -1,26 +1,13 @@
 import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import '../kemet-badge';
 import '../../kemet-tabs/kemet-tabs';
 import '../../kemet-tabs/kemet-tab';
 import '../../kemet-tabs/kemet-tab-panel';
+import '../../kemet-icon/kemet-icon';
 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,
-    },
+    component: 'kemet-badge',
     argTypes: {
         status: {
             control: { type: 'select' },
@@ -37,4 +24,53 @@ export const Standard = {
         },
     }
 };
+export default meta;
+const Template = (args) => html `
+  <kemet-badge status=${ifDefined(args.status)} ?pill=${args.pill} ?circle=${args.circle} circle-padding=${args.circlePadding}>
+    ${args.circle ? html `<kemet-icon icon="cart3"></kemet-icon>&nbsp;3` : 'Badge'}
+  </kemet-badge>
+`;
+// export const Standard: Story = {
+//   render: args => Template(args),
+//   args: {
+//     status: 'primary',
+//     pill: false,
+//     circle: false,
+//     circlePadding: 8,
+//   },
+// };
+export const Standard = {
+    render: args => Template(args),
+};
+export const Pill = {
+    render: args => Template(args),
+    args: {
+        pill: true,
+    },
+};
+export const Circle = {
+    render: args => Template(args),
+    args: {
+        circle: true,
+        circlePadding: 4,
+    },
+};
+export const Success = {
+    render: args => Template(args),
+    args: {
+        status: 'success',
+    },
+};
+export const Warning = {
+    render: args => Template(args),
+    args: {
+        status: 'warning',
+    },
+};
+export const Error = {
+    render: args => Template(args),
+    args: {
+        status: 'error',
+    },
+};
 //# sourceMappingURL=stories.js.map

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

@@ -1 +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"]}
+{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-badge/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAE3B,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAGzD,OAAO,gBAAgB,CAAC;AAExB,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAE1C,OAAO,6BAA6B,CAAC;AAErC,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,aAAa;IACxB,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;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;wBACP,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,IAAI,CAAC,IAAI,YAAY,IAAI,CAAC,MAAM,mBAAmB,IAAI,CAAC,aAAa;MACvH,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA,+CAA+C,CAAC,CAAC,CAAC,OAAO;;CAEhF,CAAC;AAEF,mCAAmC;AACnC,oCAAoC;AACpC,YAAY;AACZ,yBAAyB;AACzB,mBAAmB;AACnB,qBAAqB;AACrB,wBAAwB;AACxB,OAAO;AACP,KAAK;AAEL,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;CAC/B,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAU;IACzB,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC9B,IAAI,EAAE;QACJ,IAAI,EAAE,IAAI;KACX;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAU;IAC3B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC9B,IAAI,EAAE;QACJ,MAAM,EAAE,IAAI;QACZ,aAAa,EAAE,CAAC;KACjB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC9B,IAAI,EAAE;QACJ,MAAM,EAAE,SAAS;KAClB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC9B,IAAI,EAAE;QACJ,MAAM,EAAE,SAAS;KAClB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAU;IAC1B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC9B,IAAI,EAAE;QACJ,MAAM,EAAE,OAAO;KAChB;CACF,CAAC","sourcesContent":["import { html } from 'lit';\nimport type { Meta, StoryObj } from '@storybook/web-components';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\n\nimport '../kemet-badge';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nimport '../../kemet-icon/kemet-icon';\n\nconst meta: Meta = {\n  title: 'Components / Badge',\n  component: 'kemet-badge',\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};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = (args) => html`\n  <kemet-badge status=${ifDefined(args.status)} ?pill=${args.pill} ?circle=${args.circle} circle-padding=${args.circlePadding}>\n    ${args.circle ? html`<kemet-icon icon=\"cart3\"></kemet-icon>&nbsp;3` : 'Badge'}\n  </kemet-badge>\n`;\n\n// export const Standard: Story = {\n//   render: args => Template(args),\n//   args: {\n//     status: 'primary',\n//     pill: false,\n//     circle: false,\n//     circlePadding: 8,\n//   },\n// };\n\nexport const Standard: Story = {\n  render: args => Template(args),\n};\n\nexport const Pill: Story = {\n  render: args => Template(args),\n  args: {\n    pill: true,\n  },\n};\n\nexport const Circle: Story = {\n  render: args => Template(args),\n  args: {\n    circle: true,\n    circlePadding: 4,\n  },\n};\n\nexport const Success: Story = {\n  render: args => Template(args),\n  args: {\n    status: 'success',\n  },\n};\n\nexport const Warning: Story = {\n  render: args => Template(args),\n  args: {\n    status: 'warning',\n  },\n};\n\nexport const Error: Story = {\n  render: args => Template(args),\n  args: {\n    status: 'error',\n  },\n};\n"]}

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

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+import { TypeStatus } from './types';
 /**
  * @since 1.0.0
  * @status stable
@@ -16,7 +17,7 @@ import { LitElement } from 'lit';
  */
 export default class KemetBadge extends LitElement {
     static styles: import("lit").CSSResult[];
-    status: string;
+    status: TypeStatus;
     circle: boolean;
     pill: boolean;
     circlePadding: number;

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

@@ -37,7 +37,7 @@ let KemetBadge = class KemetBadge extends LitElement {
 };
 KemetBadge.styles = [stylesBase];
 __decorate([
-    property({ type: String, reflect: true })
+    property({ reflect: true })
 ], KemetBadge.prototype, "status", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })

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

@@ -1 +1 @@
-{"version":3,"file":"kemet-badge.js","sourceRoot":"","sources":["../../../src/components/kemet-badge/kemet-badge.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAO,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC;;;;;;;;;;;;;;GAcG;AAGH,IAAqB,UAAU,GAA/B,MAAqB,UAAW,SAAQ,UAAU;IAAlD;;QAIE,WAAM,GAAW,SAAS,CAAC;QAG3B,WAAM,GAAY,KAAK,CAAC;QAGxB,SAAI,GAAY,KAAK,CAAC;QAGtB,kBAAa,GAAW,CAAC,CAAC;IAY5B,CAAC;IAVC,MAAM;QACJ,OAAO,IAAI,CAAA,qBAAqB,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC;IAC1E,CAAC;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,aAAa,IAAI,CAAC;YACjE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,aAAa,IAAI,CAAC;SACjE;IACH,CAAC;CACF,CAAA;AAxBQ,iBAAM,GAAG,CAAC,UAAU,CAAC,CAAC;AAG7B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;0CACd;AAG3B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CACnB;AAGxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCACrB;AAGtB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;iDAC9B;AAbP,UAAU;IAD9B,aAAa,CAAC,aAAa,CAAC;GACR,UAAU,CAyB9B;eAzBoB,UAAU","sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { stylesBase } from './styles';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-badge\n * @summary Badges display the status of information.\n *\n * @prop {string} status - The status of the badge\n * @prop {boolean} circle - Displays the badge in a circle\n * @prop {boolean} pill - Rounds the corners on the badge\n * @prop {number} circlePadding - Padding on the badge as a circle\n *\n * @cssproperty --kemet-badge-padding - The padding of the badge. Default: 10px.\n *\n */\n\n@customElement('kemet-badge')\nexport default class KemetBadge extends LitElement {\n  static styles = [stylesBase];\n\n  @property({ type: String, reflect: true})\n  status: string = 'primary';\n\n  @property({ type: Boolean, reflect: true })\n  circle: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  pill: boolean = false;\n\n  @property({ type: Number, attribute: 'circle-padding' })\n  circlePadding: number = 0;\n\n  render() {\n    return html`<slot @slotchange=${() => this.handleSlotChange()}></slot>`;\n  }\n\n  handleSlotChange() {\n    if (this.circle) {\n      this.style.height = `${this.offsetWidth + this.circlePadding}px`;\n      this.style.width = `${this.offsetWidth + this.circlePadding}px`;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-badge': KemetBadge\n  }\n}\n"]}
+{"version":3,"file":"kemet-badge.js","sourceRoot":"","sources":["../../../src/components/kemet-badge/kemet-badge.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAO,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGtC;;;;;;;;;;;;;;GAcG;AAGH,IAAqB,UAAU,GAA/B,MAAqB,UAAW,SAAQ,UAAU;IAAlD;;QAIE,WAAM,GAAe,SAAS,CAAC;QAG/B,WAAM,GAAY,KAAK,CAAC;QAGxB,SAAI,GAAY,KAAK,CAAC;QAGtB,kBAAa,GAAW,CAAC,CAAC;IAY5B,CAAC;IAVC,MAAM;QACJ,OAAO,IAAI,CAAA,qBAAqB,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC;IAC1E,CAAC;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,aAAa,IAAI,CAAC;YACjE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,aAAa,IAAI,CAAC;SACjE;IACH,CAAC;CACF,CAAA;AAxBQ,iBAAM,GAAG,CAAC,UAAU,CAAC,CAAC;AAG7B;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;0CACI;AAG/B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CACnB;AAGxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCACrB;AAGtB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;iDAC9B;AAbP,UAAU;IAD9B,aAAa,CAAC,aAAa,CAAC;GACR,UAAU,CAyB9B;eAzBoB,UAAU","sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { stylesBase } from './styles';\nimport { TypeStatus } from './types';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-badge\n * @summary Badges display the status of information.\n *\n * @prop {string} status - The status of the badge\n * @prop {boolean} circle - Displays the badge in a circle\n * @prop {boolean} pill - Rounds the corners on the badge\n * @prop {number} circlePadding - Padding on the badge as a circle\n *\n * @cssproperty --kemet-badge-padding - The padding of the badge. Default: 10px.\n *\n */\n\n@customElement('kemet-badge')\nexport default class KemetBadge extends LitElement {\n  static styles = [stylesBase];\n\n  @property({ reflect: true})\n  status: TypeStatus = 'primary';\n\n  @property({ type: Boolean, reflect: true })\n  circle: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  pill: boolean = false;\n\n  @property({ type: Number, attribute: 'circle-padding' })\n  circlePadding: number = 0;\n\n  render() {\n    return html`<slot @slotchange=${() => this.handleSlotChange()}></slot>`;\n  }\n\n  handleSlotChange() {\n    if (this.circle) {\n      this.style.height = `${this.offsetWidth + this.circlePadding}px`;\n      this.style.width = `${this.offsetWidth + this.circlePadding}px`;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-badge': KemetBadge\n  }\n}\n"]}

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

@@ -1,40 +1,42 @@
 import { css } from 'lit';
 export const stylesBase = css `
   :host {
+    --kemet-badge-padding: 10px;
+
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    padding: var(--kemet-badge-padding, 10px);
+    padding: var(--kemet-badge-padding);
     line-height: 1;
-    color: var(--kemet-color-white);
+    color: rgb(var(--kemet-color-white));
   }
 
   :host([status='primary']) {
-    background-color: var(--kemet-color-primary);
+    background-color: rgb(var(--kemet-color-primary));
   }
 
   :host([status='success']) {
-    background-color: var(--kemet-color-success);
+    background-color: rgb(var(--kemet-color-success));
   }
 
   :host([status='standard']) {
-    background-color: var(--kemet-color-gray6);
+    background-color: rgb(var(--kemet-color-gray-500));
   }
 
   :host([status='warning']) {
-    background-color: var(--kemet-color-warning);
+    background-color: rgb(var(--kemet-color-warning));
   }
 
   :host([status='error']) {
-    background-color: var(--kemet-color-error);
+    background-color: rgb(var(--kemet-color-error));
   }
 
   :host([circle]) {
-    border-radius: 50%;
+    border-radius: var(--kemet-border-radius-circle);
   }
 
   :host([pill]) {
-    border-radius: 99rem;
+    border-radius: var(--kemet-border-radius-pill);
   }
 `;
 //# sourceMappingURL=styles.js.map