kemet-ui 4.0.2 → 5.0.0

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

@@ -0,0 +1,54 @@
+// src/elements/field/styles.css.ts
+import { css } from "lit";
+var styles_css_default = css`:host {
+  /* private */
+  --_kemet-field-message-color: inherit;
+
+  display: block;
+}
+
+:host([disabled]) {
+  opacity: 0.5;
+}
+
+label {
+  position: relative;
+  display: block;
+}
+
+label span {
+  color: inherit;
+  display: inline-flex;
+  gap: 0.5rem;
+  align-items: center;
+  margin-bottom: 0.8rem;
+}
+
+.message {
+  color: var(--_kemet-field-message-color);
+  font-size: 0.9rem;
+  line-height: 1;
+  display: block;
+  margin-top: 0.8rem;
+}
+
+:host([appearance=error]) .message {
+  --_kemet-field-message-color: var(--kemet-color-font-error);
+}
+
+:host([appearance=success]) .message {
+  --_kemet-field-message-color: var(--kemet-color-font-success);
+}
+
+:host([appearance=warning]) .message {
+  --_kemet-field-message-color: var(--kemet-color-font-warning);
+}
+
+:host([appearance=link]) .message {
+  --_kemet-field-message-color: var(--kemet-color-font-link);
+}
+`;
+export {
+  styles_css_default as default
+};
+//# sourceMappingURL=styles.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/field/styles.css.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport default css`:host {\n  /* private */\n  --_kemet-field-message-color: inherit;\n\n  display: block;\n}\n\n:host([disabled]) {\n  opacity: 0.5;\n}\n\nlabel {\n  position: relative;\n  display: block;\n}\n\nlabel span {\n  color: inherit;\n  display: inline-flex;\n  gap: 0.5rem;\n  align-items: center;\n  margin-bottom: 0.8rem;\n}\n\n.message {\n  color: var(--_kemet-field-message-color);\n  font-size: 0.9rem;\n  line-height: 1;\n  display: block;\n  margin-top: 0.8rem;\n}\n\n:host([appearance=error]) .message {\n  --_kemet-field-message-color: var(--kemet-color-font-error);\n}\n\n:host([appearance=success]) .message {\n  --_kemet-field-message-color: var(--kemet-color-font-success);\n}\n\n:host([appearance=warning]) .message {\n  --_kemet-field-message-color: var(--kemet-color-font-warning);\n}\n\n:host([appearance=link]) .message {\n  --_kemet-field-message-color: var(--kemet-color-font-link);\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;","names":[]}

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

@@ -0,0 +1,66 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+import { e as EnumRoundedSizes } from '../../constants-W9QKPlZP.js';
+import '../../form-controller-3q581XcZ.js';
+
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-flipcard
+ * @summary A card that has a front and back side which can be flipped.
+ *
+ * @prop {string} axis
+ * @prop {boolean} flipped
+ * @prop {boolean} flipOnHover
+ * @prop {string} height
+ * @prop {boolean} measure
+ * @prop {EnumRoundedSizes} rounded - The border radius of the card
+ * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background
+ * @prop {string} dom - The status of dom initalization.
+ *
+ * @slot front - The front of the card.
+ * @slot back - The back of the card.
+ *
+ * @csspart front - The front of the card.
+ * @csspart back - The back of the card.
+ * @csspart wrapper - A container for both front and back of the card.
+ *
+ * @cssproperty --kemet-flipcard-width - The width of the card.
+ * @cssproperty --kemet-flipcard-height - The height of the card.
+ * @cssproperty --kemet-flipcard-ratio - The aspect ratio of the card.
+ * @cssproperty --kemet-flipcard-border-radius - The border radius of the card.
+ * @cssproperty --kemet-flipcard-border - The border of the card.
+ *
+ * @fires kemet-flipcard-mounted - Fired when the flipcard is mounted to the DOM
+ * @detail {HTMLElement} element - The flipcard element
+ *
+ */
+declare class KemetFlipcard extends LitElement {
+    static styles: lit.CSSResult[];
+    axis: string;
+    flipped: boolean;
+    flipOnHover: boolean;
+    height: string;
+    measure: boolean;
+    rounded?: EnumRoundedSizes;
+    polarity?: 'light' | 'dark';
+    dom: string;
+    frontChildren: HTMLSlotElement;
+    backChildren: HTMLSlotElement;
+    frontElement: HTMLElement;
+    backElement: HTMLElement;
+    constructor();
+    firstUpdated(): void;
+    updated(): void;
+    render(): lit_html.TemplateResult<1>;
+    determineHeight(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-flipcard': KemetFlipcard;
+    }
+}
+
+export { KemetFlipcard as default };

