kemet-ui 3.1.0 → 4.0.0

package/dist/components/kemet-badge/spec.js

@@ -1,21 +0,0 @@
-import { html, render } from 'lit';
-import { expect } from '@wdio/globals';
-import { getByText } from '@testing-library/dom';
-import './kemet-badge';
-describe('Badge', () => {
-    const templates = {
-        default: html `<kemet-badge>Badge</kemet-badge>`,
-        circle: html `<kemet-badge circle>Badge</kemet-badge>`,
-    };
-    it('displays a badge', async () => {
-        render(templates.default, document.body);
-        const badge = getByText(document.body, 'Badge');
-        expect(badge).toBeTruthy();
-    });
-    it('displays a circular badge', async () => {
-        render(templates.circle, document.body);
-        const badge = getByText(document.body, 'Badge');
-        expect(badge.circle).toBeTruthy();
-    });
-});
-//# sourceMappingURL=spec.js.map

package/dist/components/kemet-badge/spec.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"spec.js","sourceRoot":"","sources":["../../../src/components/kemet-badge/spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,KAAK,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAGjD,OAAO,eAAe,CAAC;AAEvB,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE;IACrB,MAAM,SAAS,GAAG;QAChB,OAAO,EAAE,IAAI,CAAA,kCAAkC;QAC/C,MAAM,EAAE,IAAI,CAAA,yCAAyC;KACtD,CAAC;IAEF,EAAE,CAAC,kBAAkB,EAAE,KAAK,IAAI,EAAE;QAChC,MAAM,CAAC,SAAS,CAAC,OAAO,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;QACvC,MAAM,KAAK,GAAG,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QAChD,MAAM,CAAC,KAAK,CAAC,CAAC,UAAU,EAAE,CAAC;IAC/B,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2BAA2B,EAAE,KAAK,IAAI,EAAE;QACzC,MAAM,CAAC,SAAS,CAAC,MAAM,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;QACtC,MAAM,KAAK,GAAG,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAe,CAAC;QAC9D,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,UAAU,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { html, render } from 'lit';\nimport { expect } from '@wdio/globals';\nimport { getByText } from '@testing-library/dom';\n\nimport KemetBadge from './kemet-badge';\nimport './kemet-badge';\n\ndescribe('Badge', () => {\n  const templates = {\n    default: html`<kemet-badge>Badge</kemet-badge>`,\n    circle: html`<kemet-badge circle>Badge</kemet-badge>`,\n  };\n\n  it('displays a badge', async () => {\n    render(templates.default, document.body);\n      const badge = getByText(document.body, 'Badge');\n      expect(badge).toBeTruthy();\n  });\n\n  it('displays a circular badge', async () => {\n    render(templates.circle, document.body);\n      const badge = getByText(document.body, 'Badge') as KemetBadge;\n      expect(badge.circle).toBeTruthy();\n  });\n});\n"]}

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

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

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

@@ -1,42 +0,0 @@
-import { css } from 'lit';
-export const stylesBase = css `
-  :host {
-    --kemet-badge-padding: 10px;
-
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: var(--kemet-badge-padding);
-    line-height: 1;
-    color: rgb(var(--kemet-color-white));
-  }
-
-  :host([status='primary']) {
-    background-color: rgb(var(--kemet-color-primary));
-  }
-
-  :host([status='success']) {
-    background-color: rgb(var(--kemet-color-success));
-  }
-
-  :host([status='standard']) {
-    background-color: rgb(var(--kemet-color-gray-500));
-  }
-
-  :host([status='warning']) {
-    background-color: rgb(var(--kemet-color-warning));
-  }
-
-  :host([status='error']) {
-    background-color: rgb(var(--kemet-color-error));
-  }
-
-  :host([circle]) {
-    border-radius: var(--kemet-border-radius-circle);
-  }
-
-  :host([pill]) {
-    border-radius: var(--kemet-border-radius-pill);
-  }
-`;
-//# sourceMappingURL=styles.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-badge/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuC5B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesBase = css`\n  :host {\n    --kemet-badge-padding: 10px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: var(--kemet-badge-padding);\n    line-height: 1;\n    color: rgb(var(--kemet-color-white));\n  }\n\n  :host([status='primary']) {\n    background-color: rgb(var(--kemet-color-primary));\n  }\n\n  :host([status='success']) {\n    background-color: rgb(var(--kemet-color-success));\n  }\n\n  :host([status='standard']) {\n    background-color: rgb(var(--kemet-color-gray-500));\n  }\n\n  :host([status='warning']) {\n    background-color: rgb(var(--kemet-color-warning));\n  }\n\n  :host([status='error']) {\n    background-color: rgb(var(--kemet-color-error));\n  }\n\n  :host([circle]) {\n    border-radius: var(--kemet-border-radius-circle);\n  }\n\n  :host([pill]) {\n    border-radius: var(--kemet-border-radius-pill);\n  }\n`;\n"]}

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

