kemet-ui 1.4.0 → 2.0.1

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

@@ -0,0 +1,108 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import '../kemet-card';
+import '../../kemet-tabs/kemet-tabs';
+import '../../kemet-tabs/kemet-tab';
+import '../../kemet-tabs/kemet-tab-panel';
+const meta = {
+    title: 'Components / Card',
+    component: 'kemet-card',
+};
+export default meta;
+const Template = ({ bodyText, showHeader, showFooter, captionText, mediaType, textColor, backgroundColor, borderColor, cardPadding, borderRadius, isCentered, elevation, }) => html `
+  <style>
+    kemet-card {
+      --kemet-card-color: ${textColor};
+      --kemet-card-padding: ${cardPadding};
+      --kemet-card-border-color: ${borderColor};
+      --kemet-card-border-radius: ${borderRadius};
+      --kemet-card-background-color: ${backgroundColor};
+    }
+  </style>
+  <kemet-card ?center=${isCentered} kemet-elevation="${ifDefined(elevation !== 'none' ? elevation : null)}">
+    ${showHeader ? html `<div slot="header">This is the header.</div>` : null}
+    ${showMedia(mediaType)}
+    ${captionText !== '' ? html `<div slot="caption">${captionText}</div>` : null}
+    ${bodyText}
+    ${showFooter ? html `<div slot="footer">This is the footer.</div>` : null}
+  </kemet-card>
+`;
+const showMedia = (type) => {
+    if (type === 'image') {
+        return html `<img slot="media" src="https://via.placeholder.com/1920x1080" alt="a placeholder" />`;
+    }
+    if (type === 'avatar') {
+        return html `
+      <kemet-avatar slot="media" rounded image="https://via.placeholder.com/200x200" label="a placeholder"></kemet-avatar>
+    `;
+    }
+    if (type === 'video') {
+        return html `
+      <video slot="media" controls>
+        <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
+        Your browser does not support the video tag.
+      </video>
+    `;
+    }
+    if (type === 'embed') {
+        return html `
+      <iframe slot="media" width="560" height="315" src="https://www.youtube.com/embed/5gBqTXctxO8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+    `;
+    }
+    return null;
+};
+export const Standard = {
+    render: (args) => Template(args),
+    args: {
+        bodyText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+        captionText: 'Caption',
+        showHeader: false,
+        showFooter: true,
+        isCentered: false,
+        mediaType: 'image',
+        textColor: '#000000',
+        borderColor: '#a4a4a4',
+        backgroundColor: '#ffffff',
+        cardPadding: '1rem',
+        borderRadius: '0',
+        elevation: 'none',
+    },
+    argTypes: {
+        bodyText: {
+            control: { type: 'text' },
+        },
+        showHeader: {
+            control: { type: 'boolean' },
+        },
+        showFooter: {
+            control: { type: 'boolean' },
+        },
+        isCentered: {
+            control: { type: 'boolean' },
+        },
+        mediaType: {
+            control: { type: 'radio' },
+            options: ['none', 'image', 'avatar', 'video', 'embed'],
+        },
+        textColor: {
+            control: { type: 'color' },
+        },
+        borderColor: {
+            control: { type: 'color' },
+        },
+        backgroundColor: {
+            control: { type: 'color' },
+        },
+        cardPadding: {
+            control: { type: 'text' },
+        },
+        borderRadius: {
+            control: { type: 'text' },
+        },
+        elevation: {
+            control: { type: 'select' },
+            options: ['none', 'layer1', 'layer2', 'layer3', 'layer4', 'layer5', 'layer6', 'inner'],
+        },
+    }
+};
+//# sourceMappingURL=stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-card/docs/stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-card';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n  title: 'Components / Card',\n  component: 'kemet-card',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = ({\n  bodyText,\n  showHeader,\n  showFooter,\n  captionText,\n  mediaType,\n  textColor,\n  backgroundColor,\n  borderColor,\n  cardPadding,\n  borderRadius,\n  isCentered,\n  elevation,\n}) => html`\n  <style>\n    kemet-card {\n      --kemet-card-color: ${textColor};\n      --kemet-card-padding: ${cardPadding};\n      --kemet-card-border-color: ${borderColor};\n      --kemet-card-border-radius: ${borderRadius};\n      --kemet-card-background-color: ${backgroundColor};\n    }\n  </style>\n  <kemet-card ?center=${isCentered} kemet-elevation=\"${ifDefined(elevation !== 'none' ? elevation : null)}\">\n    ${showHeader ? html`<div slot=\"header\">This is the header.</div>` : null}\n    ${showMedia(mediaType)}\n    ${captionText !== '' ? html`<div slot=\"caption\">${captionText}</div>` : null}\n    ${bodyText}\n    ${showFooter ? html`<div slot=\"footer\">This is the footer.</div>` : null}\n  </kemet-card>\n`;\n\nconst showMedia = (type) => {\n  if (type === 'image') {\n    return html`<img slot=\"media\" src=\"https://via.placeholder.com/1920x1080\" alt=\"a placeholder\" />`;\n  }\n\n  if (type === 'avatar') {\n    return html`\n      <kemet-avatar slot=\"media\" rounded image=\"https://via.placeholder.com/200x200\" label=\"a placeholder\"></kemet-avatar>\n    `;\n  }\n\n  if (type === 'video') {\n    return html`\n      <video slot=\"media\" controls>\n        <source src=\"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4\" type=\"video/mp4\">\n        Your browser does not support the video tag.\n      </video>\n    `;\n  }\n\n  if (type === 'embed') {\n    return html`\n      <iframe slot=\"media\" width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/5gBqTXctxO8\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>\n    `;\n  }\n\n  return null;\n};\n\nexport const Standard: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    bodyText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',\n    captionText: 'Caption',\n    showHeader: false,\n    showFooter: true,\n    isCentered: false,\n    mediaType: 'image',\n    textColor: '#000000',\n    borderColor: '#a4a4a4',\n    backgroundColor: '#ffffff',\n    cardPadding: '1rem',\n    borderRadius: '0',\n    elevation: 'none',\n  },\n  argTypes: {\n    bodyText: {\n      control: { type: 'text' },\n    },\n    showHeader: {\n      control: { type: 'boolean' },\n    },\n    showFooter: {\n      control: { type: 'boolean' },\n    },\n    isCentered: {\n      control: { type: 'boolean' },\n    },\n    mediaType: {\n      control: { type: 'radio' },\n      options: ['none', 'image', 'avatar', 'video', 'embed'],\n    },\n    textColor: {\n      control: { type: 'color' },\n    },\n    borderColor: {\n      control: { type: 'color' },\n    },\n    backgroundColor: {\n      control: { type: 'color' },\n    },\n    cardPadding: {\n      control: { type: 'text' },\n    },\n    borderRadius: {\n      control: { type: 'text' },\n    },\n    elevation: {\n      control: { type: 'select' },\n      options: ['none', 'layer1', 'layer2', 'layer3', 'layer4', 'layer5', 'layer6', 'inner'],\n    },\n  }\n};\n"]}

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

