kemet-ui 3.0.0 → 3.1.0

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

@@ -0,0 +1,69 @@
+import { html, render } from 'lit';
+import { expect } from '@wdio/globals';
+import userEvent from '@testing-library/user-event';
+import { fireEvent, waitFor } from '@testing-library/dom';
+import './kemet-textarea';
+import '../kemet-field/kemet-field';
+import '../kemet-count/kemet-count';
+describe('Textarea', () => {
+    const templates = {
+        default: html `
+      <kemet-field>
+        <kemet-textarea slot="input"></kemet-textarea>
+      </kemet-field>
+    `,
+        disabled: html `
+      <kemet-field>
+        <kemet-textarea disabled slot="input"></kemet-textarea>
+      </kemet-field>
+    `,
+        validateImmediately: html `
+      <kemet-field>
+        <kemet-textarea slot="input" required validate-on-blur></kemet-textarea>
+        <kemet-count slot="component" message="characters remaining." limit="6" validate-immediately></kemet-count>
+      </kemet-field>
+    `,
+    };
+    it('handles changes to the input properly', async () => {
+        render(templates.default, document.body);
+        const kemetTextarea = document.querySelector('kemet-textarea');
+        await waitFor(async () => {
+            const input = kemetTextarea.shadowRoot.querySelector('textarea');
+            // TODO figure out why useEvent is not generating code coverage
+            fireEvent.input(input, { target: { value: 'test' } });
+            fireEvent.change(input, { target: { value: 'test' } });
+            fireEvent.blur(input);
+            expect(kemetTextarea.status).toBe('standard');
+        });
+    });
+    it('focuses correctly', async () => {
+        render(templates.default, document.body);
+        const kemetTextarea = document.querySelector('kemet-textarea');
+        await waitFor(async () => {
+            kemetTextarea.focus();
+            fireEvent.focus(kemetTextarea.shadowRoot.querySelector('textarea'));
+            expect(kemetTextarea.hasFocus).toBe(true);
+        });
+    });
+    it('should not set a value when user types into a disabled field', async () => {
+        render(templates.disabled, document.body);
+        const kemetTextarea = document.querySelector('kemet-textarea');
+        await waitFor(async () => {
+            await userEvent.type(kemetTextarea.shadowRoot.querySelector('textarea'), 'random text');
+            await userEvent.click(document.body);
+            expect(kemetTextarea.value).toBeFalsy();
+        });
+    });
+    it('should error on blur when validate-on-blur is set and invalid value is entered', async () => {
+        render(templates.validateImmediately, document.body);
+        const kemetTextarea = document.querySelector('kemet-textarea');
+        await waitFor(async () => {
+            const input = kemetTextarea.shadowRoot.querySelector('textarea');
+            kemetTextarea.focus();
+            fireEvent.blur(input);
+            kemetTextarea.checkValidity();
+            expect(kemetTextarea.status).toBe('error');
+        });
+    });
+});
+//# sourceMappingURL=spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spec.js","sourceRoot":"","sources":["../../../src/components/kemet-textarea/spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, render } from 'lit';\nimport { expect } from '@wdio/globals';\nimport userEvent from '@testing-library/user-event';\nimport { fireEvent, waitFor } from '@testing-library/dom';\n\nimport './kemet-textarea';\nimport '../kemet-field/kemet-field';\nimport '../kemet-count/kemet-count';\n\ndescribe('Textarea', () => {\n  const templates = {\n    default: html`\n      <kemet-field>\n        <kemet-textarea slot=\"input\"></kemet-textarea>\n      </kemet-field>\n    `,\n    disabled: html`\n      <kemet-field>\n        <kemet-textarea disabled slot=\"input\"></kemet-textarea>\n      </kemet-field>\n    `,\n    validateImmediately: html`\n      <kemet-field>\n        <kemet-textarea slot=\"input\" required validate-on-blur></kemet-textarea>\n        <kemet-count slot=\"component\" message=\"characters remaining.\" limit=\"6\" validate-immediately></kemet-count>\n      </kemet-field>\n    `,\n  };\n\n  it('handles changes to the input properly', async () => {\n    render(templates.default, document.body);\n    const kemetTextarea = document.querySelector('kemet-textarea');\n\n    await waitFor(async () => {\n      const input = kemetTextarea.shadowRoot.querySelector('textarea');\n      // TODO figure out why useEvent is not generating code coverage\n      fireEvent.input(input, { target: { value: 'test' } });\n      fireEvent.change(input, { target: { value: 'test' } });\n      fireEvent.blur(input);\n      expect(kemetTextarea.status).toBe('standard');\n    });\n  });\n\n  it('focuses correctly', async () => {\n    render(templates.default, document.body);\n    const kemetTextarea = document.querySelector('kemet-textarea');\n\n    await waitFor(async () => {\n      kemetTextarea.focus();\n      fireEvent.focus(kemetTextarea.shadowRoot.querySelector('textarea'));\n      expect(kemetTextarea.hasFocus).toBe(true);\n    });\n  });\n\n  it('should not set a value when user types into a disabled field', async () => {\n    render(templates.disabled, document.body);\n    const kemetTextarea = document.querySelector('kemet-textarea');\n\n    await waitFor(async () => {\n      await userEvent.type(kemetTextarea.shadowRoot.querySelector('textarea'), 'random text');\n      await userEvent.click(document.body);\n      expect(kemetTextarea.value).toBeFalsy();\n    });\n  });\n\n  it('should error on blur when validate-on-blur is set and invalid value is entered', async () => {\n    render(templates.validateImmediately, document.body);\n    const kemetTextarea = document.querySelector('kemet-textarea');\n\n    await waitFor(async () => {\n      const input = kemetTextarea.shadowRoot.querySelector('textarea');\n      kemetTextarea.focus();\n      fireEvent.blur(input);\n      kemetTextarea.checkValidity();\n      expect(kemetTextarea.status).toBe('error');\n    });\n  });\n});\n"]}

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