@@ -1 +0,0 @@
-export type TypeStatus = 'standard' | 'primary' | 'success' | 'warning' | 'error';

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/kemet-badge/types.ts"],"names":[],"mappings":"","sourcesContent":["export type TypeStatus = 'standard' | 'primary' | 'success' | 'warning' | 'error';\n"]}

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

@@ -1,21 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
-import '../kemet-button';
-import '../../kemet-tabs/kemet-tabs';
-import '../../kemet-tabs/kemet-tab';
-import '../../kemet-tabs/kemet-tab-panel';
-import '../../kemet-icon/kemet-icon';
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj;
-export declare const Standard: Story;
-export declare const Text: Story;
-export declare const Circle: Story;
-export declare const Rounded: Story;
-export declare const Pill: Story;
-export declare const Outlined: Story;
-export declare const OutlinedRounded: Story;
-export declare const OutlinedPill: Story;
-export declare const IconLeft: Story;
-export declare const IconRight: Story;
-export declare const Link: Story;
-export declare const Disabled: Story;

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

@@ -1,112 +0,0 @@
-import { html } from 'lit';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import '../kemet-button';
-import '../../kemet-tabs/kemet-tabs';
-import '../../kemet-tabs/kemet-tab';
-import '../../kemet-tabs/kemet-tab-panel';
-import '../../kemet-icon/kemet-icon';
-const meta = {
-    title: 'Components / Button',
-    component: 'kemet-button',
-    argTypes: {
-        variant: {
-            control: { type: 'select' },
-            options: ['standard', 'text', 'circle', 'rounded', 'pill'],
-        },
-        outlined: {
-            control: { type: 'boolean' },
-        },
-        iconLeft: {
-            control: { type: 'text' },
-        },
-        iconRight: {
-            control: { type: 'text' },
-        },
-        link: {
-            control: { type: 'text' },
-        },
-        disabled: {
-            control: { type: 'boolean' },
-        },
-    }
-};
-export default meta;
-const Template = (args) => html `
-  <kemet-button variant="${ifDefined(args.variant)}" ?outlined=${args.outlined} ?disabled=${args.disabled} link=${ifDefined(args.link !== '' ? args.link : undefined)}>
-    ${ifDefined(args.iconLeft !== '' && args.type !== 'circle' && args.iconLeft ? html `<kemet-icon slot="left" icon="${args.iconLeft}"></kemet-icon>` : undefined)}
-    ${args.variant === 'circle' ? html `<kemet-icon icon="gear" size="24"></kemet-icon>` : 'Button'}
-    ${ifDefined(args.iconRight !== '' && args.variant !== 'circle' && args.iconRight ? html `<kemet-icon slot="right" icon="${args.iconRight}"></kemet-icon>` : undefined)}
-  </kemet-button>
-`;
-export const Standard = {
-    render: args => Template(args),
-};
-export const Text = {
-    render: args => Template(args),
-    args: {
-        variant: 'text',
-    },
-};
-export const Circle = {
-    render: args => Template(args),
-    args: {
-        variant: 'circle',
-    },
-};
-export const Rounded = {
-    render: args => Template(args),
-    args: {
-        variant: 'rounded',
-    },
-};
-export const Pill = {
-    render: args => Template(args),
-    args: {
-        variant: 'pill',
-    },
-};
-export const Outlined = {
-    render: args => Template(args),
-    args: {
-        outlined: true,
-    },
-};
-export const OutlinedRounded = {
-    render: args => Template(args),
-    args: {
-        outlined: true,
-        variant: 'rounded',
-    },
-};
-export const OutlinedPill = {
-    render: args => Template(args),
-    args: {
-        outlined: true,
-        variant: 'pill',
-    },
-};
-export const IconLeft = {
-    render: args => Template(args),
-    args: {
-        iconLeft: 'chevron-left',
-    },
-};
-export const IconRight = {
-    render: args => Template(args),
-    args: {
-        iconRight: 'chevron-right',
-    },
-};
-export const Link = {
-    render: args => Template(args),
-    args: {
-        link: 'https://google.com',
-    },
-};
-export const Disabled = {
-    render: args => Template(args),
-    args: {
-        disabled: true,
-    },
-};
-//# sourceMappingURL=stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-button/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-button';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nimport '../../kemet-icon/kemet-icon';\n\nconst meta: Meta = {\n  title: 'Components / Button',\n  component: 'kemet-button',\n  argTypes: {\n    variant: {\n      control: { type: 'select' },\n      options: ['standard', 'text', 'circle', 'rounded', 'pill'],\n    },\n    outlined: {\n      control: { type: 'boolean' },\n    },\n    iconLeft: {\n      control: { type: 'text' },\n    },\n    iconRight: {\n      control: { type: 'text' },\n    },\n    link: {\n      control: { type: 'text' },\n    },\n    disabled: {\n      control: { type: 'boolean' },\n    },\n  }\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = (args) => html`\n  <kemet-button variant=\"${ifDefined(args.variant)}\" ?outlined=${args.outlined} ?disabled=${args.disabled} link=${ifDefined(args.link !== '' ? args.link : undefined)}>\n    ${ifDefined(args.iconLeft !== '' && args.type !== 'circle' && args.iconLeft ? html`<kemet-icon slot=\"left\" icon=\"${args.iconLeft}\"></kemet-icon>` : undefined)}\n    ${args.variant === 'circle' ? html`<kemet-icon icon=\"gear\" size=\"24\"></kemet-icon>` : 'Button'}\n    ${ifDefined(args.iconRight !== '' && args.variant !== 'circle' && args.iconRight ? html`<kemet-icon slot=\"right\" icon=\"${args.iconRight}\"></kemet-icon>` : undefined)}\n  </kemet-button>\n`;\n\n\nexport const Standard: Story = {\n  render: args => Template(args),\n};\n\nexport const Text: Story = {\n  render: args => Template(args),\n  args: {\n    variant: 'text',\n  },\n};\n\nexport const Circle: Story = {\n  render: args => Template(args),\n  args: {\n    variant: 'circle',\n  },\n};\n\nexport const Rounded: Story = {\n  render: args => Template(args),\n  args: {\n    variant: 'rounded',\n  },\n};\n\nexport const Pill: Story = {\n  render: args => Template(args),\n  args: {\n    variant: 'pill',\n  },\n};\n\nexport const Outlined: Story = {\n  render: args => Template(args),\n  args: {\n    outlined: true,\n  },\n};\n\nexport const OutlinedRounded: Story = {\n  render: args => Template(args),\n  args: {\n    outlined: true,\n    variant: 'rounded',\n  },\n};\n\nexport const OutlinedPill: Story = {\n  render: args => Template(args),\n  args: {\n    outlined: true,\n    variant: 'pill',\n  },\n};\n\nexport const IconLeft: Story = {\n  render: args => Template(args),\n  args: {\n    iconLeft: 'chevron-left',\n  },\n};\n\nexport const IconRight: Story = {\n  render: args => Template(args),\n  args: {\n    iconRight: 'chevron-right',\n  },\n};\n\nexport const Link: Story = {\n  render: args => Template(args),\n  args: {\n    link: 'https://google.com',\n  },\n};\n\nexport const Disabled: Story = {\n  render: args => Template(args),\n  args: {\n    disabled: true,\n  },\n};\n"]}

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

