kemet-ui 2.0.0 → 2.0.2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1 +0,0 @@
-{"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/src/components/kemet-card/kemet-card.d.ts

@@ -1,47 +0,0 @@
-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/src/components/kemet-card/kemet-card.js

@@ -1,65 +0,0 @@
-import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { stylesBase } from './styles';
-/**
- * @since 1.4.0
- * @status stable
- *
- * @tagname kemet-card
- * @summary A highly configurable panel design to display media and information.
- *
- * @prop {boolean} center - Centers the elements in the card.
- *
- * @slot default - The contents of the alert.
- * @slot header - The cards's header.
- * @slot media - A slot for images, videos, or embeds.
- * @slot caption - Text for the media slot.
- * @slot footer - The card's footer.
- *
- *
- * @csspart media - The media area of the card.
- * @csspart body - The main contents of the card.
- *
- * @cssproperty --kemet-card-padding - The space around elements. Default: 1rem.
- * @cssproperty --kemet-card-border-color - The color of the borders. Default: var(--kemet-color-gray4).
- * @cssproperty --kemet-card-color - The color of the text. Default: var(--kemet-color-black).
- * @cssproperty --kemet-card-max-width - The max width of the card. Default: 360px.
- * @cssproperty --kemet-card-border - The border around the card. Default: 1px solid var(--kemet-card-border-color).
- * @cssproperty --kemet-card-border-radius - The border radius of the card. Default: 0.
- * @cssproperty --kemet-card-background-color - The background color. Default: var(--kemet-color-white).
- * @cssproperty --kemet-card-body-padding - The body spacing. Default: var(--kemet-card-padding).
- * @cssproperty --kemet-card-header-padding - The header spacing. Default: var(--kemet-card-padding).
- * @cssproperty --kemet-card-header-border-bottom - The header border. Default: 1px solid var(--kemet-card-border-color).
- * @cssproperty --kemet-card-caption-color - The caption text color. Default: var(--kemet-color-white).
- * @cssproperty --kemet-card-caption-padding - The caption spacing. Default: calc(var(--kemet-card-padding) / 2) var(--kemet-card-padding).
- * @cssproperty --kemet-card-caption-background-color - The caption background color. Default: rgba(0,0,0,0.5).
- * @cssproperty --kemet-card-footer-padding - The footer spacing. Default: var(--kemet-card-padding).
- * @cssproperty --kemet-card-footer-border-top - The footer border. Default: 1px solid var(--kemet-card-border-color).
- *
- */
-let KemetCard = class KemetCard extends LitElement {
-    render() {
-        return html `
-      <slot name="header"></slot>
-      <div class="media" part="media">
-        <slot name="media"></slot>
-        <slot name="caption"></slot>
-      </div>
-      <div class="body" part="body">
-        <slot></slot>
-      </div>
-      </div>
-      <slot name="footer"></slot>
-    `;
-    }
-};
-KemetCard.styles = [stylesBase];
-__decorate([
-    property({ type: Boolean, reflect: true })
-], KemetCard.prototype, "center", void 0);
-KemetCard = __decorate([
-    customElement('kemet-card')
-], KemetCard);
-export default KemetCard;
-//# sourceMappingURL=kemet-card.js.map

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

@@ -1 +0,0 @@
-{"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/src/components/kemet-card/styles.d.ts

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

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

@@ -1,63 +0,0 @@
-import { css } from 'lit';
-export const stylesBase = css `
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
-
-  :host {
-    --kemet-card-padding: 1rem;
-    --kemet-card-border-color: var(--kemet-color-gray4);
-
-    color: var(--kemet-card-color, var(--kemet-color-black));
-    display: inline-flex;
-    flex-direction: column;
-    max-width: var(--kemet-card-max-width, 360px);
-    border: var(--kemet-card-border, 1px solid var(--kemet-card-border-color));
-    border-radius: var(--kemet-card-border-radius, 0);
-    background-color: var(--kemet-card-background-color, var(--kemet-color-white));
-  }
-
-  :host([center]) {
-    align-items: center;
-    text-align: center;
-  }
-
-  .body {
-    padding: var(--kemet-card-body-padding, var(--kemet-card-padding));
-  }
-
-  .media {
-    position: relative;
-  }
-
-  ::slotted(*) {
-    max-width: 100%;
-  }
-
-  ::slotted(img) {
-    display: flex;
-    max-width: 100%;
-  }
-
-  ::slotted([slot="header"]) {
-    padding: var(--kemet-card-header-padding, var(--kemet-card-padding));
-    border-bottom: var(--kemet-card-header-border-bottom, 1px solid var(--kemet-card-border-color));
-  }
-
-  ::slotted([slot="caption"]) {
-    color: var(--kemet-card-caption-color, var(--kemet-color-white));
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    padding: var(--kemet-card-caption-padding, calc(var(--kemet-card-padding) / 2) var(--kemet-card-padding));
-    background-color: var(--kemet-card-caption-background-color, rgba(0,0,0,0.35));
-  }
-
-  ::slotted([slot="footer"]) {
-    padding: var(--kemet-card-footer-padding, var(--kemet-card-padding));
-    border-top: var(--kemet-card-footer-border-top, 1px solid var(--kemet-card-border-color));
-  }
-`;
-//# sourceMappingURL=styles.js.map

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

@@ -1 +0,0 @@
-{"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/src/components/kemet-card/types.d.ts

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

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

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

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

@@ -1 +0,0 @@
-{"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/src/components/kemet-carousel/docs/stories.js.map

@@ -1 +0,0 @@
-{"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/src/components/kemet-carousel/kemet-carousel-current.d.ts

@@ -1,26 +0,0 @@
-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/src/components/kemet-carousel/kemet-carousel-current.js

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

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

@@ -1 +0,0 @@
-{"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/src/components/kemet-carousel/kemet-carousel-first.d.ts

@@ -1,25 +0,0 @@
-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;
-    }
-}