kemet-ui 1.4.0 → 2.0.0

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

@@ -1,7 +1,9 @@
-import { html, css, LitElement } from 'lit';
-import '../kemet-icon/kemet-icon.js';
-import { FormSubmitController } from '../../utilities/controllers/forms.js';
-
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { stylesBase } from './styles';
+import { FormSubmitController } from '../../utilities/controllers/forms';
+import '../kemet-icon/kemet-icon';
 /**
  * @since 1.0.0
  * @status stable
@@ -23,13 +25,13 @@ import { FormSubmitController } from '../../utilities/controllers/forms.js';
  * @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-color - The text color. Default: --kemet-color-foreground.
  * @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-background-color - The background color. Default: --kemet-color-background.
  * @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.
@@ -42,206 +44,110 @@ import { FormSubmitController } from '../../utilities/controllers/forms.js';
  * @cssproperty --kemet-button-disabled-opacity - The opacity of the disabled state. Default: 0.5.
  *
  */
-
-export default class KemetButton extends LitElement {
-  static get styles() {
-    return [
-      css`
-        :host {
-          cursor: pointer;
-          display: inline-flex;
-          align-items: center;
-          justify-content: center;
-          font-size: var(--kemet-button-font-size, inherit);
-          color: var(--kemet-button-color, var(--kemet-color-white));
-          width: var(--kemet-button-width, auto);
-          height: var(--kemet-button-height, auto);
-          border: var(--kemet-button-border, 0);
-          border-radius: var(--kemet-button-border-radius, 0);
-          transition: filter var(--kemet-button-transition-speed, 300ms) ease;
-          background-color: var(--kemet-button-background-color, var(--kemet-color-primary));
-        }
-
-        :host(:hover:not([disabled])) {
-          filter: brightness(var(--kemet-button-hover-brightness, 1.25));
-        }
-
-        :host([disabled]) {
-          opacity: var(--kemet-button-disabled-opacity, 0.5);
-        }
-
-        .button {
-          cursor: pointer;
-          text-decoration: none;
-          display: flex;
-          gap: var(--kemet-button-gap, 0.5rem);
-          align-items: center;
-          color: inherit;
-          font-size: inherit;
-          padding: var(--kemet-button-padding, 1rem 1.25rem);
-          border: 0;
-          background: none;
-        }
-
-        :host([disabled]) .button {
-          cursor: not-allowed;
-        }
-
-        :host([type='text']) {
-          --kemet-button-color: var(--kemet-color-primary);
-          --kemet-button-background-color: none;
-        }
-
-        :host([type='text']:hover) {
-          text-decoration: var(--kemet-button-hover-decoration, underline);
-        }
-
-        :host([type='circle']) {
-          --kemet-button-border-radius: 50%;
-          --kemet-button-width: var(--kemet-button-circle-size, 50px);
-          --kemet-button-height: var(--kemet-button-circle-size, 50px);
-        }
-
-        :host([type='rounded']) {
-          --kemet-button-border-radius: var(--kemet-button-rounded-amount, 6px);
-        }
-
-        :host([type='pill']) {
-          --kemet-button-border-radius: 10rem;
-        }
-
-        :host([outlined]) {
-          --kemet-button-color: var(--kemet-color-primary);
-          --kemet-button-background-color: var(--kemet-color-white);
-          --kemet-button-border: var(--kemet-button-border-width, 1px) var(--kemet-button-border-style, solid) var(--kemet-button-border-color, var(--kemet-color-primary));
-        }
-      `,
-    ];
-  }
-
-  static get properties() {
-    return {
-      active: {
-        type: Boolean,
-        reflect: true,
-      },
-      hover: {
-        type: Boolean,
-        reflect: true,
-      },
-      focused: {
-        type: Boolean,
-        reflect: true,
-      },
-      link: {
-        type: String,
-      },
-      outlined: {
-        type: Boolean,
-        reflect: true,
-      },
-      disabled: {
-        type: Boolean,
-        reflect: true,
-      },
-      type: {
-        type: String,
-        reflect: true,
-      },
-    };
-  }
-
-  constructor() {
-    super();
-
-    this.addEventListener('click', this.handleClick.bind(this));
-    this.addEventListener('mouseover', this.handleMouseOver.bind(this));
-    this.addEventListener('mouseout', this.handleMouseOut.bind(this));
-    this.addEventListener('blur', this.handleBlur.bind(this));
-    this.addEventListener('keyup', event => this.handleKeyUp(event));
-
-    this.type = 'standard';
-    this.outline = false;
-    this.disable = false;
-
-    /** @internal */
-    this.formSubmitController = new FormSubmitController(this);
-  }
-
-  render() {
-    if (this.link && !this.disabled) {
-      return html`
+let KemetButton = class KemetButton extends LitElement {
+    constructor() {
+        super();
+        this.outlined = false;
+        this.disabled = false;
+        this.type = 'standard';
+        this.addEventListener('click', this.handleClick.bind(this));
+        this.addEventListener('mouseover', this.handleMouseOver.bind(this));
+        this.addEventListener('mouseout', this.handleMouseOut.bind(this));
+        this.addEventListener('blur', this.handleBlur.bind(this));
+        this.addEventListener('keyup', event => this.handleKeyUp(event));
+        /** @internal */
+        this.formSubmitController = new FormSubmitController(this);
+    }
+    render() {
+        if (this.link && !this.disabled) {
+            return html `
         <a href=${this.link} class="button" role="button" part="button">
           <slot name="left"></slot>
           <slot></slot>
           <slot name="right"></slot>
         </a>
       `;
-    }
-
-    return html`
+        }
+        return html `
       <button class="button" part="button" ?disabled=${this.disabled} aria-disabled=${this.disabled ? 'true' : 'false'}>
         <slot name="left"></slot>
         <slot></slot>
         <slot name="right"></slot>
       </button>
     `;
-  }
-
-  /**
-   * Sets hover to true onMouseOver
-   * @private
-   */
-  handleMouseOver() {
-    this.hover = true;
-  }
-
-  /**
-   * Sets hover to false onMouseOut
-   * @private
-   */
-  handleMouseOut() {
-    this.hover = false;
-  }
-
-  /**
-   * Handles click behavior
-   * @private
-   */
-  handleClick() {
-    this.hover = false;
-    this.active = true;
-
-    setTimeout(() => {
-      this.active = false;
-    }, 300);
-
-    if (this.shadowRoot.querySelector('button')) {
-      this.formSubmitController.submit(this);
     }
-  }
-
-  /**
-   * Handles blur
-   * @private
-   */
-  handleBlur() {
-    this.focused = false;
-    this.active = false;
-    this.hover = false;
-  }
-
-  /**
-   * Handles keyup
-   * @private
-   * @param {object} event - event object
-   */
-  handleKeyUp(event) {
-    if (event.key === 'Tab') {
-      this.focused = true;
+    /**
+     * Sets hover to true onMouseOver
+     * @private
+     */
+    handleMouseOver() {
+        this.hover = true;
+    }
+    /**
+     * Sets hover to false onMouseOut
+     * @private
+     */
+    handleMouseOut() {
+        this.hover = false;
+    }
+    /**
+     * Handles click behavior
+     * @private
+     */
+    handleClick() {
+        this.hover = false;
+        this.active = true;
+        setTimeout(() => {
+            this.active = false;
+        }, 300);
+        if (this.shadowRoot.querySelector('button')) {
+            this.formSubmitController.submit();
+        }
+    }
+    /**
+     * Handles blur
+     * @private
+     */
+    handleBlur() {
+        this.focused = false;
+        this.active = false;
+        this.hover = false;
+    }
+    /**
+     * Handles keyup
+     * @private
+     * @param {object} event - event object
+     */
+    handleKeyUp(event) {
+        if (event.key === 'Tab') {
+            this.focused = true;
+        }
     }
-  }
-}
-
-// eslint-disable-next-line no-unused-expressions
-customElements.get('kemet-button') || customElements.define('kemet-button', KemetButton);
+};
+KemetButton.styles = [stylesBase];
+__decorate([
+    property({ type: Boolean, reflect: true })
+], KemetButton.prototype, "active", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], KemetButton.prototype, "hover", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], KemetButton.prototype, "focused", void 0);
+__decorate([
+    property({ type: String })
+], KemetButton.prototype, "link", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], KemetButton.prototype, "outlined", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], KemetButton.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], KemetButton.prototype, "type", void 0);
+KemetButton = __decorate([
+    customElement('kemet-button')
+], KemetButton);
+export default KemetButton;
+//# sourceMappingURL=kemet-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kemet-button.js","sourceRoot":"","sources":["../../../src/components/kemet-button/kemet-button.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { TypeType } from './types';\nimport { stylesBase } from './styles';\nimport { FormSubmitController } from '../../utilities/controllers/forms';\nimport '../kemet-icon/kemet-icon';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-button\n * @summary A versatile button that can be used either to submit a form, trigger an action, or link to content.\n *\n * @prop {boolean} active - Determines whether or not the button is active\n * @prop {boolean} hover - Is true when the button is hovered\n * @prop {boolean} focused - Is true when the button is focused\n * @prop {string} link - The url a button should link too\n * @prop {boolean} outlined - Outline style for a button\n * @prop {boolean} disabled - Determines whether not a button is disabled\n * @prop {string} type - Controls the type of button. standard | text | circle | rounded | pill\n *\n * @slot left - Allows you to place an icon to the left of the button text.\n * @slot right - Allows you to place an icon to the right of the button text.\n *\n * @csspart button - The button or anchor element.\n *\n * @cssproperty --kemet-button-font-size - The font size. Default: inherit.\n * @cssproperty --kemet-button-color - The text color. Default: --kemet-color-foreground.\n * @cssproperty --kemet-button-width - The width. Default: auto.\n * @cssproperty --kemet-button-height - The height. Default:  auto.\n * @cssproperty --kemet-button-border - The border. Default: 0.\n * @cssproperty --kemet-button-border-radius - The border radius. Default: 0.\n * @cssproperty --kemet-button-transition-speed - The transition speed of the hover effect. Default: 300ms.\n * @cssproperty --kemet-button-background-color - The background color. Default: --kemet-color-background.\n * @cssproperty --kemet-button-hover-brightness - The brightness of the hover effect. Default: 1.25.\n * @cssproperty --kemet-button-gap - The gap between the button and icons. Default: 0.5rem.\n * @cssproperty --kemet-button-padding - The button padding. Default: 1rem 1.25rem.\n * @cssproperty --kemet-button-hover-decoration - The decoration for a text button's hover. Default: underline.\n * @cssproperty --kemet-button-circle-size - The diameter of a circle button. Default: 50px.\n * @cssproperty --kemet-button-rounded-amount - The border radius of the rounded button. Default: 6px.\n * @cssproperty --kemet-button-border-width - The width of the outline border. Default: 1px.\n * @cssproperty --kemet-button-border-style - The style of the outline border. Default: solid.\n * @cssproperty --kemet-button-border-color - The color of the outline border. Default: --kemet-color-primary.\n * @cssproperty --kemet-button-disabled-opacity - The opacity of the disabled state. Default: 0.5.\n *\n */\n\n@customElement('kemet-button')\nexport default class KemetButton extends LitElement {\n  /** @internal */\n  formSubmitController: FormSubmitController;\n\n  static styles = [stylesBase];\n\n  @property({ type: Boolean, reflect: true })\n  active: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  hover: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  focused: boolean;\n\n  @property({ type: String })\n  link: string;\n\n  @property({ type: Boolean, reflect: true })\n  outlined: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean = false;\n\n  @property({ type: String, reflect: true })\n  type: TypeType = 'standard';\n\n  constructor() {\n    super();\n\n    this.addEventListener('click', this.handleClick.bind(this));\n    this.addEventListener('mouseover', this.handleMouseOver.bind(this));\n    this.addEventListener('mouseout', this.handleMouseOut.bind(this));\n    this.addEventListener('blur', this.handleBlur.bind(this));\n    this.addEventListener('keyup', event => this.handleKeyUp(event));\n\n    /** @internal */\n    this.formSubmitController = new FormSubmitController(this);\n  }\n\n  render() {\n    if (this.link && !this.disabled) {\n      return html`\n        <a href=${this.link} class=\"button\" role=\"button\" part=\"button\">\n          <slot name=\"left\"></slot>\n          <slot></slot>\n          <slot name=\"right\"></slot>\n        </a>\n      `;\n    }\n\n    return html`\n      <button class=\"button\" part=\"button\" ?disabled=${this.disabled} aria-disabled=${this.disabled ? 'true' : 'false'}>\n        <slot name=\"left\"></slot>\n        <slot></slot>\n        <slot name=\"right\"></slot>\n      </button>\n    `;\n  }\n\n  /**\n   * Sets hover to true onMouseOver\n   * @private\n   */\n  handleMouseOver() {\n    this.hover = true;\n  }\n\n  /**\n   * Sets hover to false onMouseOut\n   * @private\n   */\n  handleMouseOut() {\n    this.hover = false;\n  }\n\n  /**\n   * Handles click behavior\n   * @private\n   */\n  handleClick() {\n    this.hover = false;\n    this.active = true;\n\n    setTimeout(() => {\n      this.active = false;\n    }, 300);\n\n    if (this.shadowRoot.querySelector('button')) {\n      this.formSubmitController.submit();\n    }\n  }\n\n  /**\n   * Handles blur\n   * @private\n   */\n  handleBlur() {\n    this.focused = false;\n    this.active = false;\n    this.hover = false;\n  }\n\n  /**\n   * Handles keyup\n   * @private\n   * @param {object} event - event object\n   */\n  handleKeyUp(event) {\n    if (event.key === 'Tab') {\n      this.focused = true;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-button': KemetButton\n  }\n}\n"]}

