kemet-ui 1.4.0 → 2.0.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-textarea/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkEhC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesTextarea = css`\n  :host {\n    position: relative;\n    display: block;\n  }\n\n  textarea {\n    color: var(--kemet-color-text);\n    display: block;\n    width: 100%;\n    padding: var(--kemet-textarea-padding, 1rem);\n    border: var(--kemet-textarea-border, 1px solid var(--kemet-color-background));\n    appearance: none;\n    box-sizing: border-box;\n    background: transparent;\n  }\n\n  :host([status='error']) textarea {\n    border: var(--kemet-textarea-border-color-error, 1px solid var(--kemet-color-error));\n  }\n\n  :host([status='success']) textarea {\n    border: var(--kemet-textarea-border-color-success, 1px solid var(--kemet-color-success));\n  }\n\n  :host([status='warning']) textarea {\n    border: var(--kemet-textarea-border-color-warning, 1px solid var(--kemet-color-warning));\n  }\n\n  :host([disabled]) textarea {\n    opacity: 0.5;\n  }\n\n  :host([icon-left]) textarea {\n    padding-left: var(--kemet-textarea-icon-left-padding, 3rem);\n  }\n\n  :host([icon-right]) textarea {\n    padding-right: var(--kemet-textarea-icon-right-padding, 3rem);\n  }\n\n  :host([rounded]) textarea {\n    border-radius: var(--kemet-textarea-border-radius-rounded, var(--kemet-border-radius));\n  }\n\n  :host([filled]) textarea {\n    border: var(--kemet-textarea-border-filled, none);\n    color: var(--kemet-textarea-color-filled, var(--kemet-color-white));\n    background-color: var(--kemet-textarea-background-color-filled, var(--kemet-color-primary));\n  }\n\n  :host([filled]) textarea::placeholder {\n    color: var(--kemet-textarea-color-filled, var(--kemet-color-white));\n  }\n\n  :host([status='error'][filled]) textarea {\n    background-color: var(--kemet-textarea-background-color-error, var(--kemet-color-error));\n  }\n\n  :host([status='success'][filled]) textarea {\n    background-color: var(--kemet-textarea-background-color-success, var(--kemet-color-success));\n  }\n\n  :host([status='warning'][filled]) textarea {\n    background-color: var(--kemet-textarea-background-color-warning, var(--kemet-color-warning));\n  }\n`;\n"]}

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

@@ -0,0 +1,20 @@
+export declare type TypeStatus = 'standard' | 'error' | 'success' | 'warning';
+export interface KemetTextareaInterface extends HTMLElement {
+    slug?: string;
+    name?: string;
+    placeholder?: string;
+    minlength?: number;
+    maxlength?: number;
+    inputmode?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    required?: boolean;
+    value?: string;
+    invalid?: boolean;
+    status?: TypeStatus;
+    validateOnBlur?: boolean;
+    rounded?: boolean;
+    filled?: boolean;
+    rows?: number;
+    autocorrect?: boolean;
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/kemet-textarea/types.ts"],"names":[],"mappings":"","sourcesContent":["export type TypeStatus = 'standard' | 'error' | 'success' | 'warning';\n\nexport interface KemetTextareaInterface extends HTMLElement {\n  slug?: string,\n  name?: string,\n  placeholder?: string,\n  minlength?: number,\n  maxlength?: number,\n  inputmode?: string,\n  disabled?: boolean,\n  readonly?: boolean,\n  required?: boolean,\n  value?: string,\n  invalid?: boolean,\n  status?: TypeStatus,\n  validateOnBlur?: boolean,\n  rounded?: boolean,\n  filled?: boolean,\n  rows?: number,\n  autocorrect?: boolean,\n}\n"]}

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

@@ -0,0 +1,60 @@
+import { LitElement } from 'lit';
+import { FormSubmitController } from '../../utilities/controllers/forms';
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-toggle
+ * @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 {string} label - A description of the toggle's purpose
+ * @prop {boolean} show - Determines whether or not 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
+ *
+ * @csspart label - The label element.
+ * @csspart control - The control element.
+ * @csspart text - The label text.
+ * @csspart checked - The checked text.
+ * @csspart unchecked - The unchecked text.
+ *
+ * @cssproperty --kemet-toggle-width - The width of the entire toggle. Default: 3.5rem.
+ * @cssproperty --kemet-toggle-height - The height of the entire toggle. Default:2rem.
+ * @cssproperty --kemet-toggle-handle-diameter - The diameter of the handle. Default: 1.6rem.
+ * @cssproperty --kemet-toggle-track-border - The border of the track. Default: none.
+ * @cssproperty --kemet-toggle-track-color - The color of the track. Default: var(--kemet-color-white).
+ * @cssproperty --kemet-toggle-track-shadow - The shadow on the track. Default: inset 0 0.4rem 0.7rem 0 rgba(47, 47, 47, 0.35), inset 0 -0.2rem 0.4rem 0 var(--kemet-color-gray1).
+ * @cssproperty --kemet-toggle-handle-border - The border on the handle. Default: none.
+ * @cssproperty --kemet-toggle-handle-color - The color of the handle. Default: var(--kemet-color-primary).
+ * @cssproperty --kemet-toggle-handle-shadow - The shadow on the handle. Default: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.1), 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.2).
+ *
+ * @event kemet-toggle-change - Fires when the toggle changes state
+ *
+ */
+export default class KemetToggle extends LitElement {
+    formSubmitController: FormSubmitController;
+    static styles: import("lit").CSSResult[];
+    name: string;
+    checked: boolean;
+    disabled: boolean;
+    label: string;
+    show: boolean;
+    squared: boolean;
+    optionChecked: string;
+    optionUnchecked: string;
+    value: string | boolean;
+    constructor();
+    render(): import("lit-html").TemplateResult<1>;
+    handleChange(): void;
+    makeUncheckedOption(): import("lit-html").TemplateResult<1>;
+    makeCheckedOption(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-toggle': KemetToggle;
+    }
+}

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

