kemet-ui 1.3.0 → 1.4.0

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

@@ -1,148 +1,49 @@
-import { html, css, LitElement } from 'lit';
+import { html, LitElement } from 'lit';
+import { stylesBase } from './styles.js';
+
+/**
+ * @since 1.2.0
+ * @status stable
+ *
+ * @tagname kemet-fab
+ * @summary The FAB, or Floating Action Button, performs a primary action on a page.
+ *
+ * @prop {boolean} expanded - The expanded state of the button.
+ * @prop {boolean} outlined - Outline style for a button.
+ * @prop {boolean} disabled - Determines whether not a button is disabled.
+ * @prop {boolean} pill - Displays the fab with rounded corners.
+ * @prop {number} expandPoint - The distance, in pixels, where the fab should automatically expand.
+ * @prop {number} collapsePoint - The distance, in pixels, where the fab should automatically collapse.
+ *
+ * @slot Icon - A slot for an icon to display.
+ * @slot default - The text for the FAB.
+ *
+ * @cssproperty --kemet-fab-size - The width and height of the fab. Default: 50px.
+ * @cssproperty --kemet-fab-color - The text color of the fab. Default: var(--kemet-color-white).
+ * @cssproperty --kemet-fab-background-color - The bg color of the tab. Default: var(--kemet-color-primary).
+ * @cssproperty --kemet-fab-outlined-color - The text color of an outlined fab. Default: var(--kemet-color-primary).
+ * @cssproperty --kemet-fab-outlined-border - The border of an outlined fab. Default: 1px solid var(--kemet-color-primary).
+ * @cssproperty --kemet-fab-pill-radius - The border radius of a pill fab. Default: 10rem.
+ *
+ * @csspart button - The button's container.
+ * @csspart icon -  The FAB's icon.
+ * @csspart text - The text in the FAB.
+ *
+ */
 
 export default class KemetFAB extends LitElement {
   static get styles() {
-    return [
-      css`
-        :host {
-          --kemet-fab-size: 50px;
-
-          display: inline-block;
-          position: relative;
-        }
-
-        button {
-          color: var(--kemet-fab-color, var(--kemet-color-white));
-          font-size: inherit;
-          display: inline-flex;
-          padding: 0;
-          position: relative;
-          min-height: var(--kemet-fab-size);
-          min-width: var(--kemet-fab-size);
-          max-width: var(--kemet-fab-size);
-          align-items: center;
-          justify-content: flex-start;
-          transition: all 0.4s ease;
-          border: none;
-          background-color: var(--kemet-fab-background-color, var(--kemet-color-primary));
-        }
-
-        :host([outlined]) button {
-          color: var(--kemet-fab-outlined-color, var(--kemet-color-primary));
-          border: var(--kemet-fab-outlined-border, 1px solid var(--kemet-color-primary));
-          background-color: transparent;
-        }
-
-        :host([pill]) button {
-          border-radius: var(--kemet-fab-pill-radius, 10rem);
-        }
-
-        button::before {
-          content: '';
-          position: absolute;
-          top: 0;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          z-index: -1;
-          width: 100%;
-          height: 100%;
-          transition: background-color 0.3s ease-in-out;
-          background-color: var(--kemet-fab-background-color, var(--kemet-color-primary));
-        }
-
-        :host([pill]) button::before {
-          border-radius: var(--kemet-fab-pill-radius, 10rem);
-        }
-
-        :host([outlined]) button::before {
-          border: var(--kemet-fab-outline-border, 1px solid var(--kemet-color-primary));
-          background-color: transparent;
-        }
-
-        :host([expanded]) button {
-          max-width: 99rem;
-          padding: 0 1.35rem 0 0.25rem;
-        }
-
-        :host([disabled]) button {
-          opacity: 0.5;
-          cursor: not-allowed;
-        }
-
-        .icon {
-          width: var(--kemet-fab-size);
-          height: var(--kemet-fab-size);
-          display: flex;
-          flex: 0 0 auto;
-          align-items: center;
-          justify-content: center;
-        }
-
-        .text {
-          color: var(--kemet-fab-color, var(--kemet-color-white));
-          z-index: 1;
-          white-space: nowrap;
-          pointer-events: none;
-          opacity: 0;
-          transition: opacity 0.2s ease-in-out;
-        }
-
-        :host([outlined]) .text {
-          color: var(--kemet-fab-outlined-color, var(--kemet-color-primary));
-        }
-
-        :host([expanded]) .text {
-          opacity: 1;
-        }
-      `,
-    ];
+    return [stylesBase];
   }
 
   static get properties() {
     return {
-      /**
-       * The expanded state of the button
-       */
-      expanded: {
-        type: Boolean,
-        reflect: true,
-      },
-      /**
-       * Outline style for a button
-       */
-      outlined: {
-        type: Boolean,
-        reflect: true,
-      },
-      /**
-       * Determines whether not a button is disabled
-       */
-      disabled: {
-        type: Boolean,
-        reflect: true,
-      },
-      /**
-       * Displays the fab with rounded corners
-       */
-      pill: {
-        type: Boolean,
-        reflect: true,
-      },
-      /**
-       * The distance, in pixels, where the fab should automatically expand
-       */
-      expandPoint: {
-        type: Number,
-        attribute: 'expand-point',
-      },
-      /**
-       * The distance, in pixels, where the fab should automatically collapse
-       */
-      collapsePoint: {
-        type: Number,
-        attribute: 'collapse-point',
-      },
+      expanded: { type: Boolean, reflect: true },
+      outlined: { type: Boolean, reflect: true },
+      disabled: { type: Boolean, reflect: true },
+      pill: { type: Boolean, reflect: true },
+      expandPoint: { type: Number, attribute: 'expand-point' },
+      collapsePoint: { type: Number, attribute: 'collapse-point' },
     };
   }
 

package/dist/components/kemet-fab/styles.js

@@ -0,0 +1,95 @@
+import { css } from 'lit';
+
+export const stylesBase = css`
+  :host {
+    --kemet-fab-size: 50px;
+
+    display: inline-block;
+    position: relative;
+  }
+
+  button {
+    color: var(--kemet-fab-color, var(--kemet-color-white));
+    font-size: inherit;
+    display: inline-flex;
+    padding: 0;
+    position: relative;
+    min-height: var(--kemet-fab-size);
+    min-width: var(--kemet-fab-size);
+    max-width: var(--kemet-fab-size);
+    align-items: center;
+    justify-content: flex-start;
+    transition: all 0.4s ease;
+    border: none;
+    background-color: var(--kemet-fab-background-color, var(--kemet-color-primary));
+  }
+
+  :host([outlined]) button {
+    color: var(--kemet-fab-outlined-color, var(--kemet-color-primary));
+    border: var(--kemet-fab-outlined-border, 1px solid var(--kemet-color-primary));
+    background-color: transparent;
+  }
+
+  :host([pill]) button {
+    border-radius: var(--kemet-fab-pill-radius, 10rem);
+  }
+
+  button::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: -1;
+    width: 100%;
+    height: 100%;
+    transition: background-color 0.3s ease-in-out;
+    background-color: var(--kemet-fab-background-color, var(--kemet-color-primary));
+  }
+
+  :host([pill]) button::before {
+    border-radius: var(--kemet-fab-pill-radius, 10rem);
+  }
+
+  :host([outlined]) button::before {
+    border: var(--kemet-fab-outline-border, 1px solid var(--kemet-color-primary));
+    background-color: transparent;
+  }
+
+  :host([expanded]) button {
+    max-width: 99rem;
+    padding: 0 1.35rem 0 0.25rem;
+  }
+
+  :host([disabled]) button {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .icon {
+    width: var(--kemet-fab-size);
+    height: var(--kemet-fab-size);
+    display: flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .text {
+    color: var(--kemet-fab-color, var(--kemet-color-white));
+    z-index: 1;
+    white-space: nowrap;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.2s ease-in-out;
+  }
+
+  :host([outlined]) .text {
+    color: var(--kemet-fab-outlined-color, var(--kemet-color-primary));
+  }
+
+  :host([expanded]) .text {
+    opacity: 1;
+  }
+`;

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

@@ -1,4 +1,33 @@
 import { html, css, LitElement } from 'lit';
+import { emitEvent } from '../../utilities/misc/events.js';
+
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-field
+ * @summary Used in combination with Input, Select, and Textarea, to make a Field.
+ *
+ * @prop {string} slug - Uniquely identifies the control. Use the same slug for slotted sub components.
+ * @prop {string} label - The label text
+ * @prop {string} message - The validation message for error or success
+ * @prop {boolean} focused - Determines if the containing input is focused
+ * @prop {string} status - The validation status of standard, error, or success
+ * @prop {boolean} filled - Is true when the containing input has a value
+ * @prop {number} length - The length of the containing input
+ * @prop {boolean} disabled - Determines the disabled state of the control
+ * @prop {string} errorIcon - The icon while in an error or warning state
+ * @prop {string} successIcon - The icon while in an success state
+ *
+ * @slot component - Allows sub components of the field to display.
+ *
+ * @csspart label - The label of the field.
+ * @csspart message - The validation message of the field.
+ * @csspart text - The text in the label.
+ *
+ * @event kemet-field-input - Fires when input fires on the input slot
+ *
+ */
 
 export default class KemetField extends LitElement {
   static get styles() {
@@ -67,68 +96,38 @@ export default class KemetField extends LitElement {
 
   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',
@@ -166,7 +165,7 @@ export default class KemetField extends LitElement {
   render() {
     return html`
       <label for="${this.slug}" id="${this.slug}-label" part="label">
-        <span>${this.label}${this.makeStatusIcon()}</span>
+        <span part="text">${this.label}${this.makeStatusIcon()}</span>
         <slot name="input"></slot>
       </label>
       ${this.makeStatusMessage()}
@@ -207,15 +206,7 @@ export default class KemetField extends LitElement {
   }
 
   handleInput(event) {
-    /**
-     * Fires when input fires on the input slot
-     */
-    this.dispatchEvent(
-      new CustomEvent('kemet-field-input', {
-        bubbles: false,
-        detail: event.detail.length,
-      }),
-    );
+    emitEvent(this, 'kemet-field-input', event.detail.length);
 
     if (event.detail === '') {
       this.filled = false;

package/dist/components/kemet-flipcard/kemet-flipcard-trigger.js

@@ -1,4 +1,15 @@
 import { LitElement, html, css } from 'lit';
+import { emitEvent } from '../../utilities/misc/events.js';
+
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-flipcard-trigger
+ * @summary Triggers a flipcard component to flip.
+ *
+ * @event kemet-flipcard-flipped - Fires when a flipcard is flipped
+ */
 
 export default class KemetFlipcardTrigger extends LitElement {
   static get styles() {
@@ -25,11 +36,7 @@ export default class KemetFlipcardTrigger extends LitElement {
   }
 
   trigger() {
-    this.dispatchEvent(new CustomEvent('kemet-flipcard-flipped', {
-      bubbles: true,
-      composed: true,
-      detail: this,
-    }));
+    emitEvent(this, 'kemet-flipcard-flipped', this);
   }
 
   handleKeyup(event) {

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

@@ -1,5 +1,29 @@
 import { html, css, LitElement } from 'lit';
 
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-flipcard
+ * @summary A card that has a front and back side which can be flipped.
+ *
+ * @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-front-color - The text color for the front of the card. Default: #202020.
+ * @cssproperty --kemet-flipcard-back-color - The text color for the back of the card. Default: #202020.
+ * @cssproperty --kemet-flipcard-front-background-color - The background color for the front of the card. Default: #fafafa.
+ * @cssproperty --kemet-flipcard-back-background-color - The background color for the back of the card. Default: #fafafa.
+ * @cssproperty --kemet-flipcard-border - The border on the front and back of the card. Default: 2px solid var(--kemet-color-primary).
+ * @cssproperty --kemet-flipcard-border-radius - The border radius on the front and back of the card. Default: 0.
+ * @cssproperty --kemet-flipcard-ratio - The aspect ratio of the card. Default: 16/9.
+ *
+ */
+
 export default class KemetFlipcard extends LitElement {
   static get styles() {
     return css`
@@ -93,21 +117,17 @@ export default class KemetFlipcard extends LitElement {
         type: String,
         reflect: true,
       },
-
       flipped: {
         type: Boolean,
         reflect: true,
       },
-
       flipOnHover: {
         type: Boolean,
         attribute: 'flip-on-hover',
       },
-
       height: {
         type: String,
       },
-
       measure: {
         type: Boolean,
       },

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

@@ -1,28 +1,29 @@
+/* eslint-disable max-len */
 /* eslint-disable no-console */
-import {
-  html, css, LitElement,
-} from 'lit';
+import { html, css, LitElement } from 'lit';
+
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-icon
+ * @summary An element that represents an icon from a predefined set of open sourced icons.
+ *
+ * @prop {string} icon - The name of the icon to reference.
+ * @prop {string} set - 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)
+ * @prop {number} size - The width and height of the icon in pixels.
+ *
+ */
 
 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,
       },
@@ -95,7 +96,10 @@ export default class KemetIcon extends LitElement {
             .st0{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
             .st1{fill-rule:evenodd;clip-rule:evenodd;fill:#EC1C24;}
           </style>
-          <g><path class="st0" d="M256,0c70.7,0,134.7,28.7,181,75c46.3,46.3,75,110.3,75,181c0,70.7-28.7,134.7-75,181   c-46.3,46.3-110.3,75-181,75c-70.7,0-134.7-28.7-181-75C28.7,390.7,0,326.7,0,256c0-70.7,28.7-134.7,75-181S185.3,0,256,0z"/><path class="st1" d="M512,256c0-70.7-28.7-134.7-75-181C390.7,28.7,326.7,0,256,0C193,0,135.5,22.8,90.9,60.6l-0.1-0.1   C85.3,65.1,80,69.9,75,75c-5,5.1-9.9,10.3-14.5,15.8l0.1,0.1C22.8,135.5,0,193,0,256c0,70.7,28.7,134.7,75,181   c46.3,46.3,110.3,75,181,75c63,0,120.5-22.8,165.1-60.6l0.1,0.1c5.4-4.6,10.7-9.5,15.8-14.5c5-5,9.9-10.3,14.5-15.8l-0.1-0.1   C489.2,376.6,512,319,512,256z M256,42.9c58.9,0,112.1,23.9,150.7,62.4c38.6,38.6,62.4,91.9,62.4,150.7c0,51.1-18.1,98-48.1,134.8   L121.2,90.9C158,60.9,204.9,42.9,256,42.9z M256,469.1c-58.8,0-112.1-23.9-150.7-62.4C66.7,368.1,42.9,314.9,42.9,256   c0-51.1,18.1-98,48.1-134.8l299.8,299.8C354,451.1,307.1,469.1,256,469.1z"/></g>
+          <g>
+            <path class="st0" d="M256,0c70.7,0,134.7,28.7,181,75c46.3,46.3,75,110.3,75,181c0,70.7-28.7,134.7-75,181   c-46.3,46.3-110.3,75-181,75c-70.7,0-134.7-28.7-181-75C28.7,390.7,0,326.7,0,256c0-70.7,28.7-134.7,75-181S185.3,0,256,0z"/>
+            <path class="st1" d="M512,256c0-70.7-28.7-134.7-75-181C390.7,28.7,326.7,0,256,0C193,0,135.5,22.8,90.9,60.6l-0.1-0.1   C85.3,65.1,80,69.9,75,75c-5,5.1-9.9,10.3-14.5,15.8l0.1,0.1C22.8,135.5,0,193,0,256c0,70.7,28.7,134.7,75,181   c46.3,46.3,110.3,75,181,75c63,0,120.5-22.8,165.1-60.6l0.1,0.1c5.4-4.6,10.7-9.5,15.8-14.5c5-5,9.9-10.3,14.5-15.8l-0.1-0.1   C489.2,376.6,512,319,512,256z M256,42.9c58.9,0,112.1,23.9,150.7,62.4c38.6,38.6,62.4,91.9,62.4,150.7c0,51.1-18.1,98-48.1,134.8   L121.2,90.9C158,60.9,204.9,42.9,256,42.9z M256,469.1c-58.8,0-112.1-23.9-150.7-62.4C66.7,368.1,42.9,314.9,42.9,256   c0-51.1,18.1-98,48.1-134.8l299.8,299.8C354,451.1,307.1,469.1,256,469.1z"/>
+          </g>
         </svg>
       `;