kemet-ui 3.0.0 → 3.1.0

package/dist/components/kemet-carousel/docs/stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-carousel/docs/stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\n\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-carousel';\nimport '../kemet-carousel-link';\nimport '../kemet-carousel-first';\nimport '../kemet-carousel-last';\nimport '../kemet-carousel-next';\nimport '../kemet-carousel-prev';\nimport '../kemet-carousel-slide';\nimport '../kemet-carousel-current';\nimport '../kemet-carousel-total';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nimport '../../kemet-badge/kemet-badge';\nimport '../../kemet-icon/kemet-icon';\n\nconst meta: Meta = {\n  title: 'Components / Carousel',\n  component: 'kemet-carousel',\n  args: {\n    numOfSlides: 5,\n    toolbarType: 'none',\n    options: {\n      perView: 1,\n      perMove: 1,\n      gap: 12,\n      slideshow: 0,\n      rewind: true,\n      center: false,\n    },\n    breakpoints: {\n      768: {\n        perView: 2,\n        gap: 24,\n        rewind: false,\n      },\n      1280: {\n        perView: 2.5,\n        center: true,\n      },\n    },\n  },\n  argTypes: {\n    toolbarType: {\n      control: { type: 'radio' },\n      options: ['none', 'pagination', 'description'],\n    },\n    options: {\n      control: { type: 'object' },\n    },\n    breakpoints: {\n      control: { type: 'object' },\n    },\n  }\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = (args) => {\n  const makeSlides = () => {\n    const slides = [];\n\n    for (let i = 0; i < args.numOfSlides; i += 1) {\n      const slideNumber = i + 1;\n\n      slides.push(html`\n        <kemet-carousel-slide slot=\"slides\">\n          <figure kemet-border=\"all-1 solid gray-50\" kemet-margin=\"none\" kemet-padding=\"2xl\" kemet-elevation=\"layer-4\">\n            <h3 kemet-margin=\"none\">Slide ${slideNumber}</h3>\n            <img src=\"https://via.placeholder.com/1920x1080\" alt=\"a placeholder\" style=\"max-width:100%\" />\n            <figcaption>An image in a carousel.</figcaption>\n          </figure>\n          <span slot=\"information\"><a href=\"https://google.com\" target=\"_blank\">Title</a>. An image of slide ${slideNumber}. </span>\n        </kemet-carousel-slide>\n      `);\n    }\n\n    return slides;\n  };\n\n  const makePrevArrow = () => {\n    if (args.arrows) {\n      return html`\n        <kemet-carousel-prev slot=\"prev\">\n          <kemet-icon icon=\"chevron-left\" size=\"72\"></kemet-icon>\n        </kemet-carousel-prev>\n      `;\n    }\n\n    return null;\n  };\n\n  const makeNextArrow = () => {\n    if (args.arrows) {\n      return html`\n        <kemet-carousel-next slot=\"next\">\n          <kemet-icon icon=\"chevron-right\" size=\"72\"></kemet-icon>\n        </kemet-carousel-next>\n      `;\n    }\n\n    return null;\n  };\n\n  const makePagination = () => {\n    if (args.toolbarType === 'pagination') {\n      const pages = [];\n\n      for (let i = 0; i < args.numOfSlides; i += 1) {\n        pages.push(html`\n          <kemet-carousel-link slide=\"${i}\" slot=\"toolbar\">${i + 1}</kemet-carousel-link>\n        `);\n      }\n\n      return html`\n        <kemet-carousel-first slot=\"toolbar\">\n          <kemet-icon icon=\"chevron-double-left\"></kemet-icon>\n        </kemet-carousel-first>\n        <kemet-carousel-prev slot=\"toolbar\">\n          <kemet-icon icon=\"chevron-left\"></kemet-icon>\n        </kemet-carousel-prev>\n        ${pages}\n        <kemet-carousel-next slot=\"toolbar\">\n          <kemet-icon icon=\"chevron-right\"></kemet-icon>\n        </kemet-carousel-next>\n        <kemet-carousel-last slot=\"toolbar\">\n          <kemet-icon icon=\"chevron-double-right\"></kemet-icon>\n        </kemet-carousel-last>\n      `;\n    }\n\n    return null;\n  };\n\n  const makeDescription = () => {\n    if (args.toolbarType === 'description') {\n      return html`\n        <div slot=\"toolbar\" kemet-layout=\"flexrow\" kemet-align=\"middle\" kemet-gutters>\n          <div>\n            <kemet-carousel-current></kemet-carousel-current>\n            &nbsp;of&nbsp;\n            <kemet-carousel-total></kemet-carousel-total>\n            :&nbsp;\n            <kemet-carousel-information></kemet-carousel-information>\n          </div>\n          <kemet-carousel-prev kemet-breakpoint=\"tiny:content\">\n            <kemet-badge circle kemet-padding=\"sm\"><kemet-icon icon=\"chevron-left\"></kemet-icon></kemet-badge>\n          </kemet-carousel-prev>\n          <kemet-carousel-next kemet-breakpoint=\"tiny:content\">\n            <kemet-badge circle kemet-padding=\"sm\"><kemet-icon icon=\"chevron-right\"></kemet-icon></kemet-badge>\n          </kemet-carousel-next>\n        </div>\n      `;\n    }\n\n    return null;\n  };\n\n  return html`\n    <kemet-carousel index=\"${args.index}\" ?inner=${args.inner} .options=${args.options} .breakpoints=${args.breakpoints}>\n      ${makePrevArrow()}\n      ${makeSlides()}\n      ${makeNextArrow()}\n      ${makePagination()}\n      ${makeDescription()}\n    </kemet-carousel>\n  `;\n};\n\nexport const Standard: Story = {\n  render: (args: any) => Template(args),\n};\n\nexport const DescriptionToolbar: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    toolbarType: 'description',\n  }\n};\n\nexport const PaginationToolbar: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    toolbarType: 'pagination',\n  }\n};\n\nexport const InnerToolbar: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    inner: true,\n    toolbarType: 'pagination',\n  }\n};\n\nexport const Arrows: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    arrows: true,\n  }\n};\n"]}
+{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-carousel/docs/stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\n\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-carousel';\nimport '../kemet-carousel-link';\nimport '../kemet-carousel-first';\nimport '../kemet-carousel-last';\nimport '../kemet-carousel-next';\nimport '../kemet-carousel-prev';\nimport '../kemet-carousel-slide';\nimport '../kemet-carousel-current';\nimport '../kemet-carousel-total';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nimport '../../kemet-badge/kemet-badge';\nimport '../../kemet-icon/kemet-icon';\n\nconst meta: Meta = {\n  title: 'Components / Carousel',\n  component: 'kemet-carousel',\n  args: {\n    numOfSlides: 5,\n    toolbarType: 'none',\n    options: {\n      perView: 1,\n      perMove: 1,\n      gap: 12,\n      slideshow: 0,\n      rewind: true,\n      center: false,\n    },\n    breakpoints: {\n      768: {\n        perView: 2,\n        gap: 24,\n        rewind: false,\n      },\n      1280: {\n        perView: 2.5,\n        center: true,\n      },\n    },\n  },\n  argTypes: {\n    toolbarType: {\n      control: { type: 'radio' },\n      options: ['none', 'pagination', 'description'],\n    },\n    options: {\n      control: { type: 'object' },\n    },\n    breakpoints: {\n      control: { type: 'object' },\n    },\n  }\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = (args) => {\n  const makeSlides = () => {\n    const slides = [];\n\n    for (let i = 0; i < args.numOfSlides; i += 1) {\n      const slideNumber = i + 1;\n\n      slides.push(html`\n        <kemet-carousel-slide slot=\"slides\">\n          <figure kemet-border=\"all-1 solid gray-50\" kemet-margin=\"none\" kemet-padding=\"2xl\" kemet-elevation=\"layer-4\">\n            <h3 kemet-margin=\"none\">Slide ${slideNumber}</h3>\n            <img src=\"https://via.placeholder.com/1920x1080\" alt=\"a placeholder\" style=\"max-width:100%\" />\n            <figcaption>An image in a carousel.</figcaption>\n          </figure>\n          <span slot=\"information\"><a href=\"https://google.com\" target=\"_blank\">Title</a>. An image of slide ${slideNumber}. </span>\n        </kemet-carousel-slide>\n      `);\n    }\n\n    return slides;\n  };\n\n  const makePrevArrow = () => {\n    if (args.arrows) {\n      return html`\n        <kemet-carousel-prev slot=\"prev\">\n          <kemet-icon icon=\"chevron-left\" size=\"72\"></kemet-icon>\n        </kemet-carousel-prev>\n      `;\n    }\n\n    return null;\n  };\n\n  const makeNextArrow = () => {\n    if (args.arrows) {\n      return html`\n        <kemet-carousel-next slot=\"next\">\n          <kemet-icon icon=\"chevron-right\" size=\"72\"></kemet-icon>\n        </kemet-carousel-next>\n      `;\n    }\n\n    return null;\n  };\n\n  const makePagination = () => {\n    if (args.toolbarType === 'pagination') {\n      const pages = [];\n\n      for (let i = 0; i < args.numOfSlides; i += 1) {\n        pages.push(html`\n          <kemet-carousel-link slide=\"${i}\" slot=\"toolbar\">${i + 1}</kemet-carousel-link>\n        `);\n      }\n\n      return html`\n        <kemet-carousel-first slot=\"toolbar\">\n          <kemet-icon icon=\"chevron-double-left\"></kemet-icon>\n        </kemet-carousel-first>\n        <kemet-carousel-prev slot=\"toolbar\">\n          <kemet-icon icon=\"chevron-left\"></kemet-icon>\n        </kemet-carousel-prev>\n        ${pages}\n        <kemet-carousel-next slot=\"toolbar\">\n          <kemet-icon icon=\"chevron-right\"></kemet-icon>\n        </kemet-carousel-next>\n        <kemet-carousel-last slot=\"toolbar\">\n          <kemet-icon icon=\"chevron-double-right\"></kemet-icon>\n        </kemet-carousel-last>\n      `;\n    }\n\n    return null;\n  };\n\n  const makeDescription = () => {\n    if (args.toolbarType === 'description') {\n      return html`\n        <div slot=\"toolbar\" kemet-layout=\"flexrow\" kemet-align=\"middle\" kemet-gutters>\n          <div>\n            <kemet-carousel-current></kemet-carousel-current>\n            &nbsp;of&nbsp;\n            <kemet-carousel-total></kemet-carousel-total>\n            :&nbsp;\n            <kemet-carousel-information></kemet-carousel-information>\n          </div>\n          <kemet-carousel-prev kemet-breakpoint=\"tiny:content\">\n            <kemet-badge circle kemet-padding=\"sm\"><kemet-icon icon=\"chevron-left\"></kemet-icon></kemet-badge>\n          </kemet-carousel-prev>\n          <kemet-carousel-next kemet-breakpoint=\"tiny:content\">\n            <kemet-badge circle kemet-padding=\"sm\"><kemet-icon icon=\"chevron-right\"></kemet-icon></kemet-badge>\n          </kemet-carousel-next>\n        </div>\n      `;\n    }\n\n    return null;\n  };\n\n  return html`\n    <kemet-carousel index=\"${args.index}\" ?inner=${args.inner} .options=${args.options} .breakpoints=${args.breakpoints}>\n      ${makePrevArrow()}\n      ${makeSlides()}\n      ${makeNextArrow()}\n      ${makePagination()}\n      ${makeDescription()}\n    </kemet-carousel>\n  `;\n};\n\nexport const Standard: Story = {\n  render: (args: any) => Template(args),\n};\n\nexport const DescriptionToolbar: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    toolbarType: 'description',\n  }\n};\n\nexport const PaginationToolbar: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    toolbarType: 'pagination',\n  }\n};\n\nexport const InnerToolbar: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    inner: true,\n    toolbarType: 'pagination',\n  }\n};\n\nexport const Arrows: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    arrows: true,\n  }\n};\n"]}

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

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-import KemetCarousel from './kemet-carousel';
+import type KemetCarousel from './kemet-carousel';
 /**
  *
  * @since 1.1.0

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

@@ -1 +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;sDACuB;AAbZ,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 KemetCarousel from './kemet-carousel';\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: KemetCarousel | 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"]}
+{"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;AAGY,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,UAAU;IAe1D,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;;AAxBM,2BAAM,GAAG;IACd,GAAG,CAAA;;;;KAIF;CACF,AANY,CAMX;AAGF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDACX;AAGhB;IADC,KAAK,EAAE;sDACuB;AAbZ,oBAAoB;IADxC,aAAa,CAAC,wBAAwB,CAAC;GACnB,oBAAoB,CA0BxC;eA1BoB,oBAAoB","sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport type KemetCarousel from './kemet-carousel';\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: KemetCarousel | null;\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

@@ -17,6 +17,7 @@ export default class KemetCarouselFirst extends LitElement {
     disabled: boolean;
     render(): import("lit-html").TemplateResult<1>;
     first(): void;
+    handleKeyUp(event: any): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -18,9 +18,9 @@ import { emitEvent } from '../../utilities/misc/events';
 let KemetCarouselFirst = class KemetCarouselFirst extends LitElement {
     render() {
         return html `
-      <span tabindex="0" @keyup=${() => this.first()} @click=${() => this.first()}>
+      <button @keyup=${event => this.handleKeyUp(event)} @click=${() => this.first()}>
         <slot></slot>
-      </span>
+      </button>
     `;
     }
     first() {
@@ -28,14 +28,21 @@ let KemetCarouselFirst = class KemetCarouselFirst extends LitElement {
             emitEvent(this, 'kemet-carousel-first', this);
         }
     }
+    handleKeyUp(event) {
+        if (event.code === 'Enter') {
+            this.first();
+        }
+    }
 };
 KemetCarouselFirst.styles = [
     css `
-      :host {
+      button {
         cursor: pointer;
+        border: 0;
+        background: transparent;
       }
 
-      :host([disabled]) {
+      :host([disabled]) button {
         cursor: not-allowed;
       }
     `,

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

@@ -1 +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"]}
+{"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;AAGY,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAkBxD,MAAM;QACJ,OAAO,IAAI,CAAA;uBACQ,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,WAAW,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE;;;KAG/E,CAAC;IACJ,CAAC;IAED,KAAK;QACH,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,SAAS,CAAC,IAAI,EAAE,sBAAsB,EAAE,IAAI,CAAC,CAAC;QAChD,CAAC;IACH,CAAC;IAED,WAAW,CAAC,KAAK;QACf,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;YAC3B,IAAI,CAAC,KAAK,EAAE,CAAC;QACf,CAAC;IACH,CAAC;;AAnCM,yBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;KAUF;CACF,AAZY,CAYX;AAGF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oDACzB;AAhBC,kBAAkB;IADtC,aAAa,CAAC,sBAAsB,CAAC;GACjB,kBAAkB,CAqCtC;eArCoB,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      button {\n        cursor: pointer;\n        border: 0;\n        background: transparent;\n      }\n\n      :host([disabled]) button {\n        cursor: not-allowed;\n      }\n    `,\n  ];\n\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean;\n\n  render() {\n    return html`\n      <button @keyup=${event => this.handleKeyUp(event)} @click=${() => this.first()}>\n        <slot></slot>\n      </button>\n    `;\n  }\n\n  first() {\n    if (!this.disabled) {\n      emitEvent(this, 'kemet-carousel-first', this);\n    }\n  }\n\n  handleKeyUp(event) {\n    if (event.code === 'Enter') {\n      this.first();\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

@@ -5,7 +5,7 @@ import { LitElement } from 'lit';
  * @status stable
  *
  * @tagname kemet-carousel-last
- * @summary A link to the last slide in the carousel..
+ * @summary A link to the last slide in the carousel.
  *
  * @prop {boolean} disabled - Deactivates the button.
  *
@@ -17,6 +17,7 @@ export default class KemetCarouselLast extends LitElement {
     disabled: boolean;
     render(): import("lit-html").TemplateResult<1>;
     last(): void;
+    handleKeyUp(event: any): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -8,7 +8,7 @@ import { emitEvent } from '../../utilities/misc/events';
  * @status stable
  *
  * @tagname kemet-carousel-last
- * @summary A link to the last slide in the carousel..
+ * @summary A link to the last slide in the carousel.
  *
  * @prop {boolean} disabled - Deactivates the button.
  *
@@ -18,9 +18,9 @@ import { emitEvent } from '../../utilities/misc/events';
 let KemetCarouselLast = class KemetCarouselLast extends LitElement {
     render() {
         return html `
-      <span tabindex="0" @keyup=${() => this.last()} @click=${() => this.last()}>
+      <button @keyup=${event => this.handleKeyUp(event)} @click=${() => this.last()}>
         <slot></slot>
-      </span>
+      </button>
     `;
     }
     last() {
@@ -28,14 +28,21 @@ let KemetCarouselLast = class KemetCarouselLast extends LitElement {
             emitEvent(this, 'kemet-carousel-last', this);
         }
     }
+    handleKeyUp(event) {
+        if (event.code === 'Enter') {
+            this.last();
+        }
+    }
 };
 KemetCarouselLast.styles = [
     css `
-      :host {
+      button {
         cursor: pointer;
+        border: 0;
+        background: transparent;
       }
 
-      :host([disabled]) {
+      :host([disabled]) button {
         cursor: not-allowed;
       }
     `,

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

@@ -1 +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"]}
+{"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;AAGY,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAkBvD,MAAM;QACJ,OAAO,IAAI,CAAA;uBACQ,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,WAAW,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE;;;KAG9E,CAAC;IACJ,CAAC;IAED,IAAI;QACF,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,SAAS,CAAC,IAAI,EAAE,qBAAqB,EAAE,IAAI,CAAC,CAAC;QAC/C,CAAC;IACH,CAAC;IAED,WAAW,CAAC,KAAK;QACf,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;YAC3B,IAAI,CAAC,IAAI,EAAE,CAAC;QACd,CAAC;IACH,CAAC;;AAnCM,wBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;KAUF;CACF,AAZY,CAYX;AAGF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDACzB;AAhBC,iBAAiB;IADrC,aAAa,CAAC,qBAAqB,CAAC;GAChB,iBAAiB,CAqCrC;eArCoB,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      button {\n        cursor: pointer;\n        border: 0;\n        background: transparent;\n      }\n\n      :host([disabled]) button {\n        cursor: not-allowed;\n      }\n    `,\n  ];\n\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean;\n\n  render() {\n    return html`\n      <button @keyup=${event => this.handleKeyUp(event)} @click=${() => this.last()}>\n        <slot></slot>\n      </button>\n    `;\n  }\n\n  last() {\n    if (!this.disabled) {\n      emitEvent(this, 'kemet-carousel-last', this);\n    }\n  }\n\n  handleKeyUp(event) {\n    if (event.code === 'Enter') {\n      this.last();\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

@@ -23,6 +23,7 @@ export default class KemetCarouselLink extends LitElement {
     disabled: boolean;
     render(): import("lit-html").TemplateResult<1>;
     changed(): void;
+    handleKeyUp(event: any): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -22,9 +22,9 @@ import { emitEvent } from '../../utilities/misc/events';
 let KemetCarouselLink = class KemetCarouselLink extends LitElement {
     render() {
         return html `
-      <span tabindex="0" @keyup=${() => this.changed()} @click=${() => this.changed()}>
+      <button @keyup=${event => this.handleKeyUp(event)} @click=${() => this.changed()}>
         <slot></slot>
-      </span>
+      </button>
     `;
     }
     changed() {
@@ -32,6 +32,11 @@ let KemetCarouselLink = class KemetCarouselLink extends LitElement {
             emitEvent(this, 'kemet-carousel-link', this);
         }
     }
+    handleKeyUp(event) {
+        if (event.code === 'Enter') {
+            this.changed();
+        }
+    }
 };
 KemetCarouselLink.styles = [
     css `
@@ -39,11 +44,16 @@ KemetCarouselLink.styles = [
         color: var(--kemet-carousel-link-selected-color, var(--kemet-color-primary));
       }
 
-      :host(:not([selected])) {
+      button {
+        border: 0;
+        background: none;
+      }
+
+      :host(:not([selected])) button {
         cursor: pointer;
       }
 
-      :host([disabled]) {
+      :host([disabled]) button {
         cursor: not-allowed;
       }
     `,

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

@@ -1 +1 @@
-{"version":3,"file":"kemet-carousel-link.js","sourceRoot":"","sources":["../../../src/components/kemet-carousel/kemet-carousel-link.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;;;;;;;;;;;;;;;;GAgBG;AAGH,IAAqB,iBAAiB,GAAtC,MAAqB,iBAAkB,SAAQ,UAAU;IA0BvD,MAAM;QACJ,OAAO,IAAI,CAAA;kCACmB,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,WAAW,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE;;;KAGhF,CAAC;IACJ,CAAC;IAED,OAAO;QACL,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,SAAS,CAAC,IAAI,EAAE,qBAAqB,EAAE,IAAI,CAAC,CAAC;SAC9C;IACH,CAAC;CACF,CAAA;AAtCQ,wBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;KAYF;CACF,CAAC;AAGF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAC5B;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDACzB;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDACzB;AAxBC,iBAAiB;IADrC,aAAa,CAAC,qBAAqB,CAAC;GAChB,iBAAiB,CAuCrC;eAvCoB,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-link\n * @summary Zero-based index link to a slide in the carousel.\n *\n * @prop {number} slide\n * @prop {boolean} selected - Automatically applied when link is active slide.\n * @prop {boolean} disabled - Deactivates the button.\n *\n * @event kemet-carousel-link\n *\n * @cssproperty --kemet-carousel-link-selected-color - The color of an selected link. Default: var(--kemet-color-primary).\n *\n */\n\n@customElement('kemet-carousel-link')\nexport default class KemetCarouselLink extends LitElement {\n  static styles = [\n    css`\n      :host([selected]) {\n        color: var(--kemet-carousel-link-selected-color, var(--kemet-color-primary));\n      }\n\n      :host(:not([selected])) {\n        cursor: pointer;\n      }\n\n      :host([disabled]) {\n        cursor: not-allowed;\n      }\n    `,\n  ];\n\n  @property({ type: Number, reflect: true })\n  slide: number;\n\n  @property({ type: Boolean, reflect: true })\n  selected: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean;\n\n  render() {\n    return html`\n      <span tabindex=\"0\" @keyup=${() => this.changed()} @click=${() => this.changed()}>\n        <slot></slot>\n      </span>\n    `;\n  }\n\n  changed() {\n    if (!this.disabled) {\n      emitEvent(this, 'kemet-carousel-link', this);\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-carousel-link': KemetCarouselLink\n  }\n}\n"]}
+{"version":3,"file":"kemet-carousel-link.js","sourceRoot":"","sources":["../../../src/components/kemet-carousel/kemet-carousel-link.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;;;;;;;;;;;;;;;;GAgBG;AAGY,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IA+BvD,MAAM;QACJ,OAAO,IAAI,CAAA;uBACQ,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,WAAW,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE;;;KAGjF,CAAC;IACJ,CAAC;IAED,OAAO;QACL,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,SAAS,CAAC,IAAI,EAAE,qBAAqB,EAAE,IAAI,CAAC,CAAC;QAC/C,CAAC;IACH,CAAC;IAED,WAAW,CAAC,KAAK;QACf,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;YAC3B,IAAI,CAAC,OAAO,EAAE,CAAC;QACjB,CAAC;IACH,CAAC;;AAhDM,wBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;KAiBF;CACF,AAnBY,CAmBX;AAGF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAC5B;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDACzB;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDACzB;AA7BC,iBAAiB;IADrC,aAAa,CAAC,qBAAqB,CAAC;GAChB,iBAAiB,CAkDrC;eAlDoB,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-link\n * @summary Zero-based index link to a slide in the carousel.\n *\n * @prop {number} slide\n * @prop {boolean} selected - Automatically applied when link is active slide.\n * @prop {boolean} disabled - Deactivates the button.\n *\n * @event kemet-carousel-link\n *\n * @cssproperty --kemet-carousel-link-selected-color - The color of an selected link. Default: var(--kemet-color-primary).\n *\n */\n\n@customElement('kemet-carousel-link')\nexport default class KemetCarouselLink extends LitElement {\n  static styles = [\n    css`\n      :host([selected]) {\n        color: var(--kemet-carousel-link-selected-color, var(--kemet-color-primary));\n      }\n\n      button {\n        border: 0;\n        background: none;\n      }\n\n      :host(:not([selected])) button {\n        cursor: pointer;\n      }\n\n      :host([disabled]) button {\n        cursor: not-allowed;\n      }\n    `,\n  ];\n\n  @property({ type: Number, reflect: true })\n  slide: number;\n\n  @property({ type: Boolean, reflect: true })\n  selected: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean;\n\n  render() {\n    return html`\n      <button @keyup=${event => this.handleKeyUp(event)} @click=${() => this.changed()}>\n        <slot></slot>\n      </button>\n    `;\n  }\n\n  changed() {\n    if (!this.disabled) {\n      emitEvent(this, 'kemet-carousel-link', this);\n    }\n  }\n\n  handleKeyUp(event) {\n    if (event.code === 'Enter') {\n      this.changed();\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-carousel-link': KemetCarouselLink\n  }\n}\n"]}

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

@@ -17,6 +17,7 @@ export default class KemetCarouselNext extends LitElement {
     disabled: boolean;
     render(): import("lit-html").TemplateResult<1>;
     next(): void;
+    handleKeyUp(event: any): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -18,9 +18,9 @@ import { emitEvent } from '../../utilities/misc/events';
 let KemetCarouselNext = class KemetCarouselNext extends LitElement {
     render() {
         return html `
-      <span tabindex="0" @keyup=${() => this.next()} @click=${() => this.next()}>
+      <button @keyup=${event => this.handleKeyUp(event)} @click=${() => this.next()}>
         <slot></slot>
-      </span>
+      </button>
     `;
     }
     next() {
@@ -28,14 +28,21 @@ let KemetCarouselNext = class KemetCarouselNext extends LitElement {
             emitEvent(this, 'kemet-carousel-next', this);
         }
     }
+    handleKeyUp(event) {
+        if (event.code === 'Enter') {
+            this.next();
+        }
+    }
 };
 KemetCarouselNext.styles = [
     css `
-      :host {
+      button {
         cursor: pointer;
+        border: 0;
+        background: none;
       }
 
-      :host([disabled]) {
+      :host([disabled]) button {
         cursor: not-allowed;
       }
     `,

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

@@ -1 +1 @@
-{"version":3,"file":"kemet-carousel-next.js","sourceRoot":"","sources":["../../../src/components/kemet-carousel/kemet-carousel-next.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-next\n * @summary A link to the next slide in the carousel.\n *\n * @prop {boolean} disabled - Deactivates the button.\n *\n * @event kemet-carousel-next\n *\n */\n\n@customElement('kemet-carousel-next')\nexport default class KemetCarouselNext 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.next()} @click=${() => this.next()}>\n        <slot></slot>\n      </span>\n    `;\n  }\n\n  next() {\n    if (!this.disabled) {\n      emitEvent(this, 'kemet-carousel-next', this);\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-carousel-next': KemetCarouselNext\n  }\n}\n"]}
+{"version":3,"file":"kemet-carousel-next.js","sourceRoot":"","sources":["../../../src/components/kemet-carousel/kemet-carousel-next.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;AAGY,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAkBvD,MAAM;QACJ,OAAO,IAAI,CAAA;uBACQ,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,WAAW,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE;;;KAG9E,CAAC;IACJ,CAAC;IAED,IAAI;QACF,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,SAAS,CAAC,IAAI,EAAE,qBAAqB,EAAE,IAAI,CAAC,CAAC;QAC/C,CAAC;IACH,CAAC;IAED,WAAW,CAAC,KAAK;QACf,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;YAC3B,IAAI,CAAC,IAAI,EAAE,CAAC;QACd,CAAC;IACH,CAAC;;AAnCM,wBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;KAUF;CACF,AAZY,CAYX;AAGF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDACzB;AAhBC,iBAAiB;IADrC,aAAa,CAAC,qBAAqB,CAAC;GAChB,iBAAiB,CAqCrC;eArCoB,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-next\n * @summary A link to the next slide in the carousel.\n *\n * @prop {boolean} disabled - Deactivates the button.\n *\n * @event kemet-carousel-next\n *\n */\n\n@customElement('kemet-carousel-next')\nexport default class KemetCarouselNext extends LitElement {\n  static styles = [\n    css`\n      button {\n        cursor: pointer;\n        border: 0;\n        background: none;\n      }\n\n      :host([disabled]) button {\n        cursor: not-allowed;\n      }\n    `,\n  ];\n\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean;\n\n  render() {\n    return html`\n      <button @keyup=${event => this.handleKeyUp(event)} @click=${() => this.next()}>\n        <slot></slot>\n      </button>\n    `;\n  }\n\n  next() {\n    if (!this.disabled) {\n      emitEvent(this, 'kemet-carousel-next', this);\n    }\n  }\n\n  handleKeyUp(event) {\n    if (event.code === 'Enter') {\n      this.next();\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-carousel-next': KemetCarouselNext\n  }\n}\n"]}

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

@@ -17,6 +17,7 @@ export default class KemetCarouselPrev extends LitElement {
     disabled: boolean;
     render(): import("lit-html").TemplateResult<1>;
     prev(): void;
+    handleKeyUp(event: any): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -18,9 +18,9 @@ import { emitEvent } from '../../utilities/misc/events';
 let KemetCarouselPrev = class KemetCarouselPrev extends LitElement {
     render() {
         return html `
-      <span tabindex="0" @keyup=${() => this.prev()} @click=${() => this.prev()}>
+      <button @keyup=${event => this.handleKeyUp(event)} @click=${() => this.prev()}>
         <slot></slot>
-      </span>
+      </button>
     `;
     }
     prev() {
@@ -28,14 +28,21 @@ let KemetCarouselPrev = class KemetCarouselPrev extends LitElement {
             emitEvent(this, 'kemet-carousel-prev', this);
         }
     }
+    handleKeyUp(event) {
+        if (event.code === 'Enter') {
+            this.prev();
+        }
+    }
 };
 KemetCarouselPrev.styles = [
     css `
-      :host {
+      button {
         cursor: pointer;
+        border: 0;
+        background: none;
       }
 
-      :host([disabled]) {
+      :host([disabled]) button {
         cursor: not-allowed;
       }
     `,

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

@@ -1 +1 @@
-{"version":3,"file":"kemet-carousel-prev.js","sourceRoot":"","sources":["../../../src/components/kemet-carousel/kemet-carousel-prev.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-prev\n * @summary A link to the previous slide in the carousel.\n *\n * @prop {boolean} disabled - Deactivates the button.\n *\n * @event kemet-carousel-prev\n *\n */\n\n@customElement('kemet-carousel-prev')\nexport default class KemetCarouselPrev 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.prev()} @click=${() => this.prev()}>\n        <slot></slot>\n      </span>\n    `;\n  }\n\n  prev() {\n    if (!this.disabled) {\n      emitEvent(this, 'kemet-carousel-prev', this);\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-carousel-prev': KemetCarouselPrev\n  }\n}\n"]}
+{"version":3,"file":"kemet-carousel-prev.js","sourceRoot":"","sources":["../../../src/components/kemet-carousel/kemet-carousel-prev.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;AAGY,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAkBvD,MAAM;QACJ,OAAO,IAAI,CAAA;uBACQ,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,WAAW,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE;;;KAG9E,CAAC;IACJ,CAAC;IAED,IAAI;QACF,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,SAAS,CAAC,IAAI,EAAE,qBAAqB,EAAE,IAAI,CAAC,CAAC;QAC/C,CAAC;IACH,CAAC;IAED,WAAW,CAAC,KAAK;QACf,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;YAC3B,IAAI,CAAC,IAAI,EAAE,CAAC;QACd,CAAC;IACH,CAAC;;AAnCM,wBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;KAUF;CACF,AAZY,CAYX;AAGF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDACzB;AAhBC,iBAAiB;IADrC,aAAa,CAAC,qBAAqB,CAAC;GAChB,iBAAiB,CAqCrC;eArCoB,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-prev\n * @summary A link to the previous slide in the carousel.\n *\n * @prop {boolean} disabled - Deactivates the button.\n *\n * @event kemet-carousel-prev\n *\n */\n\n@customElement('kemet-carousel-prev')\nexport default class KemetCarouselPrev extends LitElement {\n  static styles = [\n    css`\n      button {\n        cursor: pointer;\n        border: 0;\n        background: none;\n      }\n\n      :host([disabled]) button {\n        cursor: not-allowed;\n      }\n    `,\n  ];\n\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean;\n\n  render() {\n    return html`\n      <button @keyup=${event => this.handleKeyUp(event)} @click=${() => this.prev()}>\n        <slot></slot>\n      </button>\n    `;\n  }\n\n  prev() {\n    if (!this.disabled) {\n      emitEvent(this, 'kemet-carousel-prev', this);\n    }\n  }\n\n  handleKeyUp(event) {\n    if (event.code === 'Enter') {\n      this.prev();\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-carousel-prev': KemetCarouselPrev\n  }\n}\n"]}

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

@@ -13,16 +13,16 @@ import { customElement, property } from 'lit/decorators.js';
  *
  */
 let KemetCarouselSlide = class KemetCarouselSlide extends LitElement {
-    constructor() {
-        super();
-        this.selected = false;
-        this['aria-hidden'] = 'true';
-    }
     static get properties() {
         return {
             'aria-hidden': { type: String, reflect: true },
         };
     }
+    constructor() {
+        super();
+        this.selected = false;
+        this['aria-hidden'] = 'true';
+    }
     render() {
         return html `
       <slot></slot>

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

@@ -1 +1 @@
-{"version":3,"file":"kemet-carousel-slide.js","sourceRoot":"","sources":["../../../src/components/kemet-carousel/kemet-carousel-slide.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;AAE5D;;;;;;;;;;GAUG;AAGH,IAAqB,kBAAkB,GAAvC,MAAqB,kBAAmB,SAAQ,UAAU;IAyBxD;QACE,KAAK,EAAE,CAAC;QATV,aAAQ,GAAY,KAAK,CAAC;QAUxB,IAAI,CAAC,aAAa,CAAC,GAAG,MAAM,CAAC;IAC/B,CAAC;IATD,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,aAAa,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;SAC/C,CAAC;IACJ,CAAC;IAOD,MAAM;QACJ,OAAO,IAAI,CAAA;;KAEV,CAAC;IACJ,CAAC;CACF,CAAA;AAlCQ,yBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;KAWF;CACF,CAAC;AAGF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oDACjB;AAjBP,kBAAkB;IADtC,aAAa,CAAC,sBAAsB,CAAC;GACjB,kBAAkB,CAmCtC;eAnCoB,kBAAkB","sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\n/**\n *\n * @since 1.1.0\n * @status stable\n *\n * @tagname kemet-carousel-slide\n * @summary A container for a slide in the carousel.\n *\n * @prop {boolean} selected - Determines if the slide is selected.\n *\n */\n\n@customElement('kemet-carousel-slide')\nexport default class KemetCarouselSlide extends LitElement {\n  static styles = [\n    css`\n      :host,\n      :host *,\n      :host *::before,\n      *::after {\n        box-sizing: border-box;\n      }\n\n      :host {\n        flex: 0 0 auto;\n      }\n    `,\n  ];\n\n  @property({ type: Boolean, reflect: true })\n  selected: boolean = false;\n\n  static get properties() {\n    return {\n      'aria-hidden': { type: String, reflect: true },\n    };\n  }\n\n  constructor() {\n    super();\n    this['aria-hidden'] = 'true';\n  }\n\n  render() {\n    return html`\n      <slot></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-carousel-slide': KemetCarouselSlide\n  }\n}\n"]}
+{"version":3,"file":"kemet-carousel-slide.js","sourceRoot":"","sources":["../../../src/components/kemet-carousel/kemet-carousel-slide.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;AAE5D;;;;;;;;;;GAUG;AAGY,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAmBxD,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,aAAa,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;SAC/C,CAAC;IACJ,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QATV,aAAQ,GAAY,KAAK,CAAC;QAUxB,IAAI,CAAC,aAAa,CAAC,GAAG,MAAM,CAAC;IAC/B,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;KAEV,CAAC;IACJ,CAAC;;AAjCM,yBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;KAWF;CACF,AAbY,CAaX;AAGF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oDACjB;AAjBP,kBAAkB;IADtC,aAAa,CAAC,sBAAsB,CAAC;GACjB,kBAAkB,CAmCtC;eAnCoB,kBAAkB","sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\n/**\n *\n * @since 1.1.0\n * @status stable\n *\n * @tagname kemet-carousel-slide\n * @summary A container for a slide in the carousel.\n *\n * @prop {boolean} selected - Determines if the slide is selected.\n *\n */\n\n@customElement('kemet-carousel-slide')\nexport default class KemetCarouselSlide extends LitElement {\n  static styles = [\n    css`\n      :host,\n      :host *,\n      :host *::before,\n      *::after {\n        box-sizing: border-box;\n      }\n\n      :host {\n        flex: 0 0 auto;\n      }\n    `,\n  ];\n\n  @property({ type: Boolean, reflect: true })\n  selected: boolean = false;\n\n  static get properties() {\n    return {\n      'aria-hidden': { type: String, reflect: true },\n    };\n  }\n\n  constructor() {\n    super();\n    this['aria-hidden'] = 'true';\n  }\n\n  render() {\n    return html`\n      <slot></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-carousel-slide': KemetCarouselSlide\n  }\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"kemet-carousel-total.js","sourceRoot":"","sources":["../../../src/components/kemet-carousel/kemet-carousel-total.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,kBAAkB,GAAvC,MAAqB,kBAAmB,SAAQ,UAAU;IAexD,YAAY;QACV,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACjD,CAAC;IAED,OAAO;;QACL,IAAI,CAAC,KAAK,GAAG,MAAA,IAAI,CAAC,QAAQ,0CAAE,KAAK,CAAC;IACpC,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;IAC7B,CAAC;CACF,CAAA;AAzBQ,yBAAM,GAAG;IACd,GAAG,CAAA;;;;KAIF;CACF,CAAC;AAGF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDACD;AAG1B;IADC,KAAK,EAAE;oDACuB;AAbZ,kBAAkB;IADtC,aAAa,CAAC,sBAAsB,CAAC;GACjB,kBAAkB,CA0BtC;eA1BoB,kBAAkB","sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport KemetCarousel from './kemet-carousel';\n\n/**\n *\n * @since 1.1.0\n * @status stable\n *\n * @tagname kemet-carousel-total\n * @summary Displays the total slide number.\n *\n * @prop {number} total - The total number of slides.\n *\n */\n\n@customElement('kemet-carousel-total')\nexport default class KemetCarouselTotal extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: inline-block;\n      }\n    `,\n  ];\n\n  @property({ type: Number })\n  total: number | undefined;\n\n  @state()\n  carousel: KemetCarousel | null;\n\n  firstUpdated() {\n    this.carousel = this.closest('kemet-carousel');\n  }\n\n  updated() {\n    this.total = this.carousel?.total;\n  }\n\n  render() {\n    return html`${this.total}`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-carousel-total': KemetCarouselTotal\n  }\n}\n"]}
+{"version":3,"file":"kemet-carousel-total.js","sourceRoot":"","sources":["../../../src/components/kemet-carousel/kemet-carousel-total.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;AAGY,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAexD,YAAY;QACV,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACjD,CAAC;IAED,OAAO;;QACL,IAAI,CAAC,KAAK,GAAG,MAAA,IAAI,CAAC,QAAQ,0CAAE,KAAK,CAAC;IACpC,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;IAC7B,CAAC;;AAxBM,yBAAM,GAAG;IACd,GAAG,CAAA;;;;KAIF;CACF,AANY,CAMX;AAGF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDACD;AAG1B;IADC,KAAK,EAAE;oDACuB;AAbZ,kBAAkB;IADtC,aAAa,CAAC,sBAAsB,CAAC;GACjB,kBAAkB,CA0BtC;eA1BoB,kBAAkB","sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport KemetCarousel from './kemet-carousel';\n\n/**\n *\n * @since 1.1.0\n * @status stable\n *\n * @tagname kemet-carousel-total\n * @summary Displays the total slide number.\n *\n * @prop {number} total - The total number of slides.\n *\n */\n\n@customElement('kemet-carousel-total')\nexport default class KemetCarouselTotal extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: inline-block;\n      }\n    `,\n  ];\n\n  @property({ type: Number })\n  total: number | undefined;\n\n  @state()\n  carousel: KemetCarousel | null;\n\n  firstUpdated() {\n    this.carousel = this.closest('kemet-carousel');\n  }\n\n  updated() {\n    this.total = this.carousel?.total;\n  }\n\n  render() {\n    return html`${this.total}`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-carousel-total': KemetCarouselTotal\n  }\n}\n"]}

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

@@ -1,4 +1,6 @@
 import { LitElement } from 'lit';
+import type KemetCarouselLink from './kemet-carousel-link';
+import type KemetCarouselSlide from './kemet-carousel-slide';
 /**
  *
  * @since 1.1.0
@@ -12,11 +14,11 @@ import { LitElement } from 'lit';
  * @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 {boolean} arrows - Determines whether 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-start - Fires when the 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.
@@ -58,17 +60,19 @@ export default class KemetCarousel extends LitElement {
     options: object;
     breakpoints: object;
     /** @internal */
-    slides: any[];
+    slides: KemetCarouselSlide[];
     /** @internal */
-    links: any[];
+    links: KemetCarouselLink[];
     /** @internal */
     toolbarSlotElement: HTMLElement | null;
     /** @internal */
     informationElement: HTMLElement | null;
     /** @internal */
-    swipeMove: (event: any) => void;
+    swipeMove: (event: TouchEvent | MouseEvent) => void;
     /** @internal */
-    handleSlideShow: any;
+    handleSlideShow: () => void;
+    /** @internal */
+    slideShowID: number;
     /** @internal */
     startX: number;
     /** @internal */
@@ -85,11 +89,11 @@ export default class KemetCarousel extends LitElement {
     toolbarElement: HTMLElement;
     constructor();
     firstUpdated(): void;
-    updated(prevProps: any): void;
+    updated(prevProps: Map<string, never>): void;
     render(): import("lit-html").TemplateResult<1>;
-    swipeStart(event: any): void;
-    swipeEnd(event: any): void;
-    swipeUpdate(event: any): number;
+    swipeStart(event: TouchEvent | MouseEvent): void;
+    swipeEnd(event: TouchEvent | MouseEvent): void;
+    swipeUpdate(event: TouchEvent | MouseEvent): number;
     swipeLeave(): void;
     setSlideSize(): void;
     setToolbarSize(): void;
@@ -100,12 +104,12 @@ export default class KemetCarousel extends LitElement {
     handleLast(): void;
     handleNext(): void;
     handlePrev(): void;
-    updateIndex(newIndex: any): void;
+    updateIndex(newIndex: number): void;
     updateInformation(): void;
-    goToSlide(index: any): void;
+    goToSlide(index: number): void;
     handleTransitionEnd(): void;
-    handleLink(event: any): void;
-    getOption(option: any): any;
+    handleLink(event: CustomEvent): void;
+    getOption(option: string): any;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1,6 +1,6 @@
 import { __decorate } from "tslib";
 import { html, LitElement } from 'lit';
-import { customElement, property, state, query } from 'lit/decorators.js';
+import { customElement, property, state, query, } from 'lit/decorators.js';
 import { emitEvent } from '../../utilities/misc/events';
 import { stylesCarousel } from './styles';
 /**
@@ -16,11 +16,11 @@ import { stylesCarousel } from './styles';
  * @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 {boolean} arrows - Determines whether 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-start - Fires when the 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.
@@ -105,16 +105,16 @@ let KemetCarousel = class KemetCarousel extends LitElement {
         // methods
         this.swipeMove = (event) => {
             event.preventDefault();
-            const pageX = event.touches ? event.touches[0].pageX : event.pageX;
+            let pageX;
+            if ('touches' in event) {
+                pageX = event.touches[0].pageX;
+            }
+            else {
+                pageX = event.pageX;
+            }
             const currentSlide = this.slides[this.index];
             this.sliderTranslateX = `${pageX - this.startX - currentSlide.offsetLeft}px`;
         };
-        this.handleSlideShow = () => {
-            if (this.getOption('slideshow') > 0) {
-                this.updateIndex(this.index + 1);
-                clearTimeout(this.handleSlideShow);
-            }
-        };
         // setup
         this.setSlideSize();
         this.goToSlide(this.index);
@@ -124,7 +124,12 @@ let KemetCarousel = class KemetCarousel extends LitElement {
         this.setToolbarSize();
         if (prevProps.has('index')) {
             this.updateIndex(this.index);
-            setTimeout(this.handleSlideShow, this.getOption('slideshow') * 1000);
+            this.slideShowID = window.setTimeout(() => {
+                if (this.getOption('slideshow') > 0) {
+                    this.updateIndex(this.index + 1);
+                    clearTimeout(this.slideShowID);
+                }
+            }, this.getOption('slideshow') * 1000);
         }
     }
     render() {
@@ -151,7 +156,12 @@ let KemetCarousel = class KemetCarousel extends LitElement {
     `;
     }
     swipeStart(event) {
-        this.startX = event.touches ? event.touches[0].pageX : event.pageX;
+        if ('touches' in event) {
+            this.startX = event.touches[0].pageX;
+        }
+        else {
+            this.startX = event.pageX;
+        }
         this.addEventListener('mousemove', this.swipeMove);
         this.addEventListener('touchmove', this.swipeMove);
     }
@@ -161,7 +171,13 @@ let KemetCarousel = class KemetCarousel extends LitElement {
         this.removeEventListener('touchmove', this.swipeMove, false);
     }
     swipeUpdate(event) {
-        const pageX = event.changedTouches ? event.changedTouches[0].pageX : event.pageX;
+        let pageX;
+        if ('changedTouches' in event) {
+            pageX = event.changedTouches[0].pageX;
+        }
+        else {
+            pageX = event.pageX;
+        }
         const direction = this.startX > pageX ? 'right' : 'left';
         const threshold = this.slidesElement.offsetWidth / 3;
         const diff = this.startX - pageX;
@@ -382,6 +398,9 @@ __decorate([
 __decorate([
     state()
 ], KemetCarousel.prototype, "handleSlideShow", void 0);
+__decorate([
+    state()
+], KemetCarousel.prototype, "slideShowID", void 0);
 __decorate([
     state()
 ], KemetCarousel.prototype, "startX", void 0);