kemet-ui 1.3.0 → 1.4.0

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

@@ -0,0 +1,80 @@
+import { css } from 'lit';
+
+export const stylesBase = css`
+  :host {
+    color: inherit;
+    display: none;
+  }
+
+  :host([show]) {
+    display: block;
+  }
+
+  p {
+    margin: 1.6rem 0;
+  }
+
+  .status {
+    display: grid;
+    align-items: center;
+    grid-template-columns: 1fr auto;
+    line-height: 1;
+    margin-top: 0.8rem;
+  }
+
+  .status > span {
+    text-transform: capitalize;
+  }
+
+  .status--weak,
+  .status--better {
+    color: var(--kemet-color-error);
+  }
+
+  .status--strong {
+    color: var(--kemet-color-success);
+  }
+
+  .indicator {
+    display: flex;
+    gap: 0.4rem;
+    margin: 0;
+    list-style: none;
+  }
+
+  .indicator li {
+    width: 1.6rem;
+    height: 0.2rem;
+    background-color: var(--fds-color--gray2);
+  }
+
+  .status--weak .indicator li:nth-child(1) {
+    background-color: var(--kemet-color-error);
+  }
+
+  .status--better .indicator li:nth-child(1),
+  .status--better .indicator li:nth-child(2) {
+    background-color: var(--kemet-color-error);
+  }
+
+  .status--strong .indicator li {
+    background-color: var(--kemet-color-success);
+  }
+
+  .rules {
+    color: var(--kemet-color-primary);
+    list-style: none;
+    font-size: 90%;
+    padding-left: 2rem;
+  }
+
+  .rules li {
+    position: relative;
+  }
+
+  .rules kemet-icon {
+    color: var(--kemet-color-success);
+    position: absolute;
+    left: -2.4rem;
+  }
+`;

package/dist/components/kemet-popover/kemet-popover-close.js

@@ -1,4 +1,5 @@
 import { html, css, LitElement } from 'lit';
