kemet-ui 0.2.0 → 1.1.0

package/dist/components/{kemet-drawer.js → kemet-drawer/kemet-drawer.js}

@@ -1,25 +1,39 @@
 import { LitElement, html } from 'lit';
 import { stylesBase, stylesEffects } from './kemet-drawer.styles.js';
 
-export class KemetDrawer extends LitElement {
+export default class KemetDrawer extends LitElement {
   static get styles() {
     return [stylesBase, stylesEffects];
   }
 
   static get properties() {
     return {
+      /**
+       * Determines if the drawer is opened or not.
+       */
       opened: {
         type: Boolean,
         reflect: true,
       },
+      /**
+       * The animation effect for opening and closing the drawer.
+       * Values include: (slide | reveal | push | scale)
+       */
       effect: {
         type: String,
         reflect: true,
       },
+      /**
+       * Allows you to control which side the drawer opens from.
+       * Values include: (left | right | top | bottom)
+       */
       side: {
         type: String,
         reflect: true,
       },
+      /**
+       * Adds a overlay over the content section of the Drawer when opened
+       */
       overlay: {
         type: Boolean,
         reflect: true,
@@ -30,7 +44,7 @@ export class KemetDrawer extends LitElement {
   constructor() {
     super();
 
-    // property defaults
+    // managed properties
     this.opened = undefined;
     this.effect = 'slide';
     this.side = 'left';
@@ -47,11 +61,29 @@ export class KemetDrawer extends LitElement {
 
   updated(prevProps) {
     if (!prevProps.get('opened') && this.opened === true) {
-      this.makeEvent('opened');
+      /**
+       * Fires when the drawer opens.
+       */
+      this.dispatchEvent(
+        new CustomEvent('kemet-drawer-opened', {
+          bubbles: true,
+          composed: true,
+          detail: this,
+        }),
+      );
     }
 
     if (prevProps.get('opened') && this.opened === false) {
-      this.makeEvent('closed');
+      /**
+       * Fires when the drawer closes.
+       */
+      this.dispatchEvent(
+        new CustomEvent('kemet-drawer-closed', {
+          bubbles: true,
+          composed: true,
+          detail: this,
+        }),
+      );
     }
   }
 
@@ -71,16 +103,7 @@ export class KemetDrawer extends LitElement {
       </section>
     `;
   }
-
-  makeEvent(type) {
-    this.dispatchEvent(
-      new CustomEvent(`kemet-drawer-${type}`, {
-        bubbles: true,
-        composed: true,
-        detail: this,
-      }),
-    );
-  }
 }
 
-window.customElements.define('kemet-drawer', KemetDrawer);
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-drawer') || customElements.define('kemet-drawer', KemetDrawer);

package/dist/components/{kemet-drawer.styles.js → kemet-drawer/kemet-drawer.styles.js}

@@ -3,6 +3,12 @@ import { css, unsafeCSS } from 'lit';
 const documentHeight = `${document.documentElement.scrollHeight}px`;
 
 export const stylesBase = css`
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
   :host {
     width: 100%;
   }

package/dist/components/kemet-field/kemet-field.js

@@ -0,0 +1,233 @@
+import { html, css, LitElement } from 'lit';
+
+export default class KemetField extends LitElement {
+  static get styles() {
+    return [
+      css`
+        *,
+        *::before,
+        *::after {
+          box-sizing: border-box;
+        }
+
+        :host {
+          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;
+        }
+
+        :host([status='error']) kemet-icon {
+          color: var(--kemet-color-error);
+        }
+
+        :host([status='success']) kemet-icon {
+          color: var(--kemet-color-success);
+        }
+
+        :host([status='warning']) kemet-icon {
+          color: var(--kemet-color-warning);
+        }
+
+        .message {
+          font-size: 0.9rem;
+          line-height: 1;
+          display: block;
+          margin-top: 0.8rem;
+        }
+
+        :host([status='error']) .message {
+          color: var(--kemet-color-error);
+        }
+
+        :host([status='success']) .message {
+          color: var(--kemet-color-success);
+        }
+
+        :host([status='warning']) .message {
+          color: var(--kemet-color-warning);
+        }
+      `,
+    ];
+  }
+
+  static get properties() {
+    return {
+      /**
+       * Uniquely identifies the control. Use the same slug for slotted sub components.
+       */
+      slug: {
+        type: String,
+      },
+      /**
+       * The label text
+       */
+      label: {
+        type: String,
+      },
+      /**
+       * The validation message for error or success
+       */
+      message: {
+        type: String,
+      },
+      /**
+       * Determines if the containing input is focused
+       */
+      focused: {
+        type: Boolean,
+        reflect: true,
+      },
+      /**
+       * The validation status of standard, error, or success
+       */
+      status: {
+        type: String,
+        reflect: true,
+      },
+      /**
+       * Is true when the containing input has a value
+       */
+      filled: {
+        type: Boolean,
+        reflect: true,
+      },
+      /**
+       * The length of the containing input
+       */
+      length: {
+        type: Number,
+      },
+      /**
+       * Determines the disabled state of the control
+       */
+      disabled: {
+        type: Boolean,
+        reflect: true,
+      },
+      /**
+       * The icon while in an error or warning state
+       */
+      errorIcon: {
+        type: String,
+        attribute: 'error-icon',
+      },
+      /**
+       * The icon while in an success state
+       */
+      successIcon: {
+        type: String,
+        attribute: 'success-icon',
+      },
+    };
+  }
+
+  constructor() {
+    super();
+
+    // managed properties
+    this.status = 'standard';
+    this.errorIcon = 'exclamation-triangle-fill';
+    this.successIcon = 'check-lg';
+
+    // listeners
+    this.addEventListener('kemet-input-focused', event => this.handleFocused(event));
+    this.addEventListener('kemet-input-status', event => this.handleStatus(event));
+    this.addEventListener('kemet-input-input', event => this.handleInput(event));
+    this.addEventListener('kemet-count-status', event => this.handleStatus(event));
+    this.addEventListener('kemet-combo-selection', event => this.handleSelection(event));
+  }
+
+  firstUpdated() {
+    this.slotInput = this.querySelector('[slot="input"]');
+    this.slotCombo = this.querySelector('[slot="combo"]');
+
+    if (this.slotInput.value) {
+      this.length = this.slotInput.value.length;
+    } else {
+      this.length = 0;
+    }
+  }
+
+  render() {
+    return html`
+      <label for="${this.slug}" id="${this.slug}-label" part="label">
+        <span>${this.label}${this.makeStatusIcon()}</span>
+        <slot name="input"></slot>
+      </label>
+      ${this.makeStatusMessage()}
+      <slot name="component"></slot>
+    `;
+  }
+
+  makeStatusIcon() {
+    if (this.status === 'error' || this.status === 'warning') {
+      return html`<kemet-icon icon="${this.errorIcon}" size="16"></kemet-icon>`;
+    }
+
+    if (this.status === 'success') {
+      return html`<kemet-icon icon="${this.successIcon}" size="16"></kemet-icon>`;
+    }
+
+    return null;
+  }
+
+  makeStatusMessage() {
+    if (this.status !== 'standard') {
+      return html`<span class="message" part="message">${this.message}</span>`;
+    }
+
+    return null;
+  }
+
+  handleFocused(event) {
+    this.focused = event.detail;
+
+    if (!this.focused && this.slotCombo && this.slotCombo.options.length < 1) {
+      this.slotCombo.show = false;
+    }
+  }
+
+  handleStatus(event) {
+    this.status = event.detail.status;
+  }
+
+  handleInput(event) {
+    /**
+     * Fires when input fires on the input slot
+     */
+    this.dispatchEvent(
+      new CustomEvent('kemet-field-input', {
+        bubbles: false,
+        detail: event.detail.length,
+      }),
+    );
+
+    if (event.detail === '') {
+      this.filled = false;
+    } else {
+      this.filled = true;
+    }
+  }
+
+  handleSelection(event) {
+    this.slotInput.setAttribute('aria-activedescendant', event.detail);
+  }
+}
+
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-field') || customElements.define('kemet-field', KemetField);

package/dist/components/{kemet-flipcard-trigger.js → kemet-flipcard/kemet-flipcard-trigger.js}

@@ -1,6 +1,6 @@
 import { LitElement, html, css } from 'lit';
 
-export class KemetFlipcardTrigger extends LitElement {
+export default class KemetFlipcardTrigger extends LitElement {
   static get styles() {
     return [
       css`
@@ -11,9 +11,7 @@ export class KemetFlipcardTrigger extends LitElement {
     ];
   }
 
-  constructor() {
-    super();
-
+  firstUpdated() {
     this.keyCodes = {
       ENTER: 13,
       SPACE: 32,
@@ -43,4 +41,5 @@ export class KemetFlipcardTrigger extends LitElement {
   }
 }
 
-window.customElements.define('kemet-flipcard-trigger', KemetFlipcardTrigger);
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-flipcard-trigger') || customElements.define('kemet-flipcard-trigger', KemetFlipcardTrigger);

package/dist/components/{kemet-flipcard.js → kemet-flipcard/kemet-flipcard.js}

@@ -1,12 +1,19 @@
 import { html, css, LitElement } from 'lit';
 
-export class KemetFlipcard extends LitElement {
+export default class KemetFlipcard extends LitElement {
   static get styles() {
     return css`
+      *,
+      ::after,
+      ::before {
+        box-sizing: border-box;
+      }
+
       :host {
         display: inline-block;
         width: var(--kemet-flipcard-width, 100%);
-        height: var(--kemet-flipcard-height, 240px);
+        height: var(--kemet-flipcard-height, auto);
+        aspect-ratio: var(--kemet-flipcard-ratio, 16/9);
         perspective: 1000px;
       }
 
@@ -25,6 +32,14 @@ export class KemetFlipcard extends LitElement {
         width: 100%;
         height: 100%;
         backface-visibility: hidden;
+        /* overflow: hidden; */
+        border-radius: var(--kemet-flipcard-border-radius, 0);
+        border: var(--kemet-flipcard-border, 2px solid var(--kemet-color-primary));
+      }
+
+      :host([rounded]) .front,
+      :host([rounded]) .back {
+        border-radius: var(--kemet-border-radius);
       }
 
       .front {
@@ -32,6 +47,10 @@ export class KemetFlipcard extends LitElement {
         background-color: var(--kemet-flipcard-front-background-color, #fafafa);
       }
 
+      :host([flipped]) .front {
+        z-index: -1;
+      }
+
       .back {
         color: var(--kemet-flipcard-back-color, #202020);
         background-color: var(--kemet-flipcard-back-background-color, #fafafa)
@@ -62,6 +81,8 @@ export class KemetFlipcard extends LitElement {
         display: inline-block;
         margin: auto;
         position: relative;
+        width: 100%;
+        height: 100%;
       }
     `;
   }
@@ -161,4 +182,6 @@ export class KemetFlipcard extends LitElement {
     }, 0);
   }
 }
-window.customElements.define('kemet-flipcard', KemetFlipcard);
+
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-flipcard') || window.customElements.define('kemet-flipcard', KemetFlipcard);

package/dist/components/{kemet-icon.js → kemet-icon/kemet-icon.js}

@@ -3,15 +3,26 @@ import {
   html, css, LitElement,
 } from 'lit';
 
-export class KemetIcon extends LitElement {
+export default class KemetIcon extends LitElement {
   static get properties() {
     return {
+      /**
+       * The name of the icon to reference.
+       */
       icon: {
         type: String,
       },
+      /**
+       * The sprite map from an open source project that an icon belongs too.
+       * Values include:
+       * (bootstrap | font-awesome-brand | font-awesome-regular | font-awesome-solid)
+       */
       set: {
         type: String,
       },
+      /**
+       * The width and height of the icon in pixels.
+       */
       size: {
         type: Number,
       },
@@ -22,7 +33,9 @@ export class KemetIcon extends LitElement {
     return [
       css`
         :host {
-          display: inline-block;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
         }
       `,
     ];
@@ -38,6 +51,8 @@ export class KemetIcon extends LitElement {
 
   updated() {
     this.getIcon();
+    this.style.width = `${this.size}px`;
+    this.style.height = `${this.size}px`;
   }
 
   render() {
@@ -106,4 +121,5 @@ export class KemetIcon extends LitElement {
   }
 }
 
-window.customElements.define('kemet-icon', KemetIcon);
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-icon') || customElements.define('kemet-icon', KemetIcon);