kemet-ui 1.4.0 → 2.0.0

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

@@ -0,0 +1,30 @@
+import { LitElement } from 'lit';
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-badge
+ * @summary Badges display the status of information.
+ *
+ * @prop {string} status - The status of the badge
+ * @prop {boolean} circle - Displays the badge in a circle
+ * @prop {boolean} pill - Rounds the corners on the badge
+ * @prop {number} circlePadding - Padding on the badge as a circle
+ *
+ * @cssproperty --kemet-badge-padding - The padding of the badge. Default: 10px.
+ *
+ */
+export default class KemetBadge extends LitElement {
+    static styles: import("lit").CSSResult[];
+    status: string;
+    circle: boolean;
+    pill: boolean;
+    circlePadding: number;
+    render(): import("lit-html").TemplateResult<1>;
+    handleSlotChange(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-badge': KemetBadge;
+    }
+}

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

@@ -1,5 +1,7 @@
-import { html, css, LitElement } from 'lit';
-
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { stylesBase } from './styles';
 /**
  * @since 1.0.0
  * @status stable
@@ -15,92 +17,39 @@ import { html, css, LitElement } from 'lit';
  * @cssproperty --kemet-badge-padding - The padding of the badge. Default: 10px.
  *
  */
-
-export default class KemetBadge extends LitElement {
-  static get styles() {
-    return [
-      css`
-        :host {
-          display: inline-flex;
-          align-items: center;
-          justify-content: center;
-          padding: var(--kemet-badge-padding, 10px);
-          line-height: 1;
-          color: var(--kemet-color-white);
-        }
-
-        :host([status='primary']) {
-          background-color: var(--kemet-color-primary);
-        }
-
-        :host([status='success']) {
-          background-color: var(--kemet-color-success);
-        }
-
-        :host([status='standard']) {
-          background-color: var(--kemet-color-gray6);
-        }
-
-        :host([status='warning']) {
-          background-color: var(--kemet-color-warning);
-        }
-
-        :host([status='error']) {
-          background-color: var(--kemet-color-error);
-        }
-
-        :host([circle]) {
-          border-radius: 50%;
-        }
-
-        :host([pill]) {
-          border-radius: 99rem;
+let KemetBadge = class KemetBadge extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.status = 'primary';
+        this.circle = false;
+        this.pill = false;
+        this.circlePadding = 0;
+    }
+    render() {
+        return html `<slot @slotchange=${() => this.handleSlotChange()}></slot>`;
+    }
+    handleSlotChange() {
+        if (this.circle) {
+            this.style.height = `${this.offsetWidth + this.circlePadding}px`;
+            this.style.width = `${this.offsetWidth + this.circlePadding}px`;
         }
-      `,
-    ];
-  }
-
-  static get properties() {
-    return {
-      status: {
-        type: String,
-        reflect: true,
-      },
-      circle: {
-        type: Boolean,
-        reflect: true,
-      },
-      pill: {
-        type: Boolean,
-        reflect: true,
-      },
-      circlePadding: {
-        type: Number,
-        attribute: 'circle-padding',
-      },
-    };
-  }
-
-  constructor() {
-    super();
-
-    this.status = 'primary';
-    this.pill = false;
-    this.circle = false;
-    this.circlePadding = 0;
-  }
-
-  render() {
-    return html`<slot @slotchange=${() => this.handleSlotChange()}></slot>`;
-  }
-
-  handleSlotChange() {
-    if (this.circle) {
-      this.style.height = `${this.offsetWidth + this.circlePadding}px`;
-      this.style.width = `${this.offsetWidth + this.circlePadding}px`;
     }
-  }
-}
-
-// eslint-disable-next-line no-unused-expressions
-customElements.get('kemet-badge') || customElements.define('kemet-badge', KemetBadge);
+};
+KemetBadge.styles = [stylesBase];
+__decorate([
+    property({ type: String, reflect: true })
+], KemetBadge.prototype, "status", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], KemetBadge.prototype, "circle", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], KemetBadge.prototype, "pill", void 0);
+__decorate([
+    property({ type: Number, attribute: 'circle-padding' })
+], KemetBadge.prototype, "circlePadding", void 0);
+KemetBadge = __decorate([
+    customElement('kemet-badge')
+], KemetBadge);
+export default KemetBadge;
+//# sourceMappingURL=kemet-badge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kemet-badge.js","sourceRoot":"","sources":["../../../src/components/kemet-badge/kemet-badge.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAO,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC;;;;;;;;;;;;;;GAcG;AAGH,IAAqB,UAAU,GAA/B,MAAqB,UAAW,SAAQ,UAAU;IAAlD;;QAIE,WAAM,GAAW,SAAS,CAAC;QAG3B,WAAM,GAAY,KAAK,CAAC;QAGxB,SAAI,GAAY,KAAK,CAAC;QAGtB,kBAAa,GAAW,CAAC,CAAC;IAY5B,CAAC;IAVC,MAAM;QACJ,OAAO,IAAI,CAAA,qBAAqB,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC;IAC1E,CAAC;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,aAAa,IAAI,CAAC;YACjE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,aAAa,IAAI,CAAC;SACjE;IACH,CAAC;CACF,CAAA;AAxBQ,iBAAM,GAAG,CAAC,UAAU,CAAC,CAAC;AAG7B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;0CACd;AAG3B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CACnB;AAGxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCACrB;AAGtB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;iDAC9B;AAbP,UAAU;IAD9B,aAAa,CAAC,aAAa,CAAC;GACR,UAAU,CAyB9B;eAzBoB,UAAU","sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { stylesBase } from './styles';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-badge\n * @summary Badges display the status of information.\n *\n * @prop {string} status - The status of the badge\n * @prop {boolean} circle - Displays the badge in a circle\n * @prop {boolean} pill - Rounds the corners on the badge\n * @prop {number} circlePadding - Padding on the badge as a circle\n *\n * @cssproperty --kemet-badge-padding - The padding of the badge. Default: 10px.\n *\n */\n\n@customElement('kemet-badge')\nexport default class KemetBadge extends LitElement {\n  static styles = [stylesBase];\n\n  @property({ type: String, reflect: true})\n  status: string = 'primary';\n\n  @property({ type: Boolean, reflect: true })\n  circle: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  pill: boolean = false;\n\n  @property({ type: Number, attribute: 'circle-padding' })\n  circlePadding: number = 0;\n\n  render() {\n    return html`<slot @slotchange=${() => this.handleSlotChange()}></slot>`;\n  }\n\n  handleSlotChange() {\n    if (this.circle) {\n      this.style.height = `${this.offsetWidth + this.circlePadding}px`;\n      this.style.width = `${this.offsetWidth + this.circlePadding}px`;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-badge': KemetBadge\n  }\n}\n"]}

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

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

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

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

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

