kemet-ui 1.3.0 → 1.4.0

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

@@ -0,0 +1,69 @@
+import { html, LitElement } from 'lit';
+import { stylesBase } from './styles.js';
+
+/**
+ * @since 1.4.0
+ * @status stable
+ *
+ * @tagname kemet-card
+ * @summary A highly configurable panel design to display media and information.
+ *
+ * @prop {boolean} center - Centers the elements in the card.
+ *
+ * @slot default - The contents of the alert.
+ * @slot header - The cards's header.
+ * @slot media - A slot for images, videos, or embeds.
+ * @slot caption - Text for the media slot.
+ * @slot footer - The card's footer.
+ *
+ *
+ * @csspart media - The media area of the card.
+ * @csspart body - The main contents of the card.
+ *
+ * @cssproperty --kemet-card-padding - The space around elements. Default: 1rem.
+ * @cssproperty --kemet-card-border-color - The color of the borders. Default: var(--kemet-color-gray4).
+ * @cssproperty --kemet-card-color - The color of the text. Default: var(--kemet-color-black).
+ * @cssproperty --kemet-card-max-width - The max width of the card. Default: 360px.
+ * @cssproperty --kemet-card-border - The border around the card. Default: 1px solid var(--kemet-card-border-color).
+ * @cssproperty --kemet-card-border-radius - The border radius of the card. Default: 0.
+ * @cssproperty --kemet-card-background-color - The background color. Default: var(--kemet-color-white).
+ * @cssproperty --kemet-card-body-padding - The body spacing. Default: var(--kemet-card-padding).
+ * @cssproperty --kemet-card-header-padding - The header spacing. Default: var(--kemet-card-padding).
+ * @cssproperty --kemet-card-header-border-bottom - The header border. Default: 1px solid var(--kemet-card-border-color).
+ * @cssproperty --kemet-card-caption-color - The caption text color. Default: var(--kemet-color-white).
+ * @cssproperty --kemet-card-caption-padding - The caption spacing. Default: calc(var(--kemet-card-padding) / 2) var(--kemet-card-padding).
+ * @cssproperty --kemet-card-caption-background-color - The caption background color. Default: rgba(0,0,0,0.5).
+ * @cssproperty --kemet-card-footer-padding - The footer spacing. Default: var(--kemet-card-padding).
+ * @cssproperty --kemet-card-footer-border-top - The footer border. Default: 1px solid var(--kemet-card-border-color).
+ *
+ */
+
+export default class KemetCard extends LitElement {
+  static get styles() {
+    return [stylesBase];
+  }
+
+  static get properties() {
+    return {
+      center: { type: Boolean, reflect: true },
+    };
+  }
+
+  render() {
+    return html`
+      <slot name="header"></slot>
+      <div class="media" part="media">
+        <slot name="media"></slot>
+        <slot name="caption"></slot>
+      </div>
+      <div class="body" part="body">
+        <slot></slot>
+      </div>
+      </div>
+      <slot name="footer"></slot>
+    `;
+  }
+}
+
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-card') || customElements.define('kemet-card', KemetCard);

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

