kemet-ui 0.2.0 → 1.0.0

package/dist/components/kemet-radios.js

@@ -0,0 +1,218 @@
+import { html, css, LitElement } from 'lit';
+import { FormSubmitController } from '../../utilities/controllers/forms.js';
+
+export default class KemetRadios extends LitElement {
+  static get styles() {
+    return [
+      css`
+        *,
+        *::before,
+        *::after {
+          box-sizing: border-box;
+        }
+
+        :host {
+          display: block;
+        }
+
+        fieldset {
+          border: 0;
+          margin: 0;
+          padding: 0;
+          display: flex;
+          gap: 0.5rem;
+        }
+
+        legend {
+          margin-bottom: 1rem;
+        }
+
+        :host([axis='vertical']) fieldset {
+          flex-direction: column;
+        }
+
+        [part='message'] {
+          display: block;
+          margin-top: 0.5rem;
+        }
+
+        :host([status='error']) [part='message'] {
+          color: var(--kemet-color-error);
+        }
+
+        :host([status='warning']) [part='message'] {
+          color: var(--kemet-color-error);
+        }
+      `,
+    ];
+  }
+
+  static get properties() {
+    return {
+      /**
+       * The legend text for the fieldset
+       */
+      legend: {
+        type: String,
+      },
+      /**
+       * The direction of the button's layout
+       */
+      axis: {
+        type: String,
+        reflect: true,
+      },
+      /**
+       * The value of the selected radio button
+       */
+      value: {
+        type: String,
+      },
+      /**
+       * The name of the radio button set
+       */
+      name: {
+        type: String,
+      },
+      /**
+       * The status of the radio button set
+       */
+      status: {
+        type: String,
+        reflect: true,
+      },
+      /**
+       * Validation message for the user
+       */
+      message: {
+        type: String,
+      },
+      /**
+       * Determines whether or not the radio button set is required
+       */
+      required: {
+        type: Boolean,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+
+    // managed properties
+    this.legend = '';
+    this.axis = 'horizontal';
+    this.name = 'radios';
+    this.status = 'standard';
+
+    /**
+     * Used only for form reactive controller
+     */
+    this.formSubmitController = new FormSubmitController(this);
+  }
+
+  firstUpdated() {
+    this.radios = this.querySelectorAll('kemet-radio');
+    this.setAttribute('role', 'radiogroup');
+  }
+
+  render() {
+    return html`
+      <fieldset part="fieldset">
+        ${this.legend !== '' ? html`<legend part="legend">${this.legend}</legend>` : null}
+        <slot @click=${event => this.handleClick(event)} @keydown=${event => this.handleKeyDown(event)} @slotchange=${() => this.handleSlotChange()}></slot>
+      </fieldset>
+      ${this.makeMessage()}
+    `;
+  }
+
+  handleClick(event) {
+    const { target } = event;
+
+    this.radios.forEach((radio) => {
+      radio.checked = false;
+      radio.tabIndex = radio === target ? 0 : -1;
+      radio.setAttribute('aria-checked', 'false');
+    });
+
+    if (!target.disabled) {
+      target.checked = true;
+      target.setAttribute('aria-checked', 'true');
+      this.value = target.value;
+      this.status = 'standard';
+
+      /**
+       * Fires when the state of the checkbox changes
+       */
+      this.dispatchEvent(
+        new CustomEvent('kemet-radios-change', {
+          bubbles: true,
+          composed: true,
+          detail: target,
+        }),
+      );
+    }
+  }
+
+  handleKeyDown(event) {
+    const radios = Array.from(this.radios);
+    const arrowKeys = ['ArrowUp', 'ArrowRight', 'ArrowDown', 'ArrowLeft'];
+    const forwardKeys = ['ArrowRight', 'ArrowDown'];
+    const shift = forwardKeys.includes(event.key) ? 1 : -1;
+    const checkedIndex = radios.findIndex(radio => radio.checked) ?? radios[0];
+
+    let index = checkedIndex + shift;
+
+    if (arrowKeys.includes(event.key)) {
+      if (index < 0) {
+        index = radios.length - 1;
+      }
+
+      if (index > radios.length - 1) {
+        index = 0;
+      }
+
+      this.radios.forEach((radio) => {
+        radio.checked = false;
+        radio.tabIndex = -1;
+      });
+
+      this.radios[index].focus();
+      this.radios[index].checked = true;
+      this.radios[index].tabIndex = 0;
+    }
+  }
+
+  handleSlotChange() {
+    const radios = Array.from(this.radios);
+    const checkedRadio = radios.find(radio => radio.checked);
+
+    this.radios.forEach((radio) => {
+      radio.tabIndex = -1;
+      radio.input.tabIndex = -1;
+    });
+
+    if (checkedRadio) {
+      checkedRadio.tabIndex = 0;
+    }
+  }
+
+  makeMessage() {
+    if (this.status === 'error' || this.status === 'warning') {
+      return html`<span part="message">${this.message}</span>`;
+    }
+
+    return null;
+  }
+
+  checkValidity() {
+    if (this.required) {
+      return !!this.value;
+    }
+
+    return true;
+  }
+}
+
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-radios') || customElements.define('kemet-radios', KemetRadios);

package/dist/components/kemet-rotator.js

@@ -1,7 +1,7 @@
 import { html, css, LitElement } from 'lit';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 
-export class KemetRotator extends LitElement {
+export default class KemetRotator extends LitElement {
   static get styles() {
     return css`
       :host {
@@ -77,22 +77,40 @@ export class KemetRotator extends LitElement {
 
   static get properties() {
     return {
+      /**
+       * The index number for the current slide.
+       */
       activeSlide: {
         type: Number,
       },
+      /**
+       * The width of the rotator block.
+       */
       width: {
         type: String,
       },
+      /**
+       * The height of the rotator block.
+       */
       height: {
         type: String,
       },
+      /**
+       * Text in the rotator. Supports HTML.
+       */
       messages: {
         type: Array,
       },
+      /**
+       * The transition effect type.
+       */
       effect: {
         type: String,
         reflect: true,
       },
+      /**
+       * How fast, in seconds, each slide lasts. Stop the rotator with 0.
+       */
       rotationSpeed: {
         type: Number,
         attribute: 'rotation-speed',
@@ -110,12 +128,12 @@ export class KemetRotator extends LitElement {
     this.rotationSpeed = 3;
     this.width = 'auto';
     this.height = 'auto';
+  }
 
+  firstUpdated() {
     // standard properties
     this.prevSlide = null;
-  }
 
-  firstUpdated() {
     window.addEventListener('resize', this.setDimensions.bind(this));
   }
 
@@ -189,4 +207,5 @@ export class KemetRotator extends LitElement {
   }
 }
 
-window.customElements.define('kemet-rotator', KemetRotator);
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-rotator') || customElements.define('kemet-rotator', KemetRotator);

package/dist/components/kemet-scroll-link.js

@@ -1,6 +1,6 @@
 import { html, css, LitElement } from 'lit';
 
-export class KemetScrollLink extends LitElement {
+export default class KemetScrollLink extends LitElement {
   static get styles() {
     return css`
       :host {
@@ -12,17 +12,30 @@ export class KemetScrollLink extends LitElement {
 
   static get properties() {
     return {
+      /**
+       * A DOM element that establishes the context of scrolling.
+       */
       element: {
         type: Object,
       },
+      /**
+       * A DOM element that represents the destination of the scroll link.
+       * If no target is specified it will default to the top of the page.
+       */
       target: {
         type: Object,
       },
+      /**
+       * Allows the horizontal scrolling to stop short of the given value.
+       */
       xOffset: {
         type: Number,
         attribute: 'x-offset',
         reflect: true,
       },
+      /**
+       * Allows the vertical scrolling to stop short of the given value.
+       */
       yOffset: {
         type: Number,
         attribute: 'y-offset',
@@ -34,10 +47,15 @@ export class KemetScrollLink extends LitElement {
   constructor() {
     super();
 
+    // managed properties
     this.element = this.element || window;
     this.target = this.target || document.querySelector('body');
     this.xOffset = 0;
     this.yOffset = 0;
+  }
+
+  firstUpdated() {
+    // standard properties
     this.keyCodes = {
       ENTER: 13,
       SPACE: 32,
@@ -75,4 +93,5 @@ export class KemetScrollLink extends LitElement {
   }
 }
 
-window.customElements.define('kemet-scroll-link', KemetScrollLink);
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-scroll-link') || customElements.define('kemet-scroll-link', KemetScrollLink);

package/dist/components/kemet-scroll-nav.js

@@ -1,11 +1,15 @@
 import { LitElement, html, css } from 'lit';
 
-export class KemetScrollNav extends LitElement {
+export default class KemetScrollNav extends LitElement {
   static get styles() {
     return [
       css`
         :host {
           display: block;
+          box-sizing: border-box;
+          padding: var(--kemet-scroll-nav-padding, 1rem 2rem);
+          background-color: var(--kemet-scroll-nav-background, #fafafa);
+          transition: all var(--kemet-scroll-nav-transition, 300ms) ease;
         }
 
         :host([transform]),
@@ -14,20 +18,38 @@ export class KemetScrollNav extends LitElement {
           top: 0;
           width: 100%;
         }
+
+        :host([effect="resize"]) {
+          height: var(--kemet-scroll-nav-resize-height, 400px);
+        }
+
+        :host([transform][effect="resize"]) {
+          height: var(--kemet-scroll-nav-resize-height-transformed, 100px);
+        }
       `,
     ];
   }
 
   static get properties() {
     return {
+      /**
+       * Determines where the transform point is activated. Values include: (sticky | resize)
+       */
       effect: {
         type: String,
         reflect: true,
       },
+      /**
+       * Whether or not the nav has shifted into a new state.
+       */
       transform: {
         type: Boolean,
         reflect: true,
       },
+      /**
+       * Allows for an arbitrary adjustment of the transform point in pixels.
+       * Works with negative values.
+       */
       offset: {
         type: Number,
       },
@@ -72,4 +94,5 @@ export class KemetScrollNav extends LitElement {
   }
 }
 
-window.customElements.define('kemet-scroll-nav', KemetScrollNav);
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-scroll-nav') || customElements.define('kemet-scroll-nav', KemetScrollNav);

package/dist/components/kemet-scroll-snap-paginator.js

@@ -1,29 +1,75 @@
 import { html, css, LitElement } from 'lit';
 
-const keyCodes = {
-  ENTER: 13,
-  SPACE: 32,
-  ESC: 27,
-};
+export default class KemetScrollSnapPaginator extends LitElement {
+  static get styles() {
+    return css`
+      :host {
+        margin: auto;
+        padding: var(--kemet-scroll-snap-paginator-padding, 1rem 0);
+      }
+
+      nav {
+        display: flex;
+        gap: var(--kemet-scroll-snap-paginator-gap, 0.5rem);
+      }
+
+      :host([center]) nav {
+        justify-content: center;
+      }
+
+      .link {
+        cursor: pointer;
+        color: var(--kemet-scroll-snap-paginator-link-color, var(--kemet-color-primary));
+      }
+    `;
+  }
 
-export class KemetScrollSnapPaginator extends LitElement {
   static get properties() {
     return {
+      /**
+       * Information about each slide.
+       */
       slides: {
         type: Array,
       },
+      /**
+       * A string representing which icon to use for pagination. Supports icons used in kemet-icon.
+       */
       icon: {
         type: String,
       },
+      /**
+       * The size in pixels of the icons.
+       */
+      size: {
+        type: Number,
+      },
+      /**
+       * Determines whether to center the pagination items.
+       */
+      center: {
+        type: Boolean,
+        reflect: true,
+      },
+      /**
+       * Will hide inactive pagination items if set to true.
+       */
       hideFocusedLinks: {
         type: Boolean,
         attribute: 'hide-focused-links',
       },
+      /**
+       * If set to true, the pages in the pagination iterator will appear as a set of numbers.
+       */
       useNumberPages: {
         type: Boolean,
         reflect: true,
         attribute: 'use-number-pages',
       },
+      /**
+       * If set to true, the pages in the pagination iterator will appear as the label set on
+       * the slide.
+       */
       useLabelPages: {
         type: Boolean,
         reflect: true,
@@ -35,22 +81,16 @@ export class KemetScrollSnapPaginator extends LitElement {
   constructor() {
     super();
 
+    // managed properties
     this.slides = [];
-    this.icon = '•';
+    this.icon = 'circle-fill';
+    this.size = 16;
     this.hideFocusedLinks = false;
     this.useNumberPages = false;
     this.useLabelPages = false;
   }
 
-  static get styles() {
-    return css`
-      :host {
-        margin: auto;
-      }
-    `;
-  }
-
-  firstUpdated() {
+  updated() {
     const scrollSnapElement = this.closest('kemet-scroll-snap');
 
     if (scrollSnapElement) {
@@ -60,13 +100,9 @@ export class KemetScrollSnapPaginator extends LitElement {
     }
   }
 
-  createRenderRoot() {
-    return this;
-  }
-
   render() {
     return html`
-      <nav>${this.makePagination()}</nav>
+      <nav part="nav">${this.makePagination()}</nav>
     `;
   }
 
@@ -79,7 +115,7 @@ export class KemetScrollSnapPaginator extends LitElement {
 
         if (slide.focused) {
           return html`
-            <span>${this.pageDisplay(slide, counter)}</span>
+            <span part="span">${this.pageDisplay(slide, counter)}</span>
           `;
         }
 
@@ -87,8 +123,10 @@ export class KemetScrollSnapPaginator extends LitElement {
           <span
             class="link"
             tabindex="0"
+            role="button"
             @keyup="${event => this.handleKeyboardInput(event, slide.id)}"
-            @click=${() => this.slideLink(slide.id)} aria-label="${slide.label}">
+            @click=${() => this.slideLink(slide.id)}
+            aria-label="${slide.label}">
             ${this.pageDisplay(slide, counter)}
           </span>
         `;
@@ -107,10 +145,13 @@ export class KemetScrollSnapPaginator extends LitElement {
       return slide.label;
     }
 
-    return this.icon;
+    return html`<kemet-icon icon=${this.icon} size=${this.size}></kemet-icon>`;
   }
 
   slideLink(index) {
+    /**
+     * Fires when a set of slides are focused on.
+     */
     this.dispatchEvent(new CustomEvent('kemet-scroll-snap-focus', {
       bubbles: true,
       composed: true,
@@ -119,10 +160,11 @@ export class KemetScrollSnapPaginator extends LitElement {
   }
 
   handleKeyboardInput(event, id) {
-    if (event.keyCode === keyCodes.ENTER || event.keyCode === keyCodes.SPACE) {
+    if (event.code === 'Enter' || event.code === 'Space') {
       this.slideLink(id);
     }
   }
 }
 
-window.customElements.define('kemet-scroll-snap-paginator', KemetScrollSnapPaginator);
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-scroll-snap-paginator') || customElements.define('kemet-scroll-snap-paginator', KemetScrollSnapPaginator);

package/dist/components/kemet-scroll-snap-slide.js

@@ -1,16 +1,36 @@
 import { html, css, LitElement } from 'lit';
 
-export class KemetScrollSnapSlide extends LitElement {
+export default class KemetScrollSnapSlide extends LitElement {
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+        flex: 0 0 auto;
+        width: var(--kemet-scroll-snap-slide-width, 100%);
+        scroll-snap-align: var(--kemet-scroll-snap-slide-align, center);
+      }
+    `;
+  }
+
   static get properties() {
     return {
+      /**
+       * Is true when the slide is fully visible in it's container.
+       */
       focused: {
         type: Boolean,
         reflect: true,
       },
+      /**
+       * Identifies the slide.
+       */
       index: {
         type: String,
         reflect: true,
       },
+      /**
+       * Labels the slide.
+       */
       label: {
         type: String,
         reflect: true,
@@ -22,17 +42,6 @@ export class KemetScrollSnapSlide extends LitElement {
     this.addTabIndex();
   }
 
-  static get styles() {
-    return css`
-      :host {
-        display: block;
-        flex: 0 0 auto;
-        width: var(--kememt-scroll-snap-slide-width, 100%);
-        scroll-snap-align: var(--kemet-scroll-snap-slide-align, center);
-      }
-    `;
-  }
-
   render() {
     return html`
       <slot></slot>
@@ -44,4 +53,5 @@ export class KemetScrollSnapSlide extends LitElement {
   }
 }
 
-window.customElements.define('kemet-scroll-snap-slide', KemetScrollSnapSlide);
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-scroll-snap-slide') || customElements.define('kemet-scroll-snap-slide', KemetScrollSnapSlide);