package/dist/elements/flipcard/index.js

@@ -0,0 +1,232 @@
+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/flipcard/index.ts
+import { html, LitElement } from "lit";
+import { customElement, property, state, query } from "lit/decorators.js";
+
+// src/elements/flipcard/styles.css.ts
+import { css } from "lit";
+var styles_css_default = css`:host {
+  --kemet-flipcard-width: 100%;
+  --kemet-flipcard-height: auto;
+  --kemet-flipcard-ratio: 16/9;
+  --kemet-flipcard-border-radius: 0;
+  --kemet-flipcard-border: 1px solid;
+
+  display: inline-block;
+  width: var(--kemet-flipcard-width);
+  height: var(--kemet-flipcard-height);
+  aspect-ratio: var(--kemet-flipcard-ratio);
+  perspective: 1000px;
+}
+
+section {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  transition: transform 0.8s;
+  transform-style: preserve-3d;
+}
+
+.front,
+.back {
+  color: inherit;
+  position: absolute;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  /* overflow: hidden; */
+  border-radius: var(--kemet-flipcard-border-radius);
+  border: var(--kemet-flipcard-border);
+}
+
+:host([rounded]) {
+  --kemet-flipcard-border-radius: var(--kemet-border-radius-md);
+}
+
+:host([rounded=sm]) {
+  --kemet-flipcard-border-radius: var(--kemet-border-radius-sm);
+}
+
+:host([rounded=lg]) {
+  --kemet-flipcard-border-radius: var(--kemet-border-radius-lg);
+}
+
+:host([rounded=xl]) {
+  --kemet-flipcard-border-radius: var(--kemet-border-radius-xl);
+}
+
+:host([rounded=pill]) {
+  --kemet-flipcard-border-radius: var(--kemet-border-radius-pill);
+}
+
+:host([rounded=circle]) {
+  --kemet-flipcard-border-radius: var(--kemet-border-radius-circle);
+}
+
+:host([flipped]) .front {
+  z-index: -1;
+}
+
+:host([axis="horizontal"]) .back {
+  transform: rotateY(180deg);
+}
+
+:host([flipped][axis="horizontal"]) section {
+  transform: rotateY(180deg);
+}
+
+:host([axis="vertical"]) .back {
+  transform: rotateX(180deg);
+}
+
+:host([flipped][axis="vertical"]) section {
+  transform: rotateX(180deg);
+}
+
+:host([flip-on-hover]) section {
+  cursor: pointer;
+}
+
+::slotted([slot="front"]),
+::slotted([slot="back"]) {
+  display: inline-block;
+  margin: auto;
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+`;
+
+// src/utilities/events.ts
+var emitEvent = (element, name, detail, bubbles = true, composed = true) => {
+  element.dispatchEvent(
+    new CustomEvent(name, { bubbles, composed, detail })
+  );
+};
+
+// src/elements/flipcard/index.ts
+var KemetFlipcard = class extends LitElement {
+  constructor() {
+    super();
+    this.axis = "horizontal";
+    this.flipped = false;
+    this.flipOnHover = false;
+    this.height = "auto";
+    this.measure = false;
+    this.dom = "initializing";
+    this.addEventListener("kemet-flipcard-trigger-flipped", () => {
+      this.flipped = !this.flipped;
+    });
+  }
+  firstUpdated() {
+    this.frontElement = this.querySelector("[slot=front]");
+    this.backElement = this.querySelector("[slot=back]");
+    window.addEventListener("resize", this.determineHeight.bind(this));
+    emitEvent(this, "kemet-flipcard-mounted", {
+      bubbles: true,
+      composed: true,
+      detail: {
+        element: this
+      }
+    });
+    this.dom = "mounted";
+  }
+  updated() {
+    this.determineHeight();
+  }
+  render() {
+    return html`
+      <section
+        tabindex="0"
+        part="wrapper"
+        @blur=${() => {
+      if (this.flipOnHover) this.flipped = false;
+    }}
+        @focus=${() => {
+      if (this.flipOnHover) this.flipped = true;
+    }}
+        @mouseover=${() => {
+      if (this.flipOnHover) this.flipped = true;
+    }}
+        @mouseout=${() => {
+      if (this.flipOnHover) this.flipped = false;
+    }}>
+        <div id="front" class="front" part="front">
+          <slot name="front" @slotchange="${() => this.determineHeight()}"></slot>
+        </div>
+        <div id="back" class="back" part="back">
+          <slot name="back" @slotchange="${() => this.determineHeight()}"></slot>
+        </div>
+      </section>
+    `;
+  }
+  determineHeight() {
+    setTimeout(() => {
+      if (this.measure) {
+        if (this.frontElement?.offsetHeight > this.backElement?.offsetHeight) {
+          this.height = `${this.frontElement?.offsetHeight}px`;
+        } else {
+          this.height = `${this.backElement?.offsetHeight}px`;
+        }
+        this.style.height = this.height;
+      } else {
+        this.style.removeProperty("height");
+      }
+    }, 0);
+  }
+};
+KemetFlipcard.styles = [styles_css_default];
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetFlipcard.prototype, "axis", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetFlipcard.prototype, "flipped", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "flip-on-hover" })
+], KemetFlipcard.prototype, "flipOnHover", 2);
+__decorateClass([
+  property({ type: String })
+], KemetFlipcard.prototype, "height", 2);
+__decorateClass([
+  property({ type: Boolean })
+], KemetFlipcard.prototype, "measure", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetFlipcard.prototype, "rounded", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetFlipcard.prototype, "polarity", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetFlipcard.prototype, "dom", 2);
+__decorateClass([
+  query('[name="front"]')
+], KemetFlipcard.prototype, "frontChildren", 2);
+__decorateClass([
+  query('[name="back"]')
+], KemetFlipcard.prototype, "backChildren", 2);
+__decorateClass([
+  state()
+], KemetFlipcard.prototype, "frontElement", 2);
+__decorateClass([
+  state()
+], KemetFlipcard.prototype, "backElement", 2);
+KemetFlipcard = __decorateClass([
+  customElement("kemet-flipcard")
+], KemetFlipcard);
+export {
+  KemetFlipcard as default
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/flipcard/index.ts","../../../src/elements/flipcard/styles.css.ts","../../../src/utilities/events.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport styles from './styles.css.ts';\nimport { emitEvent } from '../../utilities/events';\nimport { EnumRoundedSizes } from '../../utilities/constants';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-flipcard\n * @summary A card that has a front and back side which can be flipped.\n *\n * @prop {string} axis\n * @prop {boolean} flipped\n * @prop {boolean} flipOnHover\n * @prop {string} height\n * @prop {boolean} measure\n * @prop {EnumRoundedSizes} rounded - The border radius of the card\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 front - The front of the card.\n * @slot back - The back of the card.\n *\n * @csspart front - The front of the card.\n * @csspart back - The back of the card.\n * @csspart wrapper - A container for both front and back of the card.\n *\n * @cssproperty --kemet-flipcard-width - The width of the card.\n * @cssproperty --kemet-flipcard-height - The height of the card.\n * @cssproperty --kemet-flipcard-ratio - The aspect ratio of the card.\n * @cssproperty --kemet-flipcard-border-radius - The border radius of the card.\n * @cssproperty --kemet-flipcard-border - The border of the card.\n *\n * @fires kemet-flipcard-mounted - Fired when the flipcard is mounted to the DOM\n * @detail {HTMLElement} element - The flipcard element\n *\n */\n\n@customElement('kemet-flipcard')\nexport default class KemetFlipcard extends LitElement {\n  static styles = [styles];\n\n  @property({ type: String, reflect: true })\n  axis: string = 'horizontal';\n\n  @property({ type: Boolean, reflect: true })\n  flipped: boolean = false;\n\n  @property({ type: Boolean, attribute: 'flip-on-hover' })\n  flipOnHover: boolean = false;\n\n  @property({ type: String })\n  height: string = 'auto';\n\n  @property({ type: Boolean })\n  measure: boolean = false;\n\n  @property({ type: String, reflect: true })\n  rounded?: EnumRoundedSizes;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  @query('[name=\"front\"]')\n  frontChildren!: HTMLSlotElement;\n\n  @query('[name=\"back\"]')\n  backChildren!: HTMLSlotElement;\n\n  @state()\n  frontElement!: HTMLElement;\n\n  @state()\n  backElement!: HTMLElement;\n\n  constructor() {\n    super();\n\n    this.addEventListener('kemet-flipcard-trigger-flipped', () => {\n      this.flipped = !this.flipped;\n    });\n  }\n\n  firstUpdated() {\n    this.frontElement = this.querySelector('[slot=front]') as HTMLElement;\n    this.backElement = this.querySelector('[slot=back]') as HTMLElement;\n    window.addEventListener('resize', this.determineHeight.bind(this));\n\n    emitEvent(this, 'kemet-flipcard-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  updated() {\n    this.determineHeight();\n  }\n\n  render() {\n    return html`\n      <section\n        tabindex=\"0\"\n        part=\"wrapper\"\n        @blur=${() => { if (this.flipOnHover) this.flipped = false; }}\n        @focus=${() => { if (this.flipOnHover) this.flipped = true; }}\n        @mouseover=${() => { if (this.flipOnHover) this.flipped = true; }}\n        @mouseout=${() => { if (this.flipOnHover) this.flipped = false; }}>\n        <div id=\"front\" class=\"front\" part=\"front\">\n          <slot name=\"front\" @slotchange=\"${() => this.determineHeight()}\"></slot>\n        </div>\n        <div id=\"back\" class=\"back\" part=\"back\">\n          <slot name=\"back\" @slotchange=\"${() => this.determineHeight()}\"></slot>\n        </div>\n      </section>\n    `;\n  }\n\n  determineHeight() {\n    // setTimeout is need to simulate a DOM repaint\n    // without the repaint, offsetHeight on Custom Elements = 0\n    // so this is needed for 'measure' to work correctly\n\n    setTimeout(() => {\n      if (this.measure) {\n        if (this.frontElement?.offsetHeight > this.backElement?.offsetHeight) {\n          this.height = `${this.frontElement?.offsetHeight}px`;\n        } else {\n          this.height = `${this.backElement?.offsetHeight}px`;\n        }\n\n        this.style.height = this.height;\n      } else {\n        this.style.removeProperty('height');\n      }\n    }, 0);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-flipcard': KemetFlipcard\n  }\n}\n","import { css } from 'lit';\n\nexport default css`:host {\n  --kemet-flipcard-width: 100%;\n  --kemet-flipcard-height: auto;\n  --kemet-flipcard-ratio: 16/9;\n  --kemet-flipcard-border-radius: 0;\n  --kemet-flipcard-border: 1px solid;\n\n  display: inline-block;\n  width: var(--kemet-flipcard-width);\n  height: var(--kemet-flipcard-height);\n  aspect-ratio: var(--kemet-flipcard-ratio);\n  perspective: 1000px;\n}\n\nsection {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  transition: transform 0.8s;\n  transform-style: preserve-3d;\n}\n\n.front,\n.back {\n  color: inherit;\n  position: absolute;\n  display: flex;\n  width: 100%;\n  height: 100%;\n  backface-visibility: hidden;\n  /* overflow: hidden; */\n  border-radius: var(--kemet-flipcard-border-radius);\n  border: var(--kemet-flipcard-border);\n}\n\n:host([rounded]) {\n  --kemet-flipcard-border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=sm]) {\n  --kemet-flipcard-border-radius: var(--kemet-border-radius-sm);\n}\n\n:host([rounded=lg]) {\n  --kemet-flipcard-border-radius: var(--kemet-border-radius-lg);\n}\n\n:host([rounded=xl]) {\n  --kemet-flipcard-border-radius: var(--kemet-border-radius-xl);\n}\n\n:host([rounded=pill]) {\n  --kemet-flipcard-border-radius: var(--kemet-border-radius-pill);\n}\n\n:host([rounded=circle]) {\n  --kemet-flipcard-border-radius: var(--kemet-border-radius-circle);\n}\n\n:host([flipped]) .front {\n  z-index: -1;\n}\n\n:host([axis=\"horizontal\"]) .back {\n  transform: rotateY(180deg);\n}\n\n:host([flipped][axis=\"horizontal\"]) section {\n  transform: rotateY(180deg);\n}\n\n:host([axis=\"vertical\"]) .back {\n  transform: rotateX(180deg);\n}\n\n:host([flipped][axis=\"vertical\"]) section {\n  transform: rotateX(180deg);\n}\n\n:host([flip-on-hover]) section {\n  cursor: pointer;\n}\n\n::slotted([slot=\"front\"]),\n::slotted([slot=\"back\"]) {\n  display: inline-block;\n  margin: auto;\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n`;\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,98 @@
+// src/elements/flipcard/styles.css.ts
+import { css } from "lit";
+var styles_css_default = css`:host {
+  --kemet-flipcard-width: 100%;
+  --kemet-flipcard-height: auto;
+  --kemet-flipcard-ratio: 16/9;
+  --kemet-flipcard-border-radius: 0;
+  --kemet-flipcard-border: 1px solid;
+
+  display: inline-block;
+  width: var(--kemet-flipcard-width);
+  height: var(--kemet-flipcard-height);
+  aspect-ratio: var(--kemet-flipcard-ratio);
+  perspective: 1000px;
+}
+
+section {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  transition: transform 0.8s;
+  transform-style: preserve-3d;
+}
+
+.front,
+.back {
+  color: inherit;
+  position: absolute;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  /* overflow: hidden; */
+  border-radius: var(--kemet-flipcard-border-radius);
+  border: var(--kemet-flipcard-border);
+}
+
+:host([rounded]) {
+  --kemet-flipcard-border-radius: var(--kemet-border-radius-md);
+}
+
+:host([rounded=sm]) {
+  --kemet-flipcard-border-radius: var(--kemet-border-radius-sm);
+}
+
+:host([rounded=lg]) {
+  --kemet-flipcard-border-radius: var(--kemet-border-radius-lg);
+}
+
+:host([rounded=xl]) {
+  --kemet-flipcard-border-radius: var(--kemet-border-radius-xl);
+}
+
+:host([rounded=pill]) {
+  --kemet-flipcard-border-radius: var(--kemet-border-radius-pill);
+}
+
+:host([rounded=circle]) {
+  --kemet-flipcard-border-radius: var(--kemet-border-radius-circle);
+}
+
+:host([flipped]) .front {
+  z-index: -1;
+}
+
+:host([axis="horizontal"]) .back {
+  transform: rotateY(180deg);
+}
+
+:host([flipped][axis="horizontal"]) section {
+  transform: rotateY(180deg);
+}
+
+:host([axis="vertical"]) .back {
+  transform: rotateX(180deg);
+}
+
+:host([flipped][axis="vertical"]) section {
+  transform: rotateX(180deg);
+}
+
+:host([flip-on-hover]) section {
+  cursor: pointer;
+}
+
+::slotted([slot="front"]),
+::slotted([slot="back"]) {
+  display: inline-block;
+  margin: auto;
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+`;
+export {
+  styles_css_default as default
+};
+//# sourceMappingURL=styles.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/flipcard/styles.css.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport default css`:host {\n  --kemet-flipcard-width: 100%;\n  --kemet-flipcard-height: auto;\n  --kemet-flipcard-ratio: 16/9;\n  --kemet-flipcard-border-radius: 0;\n  --kemet-flipcard-border: 1px solid;\n\n  display: inline-block;\n  width: var(--kemet-flipcard-width);\n  height: var(--kemet-flipcard-height);\n  aspect-ratio: var(--kemet-flipcard-ratio);\n  perspective: 1000px;\n}\n\nsection {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  transition: transform 0.8s;\n  transform-style: preserve-3d;\n}\n\n.front,\n.back {\n  color: inherit;\n  position: absolute;\n  display: flex;\n  width: 100%;\n  height: 100%;\n  backface-visibility: hidden;\n  /* overflow: hidden; */\n  border-radius: var(--kemet-flipcard-border-radius);\n  border: var(--kemet-flipcard-border);\n}\n\n:host([rounded]) {\n  --kemet-flipcard-border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=sm]) {\n  --kemet-flipcard-border-radius: var(--kemet-border-radius-sm);\n}\n\n:host([rounded=lg]) {\n  --kemet-flipcard-border-radius: var(--kemet-border-radius-lg);\n}\n\n:host([rounded=xl]) {\n  --kemet-flipcard-border-radius: var(--kemet-border-radius-xl);\n}\n\n:host([rounded=pill]) {\n  --kemet-flipcard-border-radius: var(--kemet-border-radius-pill);\n}\n\n:host([rounded=circle]) {\n  --kemet-flipcard-border-radius: var(--kemet-border-radius-circle);\n}\n\n:host([flipped]) .front {\n  z-index: -1;\n}\n\n:host([axis=\"horizontal\"]) .back {\n  transform: rotateY(180deg);\n}\n\n:host([flipped][axis=\"horizontal\"]) section {\n  transform: rotateY(180deg);\n}\n\n:host([axis=\"vertical\"]) .back {\n  transform: rotateX(180deg);\n}\n\n:host([flipped][axis=\"vertical\"]) section {\n  transform: rotateX(180deg);\n}\n\n:host([flip-on-hover]) section {\n  cursor: pointer;\n}\n\n::slotted([slot=\"front\"]),\n::slotted([slot=\"back\"]) {\n  display: inline-block;\n  margin: auto;\n  position: relative;\n  width: 100%;\n  height: 100%;\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;","names":[]}

package/dist/elements/flipcard-trigger/index.d.ts

@@ -0,0 +1,32 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-flipcard-trigger
+ * @summary Triggers a flipcard component to flip.
+ *
+ * @event kemet-flipcard-trigger-flipped - Fires when a flipcard is flipped
+ *
+ * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background
+ * @prop {string} dom - The status of dom initalization.
+ */
+declare class KemetFlipcardTrigger extends LitElement {
+    static styles: lit.CSSResult[];
+    polarity?: 'light' | 'dark';
+    dom: string;
+    firstUpdated(): void;
+    render(): lit_html.TemplateResult<1>;
+    trigger(): void;
+    handleKeyup(event: KeyboardEvent): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-flipcard-trigger': KemetFlipcardTrigger;
+    }
+}
+
+export { KemetFlipcardTrigger as default };

package/dist/elements/flipcard-trigger/index.js

@@ -0,0 +1,77 @@
+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/flipcard-trigger/index.ts
+import { LitElement, html, css } 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/flipcard-trigger/index.ts
+var KemetFlipcardTrigger = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.dom = "initializing";
+  }
+  firstUpdated() {
+    emitEvent(this, "kemet-flipcard-trigger-mounted", {
+      bubbles: true,
+      composed: true,
+      detail: {
+        element: this
+      }
+    });
+    this.dom = "mounted";
+  }
+  render() {
+    return html`
+      <slot tabindex="0" @click=${() => this.trigger()} @keypress=${(event) => this.handleKeyup(event)}></slot>
+    `;
+  }
+  trigger() {
+    emitEvent(this, "kemet-flipcard-trigger-flipped", {
+      bubbles: true,
+      composed: true,
+      detail: { element: this }
+    });
+  }
+  handleKeyup(event) {
+    event.preventDefault();
+    if (event.key === "Enter") {
+      this.trigger();
+    }
+  }
+};
+KemetFlipcardTrigger.styles = [
+  css`
+      :host {
+        cursor: pointer;
+      }
+    `
+];
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetFlipcardTrigger.prototype, "polarity", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetFlipcardTrigger.prototype, "dom", 2);
+KemetFlipcardTrigger = __decorateClass([
+  customElement("kemet-flipcard-trigger")
+], KemetFlipcardTrigger);
+export {
+  KemetFlipcardTrigger as default
+};
+//# sourceMappingURL=index.js.map

