kemet-ui 1.3.0 → 1.4.0

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

@@ -0,0 +1,66 @@
+import { css } from 'lit';
+
+export const stylesCarousel = css`
+  :host,
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  :host {
+    position: relative;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    align-items: center;
+    width: var(--kemet-carousel-width, 100%);
+    height: var(--kemet-carousel-height, auto);
+    overflow: visible;
+  }
+
+  :host([arrows]) {
+    grid-template-columns: auto minmax(0, 1fr) auto;
+  }
+
+  .toolbar {
+    display: flex;
+    gap: var(--kemet-carousel-toolbar-gap, 1rem);
+    align-items: center;
+    justify-content: var(--kemet-carousel-toolbar-justify-content, center);
+    line-height: 1;
+    padding: var(--kemet-carousel-toolbar-padding, 1rem);
+  }
+
+  :host([inner]) .toolbar {
+    width: var(--kemet-carousel-toolbar-inner-width, 100%);
+    position: absolute;
+    bottom: var(--kemet-carousel-toolbar-inner-bottom, 0);
+    top: var(--kemet-carousel-toolbar-inner-top, auto);
+    color: var(--kemet-carousel-toolbar-inner-color, var(--kemet-color-white));
+    background-color: var(--kemet-carousel-toolbar-inner-background-color, rgba(0, 0, 0, 0.4));
+  }
+
+  .slides {
+    overflow: hidden;
+    position: relative;
+    padding: 1rem 0;
+    border: var(--kemet-carousel-slides-border, 1px solid var(--kemet-color-gray1));
+  }
+
+  .slider {
+    display: flex;
+    flex-wrap: nowrap;
+    transition: transform var(--kemet-carousel-transition-speed, 300ms) ease;
+  }
+
+  ::slotted([slot='next']),
+  ::slotted([slot='prev']) {
+    opacity: var(--kemet-carousel-arrows-opacity, 0.25);
+    transition: opacity var(--kemet-carousel-arrows-transition-speed, 300ms) ease-in-out;
+  }
+
+  :host(:hover) ::slotted([slot='next']),
+  :host(:hover) ::slotted([slot='prev']) {
+    opacity: var(--kemet-carousel-arrows-opacity-hover, 1);
+  }
+`;

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

@@ -2,6 +2,30 @@ import { html, css, LitElement } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
 import { FormSubmitController } from '../../utilities/controllers/forms.js';