package/dist/components/kemet-button/styles.d.ts

@@ -0,0 +1 @@
+export declare const stylesBase: import("lit").CSSResult;

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

@@ -0,0 +1,73 @@
+import { css } from 'lit';
+export const stylesBase = css `
+  :host {
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--kemet-button-font-size, inherit);
+    color: var(--kemet-button-color, var(--kemet-color-foreground));
+    width: var(--kemet-button-width, auto);
+    height: var(--kemet-button-height, auto);
+    border: var(--kemet-button-border, 0);
+    border-radius: var(--kemet-button-border-radius, 0);
+    transition: filter var(--kemet-button-transition-speed, 300ms) ease;
+    background-color: var(--kemet-button-background-color, var(--kemet-color-background));
+  }
+
+  :host(:hover:not([disabled])) {
+    filter: brightness(var(--kemet-button-hover-brightness, 1.25));
+  }
+
+  :host([disabled]) {
+    opacity: var(--kemet-button-disabled-opacity, 0.5);
+  }
+
+  .button {
+    cursor: pointer;
+    text-decoration: none;
+    display: flex;
+    gap: var(--kemet-button-gap, 0.5rem);
+    align-items: center;
+    color: inherit;
+    font-size: inherit;
+    width: 100%;
+    padding: var(--kemet-button-padding, 1rem 1.25rem);
+    border: 0;
+    background: none;
+  }
+
+  :host([disabled]) .button {
+    cursor: not-allowed;
+  }
+
+  :host([type='text']) {
+    --kemet-button-color: var(--kemet-color-text);
+    --kemet-button-background-color: none;
+  }
+
+  :host([type='text']:hover) {
+    text-decoration: var(--kemet-button-hover-decoration, underline);
+  }
+
+  :host([type='circle']) {
+    --kemet-button-border-radius: 50%;
+    --kemet-button-width: var(--kemet-button-circle-size, 50px);
+    --kemet-button-height: var(--kemet-button-circle-size, 50px);
+  }
+
+  :host([type='rounded']) {
+    --kemet-button-border-radius: var(--kemet-button-rounded-amount, 6px);
+  }
+
+  :host([type='pill']) {
+    --kemet-button-border-radius: 10rem;
+  }
+
+  :host([outlined]) {
+    --kemet-button-color: var(--kemet-color-background);
+    --kemet-button-background-color: transparent;
+    --kemet-button-border: var(--kemet-button-border-width, 1px) var(--kemet-button-border-style, solid) var(--kemet-button-border-color, var(--kemet-color-background));
+  }
+`;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-button/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsE5B,CAAA","sourcesContent":["import { css } from 'lit';\n\nexport const stylesBase = css`\n  :host {\n    cursor: pointer;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: var(--kemet-button-font-size, inherit);\n    color: var(--kemet-button-color, var(--kemet-color-foreground));\n    width: var(--kemet-button-width, auto);\n    height: var(--kemet-button-height, auto);\n    border: var(--kemet-button-border, 0);\n    border-radius: var(--kemet-button-border-radius, 0);\n    transition: filter var(--kemet-button-transition-speed, 300ms) ease;\n    background-color: var(--kemet-button-background-color, var(--kemet-color-background));\n  }\n\n  :host(:hover:not([disabled])) {\n    filter: brightness(var(--kemet-button-hover-brightness, 1.25));\n  }\n\n  :host([disabled]) {\n    opacity: var(--kemet-button-disabled-opacity, 0.5);\n  }\n\n  .button {\n    cursor: pointer;\n    text-decoration: none;\n    display: flex;\n    gap: var(--kemet-button-gap, 0.5rem);\n    align-items: center;\n    color: inherit;\n    font-size: inherit;\n    width: 100%;\n    padding: var(--kemet-button-padding, 1rem 1.25rem);\n    border: 0;\n    background: none;\n  }\n\n  :host([disabled]) .button {\n    cursor: not-allowed;\n  }\n\n  :host([type='text']) {\n    --kemet-button-color: var(--kemet-color-text);\n    --kemet-button-background-color: none;\n  }\n\n  :host([type='text']:hover) {\n    text-decoration: var(--kemet-button-hover-decoration, underline);\n  }\n\n  :host([type='circle']) {\n    --kemet-button-border-radius: 50%;\n    --kemet-button-width: var(--kemet-button-circle-size, 50px);\n    --kemet-button-height: var(--kemet-button-circle-size, 50px);\n  }\n\n  :host([type='rounded']) {\n    --kemet-button-border-radius: var(--kemet-button-rounded-amount, 6px);\n  }\n\n  :host([type='pill']) {\n    --kemet-button-border-radius: 10rem;\n  }\n\n  :host([outlined]) {\n    --kemet-button-color: var(--kemet-color-background);\n    --kemet-button-background-color: transparent;\n    --kemet-button-border: var(--kemet-button-border-width, 1px) var(--kemet-button-border-style, solid) var(--kemet-button-border-color, var(--kemet-color-background));\n  }\n`\n"]}

