kemet-ui 4.0.0 → 4.0.2

package/dist/elements/alert.d.ts

@@ -0,0 +1,75 @@
+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';
+
+declare const overlayPositions: readonly ["fixed", "top-full", "bottom-full", "top-right", "top-left", "bottom-right", "bottom-left"];
+declare enum EnumOverlayPositions {
+    FIXED = "fixed",
+    TOP_FULL = "top-full",
+    BOTTOM_FULL = "bottom-full",
+    TOP_RIGHT = "top-right",
+    TOP_LEFT = "top-left",
+    BOTTOM_RIGHT = "bottom-right",
+    BOTTOM_LEFT = "bottom-left"
+}
+type TypeOverlayPositions = typeof overlayPositions[number];
+/**
+ * @since 1.4.0
+ * @status stable
+ *
+ * @tagname kemet-alert
+ * @summary Calls out important messages and notifications.
+ *
+ * @prop {boolean} opened - Determines if the alert is opened or not.
+ * @prop {boolean} reveal - Fades in the alert when opened.
+ * @prop {boolean} closable - Adds a close button to the alert.
+ * @prop {TypeDirection} borderStatus - Adds a border that indicates the status.
+ * @prop {boolean} hidden - Hides the element from document flow.
+ * @prop {TypeOverlayPositions} overlay - Fixes the alert over content in specified position.
+ * @prop {TypeVariants} variant - The style of the alert.
+ * @prop {TypeRoundedSizes} rounded - The rounded size of the alert.
+ * @prop {boolean} filled - Determines if the alert uses the filled style.
+ *
+ * @slot icon - The icon of the alert.
+ * @slot default - The contents of the alert.
+ *
+ * @event kemet-opened - Fires when alert is opened.
+ * @event kemet-closed - Fires when alert is closed.
+ *
+ * @csspart close - Container for the close button.
+ * @csspart message - Container for the alert message.
+ *
+ * @cssproperty --kemet-alert-padding - The padding on the alert.
+ * @cssproperty --kemet-alert-border-thickness - The thickness of the border.
+ * @cssproperty --kemet-alert-status-color - The status color. Default: inherit.
+ * @cssproperty --kemet-alert-align-items - The alert's alignment.
+ * @cssproperty --kemet-alert-border - The border around the alert.
+ *
+ */
+declare class KemetAlert extends LitElement {
+    static styles: lit.CSSResult[];
+    opened: boolean;
+    reveal: boolean;
+    closable: boolean;
+    status: TypeStatus;
+    borderStatus: string;
+    hidden: boolean;
+    overlay: string;
+    rounded: TypeRoundedSizes;
+    filled: boolean;
+    shouldUpdate(prevProps: Map<string, never>): boolean;
+    firstUpdated(): void;
+    updated(prevProps: Map<string, never>): void;
+    render(): lit_html.TemplateResult<1>;
+    makeCloseBtn(): lit_html.TemplateResult<1>;
+    handleMotion(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-alert': KemetAlert;
+    }
+}
+
+export { EnumOverlayPositions, type TypeOverlayPositions, KemetAlert as default, overlayPositions };

package/dist/elements/alert.js

