kemet-ui 3.1.0 → 4.0.1

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

@@ -1,132 +0,0 @@
-import { css } from 'lit';
-export const stylesBase = css `
-  :host {
-    --kemet-input-height: 50px;
-    --kemet-input-padding: 0.5rem 1rem;
-    --kemet-input-border: 1px solid rgb(var(--kemet-color-foreground));
-    --kemet-input-border-color-error: 1px solid rgb(var(--kemet-color-error));
-    --kemet-input-border-color-success: 1px solid rgb(var(--kemet-color-success));
-    --kemet-input-border-color-warning: 1px solid rgb(var(--kemet-color-warning));
-    --kemet-input-icon-left-padding: 3rem;
-    --kemet-input-icon-right-padding: 3rem;
-    --kemet-input-border-radius-rounded: var(--kemet-border-radius-md);
-    --kemet-input-border-filled: none;
-    --kemet-input-color-filled: rgb(var(--kemet-color-white));
-    --kemet-input-background-color-filled: rgb(var(--kemet-color-primary));
-    --kemet-input-color-filled: rgb(var(--kemet-color-white));
-    --kemet-input-background-color-error: rgb(var(--kemet-color-error));
-    --kemet-input-background-color-success: rgb(var(--kemet-color-success));
-    --kemet-input-background-color-warning: rgb(var(--kemet-color-warning));
-
-    position: relative;
-    display: block;
-  }
-
-  input {
-    color: rgb(var(--kemet-color-text));
-    display: block;
-    font-size: 1rem;
-    width: 100%;
-    height: var(--kemet-input-height);
-    padding: var(--kemet-input-padding);
-    border: var(--kemet-input-border);
-    appearance: none;
-    box-sizing: border-box;
-    background-color: transparent;
-  }
-
-  input[type='color'] {
-    min-width: 10rem;
-  }
-
-  input[type='search']::-webkit-search-decoration,
-  input[type='search']::-webkit-search-cancel-button,
-  input[type='search']::-webkit-search-results-button,
-  input[type='search']::-webkit-search-results-decoration {
-    display: none;
-  }
-
-  :host([status='error']) input {
-    border: var(--kemet-input-border-color-error);
-  }
-
-  :host([status='success']) input {
-    border: var(--kemet-input-border-color-success);
-  }
-
-  :host([status='warning']) input {
-    border: var(--kemet-input-border-color-warning);
-  }
-
-  :host([disabled]) input {
-    opacity: 0.5;
-  }
-
-  :host([icon-left]) input {
-    padding-left: var(--kemet-input-icon-left-padding);
-  }
-
-  :host([icon-right]) input {
-    padding-right: var(--kemet-input-icon-right-padding);
-  }
-
-  :host([rounded]) input {
-    border-radius: var(--kemet-input-border-radius-rounded);
-  }
-
-  :host([filled]) input {
-    border: var(--kemet-input-border-filled);
-    color: var(--kemet-input-color-filled);
-    background-color: var(--kemet-input-background-color-filled);
-  }
-
-  :host([filled]) kemet-icon,
-  :host([filled]) input::placeholder {
-    color: var(--kemet-input-color-filled);
-  }
-
-  :host([status='error'][filled]) input {
-    background-color: var(--kemet-input-background-color-error);
-  }
-
-  :host([status='success'][filled]) input {
-    background-color: var(--kemet-input-background-color-success);
-  }
-
-  :host([status='warning'][filled]) input {
-    background-color: var(--kemet-input-background-color-warning);
-  }
-
-  kemet-icon {
-    color: rgb(var(--kemet-color-text));
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-
-  kemet-icon.left {
-    left: 1rem;
-  }
-
-  kemet-icon.right {
-    right: 1rem;
-  }
-
-  kemet-icon.eye,
-  kemet-icon.search {
-    cursor: pointer;
-  }
-
-  :host([status='error']) kemet-icon {
-    color: rgb(var(--kemet-color-error));
-  }
-
-  :host([status='warning']) kemet-icon {
-    color: rgb(var(--kemet-color-error));
-  }
-
-  :host([status='success']) kemet-icon {
-    color: rgb(var(--kemet-color-success));
-  }
-`;
-//# sourceMappingURL=styles.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-input/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiI5B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesBase = css`\n  :host {\n    --kemet-input-height: 50px;\n    --kemet-input-padding: 0.5rem 1rem;\n    --kemet-input-border: 1px solid rgb(var(--kemet-color-foreground));\n    --kemet-input-border-color-error: 1px solid rgb(var(--kemet-color-error));\n    --kemet-input-border-color-success: 1px solid rgb(var(--kemet-color-success));\n    --kemet-input-border-color-warning: 1px solid rgb(var(--kemet-color-warning));\n    --kemet-input-icon-left-padding: 3rem;\n    --kemet-input-icon-right-padding: 3rem;\n    --kemet-input-border-radius-rounded: var(--kemet-border-radius-md);\n    --kemet-input-border-filled: none;\n    --kemet-input-color-filled: rgb(var(--kemet-color-white));\n    --kemet-input-background-color-filled: rgb(var(--kemet-color-primary));\n    --kemet-input-color-filled: rgb(var(--kemet-color-white));\n    --kemet-input-background-color-error: rgb(var(--kemet-color-error));\n    --kemet-input-background-color-success: rgb(var(--kemet-color-success));\n    --kemet-input-background-color-warning: rgb(var(--kemet-color-warning));\n\n    position: relative;\n    display: block;\n  }\n\n  input {\n    color: rgb(var(--kemet-color-text));\n    display: block;\n    font-size: 1rem;\n    width: 100%;\n    height: var(--kemet-input-height);\n    padding: var(--kemet-input-padding);\n    border: var(--kemet-input-border);\n    appearance: none;\n    box-sizing: border-box;\n    background-color: transparent;\n  }\n\n  input[type='color'] {\n    min-width: 10rem;\n  }\n\n  input[type='search']::-webkit-search-decoration,\n  input[type='search']::-webkit-search-cancel-button,\n  input[type='search']::-webkit-search-results-button,\n  input[type='search']::-webkit-search-results-decoration {\n    display: none;\n  }\n\n  :host([status='error']) input {\n    border: var(--kemet-input-border-color-error);\n  }\n\n  :host([status='success']) input {\n    border: var(--kemet-input-border-color-success);\n  }\n\n  :host([status='warning']) input {\n    border: var(--kemet-input-border-color-warning);\n  }\n\n  :host([disabled]) input {\n    opacity: 0.5;\n  }\n\n  :host([icon-left]) input {\n    padding-left: var(--kemet-input-icon-left-padding);\n  }\n\n  :host([icon-right]) input {\n    padding-right: var(--kemet-input-icon-right-padding);\n  }\n\n  :host([rounded]) input {\n    border-radius: var(--kemet-input-border-radius-rounded);\n  }\n\n  :host([filled]) input {\n    border: var(--kemet-input-border-filled);\n    color: var(--kemet-input-color-filled);\n    background-color: var(--kemet-input-background-color-filled);\n  }\n\n  :host([filled]) kemet-icon,\n  :host([filled]) input::placeholder {\n    color: var(--kemet-input-color-filled);\n  }\n\n  :host([status='error'][filled]) input {\n    background-color: var(--kemet-input-background-color-error);\n  }\n\n  :host([status='success'][filled]) input {\n    background-color: var(--kemet-input-background-color-success);\n  }\n\n  :host([status='warning'][filled]) input {\n    background-color: var(--kemet-input-background-color-warning);\n  }\n\n  kemet-icon {\n    color: rgb(var(--kemet-color-text));\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n\n  kemet-icon.left {\n    left: 1rem;\n  }\n\n  kemet-icon.right {\n    right: 1rem;\n  }\n\n  kemet-icon.eye,\n  kemet-icon.search {\n    cursor: pointer;\n  }\n\n  :host([status='error']) kemet-icon {\n    color: rgb(var(--kemet-color-error));\n  }\n\n  :host([status='warning']) kemet-icon {\n    color: rgb(var(--kemet-color-error));\n  }\n\n  :host([status='success']) kemet-icon {\n    color: rgb(var(--kemet-color-success));\n  }\n`;\n"]}

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