+import { emitEvent } from '../../utilities/misc/events.js';
+
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-checkbox
+ * @summary An enhanced checkbox.
+ *
+ * @csspart label - The label element.
+ * @csspart text - The the label's text.
+ * @csspart mark - The icon of the check mark.
+ *
+ * @cssproperty --kemet-checkbox-size - The width and height of the checkbox. Default: 18px.
+ * @cssproperty --kemet-checkbox-color - The color of the checkbox's mark. Default: var(--kemet-color-primary).
+ * @cssproperty --kemet-checkbox-border - The border of the checkbox. Default: 1px solid var(--kemet-color-primary).
+ * @cssproperty --kemet-checkbox-border-radius - The border radius of the checkbox. Default: 4px.
+ * @cssproperty --kemet-checkbox-filled-color - The filled color of the checkbox's mark. Default: var(--kemet-color-white).
+ * @cssproperty --kemet-checkbox-filled-background-color - The filled background color. Default: var(--kemet-color-primary).
+ *
+ * @event kemet-checkbox-change - Fires when the state of the checkbox changes
+ * @event kemet-checkbox-focused - Fires when the checkbox loses or receives focus
+ *
+ */
 
 export default class KemetCheckbox extends LitElement {
   static get styles() {
@@ -151,9 +175,7 @@ export default class KemetCheckbox extends LitElement {
     this.filled = false;
     this.status = 'standard';
 
-    /**
-     * Used only for form reactive controller
-     */
+    /** @internal */
     this.formSubmitController = new FormSubmitController(this);
   }
 
@@ -194,46 +216,17 @@ export default class KemetCheckbox extends LitElement {
   handleClick() {
     this.checked = !this.checked;
     this.indeterminate = false;
-
-    /**
-     * Fires when the state of the checkbox changes
-     */
-    this.dispatchEvent(
-      new CustomEvent('kemet-checkbox-change', {
-        bubbles: true,
-        composed: true,
-        detail: this,
-      }),
-    );
+    emitEvent(this, 'kemet-checkbox-change', this);
   }
 
   handleBlur() {
     this.focused = false;
-
-    /**
-     * Fires when the checkbox loses or receives focus
-     */
-    this.dispatchEvent(
-      new CustomEvent('kemet-checkbox-focused', {
-        bubbles: true,
-        composed: true,
-        detail: false,
-      }),
-    );
+    emitEvent(this, 'kemet-checkbox-focused', false);
   }
 
   handleFocus() {
     this.focused = true;
-    /**
-     * Fires when the checkbox loses or receives focus
-     */
-    this.dispatchEvent(
-      new CustomEvent('kemet-checkbox-focused', {
-        bubbles: true,
-        composed: true,
-        detail: true,
-      }),
-    );
+    emitEvent(this, 'kemet-checkbox-focused', true);
   }
 
   handleChange() {

package/dist/components/kemet-combo/kemet-combo.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-combo
+ * @summary Allows the user to select a choice filtered through an Input. May only be used as a component of Field.
+ *
+ * @prop {string} slug - Uniquely identifies the component. Should match the slug used in a control.
+ * @prop {array} options - An array of items listed for the combo box
+ * @prop {boolean} show - Controls the display of the combo box
+ *
+ * @csspart combobox - The combo's container element.
+ * @csspart listbox - The list element in the combo.
+ *
+ * @cssproperty --kemet-combo-width - The width of the combo box. Default: calc(100% - 2px).
+ * @cssproperty --kemet-combo-margin - The margins on the combo box. Default: 1rem auto.
+ * @cssproperty --kemet-combo-max-height - The max height of the combo box. Default: calc(5 * 3rem).
+ * @cssproperty --kemet-combo-border - The border of the combo box. Default: 1px solid var(--kemet-color-primary).
+ * @cssproperty --kemet-combo-border-radius - The border radius of the combo box. Default: var(--kemet-border-radius).
+ * @cssproperty --kemet-combo-background-color - The background color of the combo box. Default: var(--kemet-color-white).
+ * @cssproperty --kemet-combo-shadow - The shadow of the combo box. Default: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1).
+ * @cssproperty --kemet-combo-hover-color - The hover item's text color. Default:  var(--kemet-color-white).
+ * @cssproperty --kemet-combo-hover-background-color - The hover item's background color. Default: var(--kemet-color-primary).
+ *
+ * @event kemet-combo-selection - Fires when a selection has been made
+ *
+ */
 
 export default class KemetCombo extends LitElement {
   static get styles() {
@@ -50,27 +79,16 @@ export default class KemetCombo extends LitElement {
 
   static get properties() {
     return {
-      /**
-       * Uniquely identifies the component. Should match the slug used in a control.
-       */
       slug: {
         type: String,
       },
-      /**
-       * An array of items listed for the combo box
-       */
       options: {
         type: Array,
       },
-      /**
-       * Used internally
-       */
+      /** @internal */
       filteredOptions: {
         type: Array,
       },
-      /**
-       * Controls the display of the combo box
-       */
       show: {
         type: Boolean,
         reflect: true,
@@ -78,6 +96,11 @@ export default class KemetCombo extends LitElement {
     };
   }
 
+  constructor() {
+    super();
+    this.options = [];
+  }
+
   firstUpdated() {
     // standard properties
     this.field = this.closest('kemet-field');
@@ -95,13 +118,14 @@ export default class KemetCombo extends LitElement {
     return html`
       <div
         role="combobox"
+        part="combobox"
         aria-expanded=${this.show}
         aria-controls="${this.slug}-listbox"
         aria-haspopup="listbox"
         id="${this.slug}-combobox"
         aria-label="${this.field?.label}"
       >
-        <ul role="listbox" aria-labelledby="${this.slug}-label" id="${this.slug}-listbox">
+        <ul role="listbox" aria-labelledby="${this.slug}-label" id="${this.slug}-listbox" part="listbox">
           ${this.makeOptions()}
         </ul>
       </div>
@@ -111,7 +135,7 @@ export default class KemetCombo extends LitElement {
   makeOptions() {
     if (this.input) {
       this.filteredOptions = this.options.filter(
-        option => option.toLowerCase().indexOf(this.input.value.toLowerCase()) !== -1,
+        option => option.toLowerCase().indexOf(this.input.value?.toLowerCase()) !== -1,
       );
 
       const options = this.filteredOptions.map(
@@ -147,20 +171,11 @@ export default class KemetCombo extends LitElement {
     this.input.value = event.target.innerText;
     this.show = false;
 
-    /**
-     * Fires when a selection has been made
-     */
-    this.dispatchEvent(
-      new CustomEvent('kemet-combo-selection', {
-        bubbles: true,
-        composed: true,
-        detail: {
-          element: event.target,
-          text: event.target.innerText,
-          id: event.target.getAttribute('id'),
-        },
-      }),
-    );
+    emitEvent(this, 'kemet-combo-section', {
+      element: event.target,
+      text: event.target.innerText,
+      id: event.target.getAttribute('id'),
+    });
   }
 
   handleOptionKeyDown(event) {

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

@@ -1,4 +1,23 @@
 import { html, css, LitElement } from 'lit';
+import { emitEvent } from '../../utilities/misc/events.js';
+
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-count
+ * @summary Maintains a character count for a input field. Is to be used only in the component slot of a Field component.
+ *
+ * @prop {string} message - The text label shown to users
+ * @prop {number} remaining - The number of characters remaining
+ * @prop {number} limit - The maximum number of characters allowed
+ * @prop {boolean} validateImmediately - Set to true if the field should validate as soon as the character limit is reached
+ *
+ * @cssproperty --kemet-count-font-size - The font size. Default: 90%.
+ *
+ * @event kemet-count-status - Fires when there's a change in status.
+ *
+ */
 
 export default class KemetCount extends LitElement {
   static get styles() {
@@ -15,27 +34,15 @@ export default class KemetCount extends LitElement {
 
   static get properties() {
     return {
-      /**
-       * The text label shown to users
-       */
       message: {
         type: String,
       },
-      /**
-       * The number of characters remaining
-       */
       remaining: {
         type: Number,
       },
-      /**
-       * The maximum number of characters allowed
-       */
       limit: {
         type: Number,
       },
-      /**
-       * Set to true if the field should validate as soon as the character limit is reached
-       */
       validateImmediately: {
         type: Boolean,
         attribute: 'validate-immediately',
@@ -62,39 +69,21 @@ export default class KemetCount extends LitElement {
             this.inputSlot.status = 'error';
             this.inputSlot.invalid = true;
 
-            /**
-             * Fires when there's a change in status.
-             */
-            this.dispatchEvent(
-              new CustomEvent('kemet-count-status', {
-                bubbles: true,
-                composed: true,
-                detail: {
-                  status: 'error',
-                  validity: nativeElement.validity,
-                  element: this.inputSlot,
-                },
-              }),
-            );
+            emitEvent(this, 'kemet-count-status', {
+              status: 'error',
+              validity: nativeElement.validity,
+              element: this.inputSlot,
+            });
           }
         } else {
           this.inputSlot.status = 'standard';
           nativeElement.checkValidity();
 
-          /**
-           * Fires when there's a change in status.
-           */
-          this.dispatchEvent(
-            new CustomEvent('kemet-count-status', {
-              bubbles: true,
-              composed: true,
-              detail: {
-                status: 'standard',
-                validity: nativeElement.validity,
-                element: this.inputSlot,
-              },
-            }),
-          );
+          emitEvent(this, 'kemet-count-status', {
+            status: 'standard',
+            validity: nativeElement.validity,
+            element: this.inputSlot,
+          });
         }
       }
     });

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

@@ -1,4 +1,22 @@
 import { html, css, LitElement } from 'lit';
+import { emitEvent } from '../../utilities/misc/events.js';
+
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-draggable
+ * @summary A draggable element with the ability to remember its position.
+ *
+ * @prop {string} memory - A unique identifier used to store the element's position in local storage.
+ * @prop {string} top - The elements top position in pixels.
+ * @prop {string} left - The element's left position in pixels.
+ * @prop {boolean} measure - If set to true, will measure the width and height of the element's content and apply it to the host element.
+ *
+ * @event kemet-draggable-start
+ * @event kemet-draggable-stop
+ *
+ */
 
 export default class KemetDraggable extends LitElement {
   static get styles() {
@@ -15,28 +33,15 @@ export default class KemetDraggable extends LitElement {
 
   static get properties() {
     return {
-      /**
-       * A unique identifier used to store the element's position in local storage.
-       */
       memory: {
         type: String,
       },
-      /**
-       * The elements top position in pixels.
-       */
       top: {
         type: String,
       },
-      /**
-       * The element's left position in pixels.
-       */
       left: {
         type: String,
       },
-      /**
-       * If set to true, will measure the width and height
-       * of the element's content and apply it to the host element.
-       */
       measure: {
         type: Boolean,
       },
@@ -54,6 +59,7 @@ export default class KemetDraggable extends LitElement {
 
   firstUpdated() {
     // standard properties
+    /** @internal */
     this.position1 = 0;
     this.position2 = 0;
     this.position3 = 0;
@@ -93,11 +99,7 @@ export default class KemetDraggable extends LitElement {
     document.addEventListener('mouseup', this.mouseUp);
     document.addEventListener('mousemove', this.mouseMove);
 
-    this.dispatchEvent(new CustomEvent('kemet-draggable-start', {
-      bubbles: true,
-      composed: true,
-      detail: this,
-    }));
+    emitEvent(this, 'kemet-draggable-start', this);
   }
 
   drag(event) {
@@ -125,11 +127,7 @@ export default class KemetDraggable extends LitElement {
       localStorage.setItem(this.memory, JSON.stringify(savedPosition));
     }
 
-    this.dispatchEvent(new CustomEvent('kemet-draggable-stop', {
-      bubbles: true,
-      composed: true,
-      detail: this,
-    }));
+    emitEvent(this, 'kemet-draggable-stop', this);
   }
 
   measureContent() {

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

@@ -1,5 +1,38 @@
 import { LitElement, html } from 'lit';
-import { stylesBase, stylesEffects } from './kemet-drawer.styles.js';
+import { stylesBase, stylesEffects } from './styles.js';
+import { emitEvent } from '../../utilities/misc/events.js';
+
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-drawer
+ * @summary A component that adds an off-canvas menu with different effects.
+ *
+ * @prop {boolean} opened - Determines if the drawer is opened or not.
+ * @prop {string} effect - The animation effect for opening and closing the drawer. Values include: (slide | reveal | push | scale)
+ * @prop {string} side - Allows you to control which side the drawer opens from. Values include: (left | right | top | bottom)
+ * @prop {boolean} overlay - Adds a overlay over the content section of the Drawer when opened
+ *
+ * @slot navigation - The off-screen nav area of your app or site
+ * @slot content - The main content area of your app or site.
+ *
+ * @csspart container
+ * @csspart drawer
+ * @csspart pusher
+ * @csspart content
+ * @csspart wrapper
+ *
+ * @cssproperty --kemet-drawer-width - The width of the drawer. Default: 300px.
+ * @cssproperty --kemet-drawer-height - The height of the drawer. Default:  100%.
+ * @cssproperty --kemet-drawer-color - The text color of the drawer. Default:  #fafafa.
+ * @cssproperty --kemet-drawer-background-color - The background color of the drawer. Default: #202020.
+ * @cssproperty --kemet-drawer-overlay-color - The color of the overlay. Default: rgba(0, 0, 0, 0.2).
+ *
+ * @event kemet-drawer-opened - Fires when the drawer opens.
+ * @event kemet-drawer-closed - Fires when the drawer closes.
+ *
+ */
 
 export default class KemetDrawer extends LitElement {
   static get styles() {
@@ -8,32 +41,18 @@ export default class KemetDrawer extends LitElement {
 
   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,
@@ -61,29 +80,11 @@ export default class KemetDrawer extends LitElement {
 
   updated(prevProps) {
     if (!prevProps.get('opened') && this.opened === true) {
-      /**
-       * Fires when the drawer opens.
-       */
-      this.dispatchEvent(
-        new CustomEvent('kemet-drawer-opened', {
-          bubbles: true,
-          composed: true,
-          detail: this,
-        }),
-      );
+      emitEvent(this, 'kemet-drawer-opened', this);
     }
 
     if (prevProps.get('opened') && this.opened === false) {
-      /**
-       * Fires when the drawer closes.
-       */
-      this.dispatchEvent(
-        new CustomEvent('kemet-drawer-closed', {
-          bubbles: true,
-          composed: true,
-          detail: this,
-        }),
-      );
+      emitEvent(this, 'kemet-drawer-closed', this);
     }
   }