@@ -0,0 +1,63 @@
+import { css } from 'lit';
+
+export const stylesBase = css`
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  :host {
+    --kemet-card-padding: 1rem;
+    --kemet-card-border-color: var(--kemet-color-gray4);
+
+    color: var(--kemet-card-color, var(--kemet-color-black));
+    display: inline-flex;
+    flex-direction: column;
+    max-width: var(--kemet-card-max-width, 360px);
+    border: var(--kemet-card-border, 1px solid var(--kemet-card-border-color));
+    border-radius: var(--kemet-card-border-radius, 0);
+    background-color: var(--kemet-card-background-color, var(--kemet-color-white));
+  }
+
+  :host([center]) {
+    align-items: center;
+    text-align: center;
+  }
+
+  .body {
+    padding: var(--kemet-card-body-padding, var(--kemet-card-padding));
+  }
+
+  .media {
+    position: relative;
+  }
+
+  ::slotted(*) {
+    max-width: 100%;
+  }
+
+  ::slotted(img) {
+    display: flex;
+    max-width: 100%;
+  }
+
+  ::slotted([slot="header"]) {
+    padding: var(--kemet-card-header-padding, var(--kemet-card-padding));
+    border-bottom: var(--kemet-card-header-border-bottom, 1px solid var(--kemet-card-border-color));
+  }
+
+  ::slotted([slot="caption"]) {
+    color: var(--kemet-card-caption-color, var(--kemet-color-white));
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    padding: var(--kemet-card-caption-padding, calc(var(--kemet-card-padding) / 2) var(--kemet-card-padding));
+    background-color: var(--kemet-card-caption-background-color, rgba(0,0,0,0.35));
+  }
+
+  ::slotted([slot="footer"]) {
+    padding: var(--kemet-card-footer-padding, var(--kemet-card-padding));
+    border-top: var(--kemet-card-footer-border-top, 1px solid var(--kemet-card-border-color));
+  }
+`;

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

@@ -1,5 +1,17 @@
 import { html, css, LitElement } from 'lit';
 
