kemet-ui 3.0.1 → 4.0.0

package/dist/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 if 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} variant - 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.
- * @cssproperty --kemet-button-color - The text color.
- * @cssproperty --kemet-button-width - The width.
- * @cssproperty --kemet-button-height - The height.
- * @cssproperty --kemet-button-border - The border.
- * @cssproperty --kemet-button-border-radius - The border radius.
- * @cssproperty --kemet-button-transition-speed - The transition speed of the hover effect.
- * @cssproperty --kemet-button-background-color - The background color.
- * @cssproperty --kemet-button-hover-brightness - The brightness of the hover effect.
- * @cssproperty --kemet-button-gap - The gap between the button and icons.
- * @cssproperty --kemet-button-padding - The button padding.
- * @cssproperty --kemet-button-hover-decoration - The decoration for a text button's hover.
- * @cssproperty --kemet-button-circle-size - The diameter of a circle button.
- * @cssproperty --kemet-button-rounded-amount - The border radius of the rounded button.
- * @cssproperty --kemet-button-border-width - The width of the outline border.
- * @cssproperty --kemet-button-border-style - The style of the outline border.
- * @cssproperty --kemet-button-border-color - The color of the outline border.
- * @cssproperty --kemet-button-disabled-opacity - The opacity of the disabled state.
- *
- */
-let KemetButton = class KemetButton extends LitElement {
-    constructor() {
-        super();
-        this.outlined = false;
-        this.disabled = false;
-        this.variant = '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({ reflect: true })
-], KemetButton.prototype, "variant", void 0);
-KemetButton = __decorate([
-    customElement('kemet-button')
-], KemetButton);
-export default KemetButton;
-//# sourceMappingURL=kemet-button.js.map

