kemet-ui 1.3.1 → 2.0.0

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

@@ -0,0 +1,65 @@
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { stylesBase } from './styles';
+/**
+ * @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).
+ *
+ */
+let KemetCard = class KemetCard extends LitElement {
+    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>
+    `;
+    }
+};
+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

@@ -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));
+  }
+`;
+//# 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;
+    }
+}

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

@@ -1,36 +1,44 @@
+import { __decorate } from "tslib";
 import { html, css, LitElement } from 'lit';
-
-export class KemetCarouselCurrent extends LitElement {
-  static get styles() {
-    return [
-      css`
-        :host {
-          display: inline-block;
-        }
-      `,
-    ];
-  }
-
-  static get properties() {
-    return {
-      current: {
-        type: Number,
-      },
-    };
-  }
-
-  firstUpdated() {
-    this.carousel = this.closest('kemet-carousel');
-  }
-
-  updated() {
-    this.current = this.carousel.index + 1;
-  }
-
-  render() {
-    return html`${this.current}`;
-  }
-}
-
-// eslint-disable-next-line no-unused-expressions
-customElements.get('kemet-carousel-current') || customElements.define('kemet-carousel-current', KemetCarouselCurrent);
+import { customElement, property, state } from 'lit/decorators.js';
+/**
+ *
+ * @since 1.1.0
+ * @status stable
+ *
+ * @tagname kemet-carousel-current
+ * @summary Displays the active slide number.
+ *
+ * @prop {number} current - The current slide number.
+ *
+ */
+let KemetCarouselCurrent = class KemetCarouselCurrent extends LitElement {
+    firstUpdated() {
+        this.carousel = this.closest('kemet-carousel');
+    }
+    updated() {
+        var _a;
+        this.current = ((_a = this.carousel) === null || _a === void 0 ? void 0 : _a.index) + 1;
+    }
+    render() {
+        return html `${this.current}`;
+    }
+};
+KemetCarouselCurrent.styles = [
+    css `
+      :host {
+        display: inline-block;
+      }
+    `,
+];
+__decorate([
+    property({ type: Number })
+], KemetCarouselCurrent.prototype, "current", void 0);
+__decorate([
+    state()
+], KemetCarouselCurrent.prototype, "carousel", void 0);
+KemetCarouselCurrent = __decorate([
+    customElement('kemet-carousel-current')
+], KemetCarouselCurrent);
+export default KemetCarouselCurrent;
+//# sourceMappingURL=kemet-carousel-current.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kemet-carousel-current.js","sourceRoot":"","sources":["../../../src/components/kemet-carousel/kemet-carousel-current.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAGnE;;;;;;;;;;GAUG;AAGH,IAAqB,oBAAoB,GAAzC,MAAqB,oBAAqB,SAAQ,UAAU;IAgB1D,YAAY;QACV,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACjD,CAAC;IAED,OAAO;;QACL,IAAI,CAAC,OAAO,GAAG,CAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,KAAe,IAAG,CAAC,CAAC;IACpD,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;IAC/B,CAAC;CACF,CAAA;AA1BQ,2BAAM,GAAG;IACd,GAAG,CAAA;;;;KAIF;CACF,CAAC;AAGF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDACX;AAGhB;IADC,KAAK,EAAE;sDACgC;AAbrB,oBAAoB;IADxC,aAAa,CAAC,wBAAwB,CAAC;GACnB,oBAAoB,CA2BxC;eA3BoB,oBAAoB","sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { KemetCarouselInterface } from './types';\n\n/**\n *\n * @since 1.1.0\n * @status stable\n *\n * @tagname kemet-carousel-current\n * @summary Displays the active slide number.\n *\n * @prop {number} current - The current slide number.\n *\n */\n\n@customElement('kemet-carousel-current')\nexport default class KemetCarouselCurrent extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: inline-block;\n      }\n    `,\n  ];\n\n  @property({ type: Number })\n  current: number;\n\n  @state()\n  carousel: KemetCarouselInterface | null;\n\n\n  firstUpdated() {\n    this.carousel = this.closest('kemet-carousel');\n  }\n\n  updated() {\n    this.current = this.carousel?.index as number + 1;\n  }\n\n  render() {\n    return html`${this.current}`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-carousel-current': KemetCarouselCurrent\n  }\n}\n"]}

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