package/dist/components/kemet-button/types.d.ts

@@ -0,0 +1,10 @@
+export declare type TypeType = 'standard' | 'text' | 'circle' | 'rounded' | 'pill';
+export interface KemetButtonInterface {
+    active: boolean;
+    hover: boolean;
+    focused: boolean;
+    link: string;
+    outlined: boolean;
+    disabled: boolean;
+    type: TypeType;
+}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/kemet-button/types.ts"],"names":[],"mappings":"","sourcesContent":["export type TypeType = 'standard' | 'text' | 'circle' | 'rounded' | 'pill';\n\nexport interface KemetButtonInterface {\n  active: boolean,\n  hover: boolean,\n  focused: boolean,\n  link: string,\n  outlined: boolean,\n  disabled: boolean,\n  type: TypeType,\n}\n"]}

package/dist/components/kemet-card/kemet-card.d.ts

@@ -0,0 +1,47 @@
+import { LitElement } from 'lit';
+/**
+ * @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 styles: import("lit").CSSResult[];
+    center: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-card': KemetCard;
+    }
+}

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

@@ -1,6 +1,7 @@
+import { __decorate } from "tslib";
 import { html, LitElement } from 'lit';
-import { stylesBase } from './styles.js';
-
+import { customElement, property } from 'lit/decorators.js';
+import { stylesBase } from './styles';
 /**
  * @since 1.4.0
  * @status stable
@@ -37,20 +38,9 @@ import { stylesBase } from './styles.js';
  * @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`
+let KemetCard = class KemetCard extends LitElement {
+    render() {
+        return html `
       <slot name="header"></slot>
       <div class="media" part="media">
         <slot name="media"></slot>
@@ -62,8 +52,14 @@ export default class KemetCard extends LitElement {
       </div>
       <slot name="footer"></slot>
     `;
-  }
-}
-
-// eslint-disable-next-line no-unused-expressions
-customElements.get('kemet-card') || customElements.define('kemet-card', KemetCard);
+    }
+};
+KemetCard.styles = [stylesBase];
+__decorate([
+    property({ type: Boolean, reflect: true })
+], KemetCard.prototype, "center", void 0);
+KemetCard = __decorate([
+    customElement('kemet-card')
+], KemetCard);
+export default KemetCard;
+//# sourceMappingURL=kemet-card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kemet-card.js","sourceRoot":"","sources":["../../../src/components/kemet-card/kemet-card.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AAGH,IAAqB,SAAS,GAA9B,MAAqB,SAAU,SAAQ,UAAU;IAM/C,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;KAWV,CAAC;IACJ,CAAC;CACF,CAAA;AAnBQ,gBAAM,GAAG,CAAC,UAAU,CAAC,CAAC;AAG7B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAC3B;AAJG,SAAS;IAD7B,aAAa,CAAC,YAAY,CAAC;GACP,SAAS,CAoB7B;eApBoB,SAAS","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { stylesBase } from './styles';\n\n/**\n * @since 1.4.0\n * @status stable\n *\n * @tagname kemet-card\n * @summary A highly configurable panel design to display media and information.\n *\n * @prop {boolean} center - Centers the elements in the card.\n *\n * @slot default - The contents of the alert.\n * @slot header - The cards's header.\n * @slot media - A slot for images, videos, or embeds.\n * @slot caption - Text for the media slot.\n * @slot footer - The card's footer.\n *\n *\n * @csspart media - The media area of the card.\n * @csspart body - The main contents of the card.\n *\n * @cssproperty --kemet-card-padding - The space around elements. Default: 1rem.\n * @cssproperty --kemet-card-border-color - The color of the borders. Default: var(--kemet-color-gray4).\n * @cssproperty --kemet-card-color - The color of the text. Default: var(--kemet-color-black).\n * @cssproperty --kemet-card-max-width - The max width of the card. Default: 360px.\n * @cssproperty --kemet-card-border - The border around the card. Default: 1px solid var(--kemet-card-border-color).\n * @cssproperty --kemet-card-border-radius - The border radius of the card. Default: 0.\n * @cssproperty --kemet-card-background-color - The background color. Default: var(--kemet-color-white).\n * @cssproperty --kemet-card-body-padding - The body spacing. Default: var(--kemet-card-padding).\n * @cssproperty --kemet-card-header-padding - The header spacing. Default: var(--kemet-card-padding).\n * @cssproperty --kemet-card-header-border-bottom - The header border. Default: 1px solid var(--kemet-card-border-color).\n * @cssproperty --kemet-card-caption-color - The caption text color. Default: var(--kemet-color-white).\n * @cssproperty --kemet-card-caption-padding - The caption spacing. Default: calc(var(--kemet-card-padding) / 2) var(--kemet-card-padding).\n * @cssproperty --kemet-card-caption-background-color - The caption background color. Default: rgba(0,0,0,0.5).\n * @cssproperty --kemet-card-footer-padding - The footer spacing. Default: var(--kemet-card-padding).\n * @cssproperty --kemet-card-footer-border-top - The footer border. Default: 1px solid var(--kemet-card-border-color).\n *\n */\n\n@customElement('kemet-card')\nexport default class KemetCard extends LitElement {\n  static styles = [stylesBase];\n\n  @property({ type: Boolean, reflect: true })\n  center: boolean;\n\n  render() {\n    return html`\n      <slot name=\"header\"></slot>\n      <div class=\"media\" part=\"media\">\n        <slot name=\"media\"></slot>\n        <slot name=\"caption\"></slot>\n      </div>\n      <div class=\"body\" part=\"body\">\n        <slot></slot>\n      </div>\n      </div>\n      <slot name=\"footer\"></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-card': KemetCard\n  }\n}\n"]}

package/dist/components/kemet-card/styles.d.ts

@@ -0,0 +1 @@
+export declare const stylesBase: import("lit").CSSResult;

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

@@ -1,6 +1,5 @@
 import { css } from 'lit';
-
-export const stylesBase = css`
+export const stylesBase = css `
   *,
   *::before,
   *::after {
@@ -61,3 +60,4 @@ export const stylesBase = css`
     border-top: var(--kemet-card-footer-border-top, 1px solid var(--kemet-card-border-color));
   }
 `;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-card/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4D5B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesBase = css`\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n\n  :host {\n    --kemet-card-padding: 1rem;\n    --kemet-card-border-color: var(--kemet-color-gray4);\n\n    color: var(--kemet-card-color, var(--kemet-color-black));\n    display: inline-flex;\n    flex-direction: column;\n    max-width: var(--kemet-card-max-width, 360px);\n    border: var(--kemet-card-border, 1px solid var(--kemet-card-border-color));\n    border-radius: var(--kemet-card-border-radius, 0);\n    background-color: var(--kemet-card-background-color, var(--kemet-color-white));\n  }\n\n  :host([center]) {\n    align-items: center;\n    text-align: center;\n  }\n\n  .body {\n    padding: var(--kemet-card-body-padding, var(--kemet-card-padding));\n  }\n\n  .media {\n    position: relative;\n  }\n\n  ::slotted(*) {\n    max-width: 100%;\n  }\n\n  ::slotted(img) {\n    display: flex;\n    max-width: 100%;\n  }\n\n  ::slotted([slot=\"header\"]) {\n    padding: var(--kemet-card-header-padding, var(--kemet-card-padding));\n    border-bottom: var(--kemet-card-header-border-bottom, 1px solid var(--kemet-card-border-color));\n  }\n\n  ::slotted([slot=\"caption\"]) {\n    color: var(--kemet-card-caption-color, var(--kemet-color-white));\n    position: absolute;\n    bottom: 0;\n    width: 100%;\n    padding: var(--kemet-card-caption-padding, calc(var(--kemet-card-padding) / 2) var(--kemet-card-padding));\n    background-color: var(--kemet-card-caption-background-color, rgba(0,0,0,0.35));\n  }\n\n  ::slotted([slot=\"footer\"]) {\n    padding: var(--kemet-card-footer-padding, var(--kemet-card-padding));\n    border-top: var(--kemet-card-footer-border-top, 1px solid var(--kemet-card-border-color));\n  }\n`;\n"]}

package/dist/components/kemet-card/types.d.ts

@@ -0,0 +1,3 @@
+export interface KemetCardInterface {
+    center: boolean;
+}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/kemet-card/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface KemetCardInterface {\n  center: boolean,\n}\n"]}

package/dist/components/kemet-carousel/kemet-carousel-current.d.ts

@@ -0,0 +1,26 @@
+import { LitElement } from 'lit';
+import { KemetCarouselInterface } from './types';
+/**
+ *
+ * @since 1.1.0
+ * @status stable
+ *
+ * @tagname kemet-carousel-current
+ * @summary Displays the active slide number.
+ *
+ * @prop {number} current - The current slide number.
+ *
+ */
+export default class KemetCarouselCurrent extends LitElement {
+    static styles: import("lit").CSSResult[];
+    current: number;
+    carousel: KemetCarouselInterface | null;
+    firstUpdated(): void;
+    updated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-carousel-current': KemetCarouselCurrent;
+    }
+}