kemet-ui 2.0.3 → 3.0.1

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

@@ -11,20 +11,57 @@ import '../kemet-carousel-total';
 import '../../kemet-tabs/kemet-tabs';
 import '../../kemet-tabs/kemet-tab';
 import '../../kemet-tabs/kemet-tab-panel';
+import '../../kemet-badge/kemet-badge';
+import '../../kemet-icon/kemet-icon';
 const meta = {
     title: 'Components / Carousel',
     component: 'kemet-carousel',
+    args: {
+        numOfSlides: 5,
+        toolbarType: 'none',
+        options: {
+            perView: 1,
+            perMove: 1,
+            gap: 12,
+            slideshow: 0,
+            rewind: true,
+            center: false,
+        },
+        breakpoints: {
+            768: {
+                perView: 2,
+                gap: 24,
+                rewind: false,
+            },
+            1280: {
+                perView: 2.5,
+                center: true,
+            },
+        },
+    },
+    argTypes: {
+        toolbarType: {
+            control: { type: 'radio' },
+            options: ['none', 'pagination', 'description'],
+        },
+        options: {
+            control: { type: 'object' },
+        },
+        breakpoints: {
+            control: { type: 'object' },
+        },
+    }
 };
 export default meta;
-const Template = ({ numOfSlides = 5, toolbar = 'description', index = 0, inner = false, arrows = false, options, breakpoints, }) => {
+const Template = (args) => {
     const makeSlides = () => {
         const slides = [];
-        for (let i = 0; i < numOfSlides; i += 1) {
+        for (let i = 0; i < args.numOfSlides; i += 1) {
             const slideNumber = i + 1;
             slides.push(html `
         <kemet-carousel-slide slot="slides">
-          <figure kemet-border="all-1 solid gray1" kemet-margin="tiny:none" kemet-padding="tiny:normal" kemet-elevation="layer4">
-            <h3 kemet-margin="tiny:none">Slide ${slideNumber}</h3>
+          <figure kemet-border="all-1 solid gray-50" kemet-margin="none" kemet-padding="2xl" kemet-elevation="layer-4">
+            <h3 kemet-margin="none">Slide ${slideNumber}</h3>
             <img src="https://via.placeholder.com/1920x1080" alt="a placeholder" style="max-width:100%" />
             <figcaption>An image in a carousel.</figcaption>
           </figure>
@@ -35,7 +72,7 @@ const Template = ({ numOfSlides = 5, toolbar = 'description', index = 0, inner =
         return slides;
     };
     const makePrevArrow = () => {
-        if (arrows) {
+        if (args.arrows) {
             return html `
         <kemet-carousel-prev slot="prev">
           <kemet-icon icon="chevron-left" size="72"></kemet-icon>
@@ -45,7 +82,7 @@ const Template = ({ numOfSlides = 5, toolbar = 'description', index = 0, inner =
         return null;
     };
     const makeNextArrow = () => {
-        if (arrows) {
+        if (args.arrows) {
             return html `
         <kemet-carousel-next slot="next">
           <kemet-icon icon="chevron-right" size="72"></kemet-icon>
@@ -55,9 +92,9 @@ const Template = ({ numOfSlides = 5, toolbar = 'description', index = 0, inner =
         return null;
     };
     const makePagination = () => {
-        if (toolbar === 'pagination') {
+        if (args.toolbarType === 'pagination') {
             const pages = [];
-            for (let i = 0; i < numOfSlides; i += 1) {
+            for (let i = 0; i < args.numOfSlides; i += 1) {
                 pages.push(html `
           <kemet-carousel-link slide="${i}" slot="toolbar">${i + 1}</kemet-carousel-link>
         `);
@@ -81,7 +118,7 @@ const Template = ({ numOfSlides = 5, toolbar = 'description', index = 0, inner =
         return null;
     };
     const makeDescription = () => {
-        if (toolbar === 'description') {
+        if (args.toolbarType === 'description') {
             return html `
         <div slot="toolbar" kemet-layout="flexrow" kemet-align="middle" kemet-gutters>
           <div>
@@ -92,10 +129,10 @@ const Template = ({ numOfSlides = 5, toolbar = 'description', index = 0, inner =
             <kemet-carousel-information></kemet-carousel-information>
           </div>
           <kemet-carousel-prev kemet-breakpoint="tiny:content">
-            <kemet-badge circle><kemet-icon icon="chevron-left"></kemet-icon></kemet-badge>
+            <kemet-badge circle kemet-padding="sm"><kemet-icon icon="chevron-left"></kemet-icon></kemet-badge>
           </kemet-carousel-prev>
           <kemet-carousel-next kemet-breakpoint="tiny:content">
-            <kemet-badge circle><kemet-icon icon="chevron-right"></kemet-icon></kemet-badge>
+            <kemet-badge circle kemet-padding="sm"><kemet-icon icon="chevron-right"></kemet-icon></kemet-badge>
           </kemet-carousel-next>
         </div>
       `;
@@ -103,7 +140,7 @@ const Template = ({ numOfSlides = 5, toolbar = 'description', index = 0, inner =
         return null;
     };
     return html `
-    <kemet-carousel index="${index}" ?inner=${inner} .options=${options} .breakpoints=${breakpoints}>
+    <kemet-carousel index="${args.index}" ?inner=${args.inner} .options=${args.options} .breakpoints=${args.breakpoints}>
       ${makePrevArrow()}
       ${makeSlides()}
       ${makeNextArrow()}
@@ -114,55 +151,30 @@ const Template = ({ numOfSlides = 5, toolbar = 'description', index = 0, inner =
 };
 export const Standard = {
     render: (args) => Template(args),
+};
+export const DescriptionToolbar = {
+    render: (args) => Template(args),
     args: {
-        numOfSlides: 5,
-        toolbar: 'pagination',
-        index: 0,
-        inner: false,
-        arrows: false,
-        options: {
-            perView: 1,
-            perMove: 1,
-            gap: 12,
-            slideshow: 0,
-            rewind: true,
-            center: false,
-        },
-        breakpoints: {
-            768: {
-                perView: 2,
-                gap: 24,
-                rewind: false,
-            },
-            1280: {
-                perView: 2.5,
-                center: true,
-            },
-        },
-    },
-    argTypes: {
-        numOfSlides: {
-            control: { type: 'number' },
-        },
-        toolbar: {
-            control: { type: 'radio' },
-            options: ['none', 'pagination', 'description'],
-        },
-        index: {
-            control: { type: 'number' },
-        },
-        inner: {
-            control: { type: 'boolean' },
-        },
-        arrows: {
-            control: { type: 'boolean' },
-        },
-        options: {
-            control: { type: 'object' },
-        },
-        breakpoints: {
-            control: { type: 'object' },
-        },
+        toolbarType: 'description',
+    }
+};
+export const PaginationToolbar = {
+    render: (args) => Template(args),
+    args: {
+        toolbarType: 'pagination',
+    }
+};
+export const InnerToolbar = {
+    render: (args) => Template(args),
+    args: {
+        inner: true,
+        toolbarType: 'pagination',
+    }
+};
+export const Arrows = {
+    render: (args) => Template(args),
+    args: {
+        arrows: true,
     }
 };
 //# sourceMappingURL=stories.js.map

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\nconst meta: Meta = {\n  title: 'Components / Carousel',\n  component: 'kemet-carousel',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = ({\n  numOfSlides = 5,\n  toolbar = 'description',\n  index = 0,\n  inner = false,\n  arrows = false,\n  options,\n  breakpoints,\n}) => {\n  const makeSlides = () => {\n    const slides = [];\n\n    for (let i = 0; i < 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 gray1\" kemet-margin=\"tiny:none\" kemet-padding=\"tiny:normal\" kemet-elevation=\"layer4\">\n            <h3 kemet-margin=\"tiny: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 (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 (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 (toolbar === 'pagination') {\n      const pages = [];\n\n      for (let i = 0; i < 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 (toolbar === '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-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-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=\"${index}\" ?inner=${inner} .options=${options} .breakpoints=${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  args: {\n    numOfSlides: 5,\n    toolbar: 'pagination',\n    index: 0,\n    inner: false,\n    arrows: false,\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    numOfSlides: {\n      control: { type: 'number' },\n    },\n    toolbar: {\n      control: { type: 'radio' },\n      options: ['none', 'pagination', 'description'],\n    },\n    index: {\n      control: { type: 'number' },\n    },\n    inner: {\n      control: { type: 'boolean' },\n    },\n    arrows: {\n      control: { type: 'boolean' },\n    },\n    options: {\n      control: { type: 'object' },\n    },\n    breakpoints: {\n      control: { type: 'object' },\n    },\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 { KemetCarouselInterface } from './types';
+import type KemetCarousel from './kemet-carousel';
 /**
  *
  * @since 1.1.0
@@ -14,7 +14,7 @@ import { KemetCarouselInterface } from './types';
 export default class KemetCarouselCurrent extends LitElement {
     static styles: import("lit").CSSResult[];
     current: number;
-    carousel: KemetCarouselInterface | null;
+    carousel: KemetCarousel | null;
     firstUpdated(): void;
     updated(): void;
     render(): import("lit-html").TemplateResult<1>;

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;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"]}
+{"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;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;CACF,CAAA;AAzBQ,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,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-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.
  *

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.
  *

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;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-total.d.ts

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-import { KemetCarouselInterface } from './types';
+import KemetCarousel from './kemet-carousel';
 /**
  *
  * @since 1.1.0
@@ -14,7 +14,7 @@ import { KemetCarouselInterface } from './types';
 export default class KemetCarouselTotal extends LitElement {
     static styles: import("lit").CSSResult[];
     total: number | undefined;
-    carousel: KemetCarouselInterface | null;
+    carousel: KemetCarousel | null;
     firstUpdated(): void;
     updated(): void;
     render(): import("lit-html").TemplateResult<1>;

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;oDACgC;AAbrB,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 { KemetCarouselInterface } from './types';\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: KemetCarouselInterface | 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;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"]}

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.
@@ -25,21 +27,21 @@ import { LitElement } from 'lit';
  * @slot next - A slot for the next arrow.
  * @slot information - Allows you to enter custom HTML such as a slide description to be used in the toolbar.
  *
- * @cssproperty --kemet-carousel-width - The width of the carousel. Default: 100%.
- * @cssproperty --kemet-carousel-height - The height of the carousel. Default: auto.
- * @cssproperty --kemet-carousel-toolbar-gap - The space between items in the toolbar. Default: 1rem.
- * @cssproperty --kemet-carousel-toolbar-justify-content - The cross axis alignment of the toolbar. Default: center.
- * @cssproperty --kemet-carousel-toolbar-padding - The padding of the toolbar. Default: 1rem.
- * @cssproperty --kemet-carousel-toolbar-inner-width - The inner toolbar width. Default: 100%.
- * @cssproperty --kemet-carousel-toolbar-inner-bottom - The bottom position of the inner toolbar. Default: 0.
- * @cssproperty --kemet-carousel-toolbar-inner-top - The top position of the inner toolbar. Default: auto.
- * @cssproperty --kemet-carousel-toolbar-inner-color - The inner toolbar text color. Default: var(--kemet-color-white).
- * @cssproperty --kemet-carousel-toolbar-inner-background-color - The inner toolbar background color. Default: rgba(0, 0, 0, 0.4).
- * @cssproperty --kemet-carousel-slides-border - The border around the slides. Default: 1px solid var(--kemet-color-gray1).
- * @cssproperty --kemet-carousel-transition-speed - The transition speed of the slides. Default: 300ms.
- * @cssproperty --kemet-carousel-arrows-opacity - The arrows start opacity. Default: 0.25.
- * @cssproperty --kemet-carousel-arrows-opacity-hover - The arrows however opacity. Default: 1.
- * @cssproperty --kemet-carousel-arrows-transition-speed - The arrows transition speed. Default: 300ms.
+ * @cssproperty --kemet-carousel-width - The width of the carousel.
+ * @cssproperty --kemet-carousel-height - The height of the carousel.
+ * @cssproperty --kemet-carousel-toolbar-gap - The space between items in the toolbar.
+ * @cssproperty --kemet-carousel-toolbar-justify-content - The cross axis alignment of the toolbar.
+ * @cssproperty --kemet-carousel-toolbar-padding - The padding of the toolbar.
+ * @cssproperty --kemet-carousel-toolbar-inner-width - The inner toolbar width.
+ * @cssproperty --kemet-carousel-toolbar-inner-bottom - The bottom position of the inner toolbar.
+ * @cssproperty --kemet-carousel-toolbar-inner-top - The top position of the inner toolbar.
+ * @cssproperty --kemet-carousel-toolbar-inner-color - The inner toolbar text color.
+ * @cssproperty --kemet-carousel-toolbar-inner-background-color - The inner toolbar background color.
+ * @cssproperty --kemet-carousel-slides-border - The border around the slides.
+ * @cssproperty --kemet-carousel-transition-speed - The transition speed of the slides.
+ * @cssproperty --kemet-carousel-arrows-opacity - The arrows start opacity.
+ * @cssproperty --kemet-carousel-arrows-opacity-hover - The arrows however opacity.
+ * @cssproperty --kemet-carousel-arrows-transition-speed - The arrows transition speed.
  *
  * @csspart container - Contains the slides and toolbar.
  * @csspart slides - Wrapper for the slider.
@@ -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.
@@ -29,21 +29,21 @@ import { stylesCarousel } from './styles';
  * @slot next - A slot for the next arrow.
  * @slot information - Allows you to enter custom HTML such as a slide description to be used in the toolbar.
  *
- * @cssproperty --kemet-carousel-width - The width of the carousel. Default: 100%.
- * @cssproperty --kemet-carousel-height - The height of the carousel. Default: auto.
- * @cssproperty --kemet-carousel-toolbar-gap - The space between items in the toolbar. Default: 1rem.
- * @cssproperty --kemet-carousel-toolbar-justify-content - The cross axis alignment of the toolbar. Default: center.
- * @cssproperty --kemet-carousel-toolbar-padding - The padding of the toolbar. Default: 1rem.
- * @cssproperty --kemet-carousel-toolbar-inner-width - The inner toolbar width. Default: 100%.
- * @cssproperty --kemet-carousel-toolbar-inner-bottom - The bottom position of the inner toolbar. Default: 0.
- * @cssproperty --kemet-carousel-toolbar-inner-top - The top position of the inner toolbar. Default: auto.
- * @cssproperty --kemet-carousel-toolbar-inner-color - The inner toolbar text color. Default: var(--kemet-color-white).
- * @cssproperty --kemet-carousel-toolbar-inner-background-color - The inner toolbar background color. Default: rgba(0, 0, 0, 0.4).
- * @cssproperty --kemet-carousel-slides-border - The border around the slides. Default: 1px solid var(--kemet-color-gray1).
- * @cssproperty --kemet-carousel-transition-speed - The transition speed of the slides. Default: 300ms.
- * @cssproperty --kemet-carousel-arrows-opacity - The arrows start opacity. Default: 0.25.
- * @cssproperty --kemet-carousel-arrows-opacity-hover - The arrows however opacity. Default: 1.
- * @cssproperty --kemet-carousel-arrows-transition-speed - The arrows transition speed. Default: 300ms.
+ * @cssproperty --kemet-carousel-width - The width of the carousel.
+ * @cssproperty --kemet-carousel-height - The height of the carousel.
+ * @cssproperty --kemet-carousel-toolbar-gap - The space between items in the toolbar.
+ * @cssproperty --kemet-carousel-toolbar-justify-content - The cross axis alignment of the toolbar.
+ * @cssproperty --kemet-carousel-toolbar-padding - The padding of the toolbar.
+ * @cssproperty --kemet-carousel-toolbar-inner-width - The inner toolbar width.
+ * @cssproperty --kemet-carousel-toolbar-inner-bottom - The bottom position of the inner toolbar.
+ * @cssproperty --kemet-carousel-toolbar-inner-top - The top position of the inner toolbar.
+ * @cssproperty --kemet-carousel-toolbar-inner-color - The inner toolbar text color.
+ * @cssproperty --kemet-carousel-toolbar-inner-background-color - The inner toolbar background color.
+ * @cssproperty --kemet-carousel-slides-border - The border around the slides.
+ * @cssproperty --kemet-carousel-transition-speed - The transition speed of the slides.
+ * @cssproperty --kemet-carousel-arrows-opacity - The arrows start opacity.
+ * @cssproperty --kemet-carousel-arrows-opacity-hover - The arrows however opacity.
+ * @cssproperty --kemet-carousel-arrows-transition-speed - The arrows transition speed.
  *
  * @csspart container - Contains the slides and toolbar.
  * @csspart slides - Wrapper for the slider.
@@ -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);