package/dist/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 { TypeVariant } 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 if 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} variant - 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.\n * @cssproperty --kemet-button-color - The text color.\n * @cssproperty --kemet-button-width - The width.\n * @cssproperty --kemet-button-height - The height.\n * @cssproperty --kemet-button-border - The border.\n * @cssproperty --kemet-button-border-radius - The border radius.\n * @cssproperty --kemet-button-transition-speed - The transition speed of the hover effect.\n * @cssproperty --kemet-button-background-color - The background color.\n * @cssproperty --kemet-button-hover-brightness - The brightness of the hover effect.\n * @cssproperty --kemet-button-gap - The gap between the button and icons.\n * @cssproperty --kemet-button-padding - The button padding.\n * @cssproperty --kemet-button-hover-decoration - The decoration for a text button's hover.\n * @cssproperty --kemet-button-circle-size - The diameter of a circle button.\n * @cssproperty --kemet-button-rounded-amount - The border radius of the rounded button.\n * @cssproperty --kemet-button-border-width - The width of the outline border.\n * @cssproperty --kemet-button-border-style - The style of the outline border.\n * @cssproperty --kemet-button-border-color - The color of the outline border.\n * @cssproperty --kemet-button-disabled-opacity - The opacity of the disabled state.\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({ reflect: true })\n  variant: TypeVariant = '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: KeyboardEvent) {\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/components/kemet-button/styles.d.ts

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

package/dist/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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0F5B,CAAA","sourcesContent":["import { css } from 'lit';\n\nexport const stylesBase = css`\n  :host {\n    --kemet-button-font-size: inherit;\n    --kemet-button-color: rgb(var(--kemet-color-background));\n    --kemet-button-width: auto;\n    --kemet-button-height: auto;\n    --kemet-button-border: 0;\n    --kemet-button-border-radius: 0;\n    --kemet-button-transition-speed: 300ms;\n    --kemet-button-background-color: rgb(var(--kemet-color-foreground));\n    --kemet-button-hover-brightness: 1.25;\n    --kemet-button-disabled-opacity: 0.5;\n    --kemet-button-gap: 0.5rem;\n    --kemet-button-padding: 1rem 1.25rem;\n    --kemet-button-hover-decoration: underline;\n    --kemet-button-circle-size: 50px;\n    --kemet-button-rounded-amount: 6px;\n    --kemet-button-border-width: 1.5px;\n    --kemet-button-border-style: solid;\n    --kemet-button-border-color: rgb(var(--kemet-color-foreground));\n\n    cursor: pointer;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: var(--kemet-button-font-size);\n    color: var(--kemet-button-color);\n    width: var(--kemet-button-width);\n    height: var(--kemet-button-height);\n    border: var(--kemet-button-border);\n    border-radius: var(--kemet-button-border-radius);\n    transition: filter var(--kemet-button-transition-speed) ease;\n    background-color: var(--kemet-button-background-color);\n  }\n\n  :host(:hover:not([disabled])) {\n    filter: brightness(var(--kemet-button-hover-brightness));\n  }\n\n  :host([disabled]) {\n    opacity: var(--kemet-button-disabled-opacity);\n  }\n\n  .button {\n    cursor: pointer;\n    text-decoration: none;\n    display: flex;\n    gap: var(--kemet-button-gap);\n    align-items: center;\n    justify-content: center;\n    color: inherit;\n    font-size: inherit;\n    width: 100%;\n    padding: var(--kemet-button-padding);\n    border: 0;\n    background: none;\n  }\n\n  :host([disabled]) .button {\n    cursor: not-allowed;\n  }\n\n  :host([variant='text']) {\n    --kemet-button-color: rgb(var(--kemet-color-text));\n    --kemet-button-background-color: none;\n  }\n\n  :host([variant='text']:hover) {\n    text-decoration: var(--kemet-button-hover-decoration);\n  }\n\n  :host([variant='circle']) {\n    --kemet-button-border-radius: var(--kemet-border-radius-circle);\n    --kemet-button-width: var(--kemet-button-circle-size);\n    --kemet-button-height: var(--kemet-button-circle-size);\n  }\n\n  :host([variant='rounded']) {\n    --kemet-button-border-radius: var(--kemet-button-rounded-amount);\n  }\n\n  :host([variant='pill']) {\n    --kemet-button-border-radius: var(--kemet-border-radius-pill);\n  }\n\n  :host([outlined]) {\n    --kemet-button-color: rgb(var(--kemet-color-foreground));\n    --kemet-button-background-color: transparent;\n    --kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--kemet-button-border-color);\n  }\n`\n"]}

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

@@ -1 +0,0 @@
-export declare type TypeVariant = 'standard' | 'text' | 'circle' | 'rounded' | 'pill';

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

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

package/dist/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 TypeVariant = 'standard' | 'text' | 'circle' | 'rounded' | 'pill';\n"]}

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

@@ -1,19 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
-import '../kemet-card';
-import '../../kemet-tabs/kemet-tabs';
-import '../../kemet-tabs/kemet-tab';
-import '../../kemet-tabs/kemet-tab-panel';
-import '../../kemet-avatar/kemet-avatar';
-import '../../kemet-icon/kemet-icon';
-declare const meta: Meta;
-export default meta;
-declare type Story = StoryObj;
-export declare const Standard: Story;
-export declare const Header: Story;
-export declare const Footer: Story;
-export declare const HeaderAndFooter: Story;
-export declare const Image: Story;
-export declare const Video: Story;
-export declare const Embed: Story;
-export declare const Avatar: Story;
-export declare const Full: Story;

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

@@ -1,120 +0,0 @@
-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';
-import '../../kemet-avatar/kemet-avatar';
-import '../../kemet-icon/kemet-icon';
-const meta = {
-    title: 'Components / Card',
-    component: 'kemet-card',
-    args: {
-        bodyText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-        captionText: '',
-        isCentered: false,
-    },
-    argTypes: {
-        mediaType: {
-            control: { type: 'radio' },
-            options: ['none', 'image', 'avatar', 'video', 'embed'],
-        },
-        elevation: {
-            control: { type: 'select' },
-            options: ['none', 'layer-1', 'layer-2', 'layer-3', 'layer-4', 'layer-5', 'layer-6', 'inner'],
-        },
-    }
-};
-export default meta;
-const Template = (args) => html `
-  <kemet-card ?center=${args.isCentered} kemet-elevation="${ifDefined(args.elevation !== 'none' ? args.elevation : null)}">
-    ${args.showHeader ? html `<div slot="header">This is the header.</div>` : null}
-    ${showMedia(args.mediaType)}
-    ${args.captionText && args.captionText !== '' ? html `<div slot="caption">${args.captionText}</div>` : null}
-    ${args.bodyText}
-    ${args.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 circle slot="media">
-        <kemet-icon size="196" kemet-margin="xs" icon="person"></kemet-icon>
-      </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="100%" style="aspect-ratio:16/9;" 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),
-};
-export const Header = {
-    render: (args) => Template(args),
-    args: {
-        showHeader: true
-    }
-};
-export const Footer = {
-    render: (args) => Template(args),
-    args: {
-        showFooter: true
-    }
-};
-export const HeaderAndFooter = {
-    render: (args) => Template(args),
-    args: {
-        showHeader: true,
-        showFooter: true
-    }
-};
-export const Image = {
-    render: (args) => Template(args),
-    args: {
-        mediaType: 'image'
-    }
-};
-export const Video = {
-    render: (args) => Template(args),
-    args: {
-        mediaType: 'video'
-    }
-};
-export const Embed = {
-    render: (args) => Template(args),
-    args: {
-        mediaType: 'embed'
-    }
-};
-export const Avatar = {
-    render: (args) => Template(args),
-    args: {
-        mediaType: 'avatar',
-        isCentered: true
-    }
-};
-export const Full = {
-    render: (args) => Template(args),
-    args: {
-        mediaType: 'embed',
-        showHeader: true,
-        showFooter: true,
-        elevation: 'layer-4',
-    }
-};
-//# sourceMappingURL=stories.js.map

package/dist/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\nimport '../../kemet-avatar/kemet-avatar';\nimport '../../kemet-icon/kemet-icon';\n\nconst meta: Meta = {\n  title: 'Components / Card',\n  component: 'kemet-card',\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: '',\n    isCentered: false,\n  },\n  argTypes: {\n    mediaType: {\n      control: { type: 'radio' },\n      options: ['none', 'image', 'avatar', 'video', 'embed'],\n    },\n    elevation: {\n      control: { type: 'select' },\n      options: ['none', 'layer-1', 'layer-2', 'layer-3', 'layer-4', 'layer-5', 'layer-6', 'inner'],\n    },\n  }\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = (args) => html`\n  <kemet-card ?center=${args.isCentered} kemet-elevation=\"${ifDefined(args.elevation !== 'none' ? args.elevation : null)}\">\n    ${args.showHeader ? html`<div slot=\"header\">This is the header.</div>` : null}\n    ${showMedia(args.mediaType)}\n    ${args.captionText && args.captionText !== '' ? html`<div slot=\"caption\">${args.captionText}</div>` : null}\n    ${args.bodyText}\n    ${args.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 circle slot=\"media\">\n        <kemet-icon size=\"196\" kemet-margin=\"xs\" icon=\"person\"></kemet-icon>\n      </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=\"100%\" style=\"aspect-ratio:16/9;\" 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};\n\nexport const Header: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    showHeader: true\n  }\n};\n\nexport const Footer: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    showFooter: true\n  }\n};\n\nexport const HeaderAndFooter: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    showHeader: true,\n    showFooter: true\n  }\n};\n\nexport const Image: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    mediaType: 'image'\n  }\n};\n\nexport const Video: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    mediaType: 'video'\n  }\n};\n\nexport const Embed: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    mediaType: 'embed'\n  }\n};\n\nexport const Avatar: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    mediaType: 'avatar',\n    isCentered: true\n  }\n};\n\nexport const Full: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    mediaType: 'embed',\n    showHeader: true,\n    showFooter: true,\n    elevation: 'layer-4',\n  }\n}\n"]}