@@ -1,35 +0,0 @@
-export type TypeStatus = 'standard' | 'error' | 'success' | 'warning';
-export type TypeAriaAutoComplete = 'inline' | 'list' | 'both' | 'none';
-export type TypeAutoComplete = 'on' | 'off' | 'additional-name' | 'address-level1' | 'address-level2' | 'address-level3' | 'address-level4' | 'address-line1' | 'address-line2' | 'address-line3' | 'bday' | 'bday-year' | 'bday-day' | 'bday-month' | 'billing' | 'cc-additional-name';
-export interface KemetInputInterface extends HTMLElement {
-    slug?: string;
-    name?: string;
-    placeholder?: string;
-    minlength?: string;
-    maxlength?: string;
-    min?: string;
-    max?: string;
-    step?: string;
-    autocomplete?: string;
-    pattern?: string;
-    inputmode?: string;
-    disabled?: boolean;
-    readonly?: boolean;
-    required?: boolean;
-    type?: string;
-    value?: string;
-    invalid?: boolean;
-    status?: string;
-    validateOnBlur?: boolean;
-    ariaControls?: string;
-    ariaActiveDescendant?: string;
-    rounded?: boolean;
-    filled?: boolean;
-    iconRight?: string;
-    iconLeft?: string;
-    iconSize?: number;
-    validity?: object;
-    isPasswordVisible?: boolean;
-    inputType?: string;
-    focused?: boolean;
-}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/kemet-input/types.ts"],"names":[],"mappings":"","sourcesContent":["export type TypeStatus = 'standard' | 'error' | 'success' | 'warning';\nexport type TypeAriaAutoComplete = 'inline' | 'list' | 'both' | 'none';\nexport type TypeAutoComplete = 'on' | 'off' | 'additional-name' | 'address-level1' | 'address-level2' | 'address-level3' | 'address-level4' | 'address-line1' | 'address-line2' | 'address-line3' | 'bday' | 'bday-year' | 'bday-day' | 'bday-month' | 'billing' | 'cc-additional-name';\n\nexport interface KemetInputInterface extends HTMLElement {\n  slug?: string;\n  name?: string;\n  placeholder?: string;\n  minlength?: string;\n  maxlength?: string;\n  min?: string;\n  max?: string;\n  step?: string;\n  autocomplete?: string;\n  pattern?: string;\n  inputmode?: string;\n  // autofocus?: boolean;\n  disabled?: boolean;\n  readonly?: boolean;\n  required?: boolean;\n  type?: string;\n  value?: string;\n  invalid?: boolean;\n  status?: string;\n  validateOnBlur?: boolean;\n  // ariaAutoComplete?: string;\n  ariaControls?: string;\n  ariaActiveDescendant?: string;\n  rounded?: boolean;\n  filled?: boolean;\n  iconRight?: string;\n  iconLeft?: string;\n  iconSize?: number;\n  validity?: object;\n  isPasswordVisible?: boolean;\n  inputType?: string;\n  focused?: boolean;\n}\n\n"]}

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

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

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

@@ -1,58 +0,0 @@
-import { html } from 'lit';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import '../kemet-modal';
-import '../kemet-modal-close';
-import '../../kemet-tabs/kemet-tabs';
-import '../../kemet-tabs/kemet-tab';
-import '../../kemet-tabs/kemet-tab-panel';
-import '../../kemet-button/kemet-button';
-const meta = {
-    title: 'Components / Modal',
-    component: 'kemet-modal',
-    args: {
-        displayCloseBtn: true,
-    },
-    argTypes: {
-        effect: {
-            control: { type: 'select' },
-            options: ['fadein-scaleup', 'slide-right', 'slide-bottom', 'newspaper', 'fall', 'side-fall', 'flip-horizontal', 'flip-vertical', 'sign-3d', 'super-scaled', 'slit', 'rotate-bottom', 'rotate-left'],
-        },
-    },
-};
-export default meta;
-const Template = (args) => {
-    const openModal = () => {
-        const modal = document.querySelector('kemet-modal');
-        modal.opened = true;
-    };
-    const makeCloseBtn = (display) => {
-        if (display) {
-            return html `
-        <kemet-modal-close tabindex="0" role="button" aria-label="Close Button" style="display:flex;">
-          <kemet-icon icon="x-circle" size="24" kemet-background-color="white" kemet-border-radius="circle"></kemet-icon>
-        </kemet-modal-close>
-      `;
-        }
-        return null;
-    };
-    return html `
-    <kemet-button @click="${() => openModal()}">Open Modal</kemet-button>
-    <kemet-modal ?opened=${args.opened} ?rounded=${args.rounded} effect="${ifDefined(args.effect)}" ?close-on-click="${args.closeOnClick}">
-      <div kemet-padding="xl">
-        ${makeCloseBtn(args.displayCloseBtn)}
-        <h2 kemet-margin="none">Modal Title</h2>
-        <p>Your modal contents <a href="http://google.com" kemet-color="primary"><strong>here</strong></a>.</p>
-      </div>
-    </kemet-modal>
-  `;
-};
-export const Standard = {
-    render: (args) => Template(args),
-};
-export const Rounded = {
-    render: (args) => Template(args),
-    args: {
-        rounded: true
-    }
-};
-//# sourceMappingURL=stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-modal/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAIxD,OAAO,gBAAgB,CAAC;AACxB,OAAO,sBAAsB,CAAC;AAE9B,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,iCAAiC,CAAC;AAEzC,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,aAAa;IACxB,IAAI,EAAE;QACJ,eAAe,EAAE,IAAI;KACtB;IACD,QAAQ,EAAE;QACR,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,gBAAgB,EAAE,aAAa,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,EAAE,WAAW,EAAE,iBAAiB,EAAE,eAAe,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,EAAE,eAAe,EAAE,aAAa,CAAC;SACpM;KACF;CACF,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACxB,MAAM,SAAS,GAAG,GAAG,EAAE;QACrB,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;QACpD,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC;IACtB,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,OAAO,EAAE,EAAE;QAC/B,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,IAAI,CAAA;;;;OAIV,CAAC;QACJ,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;IAEF,OAAO,IAAI,CAAA;4BACe,GAAG,EAAE,CAAC,SAAS,EAAE;2BAClB,IAAI,CAAC,MAAM,aAAa,IAAI,CAAC,OAAO,YAAY,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,sBAAsB,IAAI,CAAC,YAAY;;UAE9H,YAAY,CAAC,IAAI,CAAC,eAAe,CAAC;;;;;GAKzC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;CACjC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAChC,IAAI,EAAE;QACJ,OAAO,EAAE,IAAI;KACd;CACF,CAAC","sourcesContent":["import { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport type { Meta, StoryObj } from '@storybook/web-components';\nimport { TypeEffect } from '../types';\n\nimport '../kemet-modal';\nimport '../kemet-modal-close';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\nimport '../../kemet-button/kemet-button';\n\nconst meta: Meta = {\n  title: 'Components / Modal',\n  component: 'kemet-modal',\n  args: {\n    displayCloseBtn: true,\n  },\n  argTypes: {\n    effect: {\n      control: { type: 'select' },\n      options: ['fadein-scaleup', 'slide-right', 'slide-bottom', 'newspaper', 'fall', 'side-fall', 'flip-horizontal', 'flip-vertical', 'sign-3d', 'super-scaled', 'slit', 'rotate-bottom', 'rotate-left'],\n    },\n  },\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = (args) => {\n  const openModal = () => {\n    const modal = document.querySelector('kemet-modal');\n    modal.opened = true;\n  };\n\n  const makeCloseBtn = (display) => {\n    if (display) {\n      return html`\n        <kemet-modal-close tabindex=\"0\" role=\"button\" aria-label=\"Close Button\" style=\"display:flex;\">\n          <kemet-icon icon=\"x-circle\" size=\"24\" kemet-background-color=\"white\" kemet-border-radius=\"circle\"></kemet-icon>\n        </kemet-modal-close>\n      `;\n    }\n\n    return null;\n  };\n\n  return html`\n    <kemet-button @click=\"${() => openModal()}\">Open Modal</kemet-button>\n    <kemet-modal ?opened=${args.opened} ?rounded=${args.rounded} effect=\"${ifDefined(args.effect)}\" ?close-on-click=\"${args.closeOnClick}\">\n      <div kemet-padding=\"xl\">\n        ${makeCloseBtn(args.displayCloseBtn)}\n        <h2 kemet-margin=\"none\">Modal Title</h2>\n        <p>Your modal contents <a href=\"http://google.com\" kemet-color=\"primary\"><strong>here</strong></a>.</p>\n      </div>\n    </kemet-modal>\n  `;\n};\n\nexport const Standard: Story = {\n  render: (args) => Template(args),\n};\n\nexport const Rounded: Story = {\n  render: (args) => Template(args),\n  args: {\n    rounded: true\n  }\n};\n"]}

package/dist/components/kemet-modal/kemet-modal-close.d.ts

@@ -1,21 +0,0 @@
-import { LitElement } from 'lit';
-/**
- * @since 1.0.0
- * @status stable
- *
- * @tagname kemet-modal-close
- * @summary A close button for a modal.
- *
- * @event kemet-modal-close-pressed - Fires when the close button is pressed
- *
- */
-export default class KemetModalClose extends LitElement {
-    static styles: import("lit").CSSResult[];
-    render(): import("lit-html").TemplateResult<1>;
-    close(): void;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'kemet-modal-close': KemetModalClose;
-    }
-}

