kemet-ui 4.0.0 → 4.0.2

package/dist/elements/avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/elements/avatar.ts","../../src/styles/elements/avatar.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { stylesBase } from '../styles/elements/avatar';\nimport { TypeRoundedSizes } from '../utilities/constants';\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-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: String, reflect: true })\n  rounded: TypeRoundedSizes;\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 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","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: 0;\n    --kemet-avatar-initials-margin: 1rem;\n\n    display: inline-flex;\n    color: var(--kemet-color-white);\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\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAAA,cAAiC;AACjC,wBAAwC;;;ACDxC,iBAAoB;AAEb,IAAM,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;AA4DnB,IAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;AD/B7B,IAAqB,cAArB,cAAyC,uBAAW;AAAA,EAkBlD,eAAe;AACb,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,gDAAoC,KAAK,KAAK,QAAQ,KAAK,KAAK;AAAA,IACzE;AAEA,QAAI,KAAK,UAAU;AACjB,aAAO,yDAA6C,KAAK,QAAQ;AAAA,IACnE;AAEA,WAAO;AAAA,EACT;AACF;AA/CqB,YACZ,SAAS,CAAC,UAAU;AAG3B;AAAA,MADC,4BAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAHP,YAInB;AAGA;AAAA,MADC,4BAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GANP,YAOnB;AAGA;AAAA,MADC,4BAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GATP,YAUnB;AAGA;AAAA,MADC,4BAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAZP,YAanB;AAGA;AAAA,MADC,4BAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAftB,YAgBnB;AAhBmB,cAArB;AAAA,MADC,iCAAc,cAAc;AAAA,GACR;","names":["import_lit"]}

package/dist/elements/avatar.mjs

@@ -0,0 +1,9 @@
+import {
+  KemetAvatar
+} from "../chunk-AF3CJRDB.mjs";
+import "../chunk-ASA4GA5J.mjs";
+import "../chunk-SAWN7RJP.mjs";
+export {
+  KemetAvatar as default
+};
+//# sourceMappingURL=avatar.mjs.map

package/dist/elements/avatar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/elements/avatars.d.mts

@@ -0,0 +1,25 @@
+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 avatars.
+ *
+ * @cssproperty --kemet-avatars-squeeze - The space between avatars. Default: -1.5rem.
+ *
+ */
+declare class KemetAvatars extends LitElement {
+    static styles: lit.CSSResult[];
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-avatars': KemetAvatars;
+    }
+}
+
+export { KemetAvatars as default };

package/dist/elements/avatars.d.ts

@@ -0,0 +1,25 @@
+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 avatars.
+ *
+ * @cssproperty --kemet-avatars-squeeze - The space between avatars. Default: -1.5rem.
+ *
+ */
+declare class KemetAvatars extends LitElement {
+    static styles: lit.CSSResult[];
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-avatars': KemetAvatars;
+    }
+}
+
+export { KemetAvatars as default };

package/dist/elements/avatars.js

@@ -0,0 +1,125 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+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.ts
+var avatars_exports = {};
+__export(avatars_exports, {
+  default: () => KemetAvatars
+});
+module.exports = __toCommonJS(avatars_exports);
+var import_lit2 = require("lit");
+var import_decorators = require("lit/decorators.js");
+
+// src/styles/elements/avatar.ts
+var import_lit = require("lit");
+var stylesBase = import_lit.css`
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  :host {
+    --kemet-avatar-color: rgb(var(--kemet-color-white));
+    --kemet-avatar-background-color: rgb(var(--kemet-color-gray-300));
+    --kemet-avatar-rounded: 0;
+    --kemet-avatar-initials-margin: 1rem;
+
+    display: inline-flex;
+    color: var(--kemet-color-white);
+    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);
+  }
+`;
+var stylesAvatars = import_lit.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/elements/avatars.ts
+var KemetAvatars = class extends import_lit2.LitElement {
+  render() {
+    return import_lit2.html`<slot></slot>`;
+  }
+};
+KemetAvatars.styles = [stylesAvatars];
+KemetAvatars = __decorateClass([
+  (0, import_decorators.customElement)("kemet-avatars")
+], KemetAvatars);
+//# sourceMappingURL=avatars.js.map