package/dist/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 card'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.
- * @cssproperty --kemet-card-border-color - The color of the borders.
- * @cssproperty --kemet-card-color - The color of the text. Default:
- * @cssproperty --kemet-card-max-width - The max width of the card.
- * @cssproperty --kemet-card-border - The border around the card.
- * @cssproperty --kemet-card-border-radius - The border radius of the card.
- * @cssproperty --kemet-card-background-color - The background color.
- * @cssproperty --kemet-card-body-padding - The body spacing.
- * @cssproperty --kemet-card-header-padding - The header spacing.
- * @cssproperty --kemet-card-header-border-bottom - The header border.
- * @cssproperty --kemet-card-caption-color - The caption text color.
- * @cssproperty --kemet-card-caption-padding - The caption spacing.
- * @cssproperty --kemet-card-caption-background-color - The caption background color.
- * @cssproperty --kemet-card-footer-padding - The footer spacing.
- * @cssproperty --kemet-card-footer-border-top - The footer border.
- *
- */
-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,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 card'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.
- * @cssproperty --kemet-card-border-color - The color of the borders.
- * @cssproperty --kemet-card-color - The color of the text. Default:
- * @cssproperty --kemet-card-max-width - The max width of the card.
- * @cssproperty --kemet-card-border - The border around the card.
- * @cssproperty --kemet-card-border-radius - The border radius of the card.
- * @cssproperty --kemet-card-background-color - The background color.
- * @cssproperty --kemet-card-body-padding - The body spacing.
- * @cssproperty --kemet-card-header-padding - The header spacing.
- * @cssproperty --kemet-card-header-border-bottom - The header border.
- * @cssproperty --kemet-card-caption-color - The caption text color.
- * @cssproperty --kemet-card-caption-padding - The caption spacing.
- * @cssproperty --kemet-card-caption-background-color - The caption background color.
- * @cssproperty --kemet-card-footer-padding - The footer spacing.
- * @cssproperty --kemet-card-footer-border-top - The footer border.
- *
- */
-let KemetCard = class KemetCard extends LitElement {
-    render() {
-        return html `
-      <slot name="header"></slot>
-      <div class="media" part="media">
-        <slot name="media"></slot>
-        <slot name="caption"></slot>
-      </div>
-      <div class="body" part="body">
-        <slot></slot>
-      </div>
-      </div>
-      <slot name="footer"></slot>
-    `;
-    }
-};
-KemetCard.styles = [stylesBase];
-__decorate([
-    property({ type: Boolean, reflect: true })
-], KemetCard.prototype, "center", void 0);
-KemetCard = __decorate([
-    customElement('kemet-card')
-], KemetCard);
-export default KemetCard;
-//# sourceMappingURL=kemet-card.js.map

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

