kemet-ui 3.1.0 → 4.0.0

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":"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","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;

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

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-modal/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoF5B,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgN/B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesBase = css`\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n\n  :host {\n    --kemet-modal-radius: var(--kemet-border-radius-xl);\n    --kemet-modal-transition-speed: 0.3s;\n    --kemet-modal-dialog-min-width: 0;\n    --kemet-modal-dialog-max-width: none;\n    --kemet-modal-dialog-mobile-width: calc(100% - 2rem);\n    --kemet-modal-dialog-mobile-margin: 0 auto;\n    --kemet-modal-dialog-mobile-padding: 1rem;\n    --kemet-modal-dialog-background-color: rgb(var(--kemet-color-white));\n    --kemet-modal-overlay-background-color: rgb(var(--kemet-color-black) / 20%);\n\n    position: fixed;\n    display: flex;\n    top: 0;\n    left: 0;\n    z-index: 99;\n    width: 100%;\n    height: 100vh;\n    visibility: hidden;\n    backface-visibility: hidden;\n  }\n\n  :host([opened]) {\n    visibility: visible;\n  }\n\n  dialog {\n    display: block;\n    position: relative;\n    z-index: 3;\n    margin: auto;\n    min-width: var(--kemet-modal-dialog-min-width);\n    max-width: var(--kemet-modal-dialog-max-width);\n    border: 0;\n    background: var(--kemet-modal-dialog-background-color);\n  }\n\n  dialog::backdrop {\n    background: none;\n  }\n\n  :host([mobile]) dialog {\n    margin: var(--kemet-modal-dialog-mobile-margin);\n    width: var(--kemet-modal-dialog-mobile-width);\n    padding: var(--kemet-modal-dialog-mobile-padding);\n    inset-block-start: auto;\n  }\n\n  :host([rounded]) dialog {\n    border-radius: var(--kemet-modal-radius);\n  }\n\n  :host([rounded][mobile]) dialog {\n    border-top-left-radius: var(--kemet-modal-radius);\n    border-top-right-radius: var(--kemet-modal-radius);\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n\n\n  .overlay {\n    position: fixed;\n    width: 100%;\n    height: 100%;\n    visibility: hidden;\n    top: 0;\n    left: 0;\n    z-index: 1;\n    opacity: 0;\n    background: var(--kemet-modal-overlay-background-color);\n    transition: all var(--kemet-modal-transition-speed);\n  }\n\n  :host([opened]) .overlay {\n    opacity: 1;\n    visibility: visible;\n  }\n`;\n\nexport const stylesEffects = css`\n  /* fadein-scaleup */\n  :host([effect=\"fadein-scaleup\"]) dialog {\n    transform: scale(0.7);\n    opacity: 0;\n    transition: all var(--kemet-modal-transition-speed);\n  }\n\n  :host([effect=\"fadein-scaleup\"][opened]) dialog {\n    transform: scale(1);\n    opacity: 1;\n  }\n\n  /* slide-right */\n  :host([effect=\"slide-right\"]) dialog {\n    transform: translateX(20%);\n    opacity: 0;\n    transition: all var(--kemet-modal-transition-speed) cubic-bezier(0.25, 0.5, 0.5, 0.9);\n  }\n\n  :host([effect=\"slide-right\"][opened]) dialog {\n    transform: translateX(0);\n    opacity: 1;\n  }\n\n  /* slide-bottom */\n  :host([effect=\"slide-bottom\"]) dialog {\n    transform: translateY(20%);\n    opacity: 0;\n    transition: all var(--kemet-modal-transition-speed);\n  }\n\n  :host([effect=\"slide-bottom\"][opened]) dialog {\n    transform: translateY(0);\n    opacity: 1;\n  }\n\n  /* newspaper */\n  :host([effect=\"newspaper\"]) dialog {\n    transform: scale(0) rotate(720deg);\n    opacity: 0;\n    transition: all var(--kemet-modal-transition-speed);\n  }\n\n  :host([effect=\"newspaper\"][opened]) dialog {\n    transform: scale(1) rotate(0deg);\n    opacity: 1;\n  }\n\n  /* fall */\n  :host([effect=\"fall\"]) {\n    perspective: 1300px;\n  }\n\n  :host([effect=\"fall\"]) dialog {\n    transform-style: preserve-3d;\n    transform: translateZ(600px) rotateX(20deg);\n    opacity: 0;\n  }\n\n  :host([effect=\"fall\"][opened]) dialog {\n    transition: all var(--kemet-modal-transition-speed) ease-in;\n    transform: translateZ(0px) rotateX(0deg);\n    opacity: 1;\n  }\n\n  /* side-fall */\n  :host([effect=\"side-fall\"]) {\n    perspective: 1300px;\n  }\n\n  :host([effect=\"side-fall\"]) dialog {\n    transform-style: preserve-3d;\n    transform: translate(30%) translateZ(600px) rotate(10deg);\n    opacity: 0;\n  }\n\n  :host([effect=\"side-fall\"][opened]) dialog {\n    transition: all var(--kemet-modal-transition-speed) ease-in;\n    transform: translate(0%) translateZ(0) rotate(0deg);\n    opacity: 1;\n  }\n\n  /* flip-horizontal */\n  :host([effect=\"flip-horizontal\"]) {\n    perspective: 1300px;\n  }\n\n  :host([effect=\"flip-horizontal\"]) dialog {\n    transform-style: preserve-3d;\n    transform: rotateY(-70deg);\n    transition: all var(--kemet-modal-transition-speed);\n    opacity: 0;\n  }\n\n  :host([effect=\"flip-horizontal\"][opened]) dialog {\n    transform: rotateY(0deg);\n    opacity: 1;\n  }\n\n  /* flip-vertical */\n  :host([effect=\"flip-vertical\"]) {\n    perspective: 1300px;\n  }\n\n  :host([effect=\"flip-vertical\"]) dialog {\n    transform-style: preserve-3d;\n    transform: rotateX(-70deg);\n    transition: all var(--kemet-modal-transition-speed);\n    opacity: 0;\n  }\n\n  :host([effect=\"flip-vertical\"][opened]) dialog {\n    transform: rotateX(0deg);\n    opacity: 1;\n  }\n\n  /* sign-3d */\n  :host([effect=\"sign-3d\"]) {\n    perspective: 1300px;\n  }\n\n  :host([effect=\"sign-3d\"]) dialog {\n    transform-style: preserve-3d;\n    transform: rotateX(-60deg);\n    transform-origin: 50% 0;\n    opacity: 0;\n    transition: all var(--kemet-modal-transition-speed);\n  }\n\n  :host([effect=\"sign-3d\"][opened]) dialog {\n    transform: rotateX(0deg);\n    opacity: 1;\n  }\n\n  /* super-scaled */\n  :host([effect=\"super-scaled\"]) dialog {\n    transform: scale(2);\n    opacity: 0;\n    transition: all var(--kemet-modal-transition-speed);\n  }\n\n  :host([effect=\"super-scaled\"][opened]) dialog {\n    transform: scale(1);\n    opacity: 1;\n  }\n\n  /* slit */\n  :host([effect=\"slit\"]) {\n    perspective: 1300px;\n  }\n\n  :host([effect=\"slit\"]) dialog {\n    transform-style: preserve-3d;\n    transform: translateZ(-3000px) rotateY(90deg);\n    opacity: 0;\n  }\n\n  :host([effect=\"slit\"][opened]) dialog {\n    animation: slit .7s forwards ease-out;\n  }\n\n  @keyframes slit {\n    50% {\n      transform: translateZ(-250px) rotateY(89deg);\n      opacity: 1;\n      animation-timing-function: ease-in;}\n    100% {\n      transform: translateZ(0) rotateY(0deg);\n      opacity: 1;\n    }\n  }\n\n  /* rotate-bottom */\n  :host([effect=\"rotate-bottom\"]) {\n    perspective: 1300px;\n  }\n\n  :host([effect=\"rotate-bottom\"]) dialog {\n    transform-style: preserve-3d;\n    transform: translateY(100%) rotateX(90deg);\n    transform-origin: 0 100%;\n    opacity: 0;\n    transition: all var(--kemet-modal-transition-speed) ease-out;\n  }\n\n  :host([effect=\"rotate-bottom\"][opened]) dialog {\n    transform: translateY(0%) rotateX(0deg);\n    opacity: 1;\n  }\n\n  /* rotate-left */\n  :host([effect=\"rotate-left\"]) {\n    perspective: 1300px;\n  }\n\n  :host([effect=\"rotate-left\"]) dialog {\n    transform-style: preserve-3d;\n    transform: translateZ(100px) translateX(-30%) rotateY(90deg);\n    transform-origin: 0 100%;\n    opacity: 0;\n    transition: all var(--kemet-modal-transition-speed);\n  }\n\n  :host([effect=\"rotate-left\"][opened]) dialog {\n    transform: translateZ(0px) translateX(0%) rotateY(0deg);\n    opacity: 1;\n  }\n`;\n"]}

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