+import { emitEvent } from '../../utilities/misc/events.js';
 
 const keyCodes = {
   ENTER: 13,
@@ -6,6 +7,17 @@ const keyCodes = {
   ESC: 27,
 };
 
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-popover-close
+ * @summary A close button for the popover
+ *
+ * @event kemet-popover-close-btn
+ *
+ */
+
 export default class KemetPopoverClose extends LitElement {
   static get styles() {
     return [
@@ -30,13 +42,7 @@ export default class KemetPopoverClose extends LitElement {
   }
 
   close() {
-    this.dispatchEvent(
-      new CustomEvent('kemet-popover-close-btn', {
-        bubbles: true,
-        composed: true,
-        detail: this,
-      }),
-    );
+    emitEvent(this, 'kemet-popover-close-btn', this);
   }
 
   handleKeyboard(event) {

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

@@ -1,5 +1,5 @@
 import { html, css, LitElement } from 'lit';
-import { tooltip, customTooltip } from './kemet-popover.tooltip.styles.js';
+import { tooltip, customTooltip } from './styles.tooltip.js';
 import {
   fade,
   scale,
@@ -9,7 +9,8 @@ import {
   flipVertical,
   sign,
   superScaled,
-} from './kemet-popover.effects.styles.js';
+} from './styles.effects.js';
+import { emitEvent } from '../../utilities/misc/events.js';
 
 const keyCodes = {
   ENTER: 13,
@@ -17,6 +18,43 @@ const keyCodes = {
   ESC: 27,
 };
 
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-popover
+ * @summary Displays an element in position of a trigger. Also acts as a tooltip.
+ *
+ * @prop {boolean} opened - Determines whether or not the popover displays.
+ * @prop {string} effect - The opening and closing effect of the popover. Is optional. Values include: (fade | scale | slide | fall | flip horizontal | flip vertical | sign | super scaled)
+ * @prop {string} position - Determines the placement of the popover. Values include: (top | right | bottom | left)
+ * @prop {boolean} tooltip - Adds a built in tooltip to the popover.
+ * @prop {boolean} customTooltip - Adds a custom tooltip to the popover. Use the custom-tooltip slot to specify the custom tooltip.
+ * @prop {string} fireOn - Controls how the trigger should activate the popover. Values include: (click | hover)
+ * @prop {boolean} clickOutside - Allows the popover to be closed by clicking outside of its content.
+ * @prop {boolean} smart - Intelligently positions the popover.
+ *
+ * @slot trigger - Controls opening and closing the popover.
+ * @slot content - The contents of the popover.
+ * @slot custom-tooltip - Allows you to use an svg, image, custom css, etc for a custom tooltip.
+ *
+ * @csspart trigger - Contains the trigger for the popover.
+ * @csspart content - Contains the content for the popover.
+ * @csspart tooltip - Contains the tooltip for the popover.
+ * @csspart custom-tooltip - Contains the custom tooltip for the popover.
+ *
+ * @cssproperty --kemet-popover-width - The width of the popover contents. Default: 100%.
+ * @cssproperty --kemet-popover-height - The height of the popover contents. Default: auto.
+ * @cssproperty --kemet-popover-color - The text color of the popover's contents. Default: #fafafa.
+ * @cssproperty --kemet-popover-background-color - The background color of the popover's contents. Default: #202020.
+ * @cssproperty --kemet-popover-gap - The space between the trigger and content. Default: 0px.
+ * @cssproperty --kemet-popover-transition-speed - The speed of the opening and closing effect. Default: 0.3s.
+ *
+ * @event kemet-popover-opened - Fires when the popover opens.
+ * @event kemet-popover-closed - Fires when the popover closes.
+ *
+ */
+
 export default class KemetPopover extends LitElement {
   static get styles() {
     return [
@@ -121,62 +159,33 @@ export default class KemetPopover extends LitElement {
 
   static get properties() {
     return {
-      /**
-       * Determines whether or not the popover displays.
-       */
       opened: {
         type: Boolean,
         reflect: true,
       },
-      /**
-       * The opening and closing effect of the popover. Is optional.
-       * Values include:
-       * (fade | scale | slide | fall | flip horizontal | flip vertical | sign | super scaled)
-       */
       effect: {
         string: String,
         reflect: true,
       },
-      /**
-       * Determines the placement of the popover.
-       * Values include: (top | right | bottom | left)
-       */
       position: {
         type: String,
         reflect: true,
       },
-      /**
-       * Adds a built in tooltip to the popover.
-       */
       tooltip: {
         type: Boolean,
       },
-      /**
-       * Adds a custom tooltip to the popover.
-       * Use the custom-tooltip slot to specify the custom tooltip.
-       */
       customTooltip: {
         type: Boolean,
         attribute: 'custom-tooltip',
       },
-      /**
-       * Controls how the trigger should activate the popover.
-       * Values include: (click | hover)
-       */
       fireOn: {
         type: String,
         attribute: 'fire-on',
       },
-      /**
-       * Allows the popover to be closed by clicking outside of its content.
-       */
       clickOutside: {
         type: Boolean,
         attribute: 'click-outside',
       },
-      /**
-       * Intelligently positions the popover.
-       */
       smart: {
         type: Boolean,
       },
@@ -221,29 +230,11 @@ export default class KemetPopover extends LitElement {
 
   updated(prevProps) {
     if (!prevProps.get('opened') && this.opened === true) {
-      /**
-       * Fires when the popover opens.
-       */
-      this.dispatchEvent(
-        new CustomEvent('kemet-popover-opened', {
-          bubbles: true,
-          composed: true,
-          detail: this,
-        }),
-      );
+      emitEvent(this, 'kemet-popover-opened', this);
     }
 
     if (prevProps.get('opened') && this.opened === false) {
-      /**
-       * Fires when the popover closes.
-       */
-      this.dispatchEvent(
-        new CustomEvent('kemet-popover-closed', {
-          bubbles: true,
-          composed: true,
-          detail: this,
-        }),
-      );
+      emitEvent(this, 'kemet-popover-closed', this);
     }
 
     this.smartContent();

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

@@ -1,6 +1,39 @@
 import { html, css, LitElement } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
+import { emitEvent } from '../../utilities/misc/events.js';
+
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-radio
+ * @summary An enhanced radio button.
+ *
+ * @prop {string} label - The text next to the radio button
+ * @prop {boolean} checked - Determines whether or not the button is checked
+ * @prop {string} name - The name of the field
+ * @prop {string} value - The value of the radio button
+ * @prop {boolean} disabled - Determines if the button should be disabled
+ * @prop {boolean} focused - Is true when the button is focused on
+ * @prop {boolean} filled - Displayed the button as a filled button
+ *
+ * @csspart label - The label that contains the radio button.
+ * @csspart button - The radio button.
+ * @csspart text - The text next to the radio button.
+ * @csspart dot - The circle that fills the radio button.
+ *
+ * @cssproperty --kemet-radio-size - The size of the radio button. Default: 18px.
+ * @cssproperty --kemet-radio-border - The outer border of the radio button. Default: 1px solid var(--kemet-color-primary).
+ * @cssproperty --kemet-radio-dot-color - The color of the radio button's dot. Default: var(--kemet-color-primary).
+ * @cssproperty --kemet-radio-dot-border-width - The border width of the radio button's dot. Default: 3px.
+ * @cssproperty --kemet-radio-dot-border-color - The border color of the radio button's dot. Default: var(--kemet-color-white).
+ * @cssproperty --kemet-radio-dot-color-filled - The filled color of the radio button. Default: var(--kemet-color-white).
+ *
+ * @event kemet-radio-focused -  Fires when the checkbox loses or receives focus
+ * @event kemet-radio-focused - Fires when the checkbox loses or receives focus
+ *
+ */
 
 export default class KemetRadio extends LitElement {
   static get styles() {
@@ -70,48 +103,27 @@ export default class KemetRadio extends LitElement {
 
   static get properties() {
     return {
-      /**
-       * The text next to the radio button
-       */
       label: {
         type: String,
       },
-      /**
-       * Determines whether or not the button is checked
-       */
       checked: {
         type: Boolean,
         reflect: true,
       },
-      /**
-       * The name of the field
-       */
       name: {
         type: String,
       },
-      /**
-       * The value of the radio button
-       */
       value: {
         type: String,
       },
-      /**
-       * Determines if the button should be disabled
-       */
       disabled: {
         type: Boolean,
         reflect: true,
       },
-      /**
-       * Is true when the button is focused on
-       */
       focused: {
         type: Boolean,
         reflect: true,
       },
-      /**
-       * Displayed the button as a filled button
-       */
       filled: {
         type: Boolean,
         reflect: true,
@@ -171,32 +183,12 @@ export default class KemetRadio extends LitElement {
 
   handleBlur() {
     this.focused = false;
-
-    /**
-     * Fires when the checkbox loses or receives focus
-     */
-    this.dispatchEvent(
-      new CustomEvent('kemet-radio-focused', {
-        bubbles: true,
-        composed: true,
-        detail: false,
-      }),
-    );
+    emitEvent(this, 'kemet-radio-focused', false);
   }
 
   handleFocus() {
     this.focused = true;
-
-    /**
-     * Fires when the checkbox loses or receives focus
-     */
-    this.dispatchEvent(
-      new CustomEvent('kemet-radio-focused', {
-        bubbles: true,
-        composed: true,
-        detail: true,
-      }),
-    );
+    emitEvent(this, 'kemet-radio-focused', true);
   }
 
   makeDot() {

package/dist/components/kemet-radio/kemet-radios.js

@@ -1,5 +1,28 @@
 import { html, css, LitElement } from 'lit';
 import { FormSubmitController } from '../../utilities/controllers/forms.js';
+import { emitEvent } from '../../utilities/misc/events.js';
+
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-radios
+ * @summary A group of radio buttons.
+ *
+ * @prop {string} legend - The legend text for the fieldset
+ * @prop {string} axis - The direction of the button's layout
+ * @prop {string} value - The value of the selected radio button
+ * @prop {string} name - The name of the radio button set
+ * @prop {string} status - The status of the radio button set
+ * @prop {string} message - Validation message for the user
+ * @prop {boolean} required - Determines whether or not the radio button set is required
+ *
+ * @csspart fieldset - The fieldset element.
+ * @csspart legend - The legend element.
+ *
+ * @event kemet-radios-change - Fires when the state of the checkbox changes
+ *
+ */
 
 export default class KemetRadios extends LitElement {
   static get styles() {
@@ -49,47 +72,26 @@ export default class KemetRadios extends LitElement {
 
   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,
       },
@@ -105,9 +107,7 @@ export default class KemetRadios extends LitElement {
     this.name = 'radios';
     this.status = 'standard';
 
-    /**
-     * Used only for form reactive controller
-     */
+    /** @internal */
     this.formSubmitController = new FormSubmitController(this);
   }
 
@@ -141,16 +141,7 @@ export default class KemetRadios extends LitElement {
       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,
-        }),
-      );
+      emitEvent(this, 'kemet-radios-change', target);
     }
   }
 

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

@@ -1,6 +1,24 @@
 import { html, css, LitElement } from 'lit';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-rotator
+ * @summary A component that rotates through an array of text.
+ *
+ * @prop {number} activeSlide - The index number for the current slide.
+ * @prop {string} width - The width of the rotator block.
+ * @prop {string} height - The height of the rotator block.
+ * @prop {array} messages - Text in the rotator. Supports HTML.
+ * @prop {string} effect - The transition effect type.
+ * @prop {number} rotationSpeed - How fast, in seconds, each slide lasts. Stop the rotator with 0.
+ *
+ * @cssproperty --kemet-rotator-transition-speed - How long, in css time units, the transition effect lasts. Default: 500ms.
+ *
+ */
+
 export default class KemetRotator extends LitElement {
   static get styles() {
     return css`
@@ -77,40 +95,22 @@ export default 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',

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

@@ -1,5 +1,19 @@
 import { html, css, LitElement } from 'lit';
 
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-scroll-link
+ * @summary A component that adds a smooth scrolling link to an target..
+ *
+ * @prop {object} element - A DOM element that establishes the context of scrolling.
+ * @prop {object} target - 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.
+ * @prop {number} xOffset - Allows the horizontal scrolling to stop short of the given value.
+ * @prop {number} yOffset - Allows the vertical scrolling to stop short of the given value.
+ *
+ */
+
 export default class KemetScrollLink extends LitElement {
   static get styles() {
     return css`
@@ -12,30 +26,17 @@ export default 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',
@@ -56,6 +57,7 @@ export default class KemetScrollLink extends LitElement {
 
   firstUpdated() {
     // standard properties
+    /** @internal */
     this.keyCodes = {
       ENTER: 13,
       SPACE: 32,

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

@@ -1,5 +1,24 @@
 import { LitElement, html, css } from 'lit';
 
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-scroll-nav
+ * @summary An element that transforms at a scroll point.
+ *
+ * @prop {string} effect - Determines where the transform point is activated. Values include: (sticky | resize)
+ * @prop {boolean} transform - Whether or not the nav has shifted into a new state.
+ * @prop {number} offset - Allows for an arbitrary adjustment of the transform point in pixels. Works with negative values.
+ *
+ * @cssproperty --kemet-scroll-nav-padding - The padding of the nav. Default: 1rem 2rem.
+ * @cssproperty --kemet-scroll-nav-background - The background color of the nav. Default: #fafafa.
+ * @cssproperty --kemet-scroll-nav-transition - The transition speed of the transformation. Default: 300ms.
+ * @cssproperty --kemet-scroll-nav-resize-height - The height of the pre-transformed nav. Default: 400px.
+ * @cssproperty --kemet-scroll-nav-resize-height-transformed - The height of the transformed nav. Default: 100px.
+ *
+ */
+
 export default class KemetScrollNav extends LitElement {
   static get styles() {
     return [
@@ -32,24 +51,14 @@ export default class KemetScrollNav extends LitElement {
 
   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,
       },