@@ -0,0 +1,302 @@
+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/alert.ts
+var alert_exports = {};
+__export(alert_exports, {
+  EnumOverlayPositions: () => EnumOverlayPositions,
+  default: () => KemetAlert,
+  overlayPositions: () => overlayPositions
+});
+module.exports = __toCommonJS(alert_exports);
+var import_lit2 = require("lit");
+var import_decorators = require("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/styles/elements/alert.ts
+var import_lit = require("lit");
+var stylesBase = import_lit.css`
+  :host {
+    --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));
+    --kemet-alert-radius: 0;
+    --kemet-alert-color: inherit;
+    --kemet-alert-background-color: transparent;
+
+    color: var(--kemet-alert-color);
+    display: flex;
+    grid-template-columns: auto 1fr auto;
+    gap: var(--kemet-alert-padding);
+    align-items: var(--kemet-alert-align-items);
+    opacity: 0;
+    padding: var(--kemet-alert-padding);
+    border: var(--kemet-alert-border);
+    transition: opacity 300ms ease;
+    border-radius: var(--kemet-alert-radius);
+    background-color: var(--kemet-alert-background-color);
+  }
+
+  :host([opened]) {
+    opacity: 1;
+  }
+
+  :host([filled]) {
+    --kemet-alert-border: 2px solid rgb(var(--kemet-color-white));
+    --kemet-alert-color: rgb(var(--kemet-color-white));
+    --kemet-alert-background-color: rgb(var(--kemet-alert-status-color));
+  }
+
+  :host([filled][status=standard]) {
+    --kemet-alert-color: rgb(var(--kemet-color-background));
+  }
+
+  :host([border-status="top"]) {
+    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 rgb(var(--kemet-alert-status-color));
+  }
+
+  :host([border-status="bottom"]) {
+    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 rgb(var(--kemet-alert-status-color));
+  }
+
+  :host([status="standard"]) {
+    --kemet-alert-status-color: var(--kemet-color-text);
+  }
+
+  :host([status="primary"]) {
+    --kemet-alert-status-color: var(--kemet-color-primary);
+  }
+
+  :host([status="success"]) {
+    --kemet-alert-status-color: var(--kemet-color-success);
+  }
+
+  :host([status="warning"]) {
+    --kemet-alert-status-color: var(--kemet-color-warning);
+  }
+
+  :host([status="error"]) {
+    --kemet-alert-status-color: var(--kemet-color-error);
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  :host([reveal]) {
+    animation: fadeIn 300ms ease forwards;
+  }
+
+  :host([overlay]) {
+    position: fixed;
+  }
+
+  :host([overlay*="full"]) {
+    width: 100%;
+  }
+
+  :host([overlay*="top"]) {
+    top: 0;
+  }
+
+  :host([overlay*="bottom"]) {
+    bottom: 0;
+  }
+
+  :host([overlay*="left"]) {
+    left: 0;
+  }
+
+  :host([overlay*="right"]) {
+    right: 0;
+  }
+
+  :host([rounded]) {
+    --kemet-alert-radius: var(--kemet-border-radius-md);
+  }
+
+  :host([rounded="sm"]) {
+    --kemet-alert-radius: var(--kemet-border-radius-sm);
+  }
+
+  :host([rounded="md"]) {
+    --kemet-alert-radius: var(--kemet-border-radius-md);
+  }
+
+  :host([rounded="lg"]) {
+    --kemet-alert-radius: var(--kemet-border-radius-lg);
+  }
+
+  :host([rounded="xl"]) {
+    --kemet-alert-radius: var(--kemet-border-radius-xl);
+  }
+
+  :host([rounded="circle"]) {
+    --kemet-alert-radius: var(--kemet-border-radius-circle);
+  }
+
+  :host([rounded="pill"]) {
+    --kemet-alert-radius: var(--kemet-border-radius-pill);
+  }
+
+  [part=message] {
+    display: flex;
+    gap: 0.75rem;
+    align-items: center;
+  }
+
+  .close {
+    cursor: pointer;
+    margin-left: auto;
+  }
+
+  :host(:not([filled])) ::slotted(kemet-icon-bootstrap) {
+    color: rgb(var(--kemet-alert-status-color));
+  }
+
+  @keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+`;
+
+// src/elements/alert.ts
+var overlayPositions = ["fixed", "top-full", "bottom-full", "top-right", "top-left", "bottom-right", "bottom-left"];
+var EnumOverlayPositions = /* @__PURE__ */ ((EnumOverlayPositions2) => {
+  EnumOverlayPositions2["FIXED"] = "fixed";
+  EnumOverlayPositions2["TOP_FULL"] = "top-full";
+  EnumOverlayPositions2["BOTTOM_FULL"] = "bottom-full";
+  EnumOverlayPositions2["TOP_RIGHT"] = "top-right";
+  EnumOverlayPositions2["TOP_LEFT"] = "top-left";
+  EnumOverlayPositions2["BOTTOM_RIGHT"] = "bottom-right";
+  EnumOverlayPositions2["BOTTOM_LEFT"] = "bottom-left";
+  return EnumOverlayPositions2;
+})(EnumOverlayPositions || {});
+var KemetAlert = class extends import_lit2.LitElement {
+  constructor() {
+    super(...arguments);
+    this.status = "standard" /* Standard */;
+  }
+  shouldUpdate(prevProps) {
+    if (prevProps.has("opened") && !prevProps.get("opened")) {
+      this.hidden = false;
+      this.reveal = true;
+    }
+    return true;
+  }
+  firstUpdated() {
+    this.handleMotion();
+  }
+  updated(prevProps) {
+    if (!prevProps.get("opened") && this.opened === true) {
+      emitEvent(this, "kemet-opened", this);
+    } else {
+      emitEvent(this, "kemet-closed", this);
+    }
+  }
+  render() {
+    return import_lit2.html`
+      <slot name="icon"></slot>
+      <div part="message">
+        <slot></slot>
+      </div>
+      <div class="close" part="close">
+        ${this.makeCloseBtn()}
+      </div>
+    `;
+  }
+  makeCloseBtn() {
+    if (this.closable) {
+      return import_lit2.html`<kemet-icon-bootstrap icon="x-lg" @click=${() => {
+        this.opened = false;
+      }}></kemet-icon-bootstrap>`;
+    }
+    return null;
+  }
+  handleMotion() {
+    this.addEventListener("transitionend", () => {
+      if (!this.opened) {
+        this.hidden = true;
+      }
+    });
+    this.addEventListener("animationend", () => {
+      this.reveal = false;
+    });
+  }
+};
+KemetAlert.styles = [stylesBase];
+__decorateClass([
+  (0, import_decorators.property)({ type: Boolean, reflect: true })
+], KemetAlert.prototype, "opened", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Boolean, reflect: true })
+], KemetAlert.prototype, "reveal", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Boolean, reflect: true })
+], KemetAlert.prototype, "closable", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: String, reflect: true })
+], KemetAlert.prototype, "status", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: String, reflect: true, attribute: "border-status" })
+], KemetAlert.prototype, "borderStatus", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Boolean, reflect: true })
+], KemetAlert.prototype, "hidden", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: String, reflect: true })
+], KemetAlert.prototype, "overlay", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: String, reflect: true })
+], KemetAlert.prototype, "rounded", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Boolean, reflect: true })
+], KemetAlert.prototype, "filled", 2);
+KemetAlert = __decorateClass([
+  (0, import_decorators.customElement)("kemet-alert")
+], KemetAlert);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  EnumOverlayPositions,
+  overlayPositions
+});
+//# sourceMappingURL=alert.js.map