@@ -0,0 +1,47 @@
+import { LitElement } from 'lit';
+/**
+ * @since 1.4.0
+ * @status stable
+ *
+ * @tagname kemet-card
+ * @summary A highly configurable panel design to display media and information.
+ *
+ * @prop {boolean} center - Centers the elements in the card.
+ *
+ * @slot default - The contents of the alert.
+ * @slot header - The cards's header.
+ * @slot media - A slot for images, videos, or embeds.
+ * @slot caption - Text for the media slot.
+ * @slot footer - The card's footer.
+ *
+ *
+ * @csspart media - The media area of the card.
+ * @csspart body - The main contents of the card.
+ *
+ * @cssproperty --kemet-card-padding - The space around elements. Default: 1rem.
+ * @cssproperty --kemet-card-border-color - The color of the borders. Default: var(--kemet-color-gray4).
+ * @cssproperty --kemet-card-color - The color of the text. Default: var(--kemet-color-black).
+ * @cssproperty --kemet-card-max-width - The max width of the card. Default: 360px.
+ * @cssproperty --kemet-card-border - The border around the card. Default: 1px solid var(--kemet-card-border-color).
+ * @cssproperty --kemet-card-border-radius - The border radius of the card. Default: 0.
+ * @cssproperty --kemet-card-background-color - The background color. Default: var(--kemet-color-white).
+ * @cssproperty --kemet-card-body-padding - The body spacing. Default: var(--kemet-card-padding).
+ * @cssproperty --kemet-card-header-padding - The header spacing. Default: var(--kemet-card-padding).
+ * @cssproperty --kemet-card-header-border-bottom - The header border. Default: 1px solid var(--kemet-card-border-color).
+ * @cssproperty --kemet-card-caption-color - The caption text color. Default: var(--kemet-color-white).
+ * @cssproperty --kemet-card-caption-padding - The caption spacing. Default: calc(var(--kemet-card-padding) / 2) var(--kemet-card-padding).
+ * @cssproperty --kemet-card-caption-background-color - The caption background color. Default: rgba(0,0,0,0.5).
+ * @cssproperty --kemet-card-footer-padding - The footer spacing. Default: var(--kemet-card-padding).
+ * @cssproperty --kemet-card-footer-border-top - The footer border. Default: 1px solid var(--kemet-card-border-color).
+ *
+ */
+export default class KemetCard extends LitElement {
+    static styles: import("lit").CSSResult[];
+    center: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-card': KemetCard;
+    }
+}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import '../kemet-carousel';
+import '../kemet-carousel-link';
+import '../kemet-carousel-first';
+import '../kemet-carousel-last';
+import '../kemet-carousel-next';
+import '../kemet-carousel-prev';
+import '../kemet-carousel-slide';
+import '../kemet-carousel-current';
+import '../kemet-carousel-total';
+import '../../kemet-tabs/kemet-tabs';
+import '../../kemet-tabs/kemet-tab';
+import '../../kemet-tabs/kemet-tab-panel';
+declare const meta: Meta;
+export default meta;
+declare type Story = StoryObj;
+export declare const Standard: Story;

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