@@ -1,8 +0,0 @@
-export type TypeEffect = 'fadein-scaleup' | 'slide-right' | 'slide-bottom' | 'newspaper' | 'fall' | 'side-fall' | 'flip-horizontal' | 'flip-vertical' | 'sign-3d' | 'super-scaled' | 'slit' | 'rotate-bottom' | 'rotate-left';
-export interface KemetModalInterface extends HTMLElement {
-    opened?: boolean;
-    effect?: TypeEffect;
-    closeOnClick?: boolean;
-    breakpoint?: string;
-    mobile?: boolean;
-}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/kemet-modal/types.ts"],"names":[],"mappings":"","sourcesContent":["export type TypeEffect = 'fadein-scaleup' | 'slide-right' | 'slide-bottom' | 'newspaper' | 'fall' | 'side-fall' | 'flip-horizontal' | 'flip-vertical' | 'sign-3d' | 'super-scaled' | 'slit' | 'rotate-bottom' | 'rotate-left';\n\nexport interface KemetModalInterface extends HTMLElement {\n  opened?: boolean,\n  effect?: TypeEffect,\n  closeOnClick?: boolean,\n  breakpoint?: string,\n  mobile?: boolean,\n}\n"]}

package/dist/components/kemet-multi-input/docs/stories.d.ts