+/**
+ *
+ * @since 1.1.0
+ * @status stable
+ *
+ * @tagname kemet-carousel-current
+ * @summary Displays the active slide number.
+ *
+ * @prop {number} current - The current slide number.
+ *
+ */
+
 export class KemetCarouselCurrent extends LitElement {
   static get styles() {
     return [
@@ -13,9 +25,7 @@ export class KemetCarouselCurrent extends LitElement {
 
   static get properties() {
     return {
-      current: {
-        type: Number,
-      },
+      current: { type: Number },
     };
   }
 

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

@@ -1,4 +1,19 @@
 import { html, css, LitElement } from 'lit';
+import { emitEvent } from '../../utilities/misc/events.js';
+
+/**
+ *
+ * @since 1.1.0
+ * @status stable
+ *
+ * @tagname kemet-carousel-first
+ * @summary A link to the first slide in the carousel.
+ *
+ * @prop {boolean} disabled - Deactivates the button.
+ *
+ * @event kemet-carousel-first
+ *
+ */
 
 export class KemetCarouselFirst extends LitElement {
   static get styles() {
@@ -17,10 +32,7 @@ export class KemetCarouselFirst extends LitElement {
 
   static get properties() {
     return {
-      disabled: {
-        type: Boolean,
-        reflect: true,
-      },
+      disabled: { type: Boolean, reflect: true },
     };
   }
 
@@ -34,11 +46,7 @@ export class KemetCarouselFirst extends LitElement {
 
   first() {
     if (!this.disabled) {
-      this.dispatchEvent(new CustomEvent('kemet-carousel-first', {
-        bubbles: true,
-        composed: true,
-        detail: this,
-      }));
+      emitEvent(this, 'kemet-carousel-first', this);
     }
   }
 }

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

@@ -1,4 +1,19 @@
 import { html, css, LitElement } from 'lit';
+import { emitEvent } from '../../utilities/misc/events.js';
+
+/**
+ *
+ * @since 1.1.0
+ * @status stable
+ *
+ * @tagname kemet-carousel-last
+ * @summary A link to the last slide in the carousel..
+ *
+ * @prop {boolean} disabled - Deactivates the button.
+ *
+ * @event kemet-carousel-last
+ *
+ */
 
 export class KemetCarouselLast extends LitElement {
   static get styles() {
@@ -17,10 +32,7 @@ export class KemetCarouselLast extends LitElement {
 
   static get properties() {
     return {
-      disabled: {
-        type: Boolean,
-        reflect: true,
-      },
+      disabled: { type: Boolean, reflect: true },
     };
   }
 
@@ -34,11 +46,7 @@ export class KemetCarouselLast extends LitElement {
 
   last() {
     if (!this.disabled) {
-      this.dispatchEvent(new CustomEvent('kemet-carousel-last', {
-        bubbles: true,
-        composed: true,
-        detail: this,
-      }));
+      emitEvent(this, 'kemet-carousel-last', this);
     }
   }
 }

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

@@ -1,20 +1,30 @@
 import { html, css, LitElement } from 'lit';
+import { emitEvent } from '../../utilities/misc/events.js';
+
+/**
+ *
+ * @since 1.1.0
+ * @status stable
+ *
+ * @tagname kemet-carousel-link
+ * @summary Zero-based index link to a slide in the carousel.
+ *
+ * @prop {number} slide
+ * @prop {boolean} selected - Automatically applied when link is active slide.
+ * @prop {boolean} disabled - Deactivates the button.
+ *
+ * @event kemet-carousel-link
+ *
+ * @cssproperty --kemet-carousel-link-selected-color - The color of an selected link. Default: var(--kemet-color-primary).
+ *
+ */
 
 export default class KemetCarouselLink extends LitElement {
   static get properties() {
     return {
-      slide: {
-        type: Number,
-        reflect: true,
-      },
-      selected: {
-        type: Boolean,
-        reflect: true,
-      },
-      disabled: {
-        type: Boolean,
-        reflect: true,
-      },
+      slide: { type: Number, reflect: true },
+      selected: { type: Boolean, reflect: true },
+      disabled: { type: Boolean, reflect: true },
     };
   }
 
@@ -46,11 +56,7 @@ export default class KemetCarouselLink extends LitElement {
 
   changed() {
     if (!this.disabled) {
-      this.dispatchEvent(new CustomEvent('kemet-carousel-link', {
-        bubbles: true,
-        composed: true,
-        detail: this,
-      }));
+      emitEvent(this, 'kemet-carousel-link', this);
     }
   }
 }

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

@@ -1,4 +1,19 @@
 import { html, css, LitElement } from 'lit';
+import { emitEvent } from '../../utilities/misc/events.js';
+
+/**
+ *
+ * @since 1.1.0
+ * @status stable
+ *
+ * @tagname kemet-carousel-next
+ * @summary A link to the next slide in the carousel.
+ *
+ * @prop {boolean} disabled - Deactivates the button.
+ *
+ * @event kemet-carousel-next
+ *
+ */
 
 export default class KemetCarouselNext extends LitElement {
   static get styles() {
@@ -17,10 +32,7 @@ export default class KemetCarouselNext extends LitElement {
 
   static get properties() {
     return {
-      disabled: {
-        type: Boolean,
-        reflect: true,
-      },
+      disabled: { type: Boolean, reflect: true },
     };
   }
 
@@ -34,11 +46,7 @@ export default class KemetCarouselNext extends LitElement {
 
   next() {
     if (!this.disabled) {
-      this.dispatchEvent(new CustomEvent('kemet-carousel-next', {
-        bubbles: true,
-        composed: true,
-        detail: this,
-      }));
+      emitEvent(this, 'kemet-carousel-next', this);
     }
   }
 }

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

@@ -1,4 +1,19 @@
 import { html, css, LitElement } from 'lit';
+import { emitEvent } from '../../utilities/misc/events.js';
+
+/**
+ *
+ * @since 1.1.0
+ * @status stable
+ *
+ * @tagname kemet-carousel-prev
+ * @summary A link to the previous slide in the carousel.
+ *
+ * @prop {boolean} disabled - Deactivates the button.
+ *
+ * @event kemet-carousel-prev
+ *
+ */
 
 export class KemetCarouselPrev extends LitElement {
   static get styles() {
@@ -17,10 +32,7 @@ export class KemetCarouselPrev extends LitElement {
 
   static get properties() {
     return {
-      disabled: {
-        type: Boolean,
-        reflect: true,
-      },
+      disabled: { type: Boolean, reflect: true },
     };
   }
 
@@ -34,11 +46,7 @@ export class KemetCarouselPrev extends LitElement {
 
   prev() {
     if (!this.disabled) {
-      this.dispatchEvent(new CustomEvent('kemet-carousel-prev', {
-        bubbles: true,
-        composed: true,
-        detail: this,
-      }));
+      emitEvent(this, 'kemet-carousel-prev', this);
     }
   }
 }

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

@@ -1,5 +1,17 @@
 import { html, css, LitElement } from 'lit';
 
+/**
+ *
+ * @since 1.1.0
+ * @status stable
+ *
+ * @tagname kemet-carousel-slide
+ * @summary A container for a slide in the carousel.
+ *
+ * @prop {boolean} selected - Determines if the slide is selected.
+ *
+ */
+
 export default class KemetCarouselSlide extends LitElement {
   static get styles() {
     return [
@@ -20,17 +32,8 @@ export default class KemetCarouselSlide extends LitElement {
 
   static get properties() {
     return {
-      /**
-       * Determines if the slide is selected
-       */
-      selected: {
-        type: Boolean,
-        reflect: true,
-      },
-      'aria-hidden': {
-        type: String,
-        reflect: true,
-      },
+      selected: { type: Boolean, reflect: true },
+      'aria-hidden': { type: String, reflect: true },
     };
   }
 

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

@@ -1,5 +1,17 @@
 import { html, css, LitElement } from 'lit';
 
+/**
+ *
+ * @since 1.1.0
+ * @status stable
+ *
+ * @tagname kemet-carousel-total
+ * @summary Displays the total slide number.
+ *
+ * @prop {number} total - The total number of slides.
+ *
+ */
+
 export class KemetCarouselTotal extends LitElement {
   static get styles() {
     return [
@@ -13,9 +25,7 @@ export class KemetCarouselTotal extends LitElement {
 
   static get properties() {
     return {
-      total: {
-        type: Number,
-      },
+      total: { type: Number },
     };
   }
 

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

@@ -1,126 +1,71 @@
-import { html, css, LitElement } from 'lit';
+import { html, LitElement } from 'lit';
+import { emitEvent } from '../../utilities/misc/events.js';
+import { stylesCarousel } from './styles.js';
+
+/**
+ *
+ * @since 1.1.0
+ * @status stable
+ *
+ * @tagname kemet-carousel
+ * @summary The Carousel allows you to click or swipe through content.
+ *
+ * @prop {number} index - The current slide index.
+ * @prop {number} total - The total amount of slides.
+ * @prop {string} sliderWidth - The width of the slider.
+ * @prop {string} sliderTranslateX - The X position of the slider.
+ * @prop {boolean} inner - Displays the toolbar inside the carousel container.
+ * @prop {boolean} arrows - Determines whether or not to display arrows.
+ * @prop {object} options - Default options for the carousel.
+ * @prop {object} breakpoints - Options at different breakpoints for the carousel. Is mobile first.
+ *
+ * @event kemet-carousel-change-start - Fires with the a slide has begun to change.
+ * @event kemet-carousel-change-finished - Fires when a slide has changed and finished animating
+ *
+ * @slot slides - Place the slide elements here.
+ * @slot toolbar - Allows you to construct a toolbar within the carousel. Place things like pagination here.
+ * @slot prev - A slot for the previous arrow.
+ * @slot next - A slot for the next arrow.
+ * @slot information - Allows you to enter custom HTML such as a slide description to be used in the toolbar.
+ *
+ * @cssproperty --kemet-carousel-width - The width of the carousel. Default: 100%.
+ * @cssproperty --kemet-carousel-height - The height of the carousel. Default: auto.
+ * @cssproperty --kemet-carousel-toolbar-gap - The space between items in the toolbar. Default: 1rem.
+ * @cssproperty --kemet-carousel-toolbar-justify-content - The cross axis alignment of the toolbar. Default: center.
+ * @cssproperty --kemet-carousel-toolbar-padding - The padding of the toolbar. Default: 1rem.
+ * @cssproperty --kemet-carousel-toolbar-inner-width - The inner toolbar width. Default: 100%.
+ * @cssproperty --kemet-carousel-toolbar-inner-bottom - The bottom position of the inner toolbar. Default: 0.
+ * @cssproperty --kemet-carousel-toolbar-inner-top - The top position of the inner toolbar. Default: auto.
+ * @cssproperty --kemet-carousel-toolbar-inner-color - The inner toolbar text color. Default: var(--kemet-color-white).
+ * @cssproperty --kemet-carousel-toolbar-inner-background-color - The inner toolbar background color. Default: rgba(0, 0, 0, 0.4).
+ * @cssproperty --kemet-carousel-slides-border - The border around the slides. Default: 1px solid var(--kemet-color-gray1).
+ * @cssproperty --kemet-carousel-transition-speed - The transition speed of the slides. Default: 300ms.
+ * @cssproperty --kemet-carousel-arrows-opacity - The arrows start opacity. Default: 0.25.
+ * @cssproperty --kemet-carousel-arrows-opacity-hover - The arrows however opacity. Default: 1.
+ * @cssproperty --kemet-carousel-arrows-transition-speed - The arrows transition speed. Default: 300ms.
+ *
+ * @csspart container - Contains the slides and toolbar.
+ * @csspart slides - Wrapper for the slider.
+ * @csspart slider - Contains the slides.
+ * @csspart toolbar - Contains the toolbar.
+ *
+ */
 
 export default class KemetCarousel extends LitElement {
   static get styles() {
-    return 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);
-      }
-    `;
+    return [stylesCarousel];
   }
 
   static get properties() {
     return {
-      /**
-       * The current slide index.
-       */
-      index: {
-        type: Number,
-        reflect: true,
-      },
-      /**
-       * The total amount of slides
-       */
-      total: {
-        type: Number,
-      },
-      /**
-       * The width of the slider
-       */
-      sliderWidth: {
-        type: String,
-      },
-      /**
-       * The X position of the slider
-       */
-      sliderTranslateX: {
-        type: String,
-      },
-      /**
-       * Displays the toolbar inside the carousel container
-       */
-      inner: {
-        type: Boolean,
-        reflect: true,
-      },
-      /**
-       * Determines whether or not to display arrows
-       */
-      arrows: {
-        type: Boolean,
-        reflect: true,
-      },
-      /**
-       * Default options for the carousel
-       */
-      options: {
-        type: Object,
-      },
-      /**
-       * Options are different breakpoints for the carousel. Is mobile first.
-       */
-      breakpoints: {
-        type: Object,
-      },
+      index: { type: Number, reflect: true },
+      total: { type: Number },
+      sliderWidth: { type: String },
+      sliderTranslateX: { type: String },
+      inner: { type: Boolean, reflect: true },
+      arrows: { type: Boolean, reflect: true },
+      options: { type: Object },
+      breakpoints: { type: Object },
     };
   }
 
@@ -414,15 +359,7 @@ export default class KemetCarousel extends LitElement {
       currentSlide.selected = true;
 
       // notify consumers of slide change
-
-      /**
-       * Fires with the a slide has begun to change
-       */
-      this.dispatchEvent(new CustomEvent('kemet-carousel-change-start', {
-        bubbles: true,
-        composed: true,
-        detail: this,
-      }));
+      emitEvent(this, 'kemet-carousel-change-start', this);
 
       // update information element
       this.updateInformation();
@@ -458,14 +395,7 @@ export default class KemetCarousel extends LitElement {
       currentElement.current = this.index + 1;
     }
 
-    /**
-     * Fires when a slide has changed and finished animating
-     */
-    this.dispatchEvent(new CustomEvent('kemet-carousel-change-finished', {
-      bubbles: true,
-      composed: true,
-      detail: this,
-    }));
+    emitEvent(this, 'kemet-carousel-change-finished', this);
   }
 
   handleLink(event) {