@@ -1,89 +0,0 @@
-import { LitElement } from 'lit';
-import { TypeVariant } from './types';
-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.
- *
- */
-export default class KemetButton extends LitElement {
-    /** @internal */
-    formSubmitController: FormSubmitController;
-    static styles: import("lit").CSSResult[];
-    active: boolean;
-    hover: boolean;
-    focused: boolean;
-    link: string;
-    outlined: boolean;
-    disabled: boolean;
-    variant: TypeVariant;
-    constructor();
-    render(): import("lit-html").TemplateResult<1>;
-    /**
-     * Sets hover to true onMouseOver
-     * @private
-     */
-    handleMouseOver(): void;
-    /**
-     * Sets hover to false onMouseOut
-     * @private
-     */
-    handleMouseOut(): void;
-    /**
-     * Handles click behavior
-     * @private
-     */
-    handleClick(): void;
-    /**
-     * Handles blur
-     * @private
-     */
-    handleBlur(): void;
-    /**
-     * Handles keyup
-     * @private
-     * @param {object} event - event object
-     */
-    handleKeyUp(event: KeyboardEvent): void;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'kemet-button': KemetButton;
-    }
-}

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

@@ -1,155 +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() {
-        if (!this.disabled) {
-            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    if (!this.disabled) {\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  /**\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/spec.d.ts

@@ -1 +0,0 @@
-import './kemet-button';

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

@@ -1,49 +0,0 @@
-import { html, render } from 'lit';
-import { expect } from '@wdio/globals';
-import { Key } from 'webdriverio';
-import userEvent from '@testing-library/user-event';
-import './kemet-button';
-describe('Button', () => {
-    const templates = {
-        default: html `<kemet-button>Button Text</kemet-button>`,
-        disabled: html `<kemet-button disabled>Button Text</kemet-button>`,
-        focus: html `<input /><kemet-button>Button Text</kemet-button>`,
-        link: html `<kemet-button link="https://google.com">Button Text</kemet-button>`,
-    };
-    it('should be active when the button is clicked', async () => {
-        render(templates.default, document.body);
-        const kemetButton = document.querySelector('kemet-button');
-        await userEvent.click(kemetButton);
-        expect(kemetButton.active).toBe(true);
-    });
-    it('should not be active when disabled button is clicked', async () => {
-        render(templates.disabled, document.body);
-        const kemetButton = document.querySelector('kemet-button');
-        await userEvent.click(kemetButton);
-        expect(kemetButton.active).toBeFalsy();
-    });
-    it('should be focused when tabbed on', async () => {
-        render(templates.focus, document.body);
-        const kemetButton = document.querySelector('kemet-button');
-        const inputElement = document.querySelector('input');
-        await userEvent.type(inputElement, 'hack to get kemet-button to focus');
-        await browser.keys([Key.Tab]);
-        expect(kemetButton.focused).toBe(true);
-        await browser.keys([Key.Tab]); // browser is an web driver global
-        expect(kemetButton.focused).toBe(false);
-    });
-    it('should handle hovering', async () => {
-        render(templates.default, document.body);
-        const kemetButton = document.querySelector('kemet-button');
-        await userEvent.hover(kemetButton);
-        expect(kemetButton.hover).toBe(true);
-        await userEvent.unhover(kemetButton);
-        expect(kemetButton.hover).toBeFalsy();
-    });
-    it('should render a link when given an href', async () => {
-        render(templates.link, document.body);
-        const kemetButton = document.querySelector('kemet-button');
-        expect(kemetButton.link).toBe('https://google.com');
-    });
-});
-//# sourceMappingURL=spec.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"spec.js","sourceRoot":"","sources":["../../../src/components/kemet-button/spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, render } from 'lit';\nimport { expect } from '@wdio/globals';\nimport { Key } from 'webdriverio';\nimport userEvent from '@testing-library/user-event';\n\nimport './kemet-button';\n\ndescribe('Button', () => {\n  const templates = {\n    default: html`<kemet-button>Button Text</kemet-button>`,\n    disabled: html`<kemet-button disabled>Button Text</kemet-button>`,\n    focus: html`<input /><kemet-button>Button Text</kemet-button>`,\n    link: html`<kemet-button link=\"https://google.com\">Button Text</kemet-button>`,\n  };\n\n  it('should be active when the button is clicked', async () => {\n    render(templates.default, document.body);\n    const kemetButton = document.querySelector('kemet-button');\n    await userEvent.click(kemetButton);\n    expect(kemetButton.active).toBe(true);\n  });\n\n  it('should not be active when disabled button is clicked', async () => {\n    render(templates.disabled, document.body);\n    const kemetButton = document.querySelector('kemet-button');\n    await userEvent.click(kemetButton);\n    expect(kemetButton.active).toBeFalsy();\n  });\n\n  it('should be focused when tabbed on', async () => {\n    render(templates.focus, document.body);\n    const kemetButton = document.querySelector('kemet-button');\n    const inputElement = document.querySelector('input');\n\n    await userEvent.type(inputElement, 'hack to get kemet-button to focus');\n    await browser.keys([Key.Tab]);\n\n    expect(kemetButton.focused).toBe(true);\n    await browser.keys([Key.Tab]); // browser is an web driver global\n    expect(kemetButton.focused).toBe(false);\n  });\n\n  it('should handle hovering', async () => {\n    render(templates.default, document.body);\n    const kemetButton = document.querySelector('kemet-button');\n    await userEvent.hover(kemetButton);\n    expect(kemetButton.hover).toBe(true);\n    await userEvent.unhover(kemetButton);\n    expect(kemetButton.hover).toBeFalsy();\n  });\n\n  it('should render a link when given an href', async () => {\n    render(templates.link, document.body);\n    const kemetButton = document.querySelector('kemet-button');\n    expect(kemetButton.link).toBe('https://google.com');\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 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;
-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;