package/dist/components/kemet-modal/kemet-modal-close.js

@@ -1,40 +0,0 @@
-import { __decorate } from "tslib";
-import { css, html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import { emitEvent } from '../../utilities/misc/events';
-/**
- * @since 1.0.0
- * @status stable
- *
- * @tagname kemet-modal-close
- * @summary A close button for a modal.
- *
- * @event kemet-modal-close-pressed - Fires when the close button is pressed
- *
- */
-let KemetModalClose = class KemetModalClose extends LitElement {
-    render() {
-        return html `
-      <slot @keyup=${() => this.close()} @click=${() => this.close()}></slot>
-    `;
-    }
-    close() {
-        emitEvent(this, 'kemet-modal-close-pressed', this);
-    }
-};
-KemetModalClose.styles = [
-    css `
-      :host {
-        position: absolute;
-        top: 0.5rem;
-        right: 0.5rem;
-        border-radius: var(--kemet-border-radius-circle);
-        cursor: pointer;
-      }
-    `,
-];
-KemetModalClose = __decorate([
-    customElement('kemet-modal-close')
-], KemetModalClose);
-export default KemetModalClose;
-//# sourceMappingURL=kemet-modal-close.js.map

package/dist/components/kemet-modal/kemet-modal-close.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"kemet-modal-close.js","sourceRoot":"","sources":["../../../src/components/kemet-modal/kemet-modal-close.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAExD;;;;;;;;;GASG;AAGY,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAarD,MAAM;QACJ,OAAO,IAAI,CAAA;qBACM,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,WAAW,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE;KAC/D,CAAC;IACJ,CAAC;IAED,KAAK;QACH,SAAS,CAAC,IAAI,EAAE,2BAA2B,EAAE,IAAI,CAAC,CAAC;IACrD,CAAC;;AApBM,sBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;KAQF;CACF,AAVY,CAUX;AAXiB,eAAe;IADnC,aAAa,CAAC,mBAAmB,CAAC;GACd,eAAe,CAsBnC;eAtBoB,eAAe","sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/misc/events';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-modal-close\n * @summary A close button for a modal.\n *\n * @event kemet-modal-close-pressed - Fires when the close button is pressed\n *\n */\n\n@customElement('kemet-modal-close')\nexport default class KemetModalClose extends LitElement {\n  static styles = [\n    css`\n      :host {\n        position: absolute;\n        top: 0.5rem;\n        right: 0.5rem;\n        border-radius: var(--kemet-border-radius-circle);\n        cursor: pointer;\n      }\n    `,\n  ];\n\n  render() {\n    return html`\n      <slot @keyup=${() => this.close()} @click=${() => this.close()}></slot>\n    `;\n  }\n\n  close() {\n    emitEvent(this, 'kemet-modal-close-pressed', this);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-modal-close': KemetModalClose\n  }\n}\n"]}

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

