kemet-ui 1.3.0 → 1.4.0

package/dist/components/kemet-accordion/kemet-accordion-panel.js

@@ -1,6 +1,32 @@
 import { html, css, LitElement } from 'lit';
+import { emitEvent } from '../../utilities/misc/events.js';
 import '../kemet-icon/kemet-icon.js';
 
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-accordion-panel
+ * @summary A blade for an accordion.
+ *
+ * @prop {boolean} opened - Determines the opened state of the panel
+ * @prop {string} maxHeight - Sets the max height of the panel's body
+ * @prop {string} slug - Uniquely identifies a panel for accessibility purposes
+ *
+ * @slot trigger - The trigger button that opens and closes the panel.
+ * @slot body - The body content of the panel.
+ * @slot icon - The icon for the panel.
+ *
+ * @cssproperty --kemet-accordion-panel-transition-speed - The speed of the opening and closing effect. Default: 0.3s.
+ *
+ * @csspart trigger - Contains the trigger for the panel.
+ * @csspart body - Contains the body for the panel.
+ *
+ * @event kemet-accordion-panel-opened - Fires when a panel is opened
+ * @event kemet-accordion-panel-closed - Fires when a panel is closed
+ *
+ */
+
 export default class KemetAccordionPanel extends LitElement {
   static get styles() {
     return [
@@ -43,23 +69,14 @@ export default class KemetAccordionPanel extends LitElement {
 
   static get properties() {
     return {
-      /**
-       * Determines the opened state of the panel
-       */
       opened: {
         type: Boolean,
         reflect: true,
       },
-      /**
-       * Sets the max height of the panel's body
-       */
       maxHeight: {
         type: String,
         attribute: 'max-height',
       },
-      /**
-       * Uniquely identifies a panel for accessibility purposes
-       */
       slug: {
         type: String,
       },
@@ -76,6 +93,7 @@ export default class KemetAccordionPanel extends LitElement {
   }
 
   firstUpdated() {
+    /** @internal */
     this.focusableSelector = 'body, a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]';
     this.bodyElement = this.querySelector('[slot="body"]');
     this.bodyElementFirst = this.bodyElement.querySelector(':first-child');
@@ -88,32 +106,12 @@ export default class KemetAccordionPanel extends LitElement {
   updated(prevProps) {
     if (!prevProps.get('opened') && this.opened === true) {
       this.maxHeight = `${this.bodyElement.offsetHeight}px`;
-
-      /**
-       * Fires when a panel is opened
-       */
-      this.dispatchEvent(
-        new CustomEvent('kemet-accordion-panel-opened', {
-          bubbles: true,
-          composed: true,
-          detail: this,
-        }),
-      );
+      emitEvent(this, 'kemet-accordion-panel-opened', this);
     }
 
     if (prevProps.get('opened') && this.opened === false) {
       this.maxHeight = '0px';
-
-      /**
-       * Fires when a panel is closed
-       */
-      this.dispatchEvent(
-        new CustomEvent('kemet-accordion-panel-closed', {
-          bubbles: true,
-          composed: true,
-          detail: this,
-        }),
-      );
+      emitEvent(this, 'kemet-accordion-panel-closed', this);
     }
 
     this.a11y();

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

@@ -1,5 +1,17 @@
 import { html, css, LitElement } from 'lit';
 
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-accordion
+ * @summary A component that acts like a standard accordion.
+ *
+ * @prop {number} currentPanel - The index value for the most recently opened panel
+ * @prop {boolean} togglePanels - Support for closing all inactive panels when one is opened
+ *
+ */
+
 export default class KemetAccordion extends LitElement {
   static get styles() {
     return [
@@ -13,15 +25,9 @@ export default class KemetAccordion extends LitElement {
 
   static get properties() {
     return {
-      /**
-       * The index value for the most recently opened panel
-       */
       currentPanel: {
         type: Number,
       },
-      /**
-       * Support for closing all inactive panels when one is opened
-       */
       togglePanels: {
         type: Boolean,
         attribute: 'toggle-panels',

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

@@ -0,0 +1,106 @@
+import { html, LitElement } from 'lit';
+import { emitEvent } from '../../utilities/misc/events.js';
+import { stylesBase } from './styles.js';
+
+/**
+ * @since 1.4.0
+ * @status stable
+ *
+ * @tagname kemet-alert
+ * @summary Calls out important messages and notifications.
+ *
+ * @prop {boolean} opened - Determines if the alert is opened or not.
+ * @prop {boolean} reveal - Fades in the alert when opened.
+ * @prop {boolean} closable - Adds a close button to the alert.
+ * @prop {string} borderStatus - Adds a border that indicates the status.
+ * @prop {boolean} hidden - Hides the element from document flow.
+ * @prop {string} overlay - Fixes the alert over content in specified position.
+ *
+ * @slot default - The contents of the alert.
+ *
+ * @event kemet-alert-opened - Fires when alert is opened.
+ * @event kemet-alert-closed - Fires when alert is closed.
+ *
+ * @csspart close - Container for the close button.
+ *
+ * @cssproperty --kemet-alert-padding - The padding on the alert. Default: 1rem.
+ * @cssproperty --kemet-alert-border-thickness - The thickness of the border. Default: 4px.
+ * @cssproperty --kemet-alert-status-color - The status color. Default: inherit.
+ * @cssproperty --kemet-alert-gap - The alert's gap. Default: var(--kemet-alert-padding).
+ * @cssproperty --kemet-alert-align-items - The alert's alignment. Default: center.
+ * @cssproperty --kemet-alert-border - The border around the alert. Default: 1px solid var(--kemet-color-gray2).
+ *
+ */
+
+export default class KemetAlert extends LitElement {
+  static get styles() {
+    return [stylesBase];
+  }
+
+  static get properties() {
+    return {
+      opened: { type: Boolean, reflect: true },
+      reveal: { type: Boolean, reflect: true },
+      closable: { type: Boolean, reflect: true },
+      borderStatus: { type: String, reflect: true, attribute: 'border-status' },
+      hidden: { type: Boolean, reflect: true },
+      overlay: { type: String, reflect: true },
+    };
+  }
+
+  shouldUpdate(prevProps) {
+    if (prevProps.has('opened') && !prevProps.get('opened')) {
+      this.hidden = false;
+      this.reveal = true;
+    }
+
+    return true;
+  }
+
+  firstUpdated() {
+    this.handleMotion();
+  }
+
+  updated(prevProps) {
+    if (!prevProps.get('opened') && this.opened === true) {
+      emitEvent(this, 'kemet-alert-opened', this);
+    } else {
+      emitEvent(this, 'kemet-alert-closed', this);
+    }
+  }
+
+  render() {
+    return html`
+      <slot name="icon"></slot>
+      <div>
+        <slot></slot>
+      </div>
+      <div class="close" part="close">
+        ${this.makeCloseBtn()}
+      </div>
+    `;
+  }
+
+  makeCloseBtn() {
+    if (this.closable) {
+      return html`<kemet-icon icon="x-lg" @click=${() => { this.opened = false; }}></kemet-icon>`;
+    }
+
+    return null;
+  }
+
+  handleMotion() {
+    this.addEventListener('transitionend', () => {
+      if (!this.opened) {
+        this.hidden = true;
+      }
+    });
+
+    this.addEventListener('animationend', () => {
+      this.reveal = false;
+    });
+  }
+}
+
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-alert') || customElements.define('kemet-alert', KemetAlert);

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

@@ -0,0 +1,104 @@
+import { css } from 'lit';
+
+export const stylesBase = css`
+  :host {
+    --kemet-alert-padding: 1rem;
+    --kemet-alert-border-thickness: 4px;
+    --kemet-alert-status-color: inherit;
+
+    display: flex;
+    grid-template-columns: auto 1fr auto;
+    gap: var(--kemet-alert-gap, var(--kemet-alert-padding));
+    align-items: var(--kemet-alert-align-items, center);
+    opacity: 0;
+    padding: var(--kemet-alert-padding);
+    border: var(--kemet-alert-border, 1px solid var(--kemet-color-gray2));
+    transition: opacity 300ms ease;
+  }
+
+  :host([opened]) {
+    opacity: 1;
+  }
+
+  :host([border-status="top"]) {
+    border-top: var(--kemet-alert-border-thickness) solid var(--kemet-alert-status-color);
+  }
+
+  :host([border-status="right"]) {
+    border-right: var(--kemet-alert-border-thickness) solid var(--kemet-alert-status-color);
+  }
+
+  :host([border-status="bottom"]) {
+    border-bottom: var(--kemet-alert-border-thickness) solid var(--kemet-alert-status-color);
+  }
+
+  :host([border-status="left"]) {
+    border-left: var(--kemet-alert-border-thickness) solid var(--kemet-alert-status-color);
+  }
+
+  :host([status="standard"]) {
+    --kemet-alert-status-color: var(--kemet-color-black);
+  }
+
+  :host([status="primary"]) {
+    --kemet-alert-status-color: var(--kemet-color-primary);
+  }
+
+  :host([status="success"]) {
+    --kemet-alert-status-color: var(--kemet-color-success);
+  }
+
+  :host([status="warning"]) {
+    --kemet-alert-status-color: var(--kemet-color-warning);
+  }
+
+  :host([status="error"]) {
+    --kemet-alert-status-color: var(--kemet-color-error);
+  }
+
+  :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;
+  }
+
+  .close {
+    cursor: pointer;
+    margin-left: auto;
+  }
+
+  ::slotted(kemet-icon) {
+    color: var(--kemet-alert-status-color);
+  }
+
+  @keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+`;

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

@@ -0,0 +1,118 @@
+import { html, css, LitElement } from 'lit';
+
+/**
+ * @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 {boolean} 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-color - The color of the text. Default: var(--kemet-color-white).
+ * @cssproperty --kemet-avatar-background-color - The color of the background. Default: var(--kemet-color-gray4).
+ * @cssproperty --kemet-avatar-rounded-radius - The border radius of the rounded type. Default: 1rem.
+ * @cssproperty --kemet-avatar-initials-margin - The space around the initials. Default: 1rem.
+ *
+ */
+
+export default class KemetAvatar extends LitElement {
+  static get styles() {
+    return [
+      css`
+        *,
+        *::before,
+        *::after {
+          box-sizing: border-box;
+        }
+
+        :host {
+          display: inline-flex;
+          color: var(--kemet-avatar-color, var(--kemet-color-white));
+          position: relative;
+          background-color: var(--kemet-avatar-background-color, var(--kemet-color-gray4));
+        }
+
+        :host([circle]) {
+          border-radius: 50%;
+        }
+
+        :host([circle]) > * {
+          border-radius: 50%;
+        }
+
+        :host([rounded]) {
+          border-radius: var(--kemet-avatar-rounded-radius, 1rem);
+        }
+
+        :host([rounded]) > * {
+          border-radius: var(--kemet-avatar-rounded-radius, 1rem);
+        }
+
+        .initials {
+          margin: var(--kemet-avatar-initials-margin, 1rem);
+        }
+
+        ::slotted(kemet-badge) {
+          position: absolute;
+          bottom: 0;
+          right: 0;
+          border-radius: 50%;
+        }
+      `,
+    ];
+  }
+
+  static get properties() {
+    return {
+      size: { type: Number },
+      image: { type: String },
+      label: { type: String },
+      initials: { type: String },
+      circle: { type: Boolean, reflect: true },
+      rounded: { type: Boolean, reflect: true },
+    };
+  }
+
+  firstUpdated() {
+    this.makeSize();
+  }
+
+  render() {
+    return html`
+      ${this.makeContent()}
+      <slot name="status"></slot>
+    `;
+  }
+
+  makeSize() {
+    if (this.size) {
+      this.style.width = `${this.size}px`;
+      this.style.height = `${this.size}px`;
+    }
+  }
+
+  makeContent() {
+    if (this.image) {
+      return html`<img src=${this.image} alt=${this.label} />`;
+    }
+
+    if (this.initials) {
+      return html`<div part="initials" class="initials">${this.initials}</div>`;
+    }
+
+    return html`<slot></slot>`;
+  }
+}
+
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-avatar') || customElements.define('kemet-avatar', KemetAvatar);

package/dist/components/kemet-avatar/kemet-avatars.js

@@ -0,0 +1,41 @@
+import { html, css, LitElement } from 'lit';
+
+/**
+ * @since 1.4.0
+ * @status stable
+ *
+ * @tagname kemet-avatars
+ * @summary Groups multiple avatars.
+ *
+ * @cssproperty --kemet-avatars-squeeze - The space between avatars. Default: -1.5rem.
+ *
+ */
+
+export default class KemetAvatars extends LitElement {
+  static get styles() {
+    return [
+      css`
+        *,
+        *::before,
+        *::after {
+          box-sizing: border-box;
+        }
+
+        :host {
+          display: inline-flex;
+        }
+
+        ::slotted(kemet-avatar:not(:first-of-type)) {
+          margin-left: var(--kemet-avatars-squeeze, -1.5rem);
+        }
+      `,
+    ];
+  }
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-avatars') || customElements.define('kemet-avatars', KemetAvatars);

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

@@ -1,5 +1,21 @@
 import { html, css, LitElement } from 'lit';
 
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-badge
+ * @summary Badges display the status of information.
+ *
+ * @prop {string} status - The status of the badge
+ * @prop {boolean} circle - Displays the badge in a circle
+ * @prop {boolean} pill - Rounds the corners on the badge
+ * @prop {number} circlePadding - Padding on the badge as a circle
+ *
+ * @cssproperty --kemet-badge-padding - The padding of the badge. Default: 10px.
+ *
+ */
+
 export default class KemetBadge extends LitElement {
   static get styles() {
     return [
@@ -46,30 +62,18 @@ export default class KemetBadge extends LitElement {
 
   static get properties() {
     return {
-      /**
-       * The status of the badge
-       */
       status: {
         type: String,
         reflect: true,
       },
-      /**
-       * Displays the badge in a circle
-       */
       circle: {
         type: Boolean,
         reflect: true,
       },
-      /**
-       * Rounds the corners on the badge
-       */
       pill: {
         type: Boolean,
         reflect: true,
       },
-      /**
-       * Padding on the badge as a circle
-       */
       circlePadding: {
         type: Number,
         attribute: 'circle-padding',

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

@@ -2,6 +2,47 @@ import { html, css, LitElement } from 'lit';
 import '../kemet-icon/kemet-icon.js';
 import { FormSubmitController } from '../../utilities/controllers/forms.js';
 
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-button
+ * @summary A versatile button that can be used either to submit a form, trigger an action, or link to content.
+ *
+ * @prop {boolean} active - Determines whether or not the button is active
+ * @prop {boolean} hover - Is true when the button is hovered
+ * @prop {boolean} focused - Is true when the button is focused
+ * @prop {string} link - The url a button should link too
+ * @prop {boolean} outlined - Outline style for a button
+ * @prop {boolean} disabled - Determines whether not a button is disabled
+ * @prop {string} type - Controls the type of button. standard | text | circle | rounded | pill
+ *
+ * @slot left - Allows you to place an icon to the left of the button text.
+ * @slot right - Allows you to place an icon to the right of the button text.
+ *
+ * @csspart button - The button or anchor element.
+ *
+ * @cssproperty --kemet-button-font-size - The font size. Default: inherit.
+ * @cssproperty --kemet-button-color - The text color. Default: --kemet-color-white.
+ * @cssproperty --kemet-button-width - The width. Default: auto.
+ * @cssproperty --kemet-button-height - The height. Default:  auto.
+ * @cssproperty --kemet-button-border - The border. Default: 0.
+ * @cssproperty --kemet-button-border-radius - The border radius. Default: 0.
+ * @cssproperty --kemet-button-transition-speed - The transition speed of the hover effect. Default: 300ms.
+ * @cssproperty --kemet-button-background-color - The background color. Default: --kemet-color-primary.
+ * @cssproperty --kemet-button-hover-brightness - The brightness of the hover effect. Default: 1.25.
+ * @cssproperty --kemet-button-gap - The gap between the button and icons. Default: 0.5rem.
+ * @cssproperty --kemet-button-padding - The button padding. Default: 1rem 1.25rem.
+ * @cssproperty --kemet-button-hover-decoration - The decoration for a text button's hover. Default: underline.
+ * @cssproperty --kemet-button-circle-size - The diameter of a circle button. Default: 50px.
+ * @cssproperty --kemet-button-rounded-amount - The border radius of the rounded button. Default: 6px.
+ * @cssproperty --kemet-button-border-width - The width of the outline border. Default: 1px.
+ * @cssproperty --kemet-button-border-style - The style of the outline border. Default: solid.
+ * @cssproperty --kemet-button-border-color - The color of the outline border. Default: --kemet-color-primary.
+ * @cssproperty --kemet-button-disabled-opacity - The opacity of the disabled state. Default: 0.5.
+ *
+ */
+
 export default class KemetButton extends LitElement {
   static get styles() {
     return [
@@ -80,51 +121,29 @@ export default class KemetButton extends LitElement {
 
   static get properties() {
     return {
-      /**
-       * Determines whether or not the button is active
-       */
       active: {
         type: Boolean,
         reflect: true,
       },
-      /**
-       * Is true when the button is hovered
-       */
       hover: {
         type: Boolean,
         reflect: true,
       },
-      /**
-       * Is true when the button is focused
-       */
       focused: {
         type: Boolean,
         reflect: true,
       },
-      /**
-       * The url a button should link too
-       */
       link: {
         type: String,
       },
-      /**
-       * Outline style for a button
-       */
       outlined: {
         type: Boolean,
         reflect: true,
       },
-      /**
-       * Determines whether not a button is disabled
-       */
       disabled: {
         type: Boolean,
         reflect: true,
       },
-      /**
-       * Controls the type of button
-       * standard | text | circle | rounded | pill
-       */
       type: {
         type: String,
         reflect: true,
@@ -145,9 +164,7 @@ export default class KemetButton extends LitElement {
     this.outline = false;
     this.disable = false;
 
-    /**
-      * Used only for form reactive controller
-      */
+    /** @internal */
     this.formSubmitController = new FormSubmitController(this);
   }