@@ -0,0 +1,25 @@
+import { LitElement } from 'lit';
+/**
+ *
+ * @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 default class KemetCarouselFirst extends LitElement {
+    static styles: import("lit").CSSResult[];
+    disabled: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+    first(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-carousel-first': KemetCarouselFirst;
+    }
+}

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

@@ -1,47 +1,50 @@
+import { __decorate } from "tslib";
 import { html, css, LitElement } from 'lit';
-
-export class KemetCarouselFirst extends LitElement {
-  static get styles() {
-    return [
-      css`
-        :host {
-          cursor: pointer;
-        }
-
-        :host([disabled]) {
-          cursor: not-allowed;
-        }
-      `,
-    ];
-  }
-
-  static get properties() {
-    return {
-      disabled: {
-        type: Boolean,
-        reflect: true,
-      },
-    };
-  }
-
-  render() {
-    return html`
+import { customElement, property } from 'lit/decorators.js';
+import { emitEvent } from '../../utilities/misc/events';
+/**
+ *
+ * @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
+ *
+ */
+let KemetCarouselFirst = class KemetCarouselFirst extends LitElement {
+    render() {
+        return html `
       <span tabindex="0" @keyup=${() => this.first()} @click=${() => this.first()}>
         <slot></slot>
       </span>
     `;
-  }
-
-  first() {
-    if (!this.disabled) {
-      this.dispatchEvent(new CustomEvent('kemet-carousel-first', {
-        bubbles: true,
-        composed: true,
-        detail: this,
-      }));
     }
-  }
-}
+    first() {
+        if (!this.disabled) {
+            emitEvent(this, 'kemet-carousel-first', this);
+        }
+    }
+};
+KemetCarouselFirst.styles = [
+    css `
+      :host {
+        cursor: pointer;
+      }
 
-// eslint-disable-next-line no-unused-expressions
-customElements.get('kemet-carousel-first') || customElements.define('kemet-carousel-first', KemetCarouselFirst);
+      :host([disabled]) {
+        cursor: not-allowed;
+      }
+    `,
+];
+__decorate([
+    property({ type: Boolean, reflect: true })
+], KemetCarouselFirst.prototype, "disabled", void 0);
+KemetCarouselFirst = __decorate([
+    customElement('kemet-carousel-first')
+], KemetCarouselFirst);
+export default KemetCarouselFirst;
+//# sourceMappingURL=kemet-carousel-first.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kemet-carousel-first.js","sourceRoot":"","sources":["../../../src/components/kemet-carousel/kemet-carousel-first.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAExD;;;;;;;;;;;;GAYG;AAGH,IAAqB,kBAAkB,GAAvC,MAAqB,kBAAmB,SAAQ,UAAU;IAgBxD,MAAM;QACJ,OAAO,IAAI,CAAA;kCACmB,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,WAAW,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE;;;KAG5E,CAAC;IACJ,CAAC;IAED,KAAK;QACH,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,SAAS,CAAC,IAAI,EAAE,sBAAsB,EAAE,IAAI,CAAC,CAAC;SAC/C;IACH,CAAC;CACF,CAAA;AA5BQ,yBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;KAQF;CACF,CAAC;AAGF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oDACzB;AAdC,kBAAkB;IADtC,aAAa,CAAC,sBAAsB,CAAC;GACjB,kBAAkB,CA6BtC;eA7BoB,kBAAkB","sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/misc/events';\n\n/**\n *\n * @since 1.1.0\n * @status stable\n *\n * @tagname kemet-carousel-first\n * @summary A link to the first slide in the carousel.\n *\n * @prop {boolean} disabled - Deactivates the button.\n *\n * @event kemet-carousel-first\n *\n */\n\n@customElement('kemet-carousel-first')\nexport default class KemetCarouselFirst extends LitElement {\n  static styles = [\n    css`\n      :host {\n        cursor: pointer;\n      }\n\n      :host([disabled]) {\n        cursor: not-allowed;\n      }\n    `,\n  ];\n\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean;\n\n  render() {\n    return html`\n      <span tabindex=\"0\" @keyup=${() => this.first()} @click=${() => this.first()}>\n        <slot></slot>\n      </span>\n    `;\n  }\n\n  first() {\n    if (!this.disabled) {\n      emitEvent(this, 'kemet-carousel-first', this);\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-carousel-first': KemetCarouselFirst\n  }\n}\n"]}

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