@@ -1,4 +1,4 @@
-export declare type TypeStatus = 'standard' | 'error' | 'success' | 'warning';
+export type TypeStatus = 'standard' | 'error' | 'success' | 'warning';
 export interface KemetTextareaInterface extends HTMLElement {
     slug?: string;
     name?: string;

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

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import '../kemet-timer';
+import '../kemet-timer-display';
+import '../../kemet-tabs/kemet-tabs';
+import '../../kemet-tabs/kemet-tab';
+import '../../kemet-tabs/kemet-tab-panel';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Standard: Story;

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

@@ -0,0 +1,40 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import '../kemet-timer';
+import '../kemet-timer-display';
+import '../../kemet-tabs/kemet-tabs';
+import '../../kemet-tabs/kemet-tab';
+import '../../kemet-tabs/kemet-tab-panel';
+const meta = {
+    title: 'Components / Timer',
+    component: 'kemet-timer',
+    argTypes: {
+        format: {
+            control: { type: 'select' },
+            options: ['seconds', 'minutes', 'hours', 'days'],
+        },
+        amount: {
+            control: { type: 'number' },
+        },
+        expires: {
+            control: { type: 'text' },
+        },
+    },
+};
+export default meta;
+const Template = args => html `
+  <kemet-timer amount=${args.amount} format=${args.format} expires=${ifDefined(args.expires)}>
+    <kemet-timer-display format="seconds"></kemet-timer-display>&nbsp;Seconds&nbsp;:
+    <kemet-timer-display format="minutes"></kemet-timer-display>&nbsp;Minutes&nbsp;:
+    <kemet-timer-display format="hours"></kemet-timer-display>&nbsp;Hours&nbsp;:
+    <kemet-timer-display format="days"></kemet-timer-display>&nbsp;Days
+  </kemet-timer>
+`;
+export const Standard = {
+    render: args => Template(args),
+    args: {
+        amount: 2,
+        format: 'minutes',
+    },
+};
+//# sourceMappingURL=stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-timer/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAE3B,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,OAAO,gBAAgB,CAAC;AACxB,OAAO,wBAAwB,CAAC;AAEhC,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAE1C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,aAAa;IACxB,QAAQ,EAAE;QACR,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,CAAC;SACjD;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;QACD,OAAO,EAAE;YACP,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;KACF;CACF,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA;wBACL,IAAI,CAAC,MAAM,WAAW,IAAI,CAAC,MAAM,YAAY,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC;;;;;;CAM3F,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC9B,IAAI,EAAE;QACJ,MAAM,EAAE,CAAC;QACT,MAAM,EAAE,SAAS;KAClB;CACF,CAAC","sourcesContent":["import { html } from 'lit';\nimport type { Meta, StoryObj } from '@storybook/web-components';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport '../kemet-timer';\nimport '../kemet-timer-display';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n  title: 'Components / Timer',\n  component: 'kemet-timer',\n  argTypes: {\n    format: {\n      control: { type: 'select' },\n      options: ['seconds', 'minutes', 'hours', 'days'],\n    },\n    amount: {\n      control: { type: 'number' },\n    },\n    expires: {\n      control: { type: 'text' },\n    },\n  },\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = args => html`\n  <kemet-timer amount=${args.amount} format=${args.format} expires=${ifDefined(args.expires)}>\n    <kemet-timer-display format=\"seconds\"></kemet-timer-display>&nbsp;Seconds&nbsp;:\n    <kemet-timer-display format=\"minutes\"></kemet-timer-display>&nbsp;Minutes&nbsp;:\n    <kemet-timer-display format=\"hours\"></kemet-timer-display>&nbsp;Hours&nbsp;:\n    <kemet-timer-display format=\"days\"></kemet-timer-display>&nbsp;Days\n  </kemet-timer>\n`;\n\nexport const Standard: Story = {\n  render: args => Template(args),\n  args: {\n    amount: 2,\n    format: 'minutes',\n  },\n};\n"]}

package/dist/components/kemet-timer/kemet-timer-display.d.ts

@@ -0,0 +1,25 @@
+import { LitElement } from 'lit';
+import { TypeFormats } from './types';
+/**
+ * @since 3.1.0
+ * @status stable
+ *
+ * @tagname kemet-timer-display
+ * @summary Displays remaining time
+ *
+ * @prop {TypeFormats} format - The format to display the remaining time in
+ */
+export default class KemetTimerDisplay extends LitElement {
+    static styles: import("lit").CSSResult[];
+    format: TypeFormats;
+    displayTime: string;
+    constructor();
+    render(): import("lit-html").TemplateResult<1>;
+    getTime(): void;
+    getTimeInSeconds(time: any): any;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-timer-display': KemetTimerDisplay;
+    }
+}

package/dist/components/kemet-timer/kemet-timer-display.js