package/dist/elements/flipcard-trigger/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/flipcard-trigger/index.ts","../../../src/utilities/events.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/events';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-flipcard-trigger\n * @summary Triggers a flipcard component to flip.\n *\n * @event kemet-flipcard-trigger-flipped - Fires when a flipcard is flipped\n *\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\n@customElement('kemet-flipcard-trigger')\nexport default class KemetFlipcardTrigger extends LitElement {\n  static styles = [\n    css`\n      :host {\n        cursor: pointer;\n      }\n    `,\n  ];\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  firstUpdated() {\n    emitEvent(this, 'kemet-flipcard-trigger-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  render() {\n    return html`\n      <slot tabindex=\"0\" @click=${() => this.trigger()} @keypress=${(event: KeyboardEvent) => this.handleKeyup(event)}></slot>\n    `;\n  }\n\n  trigger() {\n    emitEvent(this, 'kemet-flipcard-trigger-flipped', {\n      bubbles: true,\n      composed: true,\n      detail: { element: this }\n    });\n  }\n\n  handleKeyup(event: KeyboardEvent) {\n    event.preventDefault();\n\n    if (event.key === 'Enter') {\n      this.trigger();\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-flipcard-trigger': KemetFlipcardTrigger\n  }\n}\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAAA,SAAS,YAAY,MAAM,WAAW;AACtC,SAAS,eAAe,gBAAgB;;;ACDjC,IAAM,YAAY,CAAC,SAAS,MAAM,QAAQ,UAAU,MAAM,WAAW,SAAS;AACnF,UAAQ;AAAA,IACN,IAAI,YAAY,MAAM,EAAE,SAAS,UAAU,OAAO,CAAC;AAAA,EACrD;AACF;;;ADcA,IAAqB,uBAArB,cAAkD,WAAW;AAAA,EAA7D;AAAA;AAaE,eAAc;AAAA;AAAA,EAEd,eAAe;AACb,cAAU,MAAM,kCAAkC;AAAA,MAChD,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF,CAAC;AACD,SAAK,MAAM;AAAA,EACb;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,kCACuB,MAAM,KAAK,QAAQ,CAAC,cAAc,CAAC,UAAyB,KAAK,YAAY,KAAK,CAAC;AAAA;AAAA,EAEnH;AAAA,EAEA,UAAU;AACR,cAAU,MAAM,kCAAkC;AAAA,MAChD,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ,EAAE,SAAS,KAAK;AAAA,IAC1B,CAAC;AAAA,EACH;AAAA,EAEA,YAAY,OAAsB;AAChC,UAAM,eAAe;AAErB,QAAI,MAAM,QAAQ,SAAS;AACzB,WAAK,QAAQ;AAAA,IACf;AAAA,EACF;AACF;AA/CqB,qBACZ,SAAS;AAAA,EACd;AAAA;AAAA;AAAA;AAAA;AAKF;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GATtB,qBAUnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAZtB,qBAanB;AAbmB,uBAArB;AAAA,EADC,cAAc,wBAAwB;AAAA,GAClB;","names":[]}

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

@@ -0,0 +1,60 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+declare enum EnumLibrary {
+    FONTAWESOME = "fontawesome",
+    BOOTSTRAP = "bootstrap"
+}
+/**
+ * @since 5.0.0
+ * @status stable
+ *
+ * @tagname kemet-icon
+ * @summary An element that represents an icon from a predefined set of open sourced icons.
+ *
+ * @prop {string} name - The name of the icon to reference.
+ * @prop {string} library - The library of icons to use. Values include: (bootstrap | fontawesome)
+ * @prop {string} family - The family of icons to use. The family is relative to the library being used. Font awesome values include: (regular | solid | brand)
+ * @prop {string} version - The version of the icon library to use. Use latest to grab the most recent version.
+ * @prop {number} size - The width and height of the icon in pixels.
+ * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background
+ * @prop {string} dom - The status of dom initalization.
+ *
+ * @fires kemet-icon-mounted - Fired when the icon is mounted to the DOM
+ * @detail {HTMLElement} element - The icon element
+ *
+ */
+declare class KemetIcon extends LitElement {
+    static styles: lit.CSSResult[];
+    name: string;
+    library: string;
+    family: string;
+    size: number;
+    version?: string;
+    polarity?: 'light' | 'dark';
+    dom: string;
+    /** @internal */
+    private svg;
+    /** @internal */
+    private url;
+    /** @internal */
+    private isVisible;
+    connectedCallback(): void;
+    updated(): void;
+    firstUpdated(): void;
+    render(): SVGElement | lit_html.TemplateResult<1>;
+    /** Public method to force icon loading */
+    loadIcon(): void;
+    setIcon(): Promise<void>;
+    private updateUrl;
+    private resolveIcon;
+    private updateSize;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-icon': KemetIcon;
+    }
+}
+
+export { EnumLibrary, KemetIcon as default };