@@ -1,8 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
-import '../kemet-multi-input';
-import '../../kemet-field/kemet-field';
-import '../../kemet-combo/kemet-combo';
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj;
-export declare const Standard: Story;

package/dist/components/kemet-multi-input/docs/stories.js

@@ -1,33 +0,0 @@
-import { html } from 'lit';
-import '../kemet-multi-input';
-import '../../kemet-field/kemet-field';
-import '../../kemet-combo/kemet-combo';
-const meta = {
-    title: 'Components / Multi Input',
-    component: 'kemet-multi-input',
-    args: {
-        options: [
-            'Art',
-            'Automotive',
-            'Bar',
-            'Beauty',
-            'Contractor',
-            'Finance',
-            'Market',
-            'Medical',
-            'Restaurant',
-            'Technology',
-        ],
-    },
-};
-export default meta;
-const Template = args => html `
-  <kemet-field slug="categories" label="Categories">
-    <kemet-multi-input slot="input" name="categories" rounded></kemet-multi-input>
-    <kemet-combo slot="component" .options=${args.options}></kemet-combo>
-  </kemet-field>
-`;
-export const Standard = {
-    render: args => Template(args),
-};
-//# sourceMappingURL=stories.js.map

package/dist/components/kemet-multi-input/docs/stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-multi-input/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,OAAO,sBAAsB,CAAC;AAC9B,OAAO,+BAA+B,CAAC;AACvC,OAAO,+BAA+B,CAAC;AAEvC,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,0BAA0B;IACjC,SAAS,EAAE,mBAAmB;IAC9B,IAAI,EAAE;QACJ,OAAO,EAAE;YACP,KAAK;YACL,YAAY;YACZ,KAAK;YACL,QAAQ;YACR,YAAY;YACZ,SAAS;YACT,QAAQ;YACR,SAAS;YACT,YAAY;YACZ,YAAY;SACb;KACF;CACF,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA;;;6CAGgB,IAAI,CAAC,OAAO;;CAExD,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;CAC/B,CAAC","sourcesContent":["import { html } from 'lit';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-multi-input';\nimport '../../kemet-field/kemet-field';\nimport '../../kemet-combo/kemet-combo';\n\nconst meta: Meta = {\n  title: 'Components / Multi Input',\n  component: 'kemet-multi-input',\n  args: {\n    options: [\n      'Art',\n      'Automotive',\n      'Bar',\n      'Beauty',\n      'Contractor',\n      'Finance',\n      'Market',\n      'Medical',\n      'Restaurant',\n      'Technology',\n    ],\n  },\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = args => html`\n  <kemet-field slug=\"categories\" label=\"Categories\">\n    <kemet-multi-input slot=\"input\" name=\"categories\" rounded></kemet-multi-input>\n    <kemet-combo slot=\"component\" .options=${args.options}></kemet-combo>\n  </kemet-field>\n`;\n\nexport const Standard: Story = {\n  render: args => Template(args),\n};\n"]}

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