package/dist/elements/avatars.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/elements/avatars.ts","../../src/styles/elements/avatar.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { stylesAvatars } from '../styles/elements/avatar';\n\n/**\n * @since 1.4.0\n * @status stable\n *\n * @tagname kemet-avatars\n * @summary Groups multiple avatars.\n *\n * @cssproperty --kemet-avatars-squeeze - The space between avatars. Default: -1.5rem.\n *\n */\n\n@customElement('kemet-avatars')\nexport default class KemetAvatars extends LitElement {\n  static styles = [stylesAvatars];\n\n  render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-avatars': KemetAvatars\n  }\n}\n","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: 0;\n    --kemet-avatar-initials-margin: 1rem;\n\n    display: inline-flex;\n    color: var(--kemet-color-white);\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\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAAA,cAAiC;AACjC,wBAA8B;;;ACD9B,iBAAoB;AAEb,IAAM,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;AA4DnB,IAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;AD9C7B,IAAqB,eAArB,cAA0C,uBAAW;AAAA,EAGnD,SAAS;AACP,WAAO;AAAA,EACT;AACF;AANqB,aACZ,SAAS,CAAC,aAAa;AADX,eAArB;AAAA,MADC,iCAAc,eAAe;AAAA,GACT;","names":["import_lit"]}

package/dist/elements/avatars.mjs

@@ -0,0 +1,9 @@
+import {
+  KemetAvatars
+} from "../chunk-NY2FTW7A.mjs";
+import "../chunk-ASA4GA5J.mjs";
+import "../chunk-SAWN7RJP.mjs";
+export {
+  KemetAvatars as default
+};
+//# sourceMappingURL=avatars.mjs.map

package/dist/elements/avatars.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/elements/badge.d.mts

@@ -0,0 +1,41 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+import { T as TypeStatus, a as TypeRoundedSizes } from '../constants-BEtO8uLN.mjs';
+import '../form-controller-BR0gZhrG.mjs';
+
+/**
+ * @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
+ *
+ * @cssproperty --kemet-badge-padding - The padding of the badge. Default: 10px.
+ *
+ */
+declare class KemetBadge extends LitElement {
+    static styles: lit.CSSResult[];
+    status: TypeStatus;
+    circlePadding: number;
+    rounded: TypeRoundedSizes;
+    outlined: boolean;
+    iconLeft: boolean;
+    iconRight: boolean;
+    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.d.ts

@@ -0,0 +1,41 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+import { T as TypeStatus, a as TypeRoundedSizes } from '../constants-CcB9aXsT.js';
+import '../form-controller-BR0gZhrG.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
+ *
+ * @cssproperty --kemet-badge-padding - The padding of the badge. Default: 10px.
+ *
+ */
+declare class KemetBadge extends LitElement {
+    static styles: lit.CSSResult[];
+    status: TypeStatus;
+    circlePadding: number;
+    rounded: TypeRoundedSizes;
+    outlined: boolean;
+    iconLeft: boolean;
+    iconRight: boolean;
+    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.js

@@ -0,0 +1,185 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+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.ts
+var badge_exports = {};
+__export(badge_exports, {
+  default: () => KemetBadge
+});
+module.exports = __toCommonJS(badge_exports);
+var import_lit2 = require("lit");
+var import_decorators = require("lit/decorators.js");
+
+// src/styles/elements/badge.ts
+var import_lit = require("lit");
+var stylesBase = import_lit.css`
+  :host {
+    --kemet-badge-padding: 10px;
+    --kemet-badge-color: rgb(var(--kemet-color-white));
+    --kemet-badge-background-color: rgb(var(--kemet-color-primary));
+    --kemet-badge-border: 0;
+    --kemet-badge-border-width: 1px;
+    --kemet-badge-border-style: solid;
+    --kemet-badge-border-color: rgb(var(--kemet-color-primary));
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--kemet-badge-padding);
+    line-height: 1;
+    color: var(--kemet-badge-color);
+    background-color: var(--kemet-badge-background-color);
+    border: var(--kemet-badge-border);
+  }
+
+  :host([status='primary']) {
+    --kemet-badge-background-color: rgb(var(--kemet-color-primary));
+  }
+
+  :host([status='success']) {
+    --kemet-badge-background-color: rgb(var(--kemet-color-success));
+  }
+
+  :host([status='standard']) {
+    --kemet-badge-background-color: rgb(var(--kemet-color-gray-500));
+  }
+
+  :host([status='warning']) {
+    --kemet-badge-background-color: rgb(var(--kemet-color-warning));
+  }
+
+  :host([status='error']) {
+    --kemet-badge-background-color: rgb(var(--kemet-color-error));
+  }
+
+  :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-color: rgb(var(--kemet-color-foreground));
+    --kemet-badge-background-color: transparent;
+    --kemet-badge-border: var(--kemet-badge-border-width) var(--kemet-badge-border-style) var(--kemet-badge-border-color);
+  }
+
+  :host([outlined][status=primary]) {
+    --kemet-badge-border-color: rgb(var(--kemet-color-primary));
+  }
+
+  :host([outlined][status=success]) {
+    --kemet-badge-border-color: rgb(var(--kemet-color-success));
+  }
+
+  :host([outlined][status=warning]) {
+    --kemet-badge-border-color: rgb(var(--kemet-color-warning));
+  }
+
+  :host([outlined][status=error]) {
+    --kemet-badge-border-color: rgb(var(--kemet-color-error));
+  }
+`;
+
+// src/elements/badge.ts
+var KemetBadge = class extends import_lit2.LitElement {
+  constructor() {
+    super(...arguments);
+    this.status = "primary" /* Primary */;
+    this.circlePadding = 0;
+    this.outlined = false;
+    this.iconLeft = false;
+    this.iconRight = false;
+  }
+  render() {
+    return import_lit2.html`
+      <slot name="left" @slotchange=${() => this.handleLeftChange()}></slot>
+      ${this.iconLeft ? import_lit2.html`&nbsp;` : ""}
+      <slot @slotchange=${() => this.handleSlotChange()}></slot>
+      ${this.iconRight ? import_lit2.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 = [stylesBase];
+__decorateClass([
+  (0, import_decorators.property)({ reflect: true })
+], KemetBadge.prototype, "status", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Number, attribute: "circle-padding" })
+], KemetBadge.prototype, "circlePadding", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: String, reflect: true })
+], KemetBadge.prototype, "rounded", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Boolean, reflect: true })
+], KemetBadge.prototype, "outlined", 2);
+__decorateClass([
+  (0, import_decorators.state)()
+], KemetBadge.prototype, "iconLeft", 2);
+__decorateClass([
+  (0, import_decorators.state)()
+], KemetBadge.prototype, "iconRight", 2);
+KemetBadge = __decorateClass([
+  (0, import_decorators.customElement)("kemet-badge")
+], KemetBadge);
+//# sourceMappingURL=badge.js.map

package/dist/elements/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/elements/badge.ts","../../src/styles/elements/badge.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { stylesBase } from '../styles/elements/badge';\nimport { EnumRoundedSizes, EnumStatuses, TypeRoundedSizes, TypeStatus } from '../utilities/constants';\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 *\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 = EnumStatuses.Primary;\n\n  @property({ type: Number, attribute: 'circle-padding' })\n  circlePadding: number = 0;\n\n  @property({ type: String, reflect: true })\n  rounded: TypeRoundedSizes;\n\n  @property({ type: Boolean, reflect: true })\n  outlined: boolean = false;\n\n  @state()\n  iconLeft: boolean = false;\n\n  @state()\n  iconRight: boolean = false;\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","import { css } from 'lit';\n\nexport const stylesBase = css`\n  :host {\n    --kemet-badge-padding: 10px;\n    --kemet-badge-color: rgb(var(--kemet-color-white));\n    --kemet-badge-background-color: rgb(var(--kemet-color-primary));\n    --kemet-badge-border: 0;\n    --kemet-badge-border-width: 1px;\n    --kemet-badge-border-style: solid;\n    --kemet-badge-border-color: rgb(var(--kemet-color-primary));\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-color);\n    background-color: var(--kemet-badge-background-color);\n    border: var(--kemet-badge-border);\n  }\n\n  :host([status='primary']) {\n    --kemet-badge-background-color: rgb(var(--kemet-color-primary));\n  }\n\n  :host([status='success']) {\n    --kemet-badge-background-color: rgb(var(--kemet-color-success));\n  }\n\n  :host([status='standard']) {\n    --kemet-badge-background-color: rgb(var(--kemet-color-gray-500));\n  }\n\n  :host([status='warning']) {\n    --kemet-badge-background-color: rgb(var(--kemet-color-warning));\n  }\n\n  :host([status='error']) {\n    --kemet-badge-background-color: rgb(var(--kemet-color-error));\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-color: rgb(var(--kemet-color-foreground));\n    --kemet-badge-background-color: transparent;\n    --kemet-badge-border: var(--kemet-badge-border-width) var(--kemet-badge-border-style) var(--kemet-badge-border-color);\n  }\n\n  :host([outlined][status=primary]) {\n    --kemet-badge-border-color: rgb(var(--kemet-color-primary));\n  }\n\n  :host([outlined][status=success]) {\n    --kemet-badge-border-color: rgb(var(--kemet-color-success));\n  }\n\n  :host([outlined][status=warning]) {\n    --kemet-badge-border-color: rgb(var(--kemet-color-warning));\n  }\n\n  :host([outlined][status=error]) {\n    --kemet-badge-border-color: rgb(var(--kemet-color-error));\n  }\n`;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAAA,cAAiC;AACjC,wBAA+C;;;ACD/C,iBAAoB;AAEb,IAAM,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;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;;;ADqB1B,IAAqB,aAArB,cAAwC,uBAAW;AAAA,EAAnD;AAAA;AAIE;AAGA,yBAAwB;AAMxB,oBAAoB;AAGpB,oBAAoB;AAGpB,qBAAqB;AAAA;AAAA,EAErB,SAAS;AACP,WAAO;AAAA,sCAC2B,MAAM,KAAK,iBAAiB,CAAC;AAAA,QAC3D,KAAK,WAAW,2BAAe,EAAE;AAAA,0BACf,MAAM,KAAK,iBAAiB,CAAC;AAAA,QAC/C,KAAK,YAAY,2BAAe,EAAE;AAAA,uCACH,MAAM,KAAK,kBAAkB,CAAC;AAAA;AAAA,EAEnE;AAAA,EAEA,mBAAmB;AACjB,QAAI,KAAK,mCAAqC;AAC5C,WAAK,MAAM,SAAS,GAAG,KAAK,cAAc,KAAK,aAAa;AAC5D,WAAK,MAAM,QAAQ,GAAG,KAAK,cAAc,KAAK,aAAa;AAAA,IAC7D;AAAA,EACF;AAAA,EAEA,mBAAmB;AACjB,UAAM,OAAO,KAAK,cAAc,eAAe;AAC/C,QAAI,KAAM,MAAK,WAAW;AAAA,EAC5B;AAAA,EAEA,oBAAoB;AAClB,UAAM,QAAQ,KAAK,cAAc,gBAAgB;AACjD,QAAI,MAAO,MAAK,YAAY;AAAA,EAC9B;AACF;AA/CqB,WACZ,SAAS,CAAC,UAAU;AAG3B;AAAA,MADC,4BAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAHR,WAInB;AAGA;AAAA,MADC,4BAAS,EAAE,MAAM,QAAQ,WAAW,iBAAiB,CAAC;AAAA,GANpC,WAOnB;AAGA;AAAA,MADC,4BAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GATtB,WAUnB;AAGA;AAAA,MADC,4BAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAZvB,WAanB;AAGA;AAAA,MADC,yBAAM;AAAA,GAfY,WAgBnB;AAGA;AAAA,MADC,yBAAM;AAAA,GAlBY,WAmBnB;AAnBmB,aAArB;AAAA,MADC,iCAAc,aAAa;AAAA,GACP;","names":["import_lit"]}

package/dist/elements/badge.mjs

@@ -0,0 +1,9 @@
+import {
+  KemetBadge
+} from "../chunk-Q3TV6JZX.mjs";
+import "../chunk-42U43NKG.mjs";
+import "../chunk-SAWN7RJP.mjs";
+export {
+  KemetBadge as default
+};
+//# sourceMappingURL=badge.mjs.map

package/dist/elements/badge.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/elements/button.d.mts

@@ -0,0 +1,124 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+import { F as FormSubmitController } from '../form-controller-BR0gZhrG.mjs';
+import { a as TypeRoundedSizes } from '../constants-BEtO8uLN.mjs';
+
+declare const variants: readonly ["standard", "text", "outlined"];
+declare enum EnumVariants {
+    STANDARD = "standard",
+    TEXT = "text",
+    OUTLINED = "outlined"
+}
+type TypeVariants = typeof variants[number];
+declare const targets: readonly ["_blank", "_self", "_parent", "_top"];
+declare enum EnumTargets {
+    BLANK = "_blank",
+    SELF = "_self",
+    PARENT = "_parent",
+    TOP = "_top"
+}
+type TypeTargets = typeof targets[number];
+declare const types: readonly ["button", "submit", "reset"];
+declare enum EnumTypes {
+    BUTTON = "button",
+    SUBMIT = "submit",
+    RESET = "reset"
+}
+type TypeTypes = typeof types[number];
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-button
+ * @summary A versatile button that can be used either to submit a form, trigger an action, or link to content.
+ *
+ * @prop {boolean} active - Determines if the button is active
+ * @prop {boolean} hover - Is true when the button is hovered
+ * @prop {boolean} focused - Is true when the button is focused
+ * @prop {string} link - The url a button should link too
+ * @prop {boolean} outlined - Outline style for a button
+ * @prop {boolean} disabled - Determines whether not a button is disabled
+ * @prop {TypeVariants} variant - Controls the type of button. standard | text | circle | rounded | pill
+ * @prop {TypeTargets} target - The target attribute for a link
+ * @prop {TypeTypes} type - The type attribute for a button
+ * @prop {TypeRoundedSizes} rounded - The border radius of the button
+ *
+ * @slot left - Allows you to place an icon to the left of the button text.
+ * @slot right - Allows you to place an icon to the right of the button text.
+ *
+ * @csspart button - The button or anchor element.
+ *
+ * @cssproperty --kemet-button-font-size - The font size.
+ * @cssproperty --kemet-button-color - The text color.
+ * @cssproperty --kemet-button-width - The width.
+ * @cssproperty --kemet-button-height - The height.
+ * @cssproperty --kemet-button-border - The border.
+ * @cssproperty --kemet-button-border-radius - The border radius.
+ * @cssproperty --kemet-button-transition-speed - The transition speed of the hover effect.
+ * @cssproperty --kemet-button-background-color - The background color.
+ * @cssproperty --kemet-button-hover-brightness - The brightness of the hover effect.
+ * @cssproperty --kemet-button-gap - The gap between the button and icons.
+ * @cssproperty --kemet-button-padding - The button padding.
+ * @cssproperty --kemet-button-hover-decoration - The decoration for a text button's hover.
+ * @cssproperty --kemet-button-circle-size - The diameter of a circle button.
+ * @cssproperty --kemet-button-rounded-amount - The border radius of the rounded button.
+ * @cssproperty --kemet-button-border-width - The width of the outline border.
+ * @cssproperty --kemet-button-border-style - The style of the outline border.
+ * @cssproperty --kemet-button-border-color - The color of the outline border.
+ * @cssproperty --kemet-button-disabled-opacity - The opacity of the disabled state.
+ *
+ */
+declare class KemetButton extends LitElement {
+    /** @internal */
+    formSubmitController: FormSubmitController;
+    static styles: lit.CSSResult[];
+    active: boolean;
+    hover: boolean;
+    focused: boolean;
+    link: string;
+    disabled: boolean;
+    variant: TypeVariants;
+    target: TypeTargets;
+    type: TypeTypes;
+    iconLeft: boolean;
+    iconRight: boolean;
+    rounded: TypeRoundedSizes;
+    constructor();
+    render(): lit_html.TemplateResult<1>;
+    handleLeftChange(): void;
+    handleRightChange(): void;
+    /**
+     * Sets hover to true onMouseOver
+     * @private
+     */
+    handleMouseOver(): void;
+    /**
+     * Sets hover to false onMouseOut
+     * @private
+     */
+    handleMouseOut(): void;
+    /**
+     * Handles click behavior
+     * @private
+     */
+    handleClick(): void;
+    /**
+     * Handles blur
+     * @private
+     */
+    handleBlur(): void;
+    /**
+     * Handles keyup
+     * @private
+     * @param {object} event - event object
+     */
+    handleKeyUp(event: KeyboardEvent): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-button': KemetButton;
+    }
+}
+
+export { EnumTargets, EnumTypes, EnumVariants, type TypeTargets, type TypeTypes, type TypeVariants, KemetButton as default, targets, types, variants };