kemet-ui 4.0.2 → 5.0.0

package/dist/elements/alert/index.js

@@ -0,0 +1,345 @@
+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/alert/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/alert/styles.css.ts
+import { css } from "lit";
+var styles_css_default = css`:host {
+    /* public */
+    --kemet-alert-align-items: center;
+    --kemet-alert-padding: 1rem;
+    --kemet-alert-border-thickness: 4px;
+
+    /* private */
+    --_kemet-alert-appearance-color: var(--kemet-color-font-base);
+    --_kemet-alert-border: 1px solid;
+    --_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([polarity=dark]) {
+    --_kemet-alert-appearance-color: var(--kemet-color-font-inverse-base);
+  }
+
+  :host([opened]) {
+    opacity: 1;
+  }
+
+  :host([filled]) {
+    --_kemet-alert-border: 2px solid var(--kemet-color-font-inverse-base);
+    --_kemet-alert-color: var(--kemet-color-font-inverse-base);
+    --_kemet-alert-background-color: var(--_kemet-alert-appearance-color);
+    --_kemet-alert-appearance-color: var(--kemet-color-background-inverse);
+  }
+
+  :host([filled][appearance="brand"]) {
+    --_kemet-alert-appearance-color: var(--kemet-color-brand-primary-base);
+  }
+
+  :host([filled][appearance="success"]) {
+    --_kemet-alert-appearance-color: var(--kemet-color-background-success);
+  }
+
+  :host([filled][appearance="warning"]) {
+    --_kemet-alert-appearance-color: var(--kemet-color-background-warning);
+  }
+
+  :host([filled][appearance="error"]) {
+    --_kemet-alert-appearance-color: var(--kemet-color-background-error);
+  }
+
+  :host([filled][appearance="info"]) {
+    --_kemet-alert-appearance-color: var(--kemet-color-background-info);
+  }
+
+  :host([filled][appearance="link"]) {
+    --_kemet-alert-appearance-color: var(--kemet-color-background-link);
+  }
+
+  :host([appearance]) {
+    border-color: var(--_kemet-alert-appearance-color);
+  }
+
+  :host([border-appearance="top"]) {
+    border-top: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);
+  }
+
+  :host([border-appearance="right"]) {
+    border-right: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);
+  }
+
+  :host([border-appearance="bottom"]) {
+    border-bottom: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);
+  }
+
+  :host([border-appearance="left"]) {
+    border-left: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);
+  }
+
+  :host([appearance="brand"]) {
+    --_kemet-alert-appearance-color: var(--kemet-color-brand-primary-base);
+  }
+
+  :host([appearance="success"]) {
+    --_kemet-alert-appearance-color: var(--kemet-color-background-success);
+  }
+
+  :host([appearance="warning"]) {
+    --_kemet-alert-appearance-color: var(--kemet-color-background-warning);
+  }
+
+  :host([appearance="error"]) {
+    --_kemet-alert-appearance-color: var(--kemet-color-background-error);
+  }
+
+  :host([appearance="info"]) {
+    --_kemet-alert-appearance-color: var(--kemet-color-background-info);
+  }
+
+  :host([appearance="link"]) {
+    --_kemet-alert-appearance-color: var(--kemet-color-background-link);
+  }
+
+  :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) {
+    color: var(--_kemet-alert-appearance-color);
+  }
+
+  @keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+`;
+
+// src/elements/alert/index.ts
+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 EnumBorderAppearances = /* @__PURE__ */ ((EnumBorderAppearances2) => {
+  EnumBorderAppearances2["Top"] = "top";
+  EnumBorderAppearances2["Right"] = "right";
+  EnumBorderAppearances2["Bottom"] = "bottom";
+  EnumBorderAppearances2["Left"] = "left";
+  return EnumBorderAppearances2;
+})(EnumBorderAppearances || {});
+var KemetAlert = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.reveal = false;
+    this.closable = false;
+    this.appearance = "neutral" /* Neutral */;
+    this.dom = "initializing";
+    this.handleTransitionEnd = () => {
+      if (!this.opened) {
+        this.hidden = true;
+      }
+    };
+    this.handleAnimationEnd = () => {
+      this.reveal = false;
+    };
+  }
+  shouldUpdate(prevProps) {
+    if (prevProps.has("opened") && !prevProps.get("opened")) {
+      this.hidden = false;
+      this.reveal = true;
+    }
+    return true;
+  }
+  firstUpdated() {
+    emitEvent(this, "kemet-alert-mounted", {
+      bubbles: true,
+      composed: true,
+      detail: {
+        element: this
+      }
+    });
+    this.dom = "mounted";
+    this.handleMotion();
+  }
+  updated(prevProps) {
+    if (!prevProps.get("opened") && this.opened === true) {
+      emitEvent(this, "kemet-opened", this);
+    } else {
+      emitEvent(this, "kemet-closed", this);
+    }
+  }
+  render() {
+    return html`
+      <slot name="icon"></slot>
+      <div part="message">
+        <slot></slot>
+      </div>
+      <div class="close" part="close">
+        ${this.makeCloseBtn()}
+      </div>
+    `;
+  }
+  makeCloseBtn() {
+    if (this.closable) {
+      return html`<kemet-icon-bootstrap icon="x-lg" @click=${() => {
+        this.opened = false;
+      }}></kemet-icon-bootstrap>`;
+    }
+    return null;
+  }
+  handleMotion() {
+    this.addEventListener("transitionend", this.handleTransitionEnd);
+    this.addEventListener("animationend", this.handleAnimationEnd);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("transitionend", this.handleTransitionEnd);
+    this.removeEventListener("animationend", this.handleAnimationEnd);
+  }
+};
+KemetAlert.styles = [styles_css_default];
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetAlert.prototype, "opened", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetAlert.prototype, "reveal", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetAlert.prototype, "closable", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetAlert.prototype, "appearance", 2);
+__decorateClass([
+  property({ type: String, reflect: true, attribute: "border-appearance" })
+], KemetAlert.prototype, "borderAppearance", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetAlert.prototype, "hidden", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetAlert.prototype, "overlay", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetAlert.prototype, "rounded", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetAlert.prototype, "filled", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetAlert.prototype, "polarity", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetAlert.prototype, "dom", 2);
+KemetAlert = __decorateClass([
+  customElement("kemet-alert")
+], KemetAlert);
+export {
+  EnumBorderAppearances,
+  EnumOverlayPositions,
+  KemetAlert as default
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/alert/index.ts","../../../src/utilities/events.ts","../../../src/elements/alert/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/events';\nimport * as constants from '../../utilities/constants';\nimport styles from './styles.css.ts';\n\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}\n\nexport enum EnumBorderAppearances {\n  Top = 'top',\n  Right = 'right',\n  Bottom = 'bottom',\n  Left = 'left'\n}\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 {EnumBorderAppearances} 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 * @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 * @slot icon - The icon of the alert.\n * @slot default - The contents of the alert.\n *\n * @fires kemet-opened - Fires when alert is opened.\n * @detail {HTMLElement} element - The alert element\n *\n * @fires kemet-closed - Fires when alert is closed.\n * @detail {HTMLElement} element - The alert element\n *\n * @fires kemet-alert-mounted - Fired when the alert is mounted to the DOM\n * @detail {HTMLElement} element - The alert element\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-align-items - The alert's alignment.\n *\n */\n\n@customElement('kemet-alert')\nexport default class KemetAlert extends LitElement {\n  static styles = [styles];\n\n  @property({ type: Boolean, reflect: true })\n  opened!: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  reveal: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  closable: boolean = false;\n\n  @property({ type: String, reflect: true })\n  appearance: constants.TypeAppearance = constants.EnumAppearances.Neutral;\n\n  @property({ type: String, reflect: true, attribute: 'border-appearance' })\n  borderAppearance!: 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!: constants.TypeRoundedSizes;\n\n  @property({ type: Boolean, reflect: true })\n  filled!: boolean;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  private handleTransitionEnd = () => {\n    if (!this.opened) {\n      this.hidden = true;\n    }\n  };\n\n  private handleAnimationEnd = () => {\n    this.reveal = false;\n  };\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    emitEvent(this, 'kemet-alert-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\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  private 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  private handleMotion() {\n    this.addEventListener('transitionend', this.handleTransitionEnd);\n    this.addEventListener('animationend', this.handleAnimationEnd);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('transitionend', this.handleTransitionEnd);\n    this.removeEventListener('animationend', this.handleAnimationEnd);\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 default css`:host {\n    /* public */\n    --kemet-alert-align-items: center;\n    --kemet-alert-padding: 1rem;\n    --kemet-alert-border-thickness: 4px;\n\n    /* private */\n    --_kemet-alert-appearance-color: var(--kemet-color-font-base);\n    --_kemet-alert-border: 1px solid;\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([polarity=dark]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-font-inverse-base);\n  }\n\n  :host([opened]) {\n    opacity: 1;\n  }\n\n  :host([filled]) {\n    --_kemet-alert-border: 2px solid var(--kemet-color-font-inverse-base);\n    --_kemet-alert-color: var(--kemet-color-font-inverse-base);\n    --_kemet-alert-background-color: var(--_kemet-alert-appearance-color);\n    --_kemet-alert-appearance-color: var(--kemet-color-background-inverse);\n  }\n\n  :host([filled][appearance=\"brand\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-brand-primary-base);\n  }\n\n  :host([filled][appearance=\"success\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-success);\n  }\n\n  :host([filled][appearance=\"warning\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-warning);\n  }\n\n  :host([filled][appearance=\"error\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-error);\n  }\n\n  :host([filled][appearance=\"info\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-info);\n  }\n\n  :host([filled][appearance=\"link\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-link);\n  }\n\n  :host([appearance]) {\n    border-color: var(--_kemet-alert-appearance-color);\n  }\n\n  :host([border-appearance=\"top\"]) {\n    border-top: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);\n  }\n\n  :host([border-appearance=\"right\"]) {\n    border-right: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);\n  }\n\n  :host([border-appearance=\"bottom\"]) {\n    border-bottom: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);\n  }\n\n  :host([border-appearance=\"left\"]) {\n    border-left: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);\n  }\n\n  :host([appearance=\"brand\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-brand-primary-base);\n  }\n\n  :host([appearance=\"success\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-success);\n  }\n\n  :host([appearance=\"warning\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-warning);\n  }\n\n  :host([appearance=\"error\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-error);\n  }\n\n  :host([appearance=\"info\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-info);\n  }\n\n  :host([appearance=\"link\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-link);\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) {\n    color: var(--_kemet-alert-appearance-color);\n  }\n\n  @keyframes fadeIn {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n`;\n"],"mappings":"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","names":["EnumOverlayPositions","EnumBorderAppearances"]}

package/dist/elements/alert/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/alert/styles.css.js

@@ -0,0 +1,195 @@
+// src/elements/alert/styles.css.ts
+import { css } from "lit";
+var styles_css_default = css`:host {
+    /* public */
+    --kemet-alert-align-items: center;
+    --kemet-alert-padding: 1rem;
+    --kemet-alert-border-thickness: 4px;
+
+    /* private */
+    --_kemet-alert-appearance-color: var(--kemet-color-font-base);
+    --_kemet-alert-border: 1px solid;
+    --_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([polarity=dark]) {
+    --_kemet-alert-appearance-color: var(--kemet-color-font-inverse-base);
+  }
+
+  :host([opened]) {
+    opacity: 1;
+  }
+
+  :host([filled]) {
+    --_kemet-alert-border: 2px solid var(--kemet-color-font-inverse-base);
+    --_kemet-alert-color: var(--kemet-color-font-inverse-base);
+    --_kemet-alert-background-color: var(--_kemet-alert-appearance-color);
+    --_kemet-alert-appearance-color: var(--kemet-color-background-inverse);
+  }
+
+  :host([filled][appearance="brand"]) {
+    --_kemet-alert-appearance-color: var(--kemet-color-brand-primary-base);
+  }
+
+  :host([filled][appearance="success"]) {
+    --_kemet-alert-appearance-color: var(--kemet-color-background-success);
+  }
+
+  :host([filled][appearance="warning"]) {
+    --_kemet-alert-appearance-color: var(--kemet-color-background-warning);
+  }
+
+  :host([filled][appearance="error"]) {
+    --_kemet-alert-appearance-color: var(--kemet-color-background-error);
+  }
+
+  :host([filled][appearance="info"]) {
+    --_kemet-alert-appearance-color: var(--kemet-color-background-info);
+  }
+
+  :host([filled][appearance="link"]) {
+    --_kemet-alert-appearance-color: var(--kemet-color-background-link);
+  }
+
+  :host([appearance]) {
+    border-color: var(--_kemet-alert-appearance-color);
+  }
+
+  :host([border-appearance="top"]) {
+    border-top: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);
+  }
+
+  :host([border-appearance="right"]) {
+    border-right: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);
+  }
+
+  :host([border-appearance="bottom"]) {
+    border-bottom: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);
+  }
+
+  :host([border-appearance="left"]) {
+    border-left: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);
+  }
+
+  :host([appearance="brand"]) {
+    --_kemet-alert-appearance-color: var(--kemet-color-brand-primary-base);
+  }
+
+  :host([appearance="success"]) {
+    --_kemet-alert-appearance-color: var(--kemet-color-background-success);
+  }
+
+  :host([appearance="warning"]) {
+    --_kemet-alert-appearance-color: var(--kemet-color-background-warning);
+  }
+
+  :host([appearance="error"]) {
+    --_kemet-alert-appearance-color: var(--kemet-color-background-error);
+  }
+
+  :host([appearance="info"]) {
+    --_kemet-alert-appearance-color: var(--kemet-color-background-info);
+  }
+
+  :host([appearance="link"]) {
+    --_kemet-alert-appearance-color: var(--kemet-color-background-link);
+  }
+
+  :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) {
+    color: var(--_kemet-alert-appearance-color);
+  }
+
+  @keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+`;
+export {
+  styles_css_default as default
+};
+//# sourceMappingURL=styles.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/alert/styles.css.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport default css`:host {\n    /* public */\n    --kemet-alert-align-items: center;\n    --kemet-alert-padding: 1rem;\n    --kemet-alert-border-thickness: 4px;\n\n    /* private */\n    --_kemet-alert-appearance-color: var(--kemet-color-font-base);\n    --_kemet-alert-border: 1px solid;\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([polarity=dark]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-font-inverse-base);\n  }\n\n  :host([opened]) {\n    opacity: 1;\n  }\n\n  :host([filled]) {\n    --_kemet-alert-border: 2px solid var(--kemet-color-font-inverse-base);\n    --_kemet-alert-color: var(--kemet-color-font-inverse-base);\n    --_kemet-alert-background-color: var(--_kemet-alert-appearance-color);\n    --_kemet-alert-appearance-color: var(--kemet-color-background-inverse);\n  }\n\n  :host([filled][appearance=\"brand\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-brand-primary-base);\n  }\n\n  :host([filled][appearance=\"success\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-success);\n  }\n\n  :host([filled][appearance=\"warning\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-warning);\n  }\n\n  :host([filled][appearance=\"error\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-error);\n  }\n\n  :host([filled][appearance=\"info\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-info);\n  }\n\n  :host([filled][appearance=\"link\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-link);\n  }\n\n  :host([appearance]) {\n    border-color: var(--_kemet-alert-appearance-color);\n  }\n\n  :host([border-appearance=\"top\"]) {\n    border-top: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);\n  }\n\n  :host([border-appearance=\"right\"]) {\n    border-right: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);\n  }\n\n  :host([border-appearance=\"bottom\"]) {\n    border-bottom: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);\n  }\n\n  :host([border-appearance=\"left\"]) {\n    border-left: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);\n  }\n\n  :host([appearance=\"brand\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-brand-primary-base);\n  }\n\n  :host([appearance=\"success\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-success);\n  }\n\n  :host([appearance=\"warning\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-warning);\n  }\n\n  :host([appearance=\"error\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-error);\n  }\n\n  :host([appearance=\"info\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-info);\n  }\n\n  :host([appearance=\"link\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-link);\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) {\n    color: var(--_kemet-alert-appearance-color);\n  }\n\n  @keyframes fadeIn {\n    from { opacity: 0; }\n    to { opacity: 1; }\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;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;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/avatar/index.d.ts

@@ -0,0 +1,50 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+import { d as TypeRoundedSizes } from '../../constants-W9QKPlZP.js';
+import '../../form-controller-3q581XcZ.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-initials-margin - The space around the initials.
+ *
+ * @fires kemet-avatar-mounted - Fires when the avatar is mounted.
+ * @detail {element: HTMLElement} - The avatar element.
+ */
+declare class KemetAvatar extends LitElement {
+    static styles: lit.CSSResult[];
+    size: string;
+    image: string;
+    label: string;
+    initials: string;
+    rounded: TypeRoundedSizes;
+    polarity?: 'light' | 'dark';
+    dom: string;
+    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 };