@@ -1,59 +0,0 @@
-import { LitElement } from 'lit';
-import { TypeEffect } from './types';
-/**
- * @since 1.0.0
- * @status stable
- *
- * @tagname kemet-modal
- * @summary A dialog that has many built-in effects and flexible styles.
- *
- * @prop {boolean} opened
- * @prop {string} effect
- * @prop {boolean} closeOnClick
- * @prop {string} breakpoint
- * @prop {boolean} mobile
- *
- * @csspart dialog - The main contents of the modal.
- * @csspart overlay - The surrounding scrim of the modal.
- *
- * @cssproperty --kemet-modal-radius - The mount of rounding for rounded corners
- * @cssproperty --kemet-modal-dialog-min-width - The minimum width of the dialog.
- * @cssproperty --kemet-modal-dialog-max-width - The maximum width of the dialog.
- * @cssproperty --kemet-modal-dialog-background-color - The background color of the dialog.
- * @cssproperty --kemet-modal-dialog-mobile-width - The width of the mobile dialog.
- * @cssproperty --kemet-modal-dialog-mobile-margin - The margins of the mobile dialog.
- * @cssproperty --kemet-modal-dialog-mobile-padding - The padding of the mobile dialog.
- * @cssproperty --kemet-modal-overlay-background-color - The color of the backdrop overlay.
- *
- * @event kemet-modal-opened - Fires when the modal opens
- * @event kemet-modal-closed - Fires when the modal closes
- *
- */
-export default class KemetModal extends LitElement {
-    static styles: import("lit").CSSResult[];
-    opened: boolean;
-    effect: TypeEffect;
-    closeOnClick: boolean;
-    breakpoint: string;
-    mobile: boolean;
-    rounded: boolean;
-    /** @internal */
-    dialogElement: HTMLDialogElement;
-    /** @internal */
-    focusableSelector: string;
-    /** @internal */
-    focusableElements: NodeListOf<Element>;
-    constructor();
-    firstUpdated(): void;
-    updated(prevProps: Map<string, never>): void;
-    render(): import("lit-html").TemplateResult<1>;
-    isMobile(): void;
-    handleOpen(): void;
-    handleClose(): void;
-    handleFocusableDown(event: KeyboardEvent): void;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'kemet-modal': KemetModal;
-    }
-}

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