@@ -0,0 +1 @@
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqC5B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesBase = css`\n  :host {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: var(--kemet-badge-padding, 10px);\n    line-height: 1;\n    color: var(--kemet-color-white);\n  }\n\n  :host([status='primary']) {\n    background-color: var(--kemet-color-primary);\n  }\n\n  :host([status='success']) {\n    background-color: var(--kemet-color-success);\n  }\n\n  :host([status='standard']) {\n    background-color: var(--kemet-color-gray6);\n  }\n\n  :host([status='warning']) {\n    background-color: var(--kemet-color-warning);\n  }\n\n  :host([status='error']) {\n    background-color: var(--kemet-color-error);\n  }\n\n  :host([circle]) {\n    border-radius: 50%;\n  }\n\n  :host([pill]) {\n    border-radius: 99rem;\n  }\n`;\n"]}

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

@@ -0,0 +1,6 @@
+export interface KemetBadge {
+    status: string;
+    circle: boolean;
+    pill: boolean;
+    circlePadding: number;
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/kemet-badge/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface KemetBadge {\n  status: string,\n  circle: boolean,\n  pill: boolean,\n  circlePadding: number,\n}\n"]}

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

@@ -0,0 +1,9 @@
+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';
+declare const meta: Meta;
+export default meta;
+declare type Story = StoryObj;
+export declare const Standard: Story;

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

@@ -0,0 +1,51 @@
+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';
+const meta = {
+    title: 'Components / Button',
+    component: 'kemet-button',
+};
+export default meta;
+const Template = ({ type = 'standard', outlined = false, iconLeft = '', iconRight = 'gear', link = '', disabled = false, }) => html `
+  <kemet-button type="${type}" ?outlined=${outlined} ?disabled=${disabled} link=${ifDefined(link !== '' ? link : undefined)}>
+    ${ifDefined(iconLeft !== '' && type !== 'circle' ? html `<kemet-icon slot="left" icon="${iconLeft}"></kemet-icon>` : undefined)}
+    ${type === 'circle' ? html `<kemet-icon icon="gear" size="24"></kemet-icon>` : 'Button'}
+    ${ifDefined(iconRight !== '' && type !== 'circle' ? html `<kemet-icon slot="right" icon="${iconRight}"></kemet-icon>` : undefined)}
+  </kemet-button>
+`;
+export const Standard = {
+    render: args => Template(args),
+    args: {
+        type: 'standard',
+        outlined: false,
+        iconLeft: '',
+        iconRight: 'gear',
+        link: '',
+        disabled: false,
+    },
+    argTypes: {
+        type: {
+            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' },
+        },
+    }
+};
+//# sourceMappingURL=stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-button/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAGzD,OAAO,iBAAiB,CAAC;AAEzB,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAE1C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,cAAc;CAC1B,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,EAChB,IAAI,GAAG,UAAU,EACjB,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,EAAE,EACb,SAAS,GAAG,MAAM,EAClB,IAAI,GAAG,EAAE,EACT,QAAQ,GAAG,KAAK,GACjB,EAAE,EAAE,CAAC,IAAI,CAAA;wBACc,IAAI,eAAe,QAAQ,cAAc,QAAQ,SAAS,SAAS,CAAC,IAAI,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC;MACrH,SAAS,CAAC,QAAQ,KAAK,EAAE,IAAI,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,iCAAiC,QAAQ,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC;MAC5H,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,iDAAiD,CAAC,CAAC,CAAC,QAAQ;MACpF,SAAS,CAAC,SAAS,KAAK,EAAE,IAAI,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,kCAAkC,SAAS,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC;;CAEpI,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC9B,IAAI,EAAE;QACJ,IAAI,EAAE,UAAU;QAChB,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,EAAE;QACZ,SAAS,EAAE,MAAM;QACjB,IAAI,EAAE,EAAE;QACR,QAAQ,EAAE,KAAK;KAChB;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,CAAC;SAC3D;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,SAAS,EAAE;YACT,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;KACF;CACF,CAAC","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\nconst meta: Meta = {\n  title: 'Components / Button',\n  component: 'kemet-button',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = ({\n  type = 'standard',\n  outlined = false,\n  iconLeft = '',\n  iconRight = 'gear',\n  link = '',\n  disabled = false,\n}) => html`\n  <kemet-button type=\"${type}\" ?outlined=${outlined} ?disabled=${disabled} link=${ifDefined(link !== '' ? link : undefined)}>\n    ${ifDefined(iconLeft !== '' && type !== 'circle' ? html`<kemet-icon slot=\"left\" icon=\"${iconLeft}\"></kemet-icon>` : undefined)}\n    ${type === 'circle' ? html`<kemet-icon icon=\"gear\" size=\"24\"></kemet-icon>` : 'Button'}\n    ${ifDefined(iconRight !== '' && type !== 'circle' ? html`<kemet-icon slot=\"right\" icon=\"${iconRight}\"></kemet-icon>` : undefined)}\n  </kemet-button>\n`;\n\nexport const Standard: Story = {\n  render: args => Template(args),\n  args: {\n    type: 'standard',\n    outlined: false,\n    iconLeft: '',\n    iconRight: 'gear',\n    link: '',\n    disabled: false,\n  },\n  argTypes: {\n    type: {\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};\n"]}

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

@@ -0,0 +1,89 @@
+import { LitElement } from 'lit';
+import { TypeType } 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 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.
+ *
+ */
+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;
+    type: TypeType;
+    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: any): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-button': KemetButton;
+    }
+}