package/dist/elements/alert.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/elements/alert.ts","../../src/utilities/events.ts","../../src/styles/elements/alert.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { emitEvent } from '../utilities/events';\nimport { stylesBase } from '../styles/elements/alert';\nimport { EnumStatuses, TypeRoundedSizes, TypeStatus } from '../utilities/constants';\n\nexport const overlayPositions = ['fixed', 'top-full', 'bottom-full', 'top-right', 'top-left', 'bottom-right', 'bottom-left'] as const;\nexport enum EnumOverlayPositions {\n  FIXED = 'fixed',\n  TOP_FULL = 'top-full',\n  BOTTOM_FULL = 'bottom-full',\n  TOP_RIGHT = 'top-right',\n  TOP_LEFT = 'top-left',\n  BOTTOM_RIGHT = 'bottom-right',\n  BOTTOM_LEFT = 'bottom-left'\n}\nexport type TypeOverlayPositions = typeof overlayPositions[number];\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 {TypeDirection} borderStatus - Adds a border that indicates the status.\n * @prop {boolean} hidden - Hides the element from document flow.\n * @prop {TypeOverlayPositions} overlay - Fixes the alert over content in specified position.\n * @prop {TypeVariants} variant - The style of the alert.\n * @prop {TypeRoundedSizes} rounded - The rounded size of the alert.\n * @prop {boolean} filled - Determines if the alert uses the filled style.\n *\n * @slot icon - The icon of the alert.\n * @slot default - The contents of the alert.\n *\n * @event kemet-opened - Fires when alert is opened.\n * @event kemet-closed - Fires when alert is closed.\n *\n * @csspart close - Container for the close button.\n * @csspart message - Container for the alert message.\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 = EnumStatuses.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  @property({ type: String, reflect: true })\n  rounded: TypeRoundedSizes;\n\n  @property({ type: Boolean, reflect: true })\n  filled: boolean;\n\n  shouldUpdate(prevProps: Map<string, never>) {\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: Map<string, never>) {\n    if (!prevProps.get('opened') && this.opened === true) {\n      emitEvent(this, 'kemet-opened', this);\n    } else {\n      emitEvent(this, 'kemet-closed', this);\n    }\n  }\n\n  render() {\n    return html`\n      <slot name=\"icon\"></slot>\n      <div part=\"message\">\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-bootstrap icon=\"x-lg\" @click=${() => { this.opened = false; }}></kemet-icon-bootstrap>`;\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","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 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    --kemet-alert-radius: 0;\n    --kemet-alert-color: inherit;\n    --kemet-alert-background-color: transparent;\n\n    color: var(--kemet-alert-color);\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    border-radius: var(--kemet-alert-radius);\n    background-color: var(--kemet-alert-background-color);\n  }\n\n  :host([opened]) {\n    opacity: 1;\n  }\n\n  :host([filled]) {\n    --kemet-alert-border: 2px solid rgb(var(--kemet-color-white));\n    --kemet-alert-color: rgb(var(--kemet-color-white));\n    --kemet-alert-background-color: rgb(var(--kemet-alert-status-color));\n  }\n\n  :host([filled][status=standard]) {\n    --kemet-alert-color: rgb(var(--kemet-color-background));\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  :host([rounded]) {\n    --kemet-alert-radius: var(--kemet-border-radius-md);\n  }\n\n  :host([rounded=\"sm\"]) {\n    --kemet-alert-radius: var(--kemet-border-radius-sm);\n  }\n\n  :host([rounded=\"md\"]) {\n    --kemet-alert-radius: var(--kemet-border-radius-md);\n  }\n\n  :host([rounded=\"lg\"]) {\n    --kemet-alert-radius: var(--kemet-border-radius-lg);\n  }\n\n  :host([rounded=\"xl\"]) {\n    --kemet-alert-radius: var(--kemet-border-radius-xl);\n  }\n\n  :host([rounded=\"circle\"]) {\n    --kemet-alert-radius: var(--kemet-border-radius-circle);\n  }\n\n  :host([rounded=\"pill\"]) {\n    --kemet-alert-radius: var(--kemet-border-radius-pill);\n  }\n\n  [part=message] {\n    display: flex;\n    gap: 0.75rem;\n    align-items: center;\n  }\n\n  .close {\n    cursor: pointer;\n    margin-left: auto;\n  }\n\n  :host(:not([filled])) ::slotted(kemet-icon-bootstrap) {\n    color: rgb(var(--kemet-alert-status-color));\n  }\n\n  @keyframes fadeIn {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n`;\n"],"mappings":"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","names":["import_lit","EnumOverlayPositions"]}

package/dist/elements/alert.mjs

@@ -0,0 +1,14 @@
+import {
+  EnumOverlayPositions,
+  KemetAlert,
+  overlayPositions
+} from "../chunk-7S4TQDFJ.mjs";
+import "../chunk-LHEY3UOF.mjs";
+import "../chunk-42U43NKG.mjs";
+import "../chunk-SAWN7RJP.mjs";
+export {
+  EnumOverlayPositions,
+  KemetAlert as default,
+  overlayPositions
+};
+//# sourceMappingURL=alert.mjs.map

package/dist/elements/alert.mjs.map

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

package/dist/elements/avatar.d.mts

@@ -0,0 +1,49 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+import { a as TypeRoundedSizes } from '../constants-BEtO8uLN.mjs';
+import '../form-controller-BR0gZhrG.mjs';
+
+/**
+ * @since 1.4.0
+ * @status stable
+ *
+ * @tagname kemet-avatar
+ * @summary A representation of a person or thing.
+ *
+ * @prop {string} size - The size in pixels.
+ * @prop {string} image - Url to an image.
+ * @prop {string} label - Labels the avatar.
+ * @prop {string} initials - Initials of the user.
+ * @prop {boolean} circle - Displays in a circle.
+ * @prop {TypeRoundedSizes} rounded - Displays with rounded corners
+ *
+ * @slot status - A slot for an icon or element that indicates the status of the avatar.
+ *
+ * @csspart initials - Contains the initials for the avatar.
+ *
+ * @cssproperty --kemet-avatar-color - The color of the text.
+ * @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.
+ *
+ */
+declare class KemetAvatar extends LitElement {
+    static styles: lit.CSSResult[];
+    size: string;
+    image: string;
+    label: string;
+    initials: string;
+    rounded: TypeRoundedSizes;
+    firstUpdated(): void;
+    render(): lit_html.TemplateResult<1>;
+    makeSize(): void;
+    makeContent(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-avatar': KemetAvatar;
+    }
+}
+
+export { KemetAvatar as default };

package/dist/elements/avatar.d.ts

@@ -0,0 +1,49 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+import { a as TypeRoundedSizes } from '../constants-CcB9aXsT.js';
+import '../form-controller-BR0gZhrG.js';
+
+/**
+ * @since 1.4.0
+ * @status stable
+ *
+ * @tagname kemet-avatar
+ * @summary A representation of a person or thing.
+ *
+ * @prop {string} size - The size in pixels.
+ * @prop {string} image - Url to an image.
+ * @prop {string} label - Labels the avatar.
+ * @prop {string} initials - Initials of the user.
+ * @prop {boolean} circle - Displays in a circle.
+ * @prop {TypeRoundedSizes} rounded - Displays with rounded corners
+ *
+ * @slot status - A slot for an icon or element that indicates the status of the avatar.
+ *
+ * @csspart initials - Contains the initials for the avatar.
+ *
+ * @cssproperty --kemet-avatar-color - The color of the text.
+ * @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.
+ *
+ */
+declare class KemetAvatar extends LitElement {
+    static styles: lit.CSSResult[];
+    size: string;
+    image: string;
+    label: string;
+    initials: string;
+    rounded: TypeRoundedSizes;
+    firstUpdated(): void;
+    render(): lit_html.TemplateResult<1>;
+    makeSize(): void;
+    makeContent(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-avatar': KemetAvatar;
+    }
+}
+
+export { KemetAvatar as default };

package/dist/elements/avatar.js

@@ -0,0 +1,161 @@
+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/avatar.ts
+var avatar_exports = {};
+__export(avatar_exports, {
+  default: () => KemetAvatar
+});
+module.exports = __toCommonJS(avatar_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/avatar.ts
+var KemetAvatar = class extends import_lit2.LitElement {
+  firstUpdated() {
+    this.makeSize();
+  }
+  render() {
+    return import_lit2.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 import_lit2.html`<img part="avatar-image" src=${this.image} alt=${this.label} />`;
+    }
+    if (this.initials) {
+      return import_lit2.html`<div part="initials" class="initials">${this.initials}</div>`;
+    }
+    return import_lit2.html`<slot></slot>`;
+  }
+};
+KemetAvatar.styles = [stylesBase];
+__decorateClass([
+  (0, import_decorators.property)({ type: String })
+], KemetAvatar.prototype, "size", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: String })
+], KemetAvatar.prototype, "image", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: String })
+], KemetAvatar.prototype, "label", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: String })
+], KemetAvatar.prototype, "initials", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: String, reflect: true })
+], KemetAvatar.prototype, "rounded", 2);
+KemetAvatar = __decorateClass([
+  (0, import_decorators.customElement)("kemet-avatar")
+], KemetAvatar);
+//# sourceMappingURL=avatar.js.map