@@ -0,0 +1,65 @@
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { stylesDisplay } from './styles';
+/**
+ * @since 3.1.0
+ * @status stable
+ *
+ * @tagname kemet-timer-display
+ * @summary Displays remaining time
+ *
+ * @prop {TypeFormats} format - The format to display the remaining time in
+ */
+let KemetTimerDisplay = class KemetTimerDisplay extends LitElement {
+    constructor() {
+        super();
+        this.format = 'seconds';
+        this.getTime();
+    }
+    render() {
+        return html `${this.displayTime}`;
+    }
+    getTime() {
+        this.closest('kemet-timer').addEventListener('kemet-timer-increment', (event) => {
+            const secondsLeft = event.detail;
+            switch (this.format) {
+                case 'seconds':
+                    this.displayTime = (secondsLeft % 60 < 10 ? `0${secondsLeft % 60}` : secondsLeft % 60).toString();
+                    break;
+                case 'minutes':
+                    // eslint-disable-next-line no-mixed-operators
+                    this.displayTime = Math.floor((secondsLeft % 86400) % 3600 / 60).toString();
+                    break;
+                case 'hours':
+                    this.displayTime = Math.floor((secondsLeft % 86400) / 3600).toString();
+                    break;
+                case 'days':
+                    this.displayTime = Math.floor(secondsLeft / 86400).toString();
+                    break;
+                default:
+                    this.displayTime = (secondsLeft % 60 < 10 ? `0${secondsLeft % 60}` : secondsLeft % 60).toString();
+            }
+        });
+    }
+    getTimeInSeconds(time) {
+        switch (this.format) {
+            case 'minutes': return time * 60;
+            case 'hours': return time * 60 * 60;
+            case 'days': return time * 60 * 60 * 24;
+            default: return time;
+        }
+    }
+};
+KemetTimerDisplay.styles = [stylesDisplay];
+__decorate([
+    property({ type: String })
+], KemetTimerDisplay.prototype, "format", void 0);
+__decorate([
+    state()
+], KemetTimerDisplay.prototype, "displayTime", void 0);
+KemetTimerDisplay = __decorate([
+    customElement('kemet-timer-display')
+], KemetTimerDisplay);
+export default KemetTimerDisplay;
+//# sourceMappingURL=kemet-timer-display.js.map