@@ -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 card'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.\n * @cssproperty --kemet-card-border-color - The color of the borders.\n * @cssproperty --kemet-card-color - The color of the text. Default:\n * @cssproperty --kemet-card-max-width - The max width of the card.\n * @cssproperty --kemet-card-border - The border around the card.\n * @cssproperty --kemet-card-border-radius - The border radius of the card.\n * @cssproperty --kemet-card-background-color - The background color.\n * @cssproperty --kemet-card-body-padding - The body spacing.\n * @cssproperty --kemet-card-header-padding - The header spacing.\n * @cssproperty --kemet-card-header-border-bottom - The header border.\n * @cssproperty --kemet-card-caption-color - The caption text color.\n * @cssproperty --kemet-card-caption-padding - The caption spacing.\n * @cssproperty --kemet-card-caption-background-color - The caption background color.\n * @cssproperty --kemet-card-footer-padding - The footer spacing.\n * @cssproperty --kemet-card-footer-border-top - The footer border.\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

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

package/dist/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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2E5B,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: rgb(var(--kemet-color-gray-300));\n    --kemet-card-color: rgb(var(--kemet-color-text));\n    --kemet-card-max-width: 600px;\n    --kemet-card-border: 1px solid var(--kemet-card-border-color);\n    --kemet-card-border-radius: 0;\n    --kemet-card-background-color: rgb(var(--kemet-color-white));\n    --kemet-card-body-padding: var(--kemet-card-padding);\n    --kemet-card-header-padding: var(--kemet-card-padding);\n    --kemet-card-header-border-bottom: 1px solid var(--kemet-card-border-color);\n    --kemet-card-caption-color: rgb(var(--kemet-color-white));\n    --kemet-card-caption-padding: calc(var(--kemet-card-padding) / 2) var(--kemet-card-padding);\n    --kemet-card-caption-background-color: rgb(var(--kemet-color-black) / 35%);\n    --kemet-card-footer-padding: var(--kemet-card-padding);\n    --kemet-card-footer-border-top: 1px solid var(--kemet-card-border-color);\n\n    color: var(--kemet-card-color);\n    display: inline-flex;\n    flex-direction: column;\n    max-width: var(--kemet-card-max-width);\n    border: var(--kemet-card-border);\n    border-radius: var(--kemet-card-border-radius);\n    background-color: var(--kemet-card-background-color);\n  }\n\n  :host([center]) {\n    align-items: center;\n    text-align: center;\n  }\n\n  .body {\n    padding: var(--kemet-card-body-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    width: 100%;\n    padding: var(--kemet-card-header-padding);\n    border-bottom: var(--kemet-card-header-border-bottom);\n  }\n\n  ::slotted([slot=\"caption\"]) {\n    color: var(--kemet-card-caption-color);\n    position: absolute;\n    bottom: 0;\n    width: 100%;\n    padding: var(--kemet-card-caption-padding);\n    background-color: var(--kemet-card-caption-background-color);\n  }\n\n  ::slotted([slot=\"footer\"]) {\n    width: 100%;\n    padding: var(--kemet-card-footer-padding);\n    border-top: var(--kemet-card-footer-border-top);\n  }\n`;\n"]}

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

@@ -1,23 +0,0 @@
-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';
-import '../../kemet-badge/kemet-badge';
-import '../../kemet-icon/kemet-icon';
-declare const meta: Meta;
-export default meta;
-declare type Story = StoryObj;
-export declare const Standard: Story;
-export declare const DescriptionToolbar: Story;
-export declare const PaginationToolbar: Story;
-export declare const InnerToolbar: Story;
-export declare const Arrows: Story;