@@ -1,116 +0,0 @@
-import { LitElement } from 'lit';
-import { IComboSelection } from './types';
-/**
- * @since 3.1.0
- * @status stable
- *
- * @tagname kemet-multi-input
- * @summary An input element that accepts multiple items from a combo.
- *
- * @prop {string} slug - Used for the id of the input. Should match the slug used in a control if applicable.
- * @prop {string} name - The name of the input
- * @prop {string} placeholder - The placeholder attribute
- * @prop {string} minlength - The minlength attribute
- * @prop {string} maxlength - The maxlength attribute
- * @prop {string} min - The min attribute
- * @prop {string} max - The max attribute
- * @prop {string} step - The step attribute
- * @prop {string} autocomplete - The autocomplete attribute
- * @prop {string} pattern - The pattern attribute
- * @prop {string} inputmode - The input mode attribute
- * @prop {boolean} autofocus - The autofocus attribute
- * @prop {boolean} disabled - The disable attribute
- * @prop {boolean} readonly - The readonly attribute
- * @prop {boolean} required - The required attribute
- * @prop {string} type - The type of input
- * @prop {string} value - The input's value
- * @prop {boolean} invalid - States whether the input is invalid
- * @prop {string} status - The status of the input
- * @prop {boolean} validateOnBlur - Activates validation on blur
- * @prop {string} ariaAutoComplete - Aria Autocomplete
- * @prop {string} ariaControls - Aria Controls
- * @prop {string} ariaActiveDescendant - Aria Active Descendant
- * @prop {boolean} rounded - Displays rounded corners
- * @prop {boolean} filled - Displays a filled input box
- * @prop {string} iconRight - Custom Icon to the right of the input
- * @prop {string} iconLeft - Custom Icon to the left of the input
- * @prop {number} iconSize - Size of the icons
- * @prop {object} validity - The HTML5 validity object.
- * @prop {boolean} isPasswordVisible - Manages password visibility
- * @prop {string} inputType - Input Type of keypress handled through handleInput(e)
- * @prop {boolean} focused - Determines if the input is focused
- *
- * @csspart input
- *
- * @cssproperty --kemet-input-height - The height of the input.
- * @cssproperty --kemet-input-padding - The padding on the input.
- * @cssproperty --kemet-input-border - The border of the input.
- * @cssproperty --kemet-input-border-color-error -  The border of the error state.
- * @cssproperty --kemet-input-border-color-success - The border of the success state.
- * @cssproperty --kemet-input-border-color-warning - The border of the warning state.
- * @cssproperty --kemet-input-icon-left-padding - The icon-left padding.
- * @cssproperty --kemet-input-icon-right-padding - The icon-right padding.
- * @cssproperty --kemet-input-border-radius-rounded - The border radius on rounded.
- * @cssproperty --kemet-input-border-filled - The border on filled.
- * @cssproperty --kemet-input-color-filled - The color on filled.
- * @cssproperty --kemet-input-background-color-filled - The background-color on filled.
- * @cssproperty --kemet-input-background-color-error - The error state background color.
- * @cssproperty --kemet-input-background-color-success - The success state background color.
- * @cssproperty --kemet-input-background-color-warning - The warning state background color.
- *
- * @event kemet-input-focused - Fires when the input receives and loses focus
- * @event kemet-input-status Fires when there's a change in status. This event includes an object that reports: 1) the status. 2) HTML5 validity object. 3) the component element.
- * Use the validity object to support custom validation messages.
- * @event kemet-input-input - Fires when the input receives input
- *
- */
-export default class KemetMultiInput extends LitElement {
-    /** @internal */
-    static styles: import("lit").CSSResult[];
-    rounded: boolean;
-    name: string;
-    value: string;
-    selections: IComboSelection[];
-    paddingLeft: number;
-    field: any;
-    combo: any;
-    chips: any;
-    firstUpdated(): void;
-    updated(): void;
-    render(): import("lit-html").TemplateResult<1>;
-    /**
-     * Handles when a selection is made from a combo
-     * @private
-     * @param event
-     */
-    addComboItem(event: CustomEvent): void;
-    /**
-     * Handles when the input receives input
-     * @private
-     */
-    handleInput(event: any): void;
-    /**
-     * Handles when the input is focused
-     */
-    handleFocus(event: any): void;
-    /**
-     * Renders the chips from the selections of the combo
-     * @private
-     */
-    makeSelections(): import("lit-html").TemplateResult<1>;
-    /**
-     * calculates padding to properly place the cursor of the input
-     * @private
-     */
-    calculatePadding(): void;
-    /**
-     * handle removing a chip from the selections
-     * @private
-     */
-    handleRemoveChip(event: any): void;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'kemet-multi-input': KemetMultiInput;
-    }
-}