@@ -1,150 +0,0 @@
-import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
-import { customElement, property, query, state, } from 'lit/decorators.js';
-import { stylesBase, stylesEffects } from './styles';
-import { emitEvent } from '../../utilities/misc/events';
-/**
- * @since 1.0.0
- * @status stable
- *
- * @tagname kemet-modal
- * @summary A dialog that has many built-in effects and flexible styles.
- *
- * @prop {boolean} opened
- * @prop {string} effect
- * @prop {boolean} closeOnClick
- * @prop {string} breakpoint
- * @prop {boolean} mobile
- *
- * @csspart dialog - The main contents of the modal.
- * @csspart overlay - The surrounding scrim of the modal.
- *
- * @cssproperty --kemet-modal-radius - The mount of rounding for rounded corners
- * @cssproperty --kemet-modal-dialog-min-width - The minimum width of the dialog.
- * @cssproperty --kemet-modal-dialog-max-width - The maximum width of the dialog.
- * @cssproperty --kemet-modal-dialog-background-color - The background color of the dialog.
- * @cssproperty --kemet-modal-dialog-mobile-width - The width of the mobile dialog.
- * @cssproperty --kemet-modal-dialog-mobile-margin - The margins of the mobile dialog.
- * @cssproperty --kemet-modal-dialog-mobile-padding - The padding of the mobile dialog.
- * @cssproperty --kemet-modal-overlay-background-color - The color of the backdrop overlay.
- *
- * @event kemet-modal-opened - Fires when the modal opens
- * @event kemet-modal-closed - Fires when the modal closes
- *
- */
-let KemetModal = class KemetModal extends LitElement {
-    constructor() {
-        super();
-        this.opened = false;
-        this.closeOnClick = false;
-        this.breakpoint = '600px';
-        // bindings
-        this.addEventListener('kemet-modal-close-pressed', () => { this.handleClose(); });
-    }
-    firstUpdated() {
-        // standard properties
-        /** @internal */
-        this.focusableSelector = 'body, a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]';
-        this.focusableElements = this.querySelectorAll(this.focusableSelector);
-        // events
-        this.addEventListener('keyup', (event) => {
-            if (event.key === 'Escape') {
-                this.handleClose();
-            }
-        });
-        this.addEventListener('click', (event) => {
-            const targetElement = event.target;
-            if (this.opened && this.closeOnClick && targetElement.tagName.toLowerCase() === 'kemet-modal') {
-                this.handleClose();
-            }
-        });
-        window.addEventListener('resize', () => {
-            this.isMobile();
-        });
-        this.focusableElements.forEach((element) => {
-            element.addEventListener('keydown', (event) => this.handleFocusableDown(event));
-        });
-    }
-    updated(prevProps) {
-        if (!prevProps.get('opened') && this.opened === true) {
-            this.handleOpen();
-        }
-        if (prevProps.get('opened') && this.opened === false) {
-            this.handleClose();
-        }
-        this.isMobile();
-    }
-    render() {
-        return html `
-      <dialog part="dialog" @close=${() => this.handleClose()}>
-        <slot></slot>
-      </dialog>
-      <div class="overlay" part="overlay"></div>
-    `;
-    }
-    isMobile() {
-        const mediaQuery = window.matchMedia(`(max-width: ${this.breakpoint})`);
-        this.mobile = mediaQuery.matches;
-    }
-    handleOpen() {
-        var _a;
-        this.opened = true;
-        if ((_a = this.dialogElement) === null || _a === void 0 ? void 0 : _a.showModal)
-            this.dialogElement.showModal();
-        emitEvent(this, 'kemet-modal-opened', this);
-    }
-    handleClose() {
-        var _a;
-        this.opened = false;
-        if ((_a = this.dialogElement) === null || _a === void 0 ? void 0 : _a.close)
-            this.dialogElement.close();
-        emitEvent(this, 'kemet-modal-closed', this);
-    }
-    handleFocusableDown(event) {
-        const firstFocusable = this.focusableElements[0];
-        const lastFocusable = this.focusableElements[this.focusableElements.length - 1];
-        if (event.key === 'Tab') {
-            if (event.shiftKey && document.activeElement === firstFocusable) {
-                event.preventDefault();
-                lastFocusable.focus();
-            }
-            else if (!event.shiftKey && document.activeElement === lastFocusable) {
-                event.preventDefault();
-                firstFocusable.focus();
-            }
-        }
-    }
-};
-KemetModal.styles = [stylesBase, stylesEffects];
-__decorate([
-    property({ type: Boolean, reflect: true })
-], KemetModal.prototype, "opened", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], KemetModal.prototype, "effect", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'close-on-click' })
-], KemetModal.prototype, "closeOnClick", void 0);
-__decorate([
-    property({ type: String })
-], KemetModal.prototype, "breakpoint", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], KemetModal.prototype, "mobile", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], KemetModal.prototype, "rounded", void 0);
-__decorate([
-    query('dialog')
-], KemetModal.prototype, "dialogElement", void 0);
-__decorate([
-    state()
-], KemetModal.prototype, "focusableSelector", void 0);
-__decorate([
-    state()
-], KemetModal.prototype, "focusableElements", void 0);
-KemetModal = __decorate([
-    customElement('kemet-modal')
-], KemetModal);
-export default KemetModal;
-//# sourceMappingURL=kemet-modal.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"kemet-modal.js","sourceRoot":"","sources":["../../../src/components/kemet-modal/kemet-modal.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EACL,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,GACtC,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAGxD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAGY,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAiChD;QACE,KAAK,EAAE,CAAC;QA9BV,WAAM,GAAY,KAAK,CAAC;QAMxB,iBAAY,GAAY,KAAK,CAAC;QAG9B,eAAU,GAAW,OAAO,CAAC;QAuB3B,WAAW;QACX,IAAI,CAAC,gBAAgB,CAAC,2BAA2B,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;IACpF,CAAC;IAED,YAAY;QACV,sBAAsB;QACtB,gBAAgB;QAChB,IAAI,CAAC,iBAAiB,GAAG,oLAAoL,CAAC;QAC9M,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;QAEvE,SAAS;QACT,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;YACvC,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;gBAC3B,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;YACvC,MAAM,aAAa,GAAG,KAAK,CAAC,MAAqB,CAAC;YAClD,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,YAAY,IAAI,aAAa,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,aAAa,EAAE,CAAC;gBAC9F,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;YACrC,IAAI,CAAC,QAAQ,EAAE,CAAC;QAClB,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;YACzC,OAAO,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,KAAoB,EAAE,EAAE,CAAC,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC,CAAC;QACjG,CAAC,CAAC,CAAC;IACL,CAAC;IAED,OAAO,CAAC,SAA6B;QACnC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC,MAAM,KAAK,IAAI,EAAE,CAAC;YACrD,IAAI,CAAC,UAAU,EAAE,CAAC;QACpB,CAAC;QAED,IAAI,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC,MAAM,KAAK,KAAK,EAAE,CAAC;YACrD,IAAI,CAAC,WAAW,EAAE,CAAC;QACrB,CAAC;QAED,IAAI,CAAC,QAAQ,EAAE,CAAC;IAClB,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;qCACsB,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;;;;KAIxD,CAAC;IACJ,CAAC;IAED,QAAQ;QACN,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,eAAe,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC;QACxE,IAAI,CAAC,MAAM,GAAG,UAAU,CAAC,OAAO,CAAC;IACnC,CAAC;IAED,UAAU;;QACR,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACnB,IAAI,MAAA,IAAI,CAAC,aAAa,0CAAE,SAAS;YAAE,IAAI,CAAC,aAAa,CAAC,SAAS,EAAE,CAAC;QAClE,SAAS,CAAC,IAAI,EAAE,oBAAoB,EAAE,IAAI,CAAC,CAAC;IAC9C,CAAC;IAED,WAAW;;QACT,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,MAAA,IAAI,CAAC,aAAa,0CAAE,KAAK;YAAE,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;QAC1D,SAAS,CAAC,IAAI,EAAE,oBAAoB,EAAE,IAAI,CAAC,CAAC;IAC9C,CAAC;IAED,mBAAmB,CAAC,KAAoB;QACtC,MAAM,cAAc,GAAG,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAgB,CAAC;QAChE,MAAM,aAAa,GAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC,CAAgB,CAAC;QAE/F,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE,CAAC;YACxB,IAAI,KAAK,CAAC,QAAQ,IAAI,QAAQ,CAAC,aAAa,KAAK,cAAc,EAAE,CAAC;gBAChE,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,aAAa,CAAC,KAAK,EAAE,CAAC;YACxB,CAAC;iBAAM,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,QAAQ,CAAC,aAAa,KAAK,aAAa,EAAE,CAAC;gBACvE,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,cAAc,CAAC,KAAK,EAAE,CAAC;YACzB,CAAC;QACH,CAAC;IACH,CAAC;;AAvHM,iBAAM,GAAG,CAAC,UAAU,EAAE,aAAa,CAAC,AAA9B,CAA+B;AAG5C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CACnB;AAGxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CACvB;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;gDAC3B;AAG9B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CACE;AAG7B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAC3B;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAC1B;AAIjB;IADC,KAAK,CAAC,QAAQ,CAAC;iDACiB;AAIjC;IADC,KAAK,EAAE;qDACkB;AAI1B;IADC,KAAK,EAAE;qDAC+B;AA/BpB,UAAU;IAD9B,aAAa,CAAC,aAAa,CAAC;GACR,UAAU,CAyH9B;eAzHoB,UAAU","sourcesContent":["import { html, LitElement } from 'lit';\nimport {\n  customElement, property, query, state,\n} from 'lit/decorators.js';\nimport { stylesBase, stylesEffects } from './styles';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { TypeEffect } from './types';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-modal\n * @summary A dialog that has many built-in effects and flexible styles.\n *\n * @prop {boolean} opened\n * @prop {string} effect\n * @prop {boolean} closeOnClick\n * @prop {string} breakpoint\n * @prop {boolean} mobile\n *\n * @csspart dialog - The main contents of the modal.\n * @csspart overlay - The surrounding scrim of the modal.\n *\n * @cssproperty --kemet-modal-radius - The mount of rounding for rounded corners\n * @cssproperty --kemet-modal-dialog-min-width - The minimum width of the dialog.\n * @cssproperty --kemet-modal-dialog-max-width - The maximum width of the dialog.\n * @cssproperty --kemet-modal-dialog-background-color - The background color of the dialog.\n * @cssproperty --kemet-modal-dialog-mobile-width - The width of the mobile dialog.\n * @cssproperty --kemet-modal-dialog-mobile-margin - The margins of the mobile dialog.\n * @cssproperty --kemet-modal-dialog-mobile-padding - The padding of the mobile dialog.\n * @cssproperty --kemet-modal-overlay-background-color - The color of the backdrop overlay.\n *\n * @event kemet-modal-opened - Fires when the modal opens\n * @event kemet-modal-closed - Fires when the modal closes\n *\n */\n\n@customElement('kemet-modal')\nexport default class KemetModal extends LitElement {\n  static styles = [stylesBase, stylesEffects];\n\n  @property({ type: Boolean, reflect: true })\n  opened: boolean = false;\n\n  @property({ type: String, reflect: true })\n  effect: TypeEffect;\n\n  @property({ type: Boolean, attribute: 'close-on-click' })\n  closeOnClick: boolean = false;\n\n  @property({ type: String })\n  breakpoint: string = '600px';\n\n  @property({ type: Boolean, reflect: true })\n  mobile: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  rounded: boolean;\n\n  /** @internal */\n  @query('dialog')\n  dialogElement: HTMLDialogElement;\n\n  /** @internal */\n  @state()\n  focusableSelector: string;\n\n  /** @internal */\n  @state()\n  focusableElements: NodeListOf<Element>;\n\n  constructor() {\n    super();\n\n    // bindings\n    this.addEventListener('kemet-modal-close-pressed', () => { this.handleClose(); });\n  }\n\n  firstUpdated() {\n    // standard properties\n    /** @internal */\n    this.focusableSelector = 'body, a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]';\n    this.focusableElements = this.querySelectorAll(this.focusableSelector);\n\n    // events\n    this.addEventListener('keyup', (event) => {\n      if (event.key === 'Escape') {\n        this.handleClose();\n      }\n    });\n\n    this.addEventListener('click', (event) => {\n      const targetElement = event.target as HTMLElement;\n      if (this.opened && this.closeOnClick && targetElement.tagName.toLowerCase() === 'kemet-modal') {\n        this.handleClose();\n      }\n    });\n\n    window.addEventListener('resize', () => {\n      this.isMobile();\n    });\n\n    this.focusableElements.forEach((element) => {\n      element.addEventListener('keydown', (event: KeyboardEvent) => this.handleFocusableDown(event));\n    });\n  }\n\n  updated(prevProps: Map<string, never>) {\n    if (!prevProps.get('opened') && this.opened === true) {\n      this.handleOpen();\n    }\n\n    if (prevProps.get('opened') && this.opened === false) {\n      this.handleClose();\n    }\n\n    this.isMobile();\n  }\n\n  render() {\n    return html`\n      <dialog part=\"dialog\" @close=${() => this.handleClose()}>\n        <slot></slot>\n      </dialog>\n      <div class=\"overlay\" part=\"overlay\"></div>\n    `;\n  }\n\n  isMobile() {\n    const mediaQuery = window.matchMedia(`(max-width: ${this.breakpoint})`);\n    this.mobile = mediaQuery.matches;\n  }\n\n  handleOpen() {\n    this.opened = true;\n    if (this.dialogElement?.showModal) this.dialogElement.showModal();\n    emitEvent(this, 'kemet-modal-opened', this);\n  }\n\n  handleClose() {\n    this.opened = false;\n    if (this.dialogElement?.close) this.dialogElement.close();\n    emitEvent(this, 'kemet-modal-closed', this);\n  }\n\n  handleFocusableDown(event: KeyboardEvent) {\n    const firstFocusable = this.focusableElements[0] as HTMLElement;\n    const lastFocusable = this.focusableElements[this.focusableElements.length - 1] as HTMLElement;\n\n    if (event.key === 'Tab') {\n      if (event.shiftKey && document.activeElement === firstFocusable) {\n        event.preventDefault();\n        lastFocusable.focus();\n      } else if (!event.shiftKey && document.activeElement === lastFocusable) {\n        event.preventDefault();\n        firstFocusable.focus();\n      }\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-modal': KemetModal\n  }\n}\n"]}

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

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