@@ -0,0 +1,25 @@
+import { LitElement } from 'lit';
+/**
+ *
+ * @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 default class KemetCarouselLast extends LitElement {
+    static styles: import("lit").CSSResult[];
+    disabled: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+    last(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-carousel-last': KemetCarouselLast;
+    }
+}

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

@@ -1,47 +1,50 @@
+import { __decorate } from "tslib";
 import { html, css, LitElement } from 'lit';
-
-export class KemetCarouselLast extends LitElement {
-  static get styles() {
-    return [
-      css`
-        :host {
-          cursor: pointer;
-        }
-
-        :host([disabled]) {
-          cursor: not-allowed;
-        }
-      `,
-    ];
-  }
-
-  static get properties() {
-    return {
-      disabled: {
-        type: Boolean,
-        reflect: true,
-      },
-    };
-  }
-
-  render() {
-    return html`
+import { customElement, property } from 'lit/decorators.js';
+import { emitEvent } from '../../utilities/misc/events';
+/**
+ *
+ * @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
+ *
+ */
+let KemetCarouselLast = class KemetCarouselLast extends LitElement {
+    render() {
+        return html `
       <span tabindex="0" @keyup=${() => this.last()} @click=${() => this.last()}>
         <slot></slot>
       </span>
     `;
-  }
-
-  last() {
-    if (!this.disabled) {
-      this.dispatchEvent(new CustomEvent('kemet-carousel-last', {
-        bubbles: true,
-        composed: true,
-        detail: this,
-      }));
     }
-  }
-}
+    last() {
+        if (!this.disabled) {
+            emitEvent(this, 'kemet-carousel-last', this);
+        }
+    }
+};
+KemetCarouselLast.styles = [
+    css `
+      :host {
+        cursor: pointer;
+      }
 
-// eslint-disable-next-line no-unused-expressions
-customElements.get('kemet-carousel-last') || customElements.define('kemet-carousel-last', KemetCarouselLast);
+      :host([disabled]) {
+        cursor: not-allowed;
+      }
+    `,
+];
+__decorate([
+    property({ type: Boolean, reflect: true })
+], KemetCarouselLast.prototype, "disabled", void 0);
+KemetCarouselLast = __decorate([
+    customElement('kemet-carousel-last')
+], KemetCarouselLast);
+export default KemetCarouselLast;
+//# sourceMappingURL=kemet-carousel-last.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kemet-carousel-last.js","sourceRoot":"","sources":["../../../src/components/kemet-carousel/kemet-carousel-last.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAExD;;;;;;;;;;;;GAYG;AAGH,IAAqB,iBAAiB,GAAtC,MAAqB,iBAAkB,SAAQ,UAAU;IAgBvD,MAAM;QACJ,OAAO,IAAI,CAAA;kCACmB,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE;;;KAG1E,CAAC;IACJ,CAAC;IAED,IAAI;QACF,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,SAAS,CAAC,IAAI,EAAE,qBAAqB,EAAE,IAAI,CAAC,CAAC;SAC9C;IACH,CAAC;CACF,CAAA;AA5BQ,wBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;KAQF;CACF,CAAC;AAGF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDACzB;AAdC,iBAAiB;IADrC,aAAa,CAAC,qBAAqB,CAAC;GAChB,iBAAiB,CA6BrC;eA7BoB,iBAAiB","sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/misc/events';\n\n/**\n *\n * @since 1.1.0\n * @status stable\n *\n * @tagname kemet-carousel-last\n * @summary A link to the last slide in the carousel..\n *\n * @prop {boolean} disabled - Deactivates the button.\n *\n * @event kemet-carousel-last\n *\n */\n\n@customElement('kemet-carousel-last')\nexport default class KemetCarouselLast extends LitElement {\n  static styles = [\n    css`\n      :host {\n        cursor: pointer;\n      }\n\n      :host([disabled]) {\n        cursor: not-allowed;\n      }\n    `,\n  ];\n\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean;\n\n  render() {\n    return html`\n      <span tabindex=\"0\" @keyup=${() => this.last()} @click=${() => this.last()}>\n        <slot></slot>\n      </span>\n    `;\n  }\n\n  last() {\n    if (!this.disabled) {\n      emitEvent(this, 'kemet-carousel-last', this);\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-carousel-last': KemetCarouselLast\n  }\n}\n"]}

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

@@ -0,0 +1,31 @@
+import { LitElement } from 'lit';
+/**
+ *
+ * @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 styles: import("lit").CSSResult[];
+    slide: number;
+    selected: boolean;
+    disabled: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+    changed(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-carousel-link': KemetCarouselLink;
+    }
+}