kemet-ui 4.0.2 → 5.0.0

package/dist/elements/avatar/index.js

@@ -0,0 +1,157 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// src/elements/avatar/index.ts
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+// src/utilities/events.ts
+var emitEvent = (element, name, detail, bubbles = true, composed = true) => {
+  element.dispatchEvent(
+    new CustomEvent(name, { bubbles, composed, detail })
+  );
+};
+
+// src/elements/avatar/styles.css.ts
+import { css } from "lit";
+var styles_css_default = css`*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+:host {
+  /* public */
+  --kemet-avatar-initials-margin: 1rem;
+
+  /* private */
+  --_kemet-avatar-color: var(--kemet-color-font-inverse-base);
+  --_kemet-avatar-background-color: var(--kemet-color-background-avatar-primary-base);
+  --_kemet-avatar-rounded: 0;
+
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--_kemet-avatar-color);
+  position: relative;
+  border-radius: var(--_kemet-avatar-rounded);
+  background-color: var(--_kemet-avatar-background-color);
+}
+
+:host > * {
+  border-radius: var(--_kemet-avatar-rounded);
+}
+
+:host([rounded]) {
+  --_kemet-avatar-rounded: var(--kemet-border-radius-md);
+}
+
+:host([rounded=sm]) {
+  --_kemet-avatar-rounded: var(--kemet-border-radius-sm);
+}
+
+:host([rounded=lg]) {
+  --_kemet-avatar-rounded: var(--kemet-border-radius-lg);
+}
+
+:host([rounded=xl]) {
+  --_kemet-avatar-rounded: var(--kemet-border-radius-xl);
+}
+
+:host([rounded=circle]) {
+  --_kemet-avatar-rounded: var(--kemet-border-radius-circle);
+}
+
+:host([rounded=pill]) {
+  --_kemet-avatar-rounded: var(--kemet-border-radius-pill);
+}
+
+.initials {
+  margin: var(--kemet-avatar-initials-margin);
+}
+
+::slotted(kemet-badge) {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  border-radius: var(--kemet-border-radius-circle);
+}
+`;
+
+// src/elements/avatar/index.ts
+var KemetAvatar = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.dom = "initializing";
+  }
+  firstUpdated() {
+    emitEvent(this, "kemet-avatar-mounted", {
+      bubbles: true,
+      composed: true,
+      detail: {
+        element: this
+      }
+    });
+    this.dom = "mounted";
+    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 part="avatar-image" src=${this.image} alt=${this.label} />`;
+    }
+    if (this.initials) {
+      return html`<div part="initials" class="initials">${this.initials}</div>`;
+    }
+    return html`<slot></slot>`;
+  }
+};
+KemetAvatar.styles = [styles_css_default];
+__decorateClass([
+  property({ type: String })
+], KemetAvatar.prototype, "size", 2);
+__decorateClass([
+  property({ type: String })
+], KemetAvatar.prototype, "image", 2);
+__decorateClass([
+  property({ type: String })
+], KemetAvatar.prototype, "label", 2);
+__decorateClass([
+  property({ type: String })
+], KemetAvatar.prototype, "initials", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetAvatar.prototype, "rounded", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetAvatar.prototype, "polarity", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetAvatar.prototype, "dom", 2);
+KemetAvatar = __decorateClass([
+  customElement("kemet-avatar")
+], KemetAvatar);
+export {
+  KemetAvatar as default
+};
+//# sourceMappingURL=index.js.map

package/dist/elements/avatar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/avatar/index.ts","../../../src/utilities/events.ts","../../../src/elements/avatar/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { type TypeRoundedSizes } from '../../utilities/constants';\nimport { emitEvent } from '../../utilities/events';\nimport styles from './styles.css.ts';\n\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 {TypeRoundedSizes} 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-initials-margin - The space around the initials.\n *\n * @fires kemet-avatar-mounted - Fires when the avatar is mounted.\n * @detail {element: HTMLElement} - The avatar element.\n */\n\n@customElement('kemet-avatar')\nexport default class KemetAvatar extends LitElement {\n  static styles = [styles];\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: String, reflect: true })\n  rounded!: TypeRoundedSizes;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  firstUpdated() {\n    emitEvent(this, 'kemet-avatar-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\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 part=\"avatar-image\" 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","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n","import { css } from 'lit';\n\nexport default css`*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  /* public */\n  --kemet-avatar-initials-margin: 1rem;\n\n  /* private */\n  --_kemet-avatar-color: var(--kemet-color-font-inverse-base);\n  --_kemet-avatar-background-color: var(--kemet-color-background-avatar-primary-base);\n  --_kemet-avatar-rounded: 0;\n\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--_kemet-avatar-color);\n  position: relative;\n  border-radius: var(--_kemet-avatar-rounded);\n  background-color: var(--_kemet-avatar-background-color);\n}\n\n:host > * {\n  border-radius: var(--_kemet-avatar-rounded);\n}\n\n:host([rounded]) {\n  --_kemet-avatar-rounded: var(--kemet-border-radius-md);\n}\n\n:host([rounded=sm]) {\n  --_kemet-avatar-rounded: var(--kemet-border-radius-sm);\n}\n\n:host([rounded=lg]) {\n  --_kemet-avatar-rounded: var(--kemet-border-radius-lg);\n}\n\n:host([rounded=xl]) {\n  --_kemet-avatar-rounded: var(--kemet-border-radius-xl);\n}\n\n:host([rounded=circle]) {\n  --_kemet-avatar-rounded: var(--kemet-border-radius-circle);\n}\n\n:host([rounded=pill]) {\n  --_kemet-avatar-rounded: var(--kemet-border-radius-pill);\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"],"mappings":";;;;;;;;;;;;AAAA,SAAS,MAAM,kBAA6B;AAC5C,SAAS,eAAe,gBAAgB;;;ACDjC,IAAM,YAAY,CAAC,SAAS,MAAM,QAAQ,UAAU,MAAM,WAAW,SAAS;AACnF,UAAQ;AAAA,IACN,IAAI,YAAY,MAAM,EAAE,SAAS,UAAU,OAAO,CAAC;AAAA,EACrD;AACF;;;ACJA,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;AF8Bf,IAAqB,cAArB,cAAyC,WAAW;AAAA,EAApD;AAAA;AAsBE,eAAc;AAAA;AAAA,EAEd,eAAe;AACb,cAAU,MAAM,wBAAwB;AAAA,MACtC,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF,CAAC;AACD,SAAK,MAAM;AACX,SAAK,SAAS;AAAA,EAChB;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,QACH,KAAK,YAAY,CAAC;AAAA;AAAA;AAAA,EAGxB;AAAA,EAEA,WAAW;AACT,QAAI,KAAK,MAAM;AACb,WAAK,MAAM,QAAQ,GAAG,KAAK,IAAI;AAC/B,WAAK,MAAM,SAAS,GAAG,KAAK,IAAI;AAAA,IAClC;AAAA,EACF;AAAA,EAEA,cAAc;AACZ,QAAI,KAAK,OAAO;AACd,aAAO,oCAAoC,KAAK,KAAK,QAAQ,KAAK,KAAK;AAAA,IACzE;AAEA,QAAI,KAAK,UAAU;AACjB,aAAO,6CAA6C,KAAK,QAAQ;AAAA,IACnE;AAEA,WAAO;AAAA,EACT;AACF;AA7DqB,YACZ,SAAS,CAAC,kBAAM;AAGvB;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAHP,YAInB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GANP,YAOnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GATP,YAUnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAZP,YAanB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAftB,YAgBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAlBtB,YAmBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GArBtB,YAsBnB;AAtBmB,cAArB;AAAA,EADC,cAAc,cAAc;AAAA,GACR;","names":[]}

package/dist/elements/avatar/styles.css.d.ts

@@ -0,0 +1,5 @@
+import * as lit from 'lit';
+
+declare const _default: lit.CSSResult;
+
+export { _default as default };

package/dist/elements/avatar/styles.css.js

@@ -0,0 +1,70 @@
+// src/elements/avatar/styles.css.ts
+import { css } from "lit";
+var styles_css_default = css`*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+:host {
+  /* public */
+  --kemet-avatar-initials-margin: 1rem;
+
+  /* private */
+  --_kemet-avatar-color: var(--kemet-color-font-inverse-base);
+  --_kemet-avatar-background-color: var(--kemet-color-background-avatar-primary-base);
+  --_kemet-avatar-rounded: 0;
+
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--_kemet-avatar-color);
+  position: relative;
+  border-radius: var(--_kemet-avatar-rounded);
+  background-color: var(--_kemet-avatar-background-color);
+}
+
+:host > * {
+  border-radius: var(--_kemet-avatar-rounded);
+}
+
+:host([rounded]) {
+  --_kemet-avatar-rounded: var(--kemet-border-radius-md);
+}
+
+:host([rounded=sm]) {
+  --_kemet-avatar-rounded: var(--kemet-border-radius-sm);
+}
+
+:host([rounded=lg]) {
+  --_kemet-avatar-rounded: var(--kemet-border-radius-lg);
+}
+
+:host([rounded=xl]) {
+  --_kemet-avatar-rounded: var(--kemet-border-radius-xl);
+}
+
+:host([rounded=circle]) {
+  --_kemet-avatar-rounded: var(--kemet-border-radius-circle);
+}
+
+:host([rounded=pill]) {
+  --_kemet-avatar-rounded: var(--kemet-border-radius-pill);
+}
+
+.initials {
+  margin: var(--kemet-avatar-initials-margin);
+}
+
+::slotted(kemet-badge) {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  border-radius: var(--kemet-border-radius-circle);
+}
+`;
+export {
+  styles_css_default as default
+};
+//# sourceMappingURL=styles.css.js.map

package/dist/elements/avatar/styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/avatar/styles.css.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport default css`*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  /* public */\n  --kemet-avatar-initials-margin: 1rem;\n\n  /* private */\n  --_kemet-avatar-color: var(--kemet-color-font-inverse-base);\n  --_kemet-avatar-background-color: var(--kemet-color-background-avatar-primary-base);\n  --_kemet-avatar-rounded: 0;\n\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--_kemet-avatar-color);\n  position: relative;\n  border-radius: var(--_kemet-avatar-rounded);\n  background-color: var(--_kemet-avatar-background-color);\n}\n\n:host > * {\n  border-radius: var(--_kemet-avatar-rounded);\n}\n\n:host([rounded]) {\n  --_kemet-avatar-rounded: var(--kemet-border-radius-md);\n}\n\n:host([rounded=sm]) {\n  --_kemet-avatar-rounded: var(--kemet-border-radius-sm);\n}\n\n:host([rounded=lg]) {\n  --_kemet-avatar-rounded: var(--kemet-border-radius-lg);\n}\n\n:host([rounded=xl]) {\n  --_kemet-avatar-rounded: var(--kemet-border-radius-xl);\n}\n\n:host([rounded=circle]) {\n  --_kemet-avatar-rounded: var(--kemet-border-radius-circle);\n}\n\n:host([rounded=pill]) {\n  --_kemet-avatar-rounded: var(--kemet-border-radius-pill);\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"],"mappings":";AAAA,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}

package/dist/elements/avatars/index.d.ts

@@ -0,0 +1,30 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * @since 1.4.0
+ * @status stable
+ *
+ * @tagname kemet-avatars
+ * @summary Groups multiple avatar elements.
+ *
+ * @cssproperty --kemet-avatars-squeeze - The space between avatars. Default: -1.5rem.
+ *
+ * @fires kemet-avatars-mounted - Fires when the avatars are mounted.
+ * @detail {element: HTMLElement} - The avatars element.
+ */
+declare class KemetAvatars extends LitElement {
+    static styles: lit.CSSResult[];
+    polarity?: 'light' | 'dark';
+    dom: string;
+    firstUpdated(): void;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-avatars': KemetAvatars;
+    }
+}
+
+export { KemetAvatars as default };

package/dist/elements/avatars/index.js

@@ -0,0 +1,75 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// src/elements/avatars/index.ts
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+// src/elements/avatars/styles.css.ts
+import { css } from "lit";
+var styles_css_default = css`*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+:host {
+  --kemet-avatars-squeeze: -1.5rem;
+
+  display: inline-flex;
+}
+
+::slotted(kemet-avatar:not(:first-of-type)) {
+  margin-left: var(--kemet-avatars-squeeze);
+}
+`;
+
+// src/utilities/events.ts
+var emitEvent = (element, name, detail, bubbles = true, composed = true) => {
+  element.dispatchEvent(
+    new CustomEvent(name, { bubbles, composed, detail })
+  );
+};
+
+// src/elements/avatars/index.ts
+var KemetAvatars = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.dom = "initializing";
+  }
+  firstUpdated() {
+    emitEvent(this, "kemet-avatars-mounted", {
+      bubbles: true,
+      composed: true,
+      detail: {
+        element: this
+      }
+    });
+    this.dom = "mounted";
+  }
+  render() {
+    return html`<slot></slot>`;
+  }
+};
+KemetAvatars.styles = [styles_css_default];
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetAvatars.prototype, "polarity", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetAvatars.prototype, "dom", 2);
+KemetAvatars = __decorateClass([
+  customElement("kemet-avatars")
+], KemetAvatars);
+export {
+  KemetAvatars as default
+};
+//# sourceMappingURL=index.js.map

package/dist/elements/avatars/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/avatars/index.ts","../../../src/elements/avatars/styles.css.ts","../../../src/utilities/events.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport styles from './styles.css.ts';\nimport { emitEvent } from '../../utilities/events';\n\n/**\n * @since 1.4.0\n * @status stable\n *\n * @tagname kemet-avatars\n * @summary Groups multiple avatar elements.\n *\n * @cssproperty --kemet-avatars-squeeze - The space between avatars. Default: -1.5rem.\n *\n * @fires kemet-avatars-mounted - Fires when the avatars are mounted.\n * @detail {element: HTMLElement} - The avatars element.\n */\n\n@customElement('kemet-avatars')\nexport default class KemetAvatars extends LitElement {\n  static styles = [styles];\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  firstUpdated() {\n    emitEvent(this, 'kemet-avatars-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-avatars': KemetAvatars\n  }\n}\n","import { css } from 'lit';\n\nexport default css`*,\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","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAAA,SAAS,MAAM,kBAA6B;AAC5C,SAAS,eAAe,gBAAgB;;;ACDxC,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACFR,IAAM,YAAY,CAAC,SAAS,MAAM,QAAQ,UAAU,MAAM,WAAW,SAAS;AACnF,UAAQ;AAAA,IACN,IAAI,YAAY,MAAM,EAAE,SAAS,UAAU,OAAO,CAAC;AAAA,EACrD;AACF;;;AFeA,IAAqB,eAArB,cAA0C,WAAW;AAAA,EAArD;AAAA;AAOE,eAAc;AAAA;AAAA,EAEd,eAAe;AACb,cAAU,MAAM,yBAAyB;AAAA,MACvC,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF,CAAC;AACD,SAAK,MAAM;AAAA,EACb;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,EACT;AACF;AAvBqB,aACZ,SAAS,CAAC,kBAAM;AAGvB;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAHtB,aAInB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GANtB,aAOnB;AAPmB,eAArB;AAAA,EADC,cAAc,eAAe;AAAA,GACT;","names":[]}

package/dist/elements/avatars/styles.css.d.ts

@@ -0,0 +1,5 @@
+import * as lit from 'lit';
+
+declare const _default: lit.CSSResult;
+
+export { _default as default };

package/dist/elements/avatars/styles.css.js

@@ -0,0 +1,22 @@
+// src/elements/avatars/styles.css.ts
+import { css } from "lit";
+var styles_css_default = css`*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+:host {
+  --kemet-avatars-squeeze: -1.5rem;
+
+  display: inline-flex;
+}
+
+::slotted(kemet-avatar:not(:first-of-type)) {
+  margin-left: var(--kemet-avatars-squeeze);
+}
+`;
+export {
+  styles_css_default as default
+};
+//# sourceMappingURL=styles.css.js.map

package/dist/elements/avatars/styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/avatars/styles.css.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport default css`*,\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"],"mappings":";AAAA,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}

package/dist/elements/badge/index.d.ts

@@ -0,0 +1,52 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+import { E as EnumAppearances, e as EnumRoundedSizes } from '../../constants-W9QKPlZP.js';
+import '../../form-controller-3q581XcZ.js';
+
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-badge
+ * @summary Badges display the status of information.
+ *
+ * @prop {TypeStatus} status - The status of the badge
+ * @prop {number} circlePadding - Padding on the badge as a circle
+ * @prop {TypeRoundedSizes} rounded - Rounds the corners on the badge
+ * @prop {boolean} outlined - Outlines the badge
+ * @prop {EnumAppearance} appearance - The appearance of the badge's color
+ * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background
+ * @prop {string} dom - The status of dom initalization.
+ *
+ * @fires kemet-badge-mounted - Fires when the badge is mounted
+ * @detail {HTMLElement} element - The badge element
+ *
+ * @cssproperty --kemet-badge-padding - The padding of the badge.
+ * @cssproperty --kemet-badge-border-width - The border width of the badge.
+ * @cssproperty --kemet-badge-border-style - The border style of the badge.
+ *
+ */
+declare class KemetBadge extends LitElement {
+    static styles: lit.CSSResult[];
+    appearance: EnumAppearances;
+    circlePadding: number;
+    rounded: EnumRoundedSizes;
+    outlined: boolean;
+    polarity?: 'light' | 'dark';
+    dom: string;
+    iconLeft: boolean;
+    iconRight: boolean;
+    firstUpdated(): void;
+    render(): lit_html.TemplateResult<1>;
+    handleSlotChange(): void;
+    handleLeftChange(): void;
+    handleRightChange(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-badge': KemetBadge;
+    }
+}
+
+export { KemetBadge as default };

package/dist/elements/badge/index.js

@@ -0,0 +1,193 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// src/elements/badge/index.ts
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+
+// src/utilities/events.ts
+var emitEvent = (element, name, detail, bubbles = true, composed = true) => {
+  element.dispatchEvent(
+    new CustomEvent(name, { bubbles, composed, detail })
+  );
+};
+
+// src/elements/badge/styles.css.ts
+import { css } from "lit";
+var styles_css_default = css`:host {
+  /* public */
+  --kemet-badge-padding: 10px;
+  --kemet-badge-border-width: 1px;
+  --kemet-badge-border-style: solid;
+
+  /* private */
+  --_kemet-badge-background-color: var(--_kemet-badge-color);
+  --_kemet-badge-border: 0;
+  --_kemet-badge-border-color: var(--_kemet-badge-color);
+  --_kemet-badge-font-color: var(--kemet-color-font-inverse-base);
+  --_kemet-badge-color: var(--kemet-color-background-badge-primary-base);
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--kemet-badge-padding);
+  line-height: 1;
+  color: var(--_kemet-badge-font-color);
+  background-color: var(--_kemet-badge-background-color);
+  border: var(--_kemet-badge-border);
+}
+
+:host([polarity=dark]) {
+  --_kemet-badge-font-color: var(--kemet-color-font-base);
+  --_kemet-badge-color: var(--kemet-color-font-inverse-base);
+}
+
+:host([appearance]) {
+  --_kemet-badge-font-color: var(--kemet-color-font-inverse-base);
+}
+
+:host([appearance=brand]) {
+  --_kemet-badge-color: var(--kemet-color-brand-primary-base);
+}
+
+:host([appearance=success]) {
+  --_kemet-badge-color: var(--kemet-color-background-success);
+}
+
+:host([appearance=warning]) {
+  --_kemet-badge-color: var(--kemet-color-background-warning);
+}
+
+:host([appearance=error]) {
+  --_kemet-badge-color: var(--kemet-color-background-error);
+}
+
+:host([appearance=info]) {
+  --_kemet-badge-color: var(--kemet-color-background-info);
+}
+
+:host([appearance=link]) {
+  --_kemet-badge-color: var(--kemet-color-background-link);
+}
+
+
+:host([rounded]) {
+  border-radius: var(--kemet-border-radius-md);
+}
+
+:host([rounded=sm]) {
+  border-radius: var(--kemet-border-radius-sm);
+}
+
+:host([rounded=md]) {
+  border-radius: var(--kemet-border-radius-md);
+}
+
+:host([rounded=lg]) {
+  border-radius: var(--kemet-border-radius-lg);
+}
+
+:host([rounded=xl]) {
+  border-radius: var(--kemet-border-radius-xl);
+}
+
+:host([rounded=circle]) {
+  border-radius: var(--kemet-border-radius-circle);
+}
+
+:host([rounded=pill]) {
+  border-radius: var(--kemet-border-radius-pill);
+}
+
+:host([outlined]) {
+  --_kemet-badge-font-color: var(--_kemet-badge-color);
+  --_kemet-badge-background-color: transparent;
+  --_kemet-badge-border: var(--kemet-badge-border-width) var(--kemet-badge-border-style) var(--_kemet-badge-color);
+}
+
+`;
+
+// src/elements/badge/index.ts
+var KemetBadge = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.circlePadding = 0;
+    this.outlined = false;
+    this.dom = "initializing";
+    this.iconLeft = false;
+    this.iconRight = false;
+  }
+  firstUpdated() {
+    emitEvent(this, "kemet-badge-mounted", {
+      bubbles: true,
+      composed: true,
+      detail: {
+        element: this
+      }
+    });
+    this.dom = "mounted";
+  }
+  render() {
+    return html`
+      <slot name="left" @slotchange=${() => this.handleLeftChange()}></slot>
+      ${this.iconLeft ? html`&nbsp;` : ""}
+      <slot @slotchange=${() => this.handleSlotChange()}></slot>
+      ${this.iconRight ? html`&nbsp;` : ""}
+      <slot name="right" @slotchange=${() => this.handleRightChange()}></slot>
+    `;
+  }
+  handleSlotChange() {
+    if (this.rounded === "circle" /* Circle */) {
+      this.style.height = `${this.offsetWidth + this.circlePadding}px`;
+      this.style.width = `${this.offsetWidth + this.circlePadding}px`;
+    }
+  }
+  handleLeftChange() {
+    const left = this.querySelector('[slot="left"]');
+    if (left) this.iconLeft = true;
+  }
+  handleRightChange() {
+    const right = this.querySelector('[slot="right"]');
+    if (right) this.iconRight = true;
+  }
+};
+KemetBadge.styles = [styles_css_default];
+__decorateClass([
+  property({ reflect: true })
+], KemetBadge.prototype, "appearance", 2);
+__decorateClass([
+  property({ type: Number, attribute: "circle-padding" })
+], KemetBadge.prototype, "circlePadding", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetBadge.prototype, "rounded", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetBadge.prototype, "outlined", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetBadge.prototype, "polarity", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetBadge.prototype, "dom", 2);
+__decorateClass([
+  state()
+], KemetBadge.prototype, "iconLeft", 2);
+__decorateClass([
+  state()
+], KemetBadge.prototype, "iconRight", 2);
+KemetBadge = __decorateClass([
+  customElement("kemet-badge")
+], KemetBadge);
+export {
+  KemetBadge as default
+};
+//# sourceMappingURL=index.js.map

package/dist/elements/badge/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/badge/index.ts","../../../src/utilities/events.ts","../../../src/elements/badge/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { EnumRoundedSizes, EnumAppearances } from '../../utilities/constants';\nimport { emitEvent } from '../../utilities/events';\nimport styles from './styles.css.ts';\n\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 {TypeStatus} status - The status of the badge\n * @prop {number} circlePadding - Padding on the badge as a circle\n * @prop {TypeRoundedSizes} rounded - Rounds the corners on the badge\n * @prop {boolean} outlined - Outlines the badge\n * @prop {EnumAppearance} appearance - The appearance of the badge's color\n * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\n *\n * @fires kemet-badge-mounted - Fires when the badge is mounted\n * @detail {HTMLElement} element - The badge element\n *\n * @cssproperty --kemet-badge-padding - The padding of the badge.\n * @cssproperty --kemet-badge-border-width - The border width of the badge.\n * @cssproperty --kemet-badge-border-style - The border style of the badge.\n *\n */\n\n@customElement('kemet-badge')\nexport default class KemetBadge extends LitElement {\n  static styles = [styles];\n\n  @property({ reflect: true })\n  appearance!: EnumAppearances;\n\n  @property({ type: Number, attribute: 'circle-padding' })\n  circlePadding: number = 0;\n\n  @property({ type: String, reflect: true })\n  rounded!: EnumRoundedSizes;\n\n  @property({ type: Boolean, reflect: true })\n  outlined: boolean = false;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  @state()\n  iconLeft: boolean = false;\n\n  @state()\n  iconRight: boolean = false;\n\n  firstUpdated() {\n    emitEvent(this, 'kemet-badge-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  render() {\n    return html`\n      <slot name=\"left\" @slotchange=${() => this.handleLeftChange()}></slot>\n      ${this.iconLeft ? html`&nbsp;` : ''}\n      <slot @slotchange=${() => this.handleSlotChange()}></slot>\n      ${this.iconRight ? html`&nbsp;` : ''}\n      <slot name=\"right\" @slotchange=${() => this.handleRightChange()}></slot>\n    `;\n  }\n\n  handleSlotChange() {\n    if (this.rounded === EnumRoundedSizes.Circle) {\n      this.style.height = `${this.offsetWidth + this.circlePadding}px`;\n      this.style.width = `${this.offsetWidth + this.circlePadding}px`;\n    }\n  }\n\n  handleLeftChange() {\n    const left = this.querySelector('[slot=\"left\"]');\n    if (left) this.iconLeft = true;\n  }\n\n  handleRightChange() {\n    const right = this.querySelector('[slot=\"right\"]');\n    if (right) this.iconRight = true;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-badge': KemetBadge\n  }\n}\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n","import { css } from 'lit';\n\nexport default css`:host {\n  /* public */\n  --kemet-badge-padding: 10px;\n  --kemet-badge-border-width: 1px;\n  --kemet-badge-border-style: solid;\n\n  /* private */\n  --_kemet-badge-background-color: var(--_kemet-badge-color);\n  --_kemet-badge-border: 0;\n  --_kemet-badge-border-color: var(--_kemet-badge-color);\n  --_kemet-badge-font-color: var(--kemet-color-font-inverse-base);\n  --_kemet-badge-color: var(--kemet-color-background-badge-primary-base);\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--kemet-badge-padding);\n  line-height: 1;\n  color: var(--_kemet-badge-font-color);\n  background-color: var(--_kemet-badge-background-color);\n  border: var(--_kemet-badge-border);\n}\n\n:host([polarity=dark]) {\n  --_kemet-badge-font-color: var(--kemet-color-font-base);\n  --_kemet-badge-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([appearance]) {\n  --_kemet-badge-font-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([appearance=brand]) {\n  --_kemet-badge-color: var(--kemet-color-brand-primary-base);\n}\n\n:host([appearance=success]) {\n  --_kemet-badge-color: var(--kemet-color-background-success);\n}\n\n:host([appearance=warning]) {\n  --_kemet-badge-color: var(--kemet-color-background-warning);\n}\n\n:host([appearance=error]) {\n  --_kemet-badge-color: var(--kemet-color-background-error);\n}\n\n:host([appearance=info]) {\n  --_kemet-badge-color: var(--kemet-color-background-info);\n}\n\n:host([appearance=link]) {\n  --_kemet-badge-color: var(--kemet-color-background-link);\n}\n\n\n:host([rounded]) {\n  border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=sm]) {\n  border-radius: var(--kemet-border-radius-sm);\n}\n\n:host([rounded=md]) {\n  border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=lg]) {\n  border-radius: var(--kemet-border-radius-lg);\n}\n\n:host([rounded=xl]) {\n  border-radius: var(--kemet-border-radius-xl);\n}\n\n:host([rounded=circle]) {\n  border-radius: var(--kemet-border-radius-circle);\n}\n\n:host([rounded=pill]) {\n  border-radius: var(--kemet-border-radius-pill);\n}\n\n:host([outlined]) {\n  --_kemet-badge-font-color: var(--_kemet-badge-color);\n  --_kemet-badge-background-color: transparent;\n  --_kemet-badge-border: var(--kemet-badge-border-width) var(--kemet-badge-border-style) var(--_kemet-badge-color);\n}\n\n`;\n"],"mappings":"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","names":[]}

package/dist/elements/badge/styles.css.d.ts

@@ -0,0 +1,5 @@
+import * as lit from 'lit';
+
+declare const _default: lit.CSSResult;
+
+export { _default as default };