@@ -1,7 +1,9 @@
-import { html, css, LitElement } from 'lit';
-import { FormSubmitController } from '../../utilities/controllers/forms.js';
-import { emitEvent } from '../../utilities/misc/events.js';
-
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { FormSubmitController } from '../../utilities/controllers/forms';
+import { emitEvent } from '../../utilities/misc/events';
+import { stylesToggle } from './styles';
 /**
  * @since 1.0.0
  * @status stable
@@ -37,146 +39,23 @@ import { emitEvent } from '../../utilities/misc/events.js';
  * @event kemet-toggle-change - Fires when the toggle changes state
  *
  */
-
-export default class KemetToggle extends LitElement {
-  static get styles() {
-    return [
-      css`
-        :host {
-          --kemet-toggle-width: 3.5rem;
-          --kemet-toggle-height: 2rem;
-          --kemet-toggle-handle-diameter: 1.6rem;
-          --kemet-toggle-handle-margin: calc((var(--kemet-toggle-height) - var(--kemet-toggle-handle-diameter)) / 2);
-
-          display: flex;
-          align-items: center;
-        }
-
-        :host([disabled]) {
-          opacity: 0.5;
-        }
-
-        label {
-          cursor: pointer;
-          display: flex;
-          align-items: center;
-          gap: 1rem;
-          font-size: inherit;
-          color: inherit;
-        }
-
-        :host([disabled]) label {
-          cursor: not-allowed;
-        }
-
-        input {
-          display: none;
-        }
-
-        [part='control'] {
-          position: relative;
-          display: inline-flex;
-          margin: 0;
-          width: var(--kemet-toggle-width);
-          height: var(--kemet-toggle-height);
-        }
-
-        [part='control'] > span {
-          transition: 300ms ease-in-out;
-        }
-
-        [part='track'] {
-          width: var(--kemet-toggle-width);
-          height: var(--kemet-toggle-height);
-          border: var(--kemet-toggle-track-border, none);
-          border-radius: var(--kemet-toggle-height);
-          background-color: var(--kemet-toggle-track-color, var(--kemet-color-white));
-          box-shadow: var(--kemet-toggle-track-shadow, inset 0 0.4rem 0.7rem 0 rgba(47, 47, 47, 0.35), inset 0 -0.2rem 0.4rem 0 var(--kemet-color-gray1));
-        }
-
-        :host([squared]) [part='track'] {
-          border-radius: 0;
-        }
-
-        [part='handle'] {
-          position: absolute;
-          top: var(--kemet-toggle-handle-margin);
-          left: var(--kemet-toggle-handle-margin);
-          width: var(--kemet-toggle-handle-diameter);
-          height: var(--kemet-toggle-handle-diameter);
-          transform: translateX(0);
-          border: var(--kemet-toggle-handle-border, none);
-          border-radius: var(--kemet-toggle-handle-diameter);
-          background-color: var(--kemet-toggle-handle-color, var(--kemet-color-primary));
-          box-shadow: var(--kemet-toggle-handle-shadow, 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.1), 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.2));
-        }
-
-        :host([squared]) [part='handle'] {
-          border-radius: 0;
-        }
-
-        :host([checked]) [part='handle'] {
-          transform: translateX(calc(var(--kemet-toggle-width) - var(--kemet-toggle-handle-diameter) - var(--kemet-toggle-handle-margin) * 2));
-        }
-
-        .option {
-          font-size: 90%;
-        }
-      `,
-    ];
-  }
-
-  static get properties() {
-    return {
-      name: {
-        type: String,
-      },
-      checked: {
-        type: Boolean,
-        reflect: true,
-      },
-      disabled: {
-        type: Boolean,
-      },
-      label: {
-        type: String,
-      },
-      show: {
-        type: Boolean,
-      },
-      squared: {
-        type: Boolean,
-      },
-      optionChecked: {
-        type: String,
-        attribute: 'option-checked',
-      },
-      optionUnchecked: {
-        type: String,
-        attribute: 'option-unchecked',
-      },
-    };
-  }
-
-  constructor() {
-    super();
-
-    this.name = 'toggle-switch';
-    this.disabled = false;
-    this.checked = false;
-    this.show = false;
-    this.squared = false;
-    this.label = '';
-    this.optionChecked = 'on';
-    this.optionUnchecked = 'off';
-    this.value = this.checked ? this.optionChecked : this.optionUnchecked;
-
-    /** @internal */
-    this.formSubmitController = new FormSubmitController(this);
-  }
-
-  render() {
-    return html`
+let KemetToggle = class KemetToggle extends LitElement {
+    constructor() {
+        super();
+        this.name = 'toggle-switch';
+        this.checked = false;
+        this.disabled = false;
+        this.label = '';
+        this.show = false;
+        this.squared = false;
+        this.optionChecked = 'on';
+        this.optionUnchecked = 'off';
+        this.value = this.checked ? this.optionChecked : this.optionUnchecked;
+        /** @internal */
+        this.formSubmitController = new FormSubmitController(this);
+    }
+    render() {
+        return html `
       <label part="label">
         ${this.makeUncheckedOption()}
         <span part="control">
@@ -197,30 +76,55 @@ export default class KemetToggle extends LitElement {
         <span part="text">${this.label}</span>
       </label>
     `;
-  }
-
-  handleChange() {
-    this.checked = !this.checked;
-    this.value = this.checked ? this.optionChecked : this.optionUnchecked;
-    emitEvent(this, 'kemet-toggle-change', true);
-  }
-
-  makeUncheckedOption() {
-    if (this.show) {
-      return html`<span class="option" part="unchecked">${this.optionUnchecked}</span>`;
     }
-
-    return null;
-  }
-
-  makeCheckedOption() {
-    if (this.show) {
-      return html`<span class="option" part="checked">${this.optionChecked}</span>`;
+    handleChange() {
+        this.checked = !this.checked;
+        this.value = this.checked ? this.optionChecked : this.optionUnchecked;
+        emitEvent(this, 'kemet-toggle-change', true);
+    }
+    makeUncheckedOption() {
+        if (this.show) {
+            return html `<span class="option" part="unchecked">${this.optionUnchecked}</span>`;
+        }
+        return null;
+    }
+    makeCheckedOption() {
+        if (this.show) {
+            return html `<span class="option" part="checked">${this.optionChecked}</span>`;
+        }
+        return null;
     }
-
-    return null;
-  }
-}
-
-// eslint-disable-next-line no-unused-expressions
-customElements.get('kemet-toggle') || customElements.define('kemet-toggle', KemetToggle);
+};
+KemetToggle.styles = [stylesToggle];
+__decorate([
+    property({ type: String })
+], KemetToggle.prototype, "name", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], KemetToggle.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean })
+], KemetToggle.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], KemetToggle.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean })
+], KemetToggle.prototype, "show", void 0);
+__decorate([
+    property({ type: Boolean })
+], KemetToggle.prototype, "squared", void 0);
+__decorate([
+    property({ type: String, attribute: 'option-checked' })
+], KemetToggle.prototype, "optionChecked", void 0);
+__decorate([
+    property({ type: String, attribute: 'option-unchecked' })
+], KemetToggle.prototype, "optionUnchecked", void 0);
+__decorate([
+    state()
+], KemetToggle.prototype, "value", void 0);
+KemetToggle = __decorate([
+    customElement('kemet-toggle')
+], KemetToggle);
+export default KemetToggle;
+//# sourceMappingURL=kemet-toggle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kemet-toggle.js","sourceRoot":"","sources":["../../../src/components/kemet-toggle/kemet-toggle.ts"],"names":[],"mappings":"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","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. Default: 3.5rem.\n * @cssproperty --kemet-toggle-height - The height of the entire toggle. Default:2rem.\n * @cssproperty --kemet-toggle-handle-diameter - The diameter of the handle. Default: 1.6rem.\n * @cssproperty --kemet-toggle-track-border - The border of the track. Default: none.\n * @cssproperty --kemet-toggle-track-color - The color of the track. Default: var(--kemet-color-white).\n * @cssproperty --kemet-toggle-track-shadow - The shadow on the track. Default: inset 0 0.4rem 0.7rem 0 rgba(47, 47, 47, 0.35), inset 0 -0.2rem 0.4rem 0 var(--kemet-color-gray1).\n * @cssproperty --kemet-toggle-handle-border - The border on the handle. Default: none.\n * @cssproperty --kemet-toggle-handle-color - The color of the handle. Default: var(--kemet-color-primary).\n * @cssproperty --kemet-toggle-handle-shadow - The shadow on the handle. Default: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.1), 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.2).\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/styles.d.ts

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

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

@@ -0,0 +1,84 @@
+import { css } from 'lit';
+export const stylesToggle = css `
+  :host {
+    --kemet-toggle-width: 3.5rem;
+    --kemet-toggle-height: 2rem;
+    --kemet-toggle-handle-diameter: 1.6rem;
+    --kemet-toggle-handle-margin: calc((var(--kemet-toggle-height) - var(--kemet-toggle-handle-diameter)) / 2);
+
+    display: flex;
+    align-items: center;
+  }
+
+  :host([disabled]) {
+    opacity: 0.5;
+  }
+
+  label {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    font-size: inherit;
+    color: inherit;
+  }
+
+  :host([disabled]) label {
+    cursor: not-allowed;
+  }
+
+  input {
+    display: none;
+  }
+
+  [part='control'] {
+    position: relative;
+    display: inline-flex;
+    margin: 0;
+    width: var(--kemet-toggle-width);
+    height: var(--kemet-toggle-height);
+  }
+
+  [part='control'] > span {
+    transition: 300ms ease-in-out;
+  }
+
+  [part='track'] {
+    width: var(--kemet-toggle-width);
+    height: var(--kemet-toggle-height);
+    border: var(--kemet-toggle-track-border, none);
+    border-radius: var(--kemet-toggle-height);
+    background-color: var(--kemet-toggle-track-color, var(--kemet-color-white));
+    box-shadow: var(--kemet-toggle-track-shadow, inset 0 0.4rem 0.7rem 0 rgba(47, 47, 47, 0.35), inset 0 -0.2rem 0.4rem 0 var(--kemet-color-gray1));
+  }
+
+  :host([squared]) [part='track'] {
+    border-radius: 0;
+  }
+
+  [part='handle'] {
+    position: absolute;
+    top: var(--kemet-toggle-handle-margin);
+    left: var(--kemet-toggle-handle-margin);
+    width: var(--kemet-toggle-handle-diameter);
+    height: var(--kemet-toggle-handle-diameter);
+    transform: translateX(0);
+    border: var(--kemet-toggle-handle-border, none);
+    border-radius: var(--kemet-toggle-handle-diameter);
+    background-color: var(--kemet-toggle-handle-color, var(--kemet-color-primary));
+    box-shadow: var(--kemet-toggle-handle-shadow, 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.1), 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.2));
+  }
+
+  :host([squared]) [part='handle'] {
+    border-radius: 0;
+  }
+
+  :host([checked]) [part='handle'] {
+    transform: translateX(calc(var(--kemet-toggle-width) - var(--kemet-toggle-handle-diameter) - var(--kemet-toggle-handle-margin) * 2));
+  }
+
+  .option {
+    font-size: 90%;
+  }
+`;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-toggle/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiF9B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesToggle = css`\n  :host {\n    --kemet-toggle-width: 3.5rem;\n    --kemet-toggle-height: 2rem;\n    --kemet-toggle-handle-diameter: 1.6rem;\n    --kemet-toggle-handle-margin: calc((var(--kemet-toggle-height) - var(--kemet-toggle-handle-diameter)) / 2);\n\n    display: flex;\n    align-items: center;\n  }\n\n  :host([disabled]) {\n    opacity: 0.5;\n  }\n\n  label {\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 1rem;\n    font-size: inherit;\n    color: inherit;\n  }\n\n  :host([disabled]) label {\n    cursor: not-allowed;\n  }\n\n  input {\n    display: none;\n  }\n\n  [part='control'] {\n    position: relative;\n    display: inline-flex;\n    margin: 0;\n    width: var(--kemet-toggle-width);\n    height: var(--kemet-toggle-height);\n  }\n\n  [part='control'] > span {\n    transition: 300ms ease-in-out;\n  }\n\n  [part='track'] {\n    width: var(--kemet-toggle-width);\n    height: var(--kemet-toggle-height);\n    border: var(--kemet-toggle-track-border, none);\n    border-radius: var(--kemet-toggle-height);\n    background-color: var(--kemet-toggle-track-color, var(--kemet-color-white));\n    box-shadow: var(--kemet-toggle-track-shadow, inset 0 0.4rem 0.7rem 0 rgba(47, 47, 47, 0.35), inset 0 -0.2rem 0.4rem 0 var(--kemet-color-gray1));\n  }\n\n  :host([squared]) [part='track'] {\n    border-radius: 0;\n  }\n\n  [part='handle'] {\n    position: absolute;\n    top: var(--kemet-toggle-handle-margin);\n    left: var(--kemet-toggle-handle-margin);\n    width: var(--kemet-toggle-handle-diameter);\n    height: var(--kemet-toggle-handle-diameter);\n    transform: translateX(0);\n    border: var(--kemet-toggle-handle-border, none);\n    border-radius: var(--kemet-toggle-handle-diameter);\n    background-color: var(--kemet-toggle-handle-color, var(--kemet-color-primary));\n    box-shadow: var(--kemet-toggle-handle-shadow, 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.1), 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.2));\n  }\n\n  :host([squared]) [part='handle'] {\n    border-radius: 0;\n  }\n\n  :host([checked]) [part='handle'] {\n    transform: translateX(calc(var(--kemet-toggle-width) - var(--kemet-toggle-handle-diameter) - var(--kemet-toggle-handle-margin) * 2));\n  }\n\n  .option {\n    font-size: 90%;\n  }\n`;\n"]}

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

@@ -0,0 +1,10 @@
+export interface KemetToggleInterface extends HTMLElement {
+    name?: string;
+    checked?: boolean;
+    disabled?: boolean;
+    label?: string;
+    show?: boolean;
+    squared?: boolean;
+    optionChecked?: string;
+    optionUnchecked?: string;
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/kemet-toggle/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface KemetToggleInterface extends HTMLElement {\n  name?: string,\n  checked?: boolean,\n  disabled?: boolean,\n  label?: string,\n  show?: boolean,\n  squared?: boolean,\n  optionChecked?: string,\n  optionUnchecked?: string,\n}\n"]}

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

@@ -0,0 +1,33 @@
+import KemetPopper from '../kemet-popper/kemet-popper';
+/**
+ * @since 2.0.0
+ * @status stable
+ *
+ * @tagname kemet-tooltip
+ * @summary A tooltip is a Popper component that displays an dynamic arrow pointing to the trigger.
+ *
+ * @slot trigger - Controls opening and closing the tooltip.
+ * @slot content - The contents of the tooltip.
+ *
+ * @csspart trigger - Contains the trigger for the tooltip.
+ * @csspart content - Contains the content for the tooltip.
+ *
+ * @cssproperty --kemet-tooltip-content-height - The height of the content.
+ * @cssproperty --kemet-tooltip-size - The width and height of arrow's container
+ * @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-placement-offset - The offset of the arrow from the trigger
+ *
+ */
+export default class KemetTooltip extends KemetPopper {
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+    measureContent(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-tooltip': KemetTooltip;
+    }
+}

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

@@ -0,0 +1,68 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { stylesTooltip } from './styles';
+import { stylesPopper } from '../kemet-popper/styles';
+import { stylesPopperFade, stylesPopperScale, stylesPopperSlide, stylesPopperFall, stylesPopperFlipHorizontal, stylesPopperFlipVertical, stylesPopperSign, stylesPopperSuperScaled } from '../kemet-popper/styles.effects';
+import KemetPopper from '../kemet-popper/kemet-popper';
+/**
+ * @since 2.0.0
+ * @status stable
+ *
+ * @tagname kemet-tooltip
+ * @summary A tooltip is a Popper component that displays an dynamic arrow pointing to the trigger.
+ *
+ * @slot trigger - Controls opening and closing the tooltip.
+ * @slot content - The contents of the tooltip.
+ *
+ * @csspart trigger - Contains the trigger for the tooltip.
+ * @csspart content - Contains the content for the tooltip.
+ *
+ * @cssproperty --kemet-tooltip-content-height - The height of the content.
+ * @cssproperty --kemet-tooltip-size - The width and height of arrow's container
+ * @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-placement-offset - The offset of the arrow from the trigger
+ *
+ */
+let KemetTooltip = class KemetTooltip extends KemetPopper {
+    render() {
+        return html `
+      <div
+        id="trigger"
+        part="trigger"
+        tabIndex="0"
+        @click=${this.fireOn === 'click' ? event => this.toggle(event) : null}
+        @keyup=${this.fireOn === 'click' ? event => this.handleKeyUp(event) : null}
+        @mouseover=${this.fireOn !== 'click' ? () => this.opened = true : null}
+        @focus=${this.fireOn !== 'click' ? () => this.opened = true : null}
+        @mouseout=${this.fireOn !== 'click' ? () => this.opened = false : null}
+        @blur=${this.fireOn !== 'click' ? () => this.opened = false : null}
+      >
+        <slot name="trigger"></slot>
+      </div>
+      <div
+        id="content"
+        @mouseover=${this.fireOn !== 'click' ? () => this.opened = true : null}
+        @mouseout=${this.fireOn !== 'click' ? () => this.opened = false : null}
+      >
+        <slot name="content" @slotchange=${() => { this.makePopper(); this.measureContent(); }}></slot>
+        <div id="arrow-container" part="arrow-container" data-popper-arrow>
+          <div id="arrow" part="arrow"></div>
+        </div>
+      </div>
+    `;
+    }
+    measureContent() {
+        const height = this.contentElement.offsetHeight;
+        this.contentElement.style.setProperty("--kemet-tooltip-content-height", `${height}px`);
+    }
+};
+KemetTooltip.styles = [stylesTooltip, stylesPopper, stylesPopperFade, stylesPopperScale, stylesPopperSlide, stylesPopperFall, stylesPopperFlipHorizontal, stylesPopperFlipVertical, stylesPopperSign, stylesPopperSuperScaled];
+KemetTooltip = __decorate([
+    customElement('kemet-tooltip')
+], KemetTooltip);
+export default KemetTooltip;
+//# sourceMappingURL=kemet-tooltip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kemet-tooltip.js","sourceRoot":"","sources":["../../../src/components/kemet-tooltip/kemet-tooltip.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,0BAA0B,EAAE,wBAAwB,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,MAAM,gCAAgC,CAAC;AAC3N,OAAO,WAAW,MAAM,8BAA8B,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;GAqBG;AAGH,IAAqB,YAAY,GAAjC,MAAqB,YAAa,SAAQ,WAAW;IAGnD,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;iBAKE,IAAI,CAAC,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI;iBAC5D,IAAI,CAAC,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI;qBAC7D,IAAI,CAAC,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC,IAAI;iBAC7D,IAAI,CAAC,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC,IAAI;oBACtD,IAAI,CAAC,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,CAAC,CAAC,IAAI;gBAC9D,IAAI,CAAC,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,CAAC,CAAC,IAAI;;;;;;qBAMrD,IAAI,CAAC,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC,IAAI;oBAC1D,IAAI,CAAC,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,CAAC,CAAC,IAAI;;2CAEnC,GAAG,EAAE,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC;;;;;KAKzF,CAAC;IACJ,CAAC;IAED,cAAc;QACZ,MAAM,MAAM,GAAG,IAAI,CAAC,cAAc,CAAC,YAAY,CAAC;QAChD,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,WAAW,CAAC,gCAAgC,EAAE,GAAG,MAAM,IAAI,CAAC,CAAC;IACzF,CAAC;CACF,CAAA;AAlCQ,mBAAM,GAAG,CAAC,aAAa,EAAE,YAAY,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,0BAA0B,EAAE,wBAAwB,EAAE,gBAAgB,EAAE,uBAAuB,CAAC,CAAC;AADtM,YAAY;IADhC,aAAa,CAAC,eAAe,CAAC;GACV,YAAY,CAmChC;eAnCoB,YAAY","sourcesContent":["import { html } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { stylesTooltip } from './styles';\nimport { stylesPopper } from '../kemet-popper/styles';\nimport { stylesPopperFade, stylesPopperScale, stylesPopperSlide, stylesPopperFall, stylesPopperFlipHorizontal, stylesPopperFlipVertical, stylesPopperSign, stylesPopperSuperScaled } from '../kemet-popper/styles.effects';\nimport KemetPopper from '../kemet-popper/kemet-popper';\n\n/**\n * @since 2.0.0\n * @status stable\n *\n * @tagname kemet-tooltip\n * @summary A tooltip is a Popper component that displays an dynamic arrow pointing to the trigger.\n *\n * @slot trigger - Controls opening and closing the tooltip.\n * @slot content - The contents of the tooltip.\n *\n * @csspart trigger - Contains the trigger for the tooltip.\n * @csspart content - Contains the content for the tooltip.\n *\n * @cssproperty --kemet-tooltip-content-height - The height of the content.\n * @cssproperty --kemet-tooltip-size - The width and height of arrow's container\n * @cssproperty --kemet-tooltip-border-size - The border size of the arrow\n * @cssproperty --kemet-tooltip-rounded-tip - How much rounding the tip of the arrow should be. Zero is pointy\n * @cssproperty --kemet-tooltip-background-color - The background color of the arrow\n * @cssproperty --kemet-tooltip-border-color - The border color of the the arrow\n * @cssproperty --kemet-tooltip-placement-offset - The offset of the arrow from the trigger\n *\n */\n\n@customElement('kemet-tooltip')\nexport default class KemetTooltip extends KemetPopper {\n  static styles = [stylesTooltip, stylesPopper, stylesPopperFade, stylesPopperScale, stylesPopperSlide, stylesPopperFall, stylesPopperFlipHorizontal, stylesPopperFlipVertical, stylesPopperSign, stylesPopperSuperScaled];\n\n  render() {\n    return html`\n      <div\n        id=\"trigger\"\n        part=\"trigger\"\n        tabIndex=\"0\"\n        @click=${this.fireOn === 'click' ? event => this.toggle(event) : null}\n        @keyup=${this.fireOn === 'click' ? event => this.handleKeyUp(event) : null}\n        @mouseover=${this.fireOn !== 'click' ? () => this.opened = true : null}\n        @focus=${this.fireOn !== 'click' ? () => this.opened = true : null}\n        @mouseout=${this.fireOn !== 'click' ? () => this.opened = false : null}\n        @blur=${this.fireOn !== 'click' ? () => this.opened = false : null}\n      >\n        <slot name=\"trigger\"></slot>\n      </div>\n      <div\n        id=\"content\"\n        @mouseover=${this.fireOn !== 'click' ? () => this.opened = true : null}\n        @mouseout=${this.fireOn !== 'click' ? () => this.opened = false : null}\n      >\n        <slot name=\"content\" @slotchange=${() => { this.makePopper(); this.measureContent(); }}></slot>\n        <div id=\"arrow-container\" part=\"arrow-container\" data-popper-arrow>\n          <div id=\"arrow\" part=\"arrow\"></div>\n        </div>\n      </div>\n    `;\n  }\n\n  measureContent() {\n    const height = this.contentElement.offsetHeight;\n    this.contentElement.style.setProperty(\"--kemet-tooltip-content-height\", `${height}px`);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-tooltip': KemetTooltip\n  }\n}\n"]}

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

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