@@ -0,0 +1,168 @@
+import { html } from 'lit';
+import '../kemet-carousel';
+import '../kemet-carousel-link';
+import '../kemet-carousel-first';
+import '../kemet-carousel-last';
+import '../kemet-carousel-next';
+import '../kemet-carousel-prev';
+import '../kemet-carousel-slide';
+import '../kemet-carousel-current';
+import '../kemet-carousel-total';
+import '../../kemet-tabs/kemet-tabs';
+import '../../kemet-tabs/kemet-tab';
+import '../../kemet-tabs/kemet-tab-panel';
+const meta = {
+    title: 'Components / Carousel',
+    component: 'kemet-carousel',
+};
+export default meta;
+const Template = ({ numOfSlides = 5, toolbar = 'description', index = 0, inner = false, arrows = false, options, breakpoints, }) => {
+    const makeSlides = () => {
+        const slides = [];
+        for (let i = 0; i < 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>
+            <img src="https://via.placeholder.com/1920x1080" alt="a placeholder" style="max-width:100%" />
+            <figcaption>An image in a carousel.</figcaption>
+          </figure>
+          <span slot="information"><a href="https://google.com" target="_blank">Title</a>. An image of slide ${slideNumber}. </span>
+        </kemet-carousel-slide>
+      `);
+        }
+        return slides;
+    };
+    const makePrevArrow = () => {
+        if (arrows) {
+            return html `
+        <kemet-carousel-prev slot="prev">
+          <kemet-icon icon="chevron-left" size="72"></kemet-icon>
+        </kemet-carousel-prev>
+      `;
+        }
+        return null;
+    };
+    const makeNextArrow = () => {
+        if (arrows) {
+            return html `
+        <kemet-carousel-next slot="next">
+          <kemet-icon icon="chevron-right" size="72"></kemet-icon>
+        </kemet-carousel-next>
+      `;
+        }
+        return null;
+    };
+    const makePagination = () => {
+        if (toolbar === 'pagination') {
+            const pages = [];
+            for (let i = 0; i < numOfSlides; i += 1) {
+                pages.push(html `
+          <kemet-carousel-link slide="${i}" slot="toolbar">${i + 1}</kemet-carousel-link>
+        `);
+            }
+            return html `
+        <kemet-carousel-first slot="toolbar">
+          <kemet-icon icon="chevron-double-left"></kemet-icon>
+        </kemet-carousel-first>
+        <kemet-carousel-prev slot="toolbar">
+          <kemet-icon icon="chevron-left"></kemet-icon>
+        </kemet-carousel-prev>
+        ${pages}
+        <kemet-carousel-next slot="toolbar">
+          <kemet-icon icon="chevron-right"></kemet-icon>
+        </kemet-carousel-next>
+        <kemet-carousel-last slot="toolbar">
+          <kemet-icon icon="chevron-double-right"></kemet-icon>
+        </kemet-carousel-last>
+      `;
+        }
+        return null;
+    };
+    const makeDescription = () => {
+        if (toolbar === 'description') {
+            return html `
+        <div slot="toolbar" kemet-layout="flexrow" kemet-align="middle" kemet-gutters>
+          <div>
+            <kemet-carousel-current></kemet-carousel-current>
+            &nbsp;of&nbsp;
+            <kemet-carousel-total></kemet-carousel-total>
+            :&nbsp;
+            <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-carousel-prev>
+          <kemet-carousel-next kemet-breakpoint="tiny:content">
+            <kemet-badge circle><kemet-icon icon="chevron-right"></kemet-icon></kemet-badge>
+          </kemet-carousel-next>
+        </div>
+      `;
+        }
+        return null;
+    };
+    return html `
+    <kemet-carousel index="${index}" ?inner=${inner} .options=${options} .breakpoints=${breakpoints}>
+      ${makePrevArrow()}
+      ${makeSlides()}
+      ${makeNextArrow()}
+      ${makePagination()}
+      ${makeDescription()}
+    </kemet-carousel>
+  `;
+};
+export const Standard = {
+    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' },
+        },
+    }
+};
+//# sourceMappingURL=stories.js.map

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

@@ -0,0 +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"]}

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

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

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

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

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

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

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

@@ -0,0 +1,25 @@
+import { LitElement } from 'lit';
+/**
+ *
+ * @since 1.1.0
+ * @status stable
+ *
+ * @tagname kemet-carousel-first
+ * @summary A link to the first slide in the carousel.
+ *
+ * @prop {boolean} disabled - Deactivates the button.
+ *
+ * @event kemet-carousel-first
+ *
+ */
+export default class KemetCarouselFirst extends LitElement {
+    static styles: import("lit").CSSResult[];
+    disabled: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+    first(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-carousel-first': KemetCarouselFirst;
+    }
+}