package/dist/components/kemet-timer/kemet-timer-display.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kemet-timer-display.js","sourceRoot":"","sources":["../../../src/components/kemet-timer/kemet-timer-display.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAGzC;;;;;;;;GAQG;AAGY,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IASvD;QACE,KAAK,EAAE,CAAC;QANV,WAAM,GAAgB,SAAS,CAAC;QAO9B,IAAI,CAAC,OAAO,EAAE,CAAC;IACjB,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;IACnC,CAAC;IAED,OAAO;QACL,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,gBAAgB,CAAC,uBAAuB,EAAE,CAAC,KAAkB,EAAE,EAAE;YAC3F,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC;YACjC,QAAQ,IAAI,CAAC,MAAM,EAAE,CAAC;gBACpB,KAAK,SAAS;oBACZ,IAAI,CAAC,WAAW,GAAG,CAAC,WAAW,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,IAAI,WAAW,GAAG,EAAE,EAAE,CAAC,CAAC,CAAC,WAAW,GAAG,EAAE,CAAC,CAAC,QAAQ,EAAE,CAAC;oBAClG,MAAM;gBACR,KAAK,SAAS;oBACZ,8CAA8C;oBAC9C,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,WAAW,GAAG,KAAK,CAAC,GAAG,IAAI,GAAG,EAAE,CAAC,CAAC,QAAQ,EAAE,CAAC;oBAC5E,MAAM;gBACR,KAAK,OAAO;oBACV,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,WAAW,GAAG,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC,QAAQ,EAAE,CAAC;oBACvE,MAAM;gBACR,KAAK,MAAM;oBACT,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,GAAG,KAAK,CAAC,CAAC,QAAQ,EAAE,CAAC;oBAC9D,MAAM;gBACR;oBACE,IAAI,CAAC,WAAW,GAAG,CAAC,WAAW,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,IAAI,WAAW,GAAG,EAAE,EAAE,CAAC,CAAC,CAAC,WAAW,GAAG,EAAE,CAAC,CAAC,QAAQ,EAAE,CAAC;YACtG,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED,gBAAgB,CAAC,IAAI;QACnB,QAAQ,IAAI,CAAC,MAAM,EAAE,CAAC;YACpB,KAAK,SAAS,CAAC,CAAC,OAAO,IAAI,GAAG,EAAE,CAAC;YACjC,KAAK,OAAO,CAAC,CAAC,OAAO,IAAI,GAAG,EAAE,GAAG,EAAE,CAAC;YACpC,KAAK,MAAM,CAAC,CAAC,OAAO,IAAI,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;YACxC,OAAO,CAAC,CAAC,OAAO,IAAI,CAAC;QACvB,CAAC;IACH,CAAC;;AA/CM,wBAAM,GAAG,CAAC,aAAa,CAAC,AAAlB,CAAmB;AAGhC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDACK;AAGhC;IADC,KAAK,EAAE;sDACY;AAPD,iBAAiB;IADrC,aAAa,CAAC,qBAAqB,CAAC;GAChB,iBAAiB,CAiDrC;eAjDoB,iBAAiB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { stylesDisplay } from './styles';\nimport { TypeFormats } from './types';\n\n/**\n * @since 3.1.0\n * @status stable\n *\n * @tagname kemet-timer-display\n * @summary Displays remaining time\n *\n * @prop {TypeFormats} format - The format to display the remaining time in\n */\n\n@customElement('kemet-timer-display')\nexport default class KemetTimerDisplay extends LitElement {\n  static styles = [stylesDisplay];\n\n  @property({ type: String })\n  format: TypeFormats = 'seconds';\n\n  @state()\n  displayTime: string;\n\n  constructor() {\n    super();\n    this.getTime();\n  }\n\n  render() {\n    return html`${this.displayTime}`;\n  }\n\n  getTime() {\n    this.closest('kemet-timer').addEventListener('kemet-timer-increment', (event: CustomEvent) => {\n      const secondsLeft = event.detail;\n      switch (this.format) {\n        case 'seconds':\n          this.displayTime = (secondsLeft % 60 < 10 ? `0${secondsLeft % 60}` : secondsLeft % 60).toString();\n          break;\n        case 'minutes':\n          // eslint-disable-next-line no-mixed-operators\n          this.displayTime = Math.floor((secondsLeft % 86400) % 3600 / 60).toString();\n          break;\n        case 'hours':\n          this.displayTime = Math.floor((secondsLeft % 86400) / 3600).toString();\n          break;\n        case 'days':\n          this.displayTime = Math.floor(secondsLeft / 86400).toString();\n          break;\n        default:\n          this.displayTime = (secondsLeft % 60 < 10 ? `0${secondsLeft % 60}` : secondsLeft % 60).toString();\n      }\n    });\n  }\n\n  getTimeInSeconds(time) {\n    switch (this.format) {\n      case 'minutes': return time * 60;\n      case 'hours': return time * 60 * 60;\n      case 'days': return time * 60 * 60 * 24;\n      default: return time;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-timer-display': KemetTimerDisplay\n  }\n}\n"]}

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

@@ -0,0 +1,36 @@
+import { LitElement } from 'lit';
+import { TypeFormats } from './types';
+/**
+ * @since 3.1.0
+ * @status stable
+ *
+ * @tagname kemet-timer
+ * @summary Counts down from a specified amount of time or date.
+ *
+ * @prop {string} format - The format of the amount property
+ * @prop {number} amount - The amount of time to set the timer
+ * @prop {string} expires - Begins a count down to a specified time, accepts a string that matches value given for a Date constructor
+ *
+ * @event kemet-timer-completed - Fires when the timer reaches 0
+ * @event kemet-timer-increment - Fires on tick of the timer
+ *
+ */
+export default class KemetTimer extends LitElement {
+    static styles: import("lit").CSSResult[];
+    format: TypeFormats;
+    amount: number;
+    expires: string;
+    /** @internal */
+    interval: any;
+    firstUpdated(): void;
+    updated(prevProps: any): void;
+    render(): import("lit-html").TemplateResult<1>;
+    getTimeInSeconds(time: any): any;
+    timer(seconds?: number): void;
+    countDown(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-timer': KemetTimer;
+    }
+}

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

@@ -0,0 +1,103 @@
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { stylesBase } from './styles';
+import { emitEvent } from '../../utilities/misc/events';
+/**
+ * @since 3.1.0
+ * @status stable
+ *
+ * @tagname kemet-timer
+ * @summary Counts down from a specified amount of time or date.
+ *
+ * @prop {string} format - The format of the amount property
+ * @prop {number} amount - The amount of time to set the timer
+ * @prop {string} expires - Begins a count down to a specified time, accepts a string that matches value given for a Date constructor
+ *
+ * @event kemet-timer-completed - Fires when the timer reaches 0
+ * @event kemet-timer-increment - Fires on tick of the timer
+ *
+ */
+let KemetTimer = class KemetTimer extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.format = 'seconds';
+        this.amount = 10;
+    }
+    firstUpdated() {
+        if (this.expires) {
+            this.countDown();
+        }
+        else {
+            this.timer(this.getTimeInSeconds(this.amount));
+        }
+        emitEvent(this, 'kemet-timer-started', true);
+        emitEvent(this, 'kemet-timer-increment', this.getTimeInSeconds(this.amount));
+    }
+    updated(prevProps) {
+        const hasFormatOrAmountChanged = prevProps.get('format') || prevProps.get('amount');
+        const hasExpiredChanged = prevProps.get('expires');
+        if (hasFormatOrAmountChanged) {
+            clearInterval(this.interval);
+            this.timer(this.getTimeInSeconds(this.amount));
+        }
+        if (hasExpiredChanged) {
+            clearInterval(this.interval);
+            this.countDown();
+        }
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+    getTimeInSeconds(time) {
+        switch (this.format) {
+            case 'minutes': return time * 60;
+            case 'hours': return time * 60 * 60;
+            case 'days': return time * 60 * 60 * 24;
+            default: return time;
+        }
+    }
+    timer(seconds = 0) {
+        const now = Date.now();
+        const then = now + seconds * 1000;
+        this.interval = setInterval(() => {
+            const secondsLeft = Math.round((then - Date.now()) / 1000);
+            if (secondsLeft < 0) {
+                clearInterval(this.interval);
+                emitEvent(this, 'kemet-timer-completed', true);
+                return;
+            }
+            emitEvent(this, 'kemet-timer-increment', secondsLeft);
+        }, 1000);
+    }
+    countDown() {
+        const expires = new Date(this.expires).getTime();
+        this.interval = setInterval(() => {
+            const secondsLeft = Math.round((expires - Date.now()) / 1000);
+            if (secondsLeft < 0) {
+                clearInterval(this.interval);
+                emitEvent(this, 'kemet-timer-completed', true);
+                return;
+            }
+            emitEvent(this, 'kemet-timer-increment', secondsLeft);
+        }, 1000);
+    }
+};
+KemetTimer.styles = [stylesBase];
+__decorate([
+    property({ type: String })
+], KemetTimer.prototype, "format", void 0);
+__decorate([
+    property({ type: Number })
+], KemetTimer.prototype, "amount", void 0);
+__decorate([
+    property({ type: String })
+], KemetTimer.prototype, "expires", void 0);
+__decorate([
+    state()
+], KemetTimer.prototype, "interval", void 0);
+KemetTimer = __decorate([
+    customElement('kemet-timer')
+], KemetTimer);
+export default KemetTimer;
+//# sourceMappingURL=kemet-timer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kemet-timer.js","sourceRoot":"","sources":["../../../src/components/kemet-timer/kemet-timer.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { stylesBase } from './styles';\nimport { TypeFormats } from './types';\nimport { emitEvent } from '../../utilities/misc/events';\n\n/**\n * @since 3.1.0\n * @status stable\n *\n * @tagname kemet-timer\n * @summary Counts down from a specified amount of time or date.\n *\n * @prop {string} format - The format of the amount property\n * @prop {number} amount - The amount of time to set the timer\n * @prop {string} expires - Begins a count down to a specified time, accepts a string that matches value given for a Date constructor\n *\n * @event kemet-timer-completed - Fires when the timer reaches 0\n * @event kemet-timer-increment - Fires on tick of the timer\n *\n */\n\n@customElement('kemet-timer')\nexport default class KemetTimer extends LitElement {\n  static styles = [stylesBase];\n\n  @property({ type: String })\n  format: TypeFormats = 'seconds';\n\n  @property({ type: Number })\n  amount: number = 10;\n\n  @property({ type: String })\n  expires: string;\n\n  /** @internal */\n  @state()\n  interval;\n\n  firstUpdated() {\n    if (this.expires) {\n      this.countDown();\n    } else {\n      this.timer(this.getTimeInSeconds(this.amount));\n    }\n\n    emitEvent(this, 'kemet-timer-started', true);\n    emitEvent(this, 'kemet-timer-increment', this.getTimeInSeconds(this.amount));\n  }\n\n  updated(prevProps) {\n    const hasFormatOrAmountChanged = prevProps.get('format') || prevProps.get('amount');\n    const hasExpiredChanged = prevProps.get('expires');\n\n    if (hasFormatOrAmountChanged) {\n      clearInterval(this.interval);\n      this.timer(this.getTimeInSeconds(this.amount));\n    }\n\n    if (hasExpiredChanged) {\n      clearInterval(this.interval);\n      this.countDown();\n    }\n  }\n\n  render() {\n    return html`<slot></slot>`;\n  }\n\n  getTimeInSeconds(time) {\n    switch (this.format) {\n      case 'minutes': return time * 60;\n      case 'hours': return time * 60 * 60;\n      case 'days': return time * 60 * 60 * 24;\n      default: return time;\n    }\n  }\n\n  timer(seconds: number = 0) {\n    const now = Date.now();\n    const then = now + seconds * 1000;\n\n    this.interval = setInterval(() => {\n      const secondsLeft = Math.round((then - Date.now()) / 1000);\n\n      if (secondsLeft < 0) {\n        clearInterval(this.interval);\n        emitEvent(this, 'kemet-timer-completed', true);\n        return;\n      }\n\n      emitEvent(this, 'kemet-timer-increment', secondsLeft);\n    }, 1000);\n  }\n\n  countDown() {\n    const expires = new Date(this.expires).getTime();\n\n    this.interval = setInterval(() => {\n      const secondsLeft = Math.round((expires - Date.now()) / 1000);\n\n      if (secondsLeft < 0) {\n        clearInterval(this.interval);\n        emitEvent(this, 'kemet-timer-completed', true);\n        return;\n      }\n\n      emitEvent(this, 'kemet-timer-increment', secondsLeft);\n    }, 1000);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-timer': KemetTimer\n  }\n}\n"]}

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

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

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

@@ -0,0 +1,12 @@
+import { css } from 'lit';
+export const stylesBase = css `
+  :host {
+    display: block;
+  }
+`;
+export const stylesDisplay = css `
+  :host {
+    display: inline-block;
+  }
+`;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-timer/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;CAI5B,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;;;CAI/B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesBase = css`\n  :host {\n    display: block;\n  }\n`;\n\nexport const stylesDisplay = css`\n  :host {\n    display: inline-block;\n  }\n`;\n"]}

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

@@ -0,0 +1 @@
+export type TypeFormats = 'seconds' | 'minutes' | 'hours' | 'days';

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/kemet-timer/types.ts"],"names":[],"mappings":"","sourcesContent":["export type TypeFormats = 'seconds' | 'minutes' | 'hours' | 'days';\n"]}

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

@@ -5,7 +5,7 @@ import '../../kemet-tabs/kemet-tab';
 import '../../kemet-tabs/kemet-tab-panel';
 declare const meta: Meta;
 export default meta;
-declare type Story = StoryObj;
+type Story = StoryObj;
 export declare const Standard: Story;
 export declare const Squared: Story;
 export declare const ShowOptions: Story;

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

@@ -8,10 +8,10 @@ import { FormSubmitController } from '../../utilities/controllers/forms';
  * @summary A toggle switch for forms.
  *
  * @prop {string} name - The name on the input field
- * @prop {boolean} checked - Determines whether or not the toggle is checked
- * @prop {boolean} disabled - Determines whether or not the toggle is disabled
+ * @prop {boolean} checked - Determines whether the toggle is checked
+ * @prop {boolean} disabled - Determines whether the toggle is disabled
  * @prop {string} label - A description of the toggle's purpose
- * @prop {boolean} show - Determines whether or not to show text options
+ * @prop {boolean} show - Determines whether to show text options
  * @prop {boolean} squared - Displays the toggle as squared instead of rounded
  * @prop {string} optionChecked - The checked option text
  * @prop {string} optionUnchecked - The unchecked option text

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

@@ -12,10 +12,10 @@ import { stylesToggle } from './styles';
  * @summary A toggle switch for forms.
  *
  * @prop {string} name - The name on the input field
- * @prop {boolean} checked - Determines whether or not the toggle is checked
- * @prop {boolean} disabled - Determines whether or not the toggle is disabled
+ * @prop {boolean} checked - Determines whether the toggle is checked
+ * @prop {boolean} disabled - Determines whether the toggle is disabled
  * @prop {string} label - A description of the toggle's purpose
- * @prop {boolean} show - Determines whether or not to show text options
+ * @prop {boolean} show - Determines whether to show text options
  * @prop {boolean} squared - Displays the toggle as squared instead of rounded
  * @prop {string} optionChecked - The checked option text
  * @prop {string} optionUnchecked - The unchecked option text

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

@@ -1 +1 @@
-{"version":3,"file":"kemet-toggle.js","sourceRoot":"","sources":["../../../src/components/kemet-toggle/kemet-toggle.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAO,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACzE,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAGH,IAAqB,WAAW,GAAhC,MAAqB,WAAY,SAAQ,UAAU;IAgCjD;QACE,KAAK,EAAE,CAAC;QA3BV,SAAI,GAAW,eAAe,CAAC;QAG/B,YAAO,GAAY,KAAK,CAAC;QAGzB,aAAQ,GAAY,KAAK,CAAC;QAG1B,UAAK,GAAW,EAAE,CAAC;QAGnB,SAAI,GAAY,KAAK,CAAC;QAGtB,YAAO,GAAY,KAAK,CAAC;QAGzB,kBAAa,GAAW,IAAI,CAAC;QAG7B,oBAAe,GAAW,KAAK,CAAC;QAGhC,UAAK,GAAqB,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC;QAKjF,gBAAgB;QAChB,IAAI,CAAC,oBAAoB,GAAG,IAAI,oBAAoB,CAAC,IAAI,CAAC,CAAC;IAC7D,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,mBAAmB,EAAE;;;;;;;;kBAQlB,IAAI,CAAC,IAAI;wBACH,IAAI,CAAC,KAAK;yBACT,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;sBAClC,IAAI,CAAC,QAAQ;qBACd,IAAI,CAAC,OAAO;oBACb,IAAI,CAAC,YAAY;;UAE3B,IAAI,CAAC,iBAAiB,EAAE;4BACN,IAAI,CAAC,KAAK;;KAEjC,CAAC;IACJ,CAAC;IAED,YAAY;QACV,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC;QACtE,SAAS,CAAC,IAAI,EAAE,qBAAqB,EAAE,IAAI,CAAC,CAAC;IAC/C,CAAC;IAED,mBAAmB;QACjB,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,OAAO,IAAI,CAAA,yCAAyC,IAAI,CAAC,eAAe,SAAS,CAAC;SACnF;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,OAAO,IAAI,CAAA,uCAAuC,IAAI,CAAC,aAAa,SAAS,CAAC;SAC/E;QAED,OAAO,IAAI,CAAC;IACd,CAAC;CACF,CAAA;AAjFQ,kBAAM,GAAG,CAAC,YAAY,CAAC,CAAC;AAG/B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCACI;AAG/B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAClB;AAGzB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CACF;AAG1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACR;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yCACN;AAGtB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CACH;AAGzB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;kDAC3B;AAG7B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;oDAC1B;AAGhC;IADC,KAAK,EAAE;0CAC2E;AA9BhE,WAAW;IAD/B,aAAa,CAAC,cAAc,CAAC;GACT,WAAW,CAoF/B;eApFoB,WAAW","sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { FormSubmitController } from '../../utilities/controllers/forms';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { stylesToggle } from './styles';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-toggle\n * @summary A toggle switch for forms.\n *\n * @prop {string} name - The name on the input field\n * @prop {boolean} checked - Determines whether or not the toggle is checked\n * @prop {boolean} disabled - Determines whether or not the toggle is disabled\n * @prop {string} label - A description of the toggle's purpose\n * @prop {boolean} show - Determines whether or not to show text options\n * @prop {boolean} squared - Displays the toggle as squared instead of rounded\n * @prop {string} optionChecked - The checked option text\n * @prop {string} optionUnchecked - The unchecked option text\n *\n * @csspart label - The label element.\n * @csspart control - The control element.\n * @csspart text - The label text.\n * @csspart checked - The checked text.\n * @csspart unchecked - The unchecked text.\n *\n * @cssproperty --kemet-toggle-width - The width of the entire toggle.\n * @cssproperty --kemet-toggle-height - The height of the entire toggle.\n * @cssproperty --kemet-toggle-handle-diameter - The diameter of the handle.\n * @cssproperty --kemet-toggle-track-border - The border of the track.\n * @cssproperty --kemet-toggle-track-color - The color of the track.\n * @cssproperty --kemet-toggle-track-shadow - The shadow on the track.\n * @cssproperty --kemet-toggle-handle-border - The border on the handle.\n * @cssproperty --kemet-toggle-handle-color - The color of the handle.\n * @cssproperty --kemet-toggle-handle-shadow - The shadow on the handle.\n *\n * @event kemet-toggle-change - Fires when the toggle changes state\n *\n */\n\n@customElement('kemet-toggle')\nexport default class KemetToggle extends LitElement {\n  formSubmitController: FormSubmitController;\n\n  static styles = [stylesToggle];\n\n  @property({ type: String })\n  name: string = 'toggle-switch';\n\n  @property({ type: Boolean, reflect: true })\n  checked: boolean = false;\n\n  @property({ type: Boolean })\n  disabled: boolean = false;\n\n  @property({ type: String })\n  label: string = '';\n\n  @property({ type: Boolean })\n  show: boolean = false;\n\n  @property({ type: Boolean })\n  squared: boolean = false;\n\n  @property({ type: String, attribute: 'option-checked' })\n  optionChecked: string = 'on';\n\n  @property({ type: String, attribute: 'option-unchecked' })\n  optionUnchecked: string = 'off';\n\n  @state()\n  value: string | boolean = this.checked ? this.optionChecked : this.optionUnchecked;\n\n  constructor() {\n    super();\n\n    /** @internal */\n    this.formSubmitController = new FormSubmitController(this);\n  }\n\n  render() {\n    return html`\n      <label part=\"label\">\n        ${this.makeUncheckedOption()}\n        <span part=\"control\">\n          <span part=\"track\"></span>\n          <span part=\"handle\"></span>\n        </span>\n        <input\n          role=\"switch\"\n          type=\"checkbox\"\n          name=\"${this.name}\"\n          aria-label=\"${this.label}\"\n          aria-checked=${this.checked ? 'true' : 'false'}\n          ?disabled=${this.disabled}\n          ?checked=${this.checked}\n          @change=${this.handleChange}\n        />\n        ${this.makeCheckedOption()}\n        <span part=\"text\">${this.label}</span>\n      </label>\n    `;\n  }\n\n  handleChange() {\n    this.checked = !this.checked;\n    this.value = this.checked ? this.optionChecked : this.optionUnchecked;\n    emitEvent(this, 'kemet-toggle-change', true);\n  }\n\n  makeUncheckedOption() {\n    if (this.show) {\n      return html`<span class=\"option\" part=\"unchecked\">${this.optionUnchecked}</span>`;\n    }\n\n    return null;\n  }\n\n  makeCheckedOption() {\n    if (this.show) {\n      return html`<span class=\"option\" part=\"checked\">${this.optionChecked}</span>`;\n    }\n\n    return null;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-toggle': KemetToggle\n  }\n}\n"]}
+{"version":3,"file":"kemet-toggle.js","sourceRoot":"","sources":["../../../src/components/kemet-toggle/kemet-toggle.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { FormSubmitController } from '../../utilities/controllers/forms';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { stylesToggle } from './styles';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-toggle\n * @summary A toggle switch for forms.\n *\n * @prop {string} name - The name on the input field\n * @prop {boolean} checked - Determines whether the toggle is checked\n * @prop {boolean} disabled - Determines whether the toggle is disabled\n * @prop {string} label - A description of the toggle's purpose\n * @prop {boolean} show - Determines whether to show text options\n * @prop {boolean} squared - Displays the toggle as squared instead of rounded\n * @prop {string} optionChecked - The checked option text\n * @prop {string} optionUnchecked - The unchecked option text\n *\n * @csspart label - The label element.\n * @csspart control - The control element.\n * @csspart text - The label text.\n * @csspart checked - The checked text.\n * @csspart unchecked - The unchecked text.\n *\n * @cssproperty --kemet-toggle-width - The width of the entire toggle.\n * @cssproperty --kemet-toggle-height - The height of the entire toggle.\n * @cssproperty --kemet-toggle-handle-diameter - The diameter of the handle.\n * @cssproperty --kemet-toggle-track-border - The border of the track.\n * @cssproperty --kemet-toggle-track-color - The color of the track.\n * @cssproperty --kemet-toggle-track-shadow - The shadow on the track.\n * @cssproperty --kemet-toggle-handle-border - The border on the handle.\n * @cssproperty --kemet-toggle-handle-color - The color of the handle.\n * @cssproperty --kemet-toggle-handle-shadow - The shadow on the handle.\n *\n * @event kemet-toggle-change - Fires when the toggle changes state\n *\n */\n\n@customElement('kemet-toggle')\nexport default class KemetToggle extends LitElement {\n  formSubmitController: FormSubmitController;\n\n  static styles = [stylesToggle];\n\n  @property({ type: String })\n  name: string = 'toggle-switch';\n\n  @property({ type: Boolean, reflect: true })\n  checked: boolean = false;\n\n  @property({ type: Boolean })\n  disabled: boolean = false;\n\n  @property({ type: String })\n  label: string = '';\n\n  @property({ type: Boolean })\n  show: boolean = false;\n\n  @property({ type: Boolean })\n  squared: boolean = false;\n\n  @property({ type: String, attribute: 'option-checked' })\n  optionChecked: string = 'on';\n\n  @property({ type: String, attribute: 'option-unchecked' })\n  optionUnchecked: string = 'off';\n\n  @state()\n  value: string | boolean = this.checked ? this.optionChecked : this.optionUnchecked;\n\n  constructor() {\n    super();\n\n    /** @internal */\n    this.formSubmitController = new FormSubmitController(this);\n  }\n\n  render() {\n    return html`\n      <label part=\"label\">\n        ${this.makeUncheckedOption()}\n        <span part=\"control\">\n          <span part=\"track\"></span>\n          <span part=\"handle\"></span>\n        </span>\n        <input\n          role=\"switch\"\n          type=\"checkbox\"\n          name=\"${this.name}\"\n          aria-label=\"${this.label}\"\n          aria-checked=${this.checked ? 'true' : 'false'}\n          ?disabled=${this.disabled}\n          ?checked=${this.checked}\n          @change=${this.handleChange}\n        />\n        ${this.makeCheckedOption()}\n        <span part=\"text\">${this.label}</span>\n      </label>\n    `;\n  }\n\n  handleChange() {\n    this.checked = !this.checked;\n    this.value = this.checked ? this.optionChecked : this.optionUnchecked;\n    emitEvent(this, 'kemet-toggle-change', true);\n  }\n\n  makeUncheckedOption() {\n    if (this.show) {\n      return html`<span class=\"option\" part=\"unchecked\">${this.optionUnchecked}</span>`;\n    }\n\n    return null;\n  }\n\n  makeCheckedOption() {\n    if (this.show) {\n      return html`<span class=\"option\" part=\"checked\">${this.optionChecked}</span>`;\n    }\n\n    return null;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-toggle': KemetToggle\n  }\n}\n"]}

package/dist/components/kemet-toggle/spec.d.ts

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

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

@@ -0,0 +1,46 @@
+import { html, render } from 'lit';
+import { expect } from '@wdio/globals';
+import { userEvent } from '@testing-library/user-event';
+import { fireEvent, getByText, waitFor } from '@testing-library/dom';
+import './kemet-toggle';
+const templates = {
+    default: html `<kemet-toggle label="Label"></kemet-toggle>`,
+    checked: html `<kemet-toggle checked label="Label"></kemet-toggle>`,
+    showOptions: html `<kemet-toggle label="Label" show option-unchecked="No" option-checked="Yes"></kemet-toggle>`,
+};
+describe('Toggle', () => {
+    it('should toggle the switch when clicked', async () => {
+        render(templates.default, document.body);
+        const toggle = document.querySelector('kemet-toggle');
+        await waitFor(async () => {
+            const label = toggle.shadowRoot.querySelector('label');
+            const input = toggle.shadowRoot.querySelector('input');
+            await userEvent.click(label);
+            expect(toggle.checked).toBe(true);
+            fireEvent.blur(input);
+        });
+    });
+    it('should toggle the switch when clicked and initially checked', async () => {
+        render(templates.checked, document.body);
+        const toggle = document.querySelector('kemet-toggle');
+        await waitFor(async () => {
+            const label = toggle.shadowRoot.querySelector('label');
+            const input = toggle.shadowRoot.querySelector('input');
+            await userEvent.click(label);
+            expect(toggle.checked).toBe(false);
+            fireEvent.blur(input);
+        });
+    });
+    it('should show option labels', async () => {
+        render(templates.showOptions, document.body);
+        const kemetToggle = document.querySelector('kemet-toggle');
+        await waitFor(() => {
+            const label = kemetToggle.shadowRoot.querySelector('label');
+            const checkedText = getByText(label, 'Yes');
+            const uncheckedText = getByText(label, 'No');
+            expect(checkedText).toBeTruthy();
+            expect(uncheckedText).toBeTruthy();
+        });
+    });
+});
+//# sourceMappingURL=spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spec.js","sourceRoot":"","sources":["../../../src/components/kemet-toggle/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,6BAA6B,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAErE,OAAO,gBAAgB,CAAC;AAExB,MAAM,SAAS,GAAG;IAChB,OAAO,EAAE,IAAI,CAAA,6CAA6C;IAC1D,OAAO,EAAE,IAAI,CAAA,qDAAqD;IAClE,WAAW,EAAE,IAAI,CAAA,6FAA6F;CAC/G,CAAC;AAEF,QAAQ,CAAC,QAAQ,EAAE,GAAG,EAAE;IACtB,EAAE,CAAC,uCAAuC,EAAE,KAAK,IAAI,EAAE;QACrD,MAAM,CAAC,SAAS,CAAC,OAAO,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;QACzC,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;QAEtD,MAAM,OAAO,CAAC,KAAK,IAAI,EAAE;YACvB,MAAM,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YACvD,MAAM,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YACvD,MAAM,SAAS,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;YAC7B,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAClC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACxB,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6DAA6D,EAAE,KAAK,IAAI,EAAE;QAC3E,MAAM,CAAC,SAAS,CAAC,OAAO,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;QACzC,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;QAEtD,MAAM,OAAO,CAAC,KAAK,IAAI,EAAE;YACvB,MAAM,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YACvD,MAAM,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YACvD,MAAM,SAAS,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;YAC7B,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACnC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACxB,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2BAA2B,EAAE,KAAK,IAAI,EAAE;QACzC,MAAM,CAAC,SAAS,CAAC,WAAW,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;QAC7C,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;QAE3D,MAAM,OAAO,CAAC,GAAG,EAAE;YACjB,MAAM,KAAK,GAAG,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YAC5D,MAAM,WAAW,GAAG,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;YAC5C,MAAM,aAAa,GAAG,SAAS,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;YAC7C,MAAM,CAAC,WAAW,CAAC,CAAC,UAAU,EAAE,CAAC;YACjC,MAAM,CAAC,aAAa,CAAC,CAAC,UAAU,EAAE,CAAC;QACrC,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { html, render } from 'lit';\nimport { expect } from '@wdio/globals';\nimport { userEvent } from '@testing-library/user-event';\nimport { fireEvent, getByText, waitFor } from '@testing-library/dom';\n\nimport './kemet-toggle';\n\nconst templates = {\n  default: html`<kemet-toggle label=\"Label\"></kemet-toggle>`,\n  checked: html`<kemet-toggle checked label=\"Label\"></kemet-toggle>`,\n  showOptions: html`<kemet-toggle label=\"Label\" show option-unchecked=\"No\" option-checked=\"Yes\"></kemet-toggle>`,\n};\n\ndescribe('Toggle', () => {\n  it('should toggle the switch when clicked', async () => {\n    render(templates.default, document.body);\n    const toggle = document.querySelector('kemet-toggle');\n\n    await waitFor(async () => {\n      const label = toggle.shadowRoot.querySelector('label');\n      const input = toggle.shadowRoot.querySelector('input');\n      await userEvent.click(label);\n      expect(toggle.checked).toBe(true);\n      fireEvent.blur(input);\n    });\n  });\n\n  it('should toggle the switch when clicked and initially checked', async () => {\n    render(templates.checked, document.body);\n    const toggle = document.querySelector('kemet-toggle');\n\n    await waitFor(async () => {\n      const label = toggle.shadowRoot.querySelector('label');\n      const input = toggle.shadowRoot.querySelector('input');\n      await userEvent.click(label);\n      expect(toggle.checked).toBe(false);\n      fireEvent.blur(input);\n    });\n  });\n\n  it('should show option labels', async () => {\n    render(templates.showOptions, document.body);\n    const kemetToggle = document.querySelector('kemet-toggle');\n\n    await waitFor(() => {\n      const label = kemetToggle.shadowRoot.querySelector('label');\n      const checkedText = getByText(label, 'Yes');\n      const uncheckedText = getByText(label, 'No');\n      expect(checkedText).toBeTruthy();\n      expect(uncheckedText).toBeTruthy();\n    });\n  });\n});\n"]}

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

@@ -6,7 +6,7 @@ import '../../kemet-tabs/kemet-tab';
 import '../../kemet-tabs/kemet-tab-panel';
 declare const meta: Meta;
 export default meta;
-declare type Story = StoryObj;
+type Story = StoryObj;
 export declare const Standard: Story;
 export declare const Right: Story;
 export declare const Bottom: Story;

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

@@ -4,7 +4,7 @@ import KemetPopper from '../kemet-popper/kemet-popper';
  * @status stable
  *
  * @tagname kemet-tooltip
- * @summary A tooltip is a Popper component that displays an dynamic arrow pointing to the trigger.
+ * @summary A tooltip is a Popper component that displays a dynamic arrow pointing to the trigger.
  *
  * @slot trigger - Controls opening and closing the tooltip.
  * @slot content - The contents of the tooltip.
@@ -17,7 +17,7 @@ import KemetPopper from '../kemet-popper/kemet-popper';
  * @cssproperty --kemet-tooltip-border-size - The border size of the arrow
  * @cssproperty --kemet-tooltip-rounded-tip - How much rounding the tip of the arrow should be. Zero is pointy
  * @cssproperty --kemet-tooltip-background-color - The background color of the arrow
- * @cssproperty --kemet-tooltip-border-color - The border color of the the arrow
+ * @cssproperty --kemet-tooltip-border-color - The border color of the arrow
  * @cssproperty --kemet-tooltip-placement-offset - The offset of the arrow from the trigger
  *
  */