kemet-ui 3.1.0 → 4.0.1

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

@@ -1,22 +0,0 @@
-import { LitElement } from 'lit';
-/**
- * @since 2.0.0
- * @status stable
- *
- * @tagname kemet-popper-close
- * @summary A close button for the popper
- *
- * @event kemet-popper-close-btn
- *
- */
-export default class KemetPopperClose extends LitElement {
-    static styles: import("lit").CSSResult[];
-    render(): import("lit-html").TemplateResult<1>;
-    close(): void;
-    handleKeyboard(event: KeyboardEvent): void;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'kemet-popper-close': KemetPopperClose;
-    }
-}

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

@@ -1,48 +0,0 @@
-import { __decorate } from "tslib";
-import { html, css, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import { emitEvent } from '../../utilities/misc/events';
-/**
- * @since 2.0.0
- * @status stable
- *
- * @tagname kemet-popper-close
- * @summary A close button for the popper
- *
- * @event kemet-popper-close-btn
- *
- */
-let KemetPopperClose = class KemetPopperClose extends LitElement {
-    render() {
-        return html `
-      <button @click=${() => this.close()} @keyup=${(event) => this.handleKeyboard(event)}>
-        <slot></slot>
-      </button>
-    `;
-    }
-    close() {
-        emitEvent(this, 'kemet-popper-close-btn', this);
-    }
-    handleKeyboard(event) {
-        event.preventDefault();
-        if (event.code === 'Space' || event.key === 'Enter') {
-            this.close();
-        }
-    }
-};
-KemetPopperClose.styles = [
-    css `
-      button {
-        font: inherit;
-        color: inherit;
-        cursor: pointer;
-        border: 0;
-        background: transparent;
-      }
-    `,
-];
-KemetPopperClose = __decorate([
-    customElement('kemet-popper-close')
-], KemetPopperClose);
-export default KemetPopperClose;
-//# sourceMappingURL=kemet-popper-close.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"kemet-popper-close.js","sourceRoot":"","sources":["../../../src/components/kemet-popper/kemet-popper-close.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,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,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAatD,MAAM;QACJ,OAAO,IAAI,CAAA;uBACQ,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,WAAW,CAAC,KAAoB,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC;;;KAGnG,CAAC;IACJ,CAAC;IAED,KAAK;QACH,SAAS,CAAC,IAAI,EAAE,wBAAwB,EAAE,IAAI,CAAC,CAAC;IAClD,CAAC;IAED,cAAc,CAAC,KAAoB;QACjC,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YACpD,IAAI,CAAC,KAAK,EAAE,CAAC;QACf,CAAC;IACH,CAAC;;AA9BM,uBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;KAQF;CACF,AAVY,CAUX;AAXiB,gBAAgB;IADpC,aAAa,CAAC,oBAAoB,CAAC;GACf,gBAAgB,CAgCpC;eAhCoB,gBAAgB","sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/misc/events';\n\n/**\n * @since 2.0.0\n * @status stable\n *\n * @tagname kemet-popper-close\n * @summary A close button for the popper\n *\n * @event kemet-popper-close-btn\n *\n */\n\n@customElement('kemet-popper-close')\nexport default class KemetPopperClose extends LitElement {\n  static styles = [\n    css`\n      button {\n        font: inherit;\n        color: inherit;\n        cursor: pointer;\n        border: 0;\n        background: transparent;\n      }\n    `,\n  ];\n\n  render() {\n    return html`\n      <button @click=${() => this.close()} @keyup=${(event: KeyboardEvent) => this.handleKeyboard(event)}>\n        <slot></slot>\n      </button>\n    `;\n  }\n\n  close() {\n    emitEvent(this, 'kemet-popper-close-btn', this);\n  }\n\n  handleKeyboard(event: KeyboardEvent) {\n    event.preventDefault();\n\n    if (event.code === 'Space' || event.key === 'Enter') {\n      this.close();\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-popper-close': KemetPopperClose\n  }\n}\n"]}

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

@@ -1,72 +0,0 @@
-import { LitElement } from 'lit';
-import { TypeFireOn, TypePlacement } from './types';
-/**
- * @since 2.0.0
- * @status stable
- *
- * @tagname kemet-popper
- * @summary A wrapper component for the popper.js lib.
- *
- * @event kemet-popper-opened - Fires when the popper opens
- * @event kemet-popper-closed - Fires when the popper closes
- *
- * @slot trigger - Controls opening and closing the popover.
- * @slot content - The contents of the popover.
- *
- * @csspart trigger - Contains the trigger for the popover.
- * @csspart content - Contains the content for the popover.
- *
- * @cssproperty --kemet-popper-padding - The padding in the content slot.
- * @cssproperty --kemet-popper-border-color - The border color of the content.
- * @cssproperty --kemet-popper-background-color - The background color of the content.
- *
- * @prop {TypePlacement} placement - The position of the popper over the trigger.
- * @prop {boolean} opened - Determines if the Popper is opened or closed
- * @prop {TypeFireOn} fireOn - Activate the Popper on Click or Hover
- * @prop {string} strategy - Sets the strategy option in Popper's api
- * @prop {number} skidding - Sets an offset to the Popper from the trigger
- * @prop {number} distance - Sets spacing between the Popper and the trigger
- *
- */
-export default class KemetPopper extends LitElement {
-    static styles: import("lit").CSSResult[];
-    placement: TypePlacement;
-    opened: boolean;
-    fireOn: TypeFireOn;
-    strategy: 'fixed' | 'absolute';
-    skidding: number;
-    distance: number;
-    /** @internal */
-    popperInstance: {
-        setOptions: (arg0: {
-            placement: TypePlacement;
-            strategy: 'fixed' | 'absolute';
-            modifiers: {
-                name: string;
-                options: {
-                    offset: number[];
-                };
-            }[];
-        }) => void;
-    };
-    /** @internal */
-    triggerElement: HTMLElement;
-    /** @internal */
-    contentElement: HTMLElement;
-    /** @internal */
-    focusableElements: NodeListOf<Element>;
-    constructor();
-    firstUpdated(): void;
-    updated(prevProps: Map<string, never>): void;
-    render(): import("lit-html").TemplateResult<1>;
-    refresh(): void;
-    makePopper(): void;
-    toggle(event: MouseEvent | KeyboardEvent): void;
-    handleKeyUp(event: KeyboardEvent): void;
-    handleFocusableDown(event: KeyboardEvent): void;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'kemet-popper': KemetPopper;
-    }
-}

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

@@ -1,173 +0,0 @@
-import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
-import { customElement, property, query, queryAll, state, } from 'lit/decorators.js';
-import { createPopper } from '@popperjs/core/dist/esm';
-import { emitEvent } from '../../utilities/misc/events';
-import { stylesPopper } from './styles';
-// import { stylesPopperFade, stylesPopperScale, stylesPopperSlide, stylesPopperFall, stylesPopperFlipHorizontal, stylesPopperFlipVertical, stylesPopperSign, stylesPopperSuperScaled } from './styles.effects';
-/**
- * @since 2.0.0
- * @status stable
- *
- * @tagname kemet-popper
- * @summary A wrapper component for the popper.js lib.
- *
- * @event kemet-popper-opened - Fires when the popper opens
- * @event kemet-popper-closed - Fires when the popper closes
- *
- * @slot trigger - Controls opening and closing the popover.
- * @slot content - The contents of the popover.
- *
- * @csspart trigger - Contains the trigger for the popover.
- * @csspart content - Contains the content for the popover.
- *
- * @cssproperty --kemet-popper-padding - The padding in the content slot.
- * @cssproperty --kemet-popper-border-color - The border color of the content.
- * @cssproperty --kemet-popper-background-color - The background color of the content.
- *
- * @prop {TypePlacement} placement - The position of the popper over the trigger.
- * @prop {boolean} opened - Determines if the Popper is opened or closed
- * @prop {TypeFireOn} fireOn - Activate the Popper on Click or Hover
- * @prop {string} strategy - Sets the strategy option in Popper's api
- * @prop {number} skidding - Sets an offset to the Popper from the trigger
- * @prop {number} distance - Sets spacing between the Popper and the trigger
- *
- */
-let KemetPopper = class KemetPopper extends LitElement {
-    constructor() {
-        super();
-        this.placement = 'top';
-        this.fireOn = 'hover';
-        this.strategy = 'fixed';
-        this.skidding = 0;
-        this.distance = 0;
-        this.addEventListener('kemet-popper-close-btn', () => { this.opened = false; });
-    }
-    firstUpdated() {
-        if (this.fireOn === 'click') {
-            this.focusableElements.forEach((element) => {
-                element.addEventListener('keydown', (event) => this.handleFocusableDown(event));
-            });
-        }
-    }
-    updated(prevProps) {
-        this.refresh();
-        if (!prevProps.get('opened') && this.opened === true) {
-            emitEvent(this, 'kemet-popper-opened', this);
-        }
-        if (prevProps.get('opened') && this.opened === false) {
-            emitEvent(this, 'kemet-popper-closed', this);
-        }
-    }
-    render() {
-        // eslint-disable-next-line lit-a11y/mouse-events-have-key-events
-        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()}></slot>
-      </div>
-    `;
-    }
-    refresh() {
-        var _a;
-        (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.setOptions({
-            placement: this.placement,
-            strategy: this.strategy,
-            modifiers: [
-                { name: 'offset', options: { offset: [this.skidding, this.distance] } },
-            ],
-        });
-    }
-    makePopper() {
-        this.popperInstance = createPopper(this.triggerElement, this.contentElement, {
-            placement: this.placement,
-            strategy: this.strategy,
-            modifiers: [
-                { name: 'offset', options: { offset: [this.skidding, this.distance] } },
-            ],
-        });
-    }
-    toggle(event) {
-        const target = event.target;
-        const isSlotTrigger = target.getAttribute('slot') === 'trigger';
-        const isPartTrigger = target.getAttribute('part') === 'trigger';
-        if (isSlotTrigger || isPartTrigger) {
-            this.opened = !this.opened;
-        }
-    }
-    handleKeyUp(event) {
-        event.preventDefault();
-        if (event.key === 'Escape') {
-            this.opened = false;
-        }
-        if (event.key === 'Enter' || event.code === 'Space') {
-            this.toggle(event);
-        }
-    }
-    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();
-            }
-        }
-    }
-};
-KemetPopper.styles = [stylesPopper];
-__decorate([
-    property({ type: String, reflect: true })
-], KemetPopper.prototype, "placement", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], KemetPopper.prototype, "opened", void 0);
-__decorate([
-    property({ type: String, attribute: 'fire-on' })
-], KemetPopper.prototype, "fireOn", void 0);
-__decorate([
-    property({ type: String })
-], KemetPopper.prototype, "strategy", void 0);
-__decorate([
-    property({ type: Number })
-], KemetPopper.prototype, "skidding", void 0);
-__decorate([
-    property({ type: Number })
-], KemetPopper.prototype, "distance", void 0);
-__decorate([
-    state()
-], KemetPopper.prototype, "popperInstance", void 0);
-__decorate([
-    query('#trigger')
-], KemetPopper.prototype, "triggerElement", void 0);
-__decorate([
-    query('#content')
-], KemetPopper.prototype, "contentElement", void 0);
-__decorate([
-    queryAll('body, a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable], kemet-popper-close')
-], KemetPopper.prototype, "focusableElements", void 0);
-KemetPopper = __decorate([
-    customElement('kemet-popper')
-], KemetPopper);
-export default KemetPopper;
-//# sourceMappingURL=kemet-popper.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"kemet-popper.js","sourceRoot":"","sources":["../../../src/components/kemet-popper/kemet-popper.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport {\n  customElement, property, query, queryAll, state,\n} from 'lit/decorators.js';\nimport { createPopper } from '@popperjs/core/dist/esm';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { TypeFireOn, TypePlacement } from './types';\nimport { stylesPopper } from './styles';\n// import { stylesPopperFade, stylesPopperScale, stylesPopperSlide, stylesPopperFall, stylesPopperFlipHorizontal, stylesPopperFlipVertical, stylesPopperSign, stylesPopperSuperScaled } from './styles.effects';\n\n/**\n * @since 2.0.0\n * @status stable\n *\n * @tagname kemet-popper\n * @summary A wrapper component for the popper.js lib.\n *\n * @event kemet-popper-opened - Fires when the popper opens\n * @event kemet-popper-closed - Fires when the popper closes\n *\n * @slot trigger - Controls opening and closing the popover.\n * @slot content - The contents of the popover.\n *\n * @csspart trigger - Contains the trigger for the popover.\n * @csspart content - Contains the content for the popover.\n *\n * @cssproperty --kemet-popper-padding - The padding in the content slot.\n * @cssproperty --kemet-popper-border-color - The border color of the content.\n * @cssproperty --kemet-popper-background-color - The background color of the content.\n *\n * @prop {TypePlacement} placement - The position of the popper over the trigger.\n * @prop {boolean} opened - Determines if the Popper is opened or closed\n * @prop {TypeFireOn} fireOn - Activate the Popper on Click or Hover\n * @prop {string} strategy - Sets the strategy option in Popper's api\n * @prop {number} skidding - Sets an offset to the Popper from the trigger\n * @prop {number} distance - Sets spacing between the Popper and the trigger\n *\n */\n\n@customElement('kemet-popper')\nexport default class KemetPopper extends LitElement {\n  static styles = [stylesPopper];\n\n  @property({ type: String, reflect: true })\n  placement: TypePlacement = 'top';\n\n  @property({ type: Boolean, reflect: true })\n  opened: boolean;\n\n  @property({ type: String, attribute: 'fire-on' })\n  fireOn: TypeFireOn = 'hover';\n\n  @property({ type: String })\n  strategy: 'fixed' | 'absolute' = 'fixed';\n\n  @property({ type: Number })\n  skidding: number = 0;\n\n  @property({ type: Number })\n  distance: number = 0;\n\n  /** @internal */\n  @state()\n  popperInstance: { setOptions: (arg0: { placement: TypePlacement; strategy: 'fixed' | 'absolute'; modifiers: { name: string; options: { offset: number[]; }; }[]; }) => void; };\n\n  /** @internal */\n  @query('#trigger')\n  triggerElement: HTMLElement;\n\n  /** @internal */\n  @query('#content')\n  contentElement: HTMLElement;\n\n  /** @internal */\n  @queryAll('body, a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable], kemet-popper-close')\n  focusableElements: NodeListOf<Element>;\n\n  constructor() {\n    super();\n    this.addEventListener('kemet-popper-close-btn', () => { this.opened = false; });\n  }\n\n  firstUpdated() {\n    if (this.fireOn === 'click') {\n      this.focusableElements.forEach((element) => {\n        element.addEventListener('keydown', (event: KeyboardEvent) => this.handleFocusableDown(event));\n      });\n    }\n  }\n\n  updated(prevProps: Map<string, never>) {\n    this.refresh();\n\n    if (!prevProps.get('opened') && this.opened === true) {\n      emitEvent(this, 'kemet-popper-opened', this);\n    }\n\n    if (prevProps.get('opened') && this.opened === false) {\n      emitEvent(this, 'kemet-popper-closed', this);\n    }\n  }\n\n  render() {\n    // eslint-disable-next-line lit-a11y/mouse-events-have-key-events\n    return html`\n      <div\n        id=\"trigger\"\n        part=\"trigger\"\n        tabIndex=\"0\"\n        @click=${this.fireOn === 'click' ? (event: MouseEvent) => this.toggle(event) : null}\n        @keyup=${this.fireOn === 'click' ? (event: KeyboardEvent) => 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()}></slot>\n      </div>\n    `;\n  }\n\n  refresh() {\n    this.popperInstance?.setOptions({\n      placement: this.placement,\n      strategy: this.strategy,\n      modifiers: [\n        { name: 'offset', options: { offset: [this.skidding, this.distance] } },\n      ],\n    });\n  }\n\n  makePopper() {\n    this.popperInstance = createPopper(this.triggerElement, this.contentElement, {\n      placement: this.placement,\n      strategy: this.strategy,\n      modifiers: [\n        { name: 'offset', options: { offset: [this.skidding, this.distance] } },\n      ],\n    });\n  }\n\n  toggle(event: MouseEvent | KeyboardEvent) {\n    const target = event.target as HTMLElement;\n    const isSlotTrigger = target.getAttribute('slot') === 'trigger';\n    const isPartTrigger = target.getAttribute('part') === 'trigger';\n\n    if (isSlotTrigger || isPartTrigger) {\n      this.opened = !this.opened;\n    }\n  }\n\n  handleKeyUp(event: KeyboardEvent) {\n    event.preventDefault();\n\n    if (event.key === 'Escape') {\n      this.opened = false;\n    }\n\n    if (event.key === 'Enter' || event.code === 'Space') {\n      this.toggle(event);\n    }\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-popper': KemetPopper\n  }\n}\n"]}

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

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

package/dist/components/kemet-popper/styles.effects.d.ts

@@ -1,8 +0,0 @@
-export declare const stylesPopperFade: import("lit").CSSResult;
-export declare const stylesPopperScale: import("lit").CSSResult;
-export declare const stylesPopperSlide: import("lit").CSSResult;
-export declare const stylesPopperFall: import("lit").CSSResult;
-export declare const stylesPopperFlipHorizontal: import("lit").CSSResult;
-export declare const stylesPopperFlipVertical: import("lit").CSSResult;
-export declare const stylesPopperSign: import("lit").CSSResult;
-export declare const stylesPopperSuperScaled: import("lit").CSSResult;

package/dist/components/kemet-popper/styles.effects.js

@@ -1,306 +0,0 @@
-import { css } from 'lit';
-export const stylesPopperFade = css `
-  :host([effect="fade"]) #content {
-    opacity: 0;
-    transition: all var(--kemet-popover-transition-speed, 0.3s);
-  }
-
-  :host([effect="fade"][opened]) #content {
-    opacity: 1;
-  }
-`;
-export const stylesPopperScale = css `
-  :host([effect="scale"]) #content {
-    opacity: 0;
-    transition: all var(--kemet-popover-transition-speed, 0.3s);
-  }
-
-  :host([effect="scale"][opened]) #content {
-    opacity: 1;
-  }
-
-  :host([effect="scale"][position="top"]) #content,
-  :host([effect="scale"][position="bottom"]) #content {
-    transform: translateX(-50%) scale(0.7);
-  }
-
-  :host([effect="scale"][position="top"][opened]) #content,
-  :host([effect="scale"][position="bottom"][opened]) #content {
-    transform: translateX(-50%) scale(1);
-  }
-
-  :host([effect="scale"][position="left"]) #content,
-  :host([effect="scale"][position="right"]) #content {
-    transform: translateY(-50%) scale(0.7);
-  }
-
-  :host([effect="scale"][position="left"][opened]) #content,
-  :host([effect="scale"][position="right"][opened]) #content {
-    transform: translateY(-50%) scale(1);
-  }
-`;
-export const stylesPopperSlide = css `
-  :host([effect="slide"]) #content {
-    opacity: 0;
-    transition: all var(--kemet-popover-transition-speed, 0.3s) cubic-bezier(0.25, 0.5, 0.5, 0.9);
-  }
-
-  :host([effect="slide"][opened]) #content {
-    opacity: 1;
-  }
-
-  :host([effect="slide"][position="top"]) #content {
-    transform: translateX(-50%) translateY(20%);
-  }
-
-  :host([effect="slide"][position="top"][opened]) #content {
-    transform: translateX(-50%) translateY(0);
-  }
-
-  :host([effect="slide"][position="bottom"]) #content {
-    transform: translateX(-50%) translateY(-20%);
-  }
-
-  :host([effect="slide"][position="bottom"][opened]) #content {
-    transform: translateX(-50%) translateY(0);
-  }
-
-  :host([effect="slide"][position="right"]) #content {
-    transform: translateY(-50%) translateX(-20%);
-  }
-
-  :host([effect="slide"][position="right"][opened]) #content {
-    transform: translateY(-50%) translateX(0);
-  }
-
-  :host([effect="slide"][position="left"]) #content {
-    transform: translateY(-50%) translateX(20%);
-  }
-
-  :host([effect="slide"][position="left"][opened]) #content {
-    transform: translateY(-50%) translateX(0);
-  }
-`;
-export const stylesPopperFall = css `
-  :host([effect="fall"]) {
-    perspective: 1300px;
-  }
-
-  :host([effect="fall"]) #content {
-    transform-style: preserve-3d;
-    opacity: 0;
-  }
-
-  :host([effect="fall"][opened]) #content {
-    transition: all var(--kemet-popover-transition-speed, 0.3s) ease-in;
-    opacity: 1;
-  }
-
-  :host([effect="fall"][position="top"]) #content {
-    transform: translateX(-50%) translateZ(600px) rotateX(20deg);
-  }
-
-  :host([effect="fall"][position="top"][opened]) #content {
-    transform: translateX(-50%) translateZ(0px) rotateX(0deg);
-  }
-
-  :host([effect="fall"][position="bottom"]) #content {
-    transform: translateX(-50%) translateZ(600px) rotateX(20deg);
-  }
-
-  :host([effect="fall"][position="bottom"][opened]) #content {
-    transform: translateX(-50%) translateZ(0px) rotateX(0deg);
-  }
-
-  :host([effect="fall"][position="right"]) #content {
-    transform: translateY(-50%) translateZ(600px) rotateX(20deg);
-  }
-
-  :host([effect="fall"][position="right"][opened]) #content {
-    transform: translateY(-50%) translateZ(0px) rotateX(0deg);
-  }
-
-  :host([effect="fall"][position="left"]) #content {
-    transform: translateY(-50%) translateZ(600px) rotateX(20deg);
-  }
-
-  :host([effect="fall"][position="left"][opened]) #content {
-    transform: translateY(-50%) translateZ(0px) rotateX(0deg);
-  }
-`;
-export const stylesPopperFlipHorizontal = css `
-  :host([effect="flip-horizontal"]) {
-    perspective: 1300px;
-  }
-
-  :host([effect="flip-horizontal"]) #content {
-    transform-style: preserve-3d;
-    transition: all var(--kemet-popover-transition-speed, 0.3s);
-    opacity: 0;
-  }
-
-  :host([effect="flip-horizontal"][opened]) #content {
-    opacity: 1;
-  }
-
-  :host([effect="flip-horizontal"][position="top"]) #content {
-    transform: translateX(-50%) rotateY(-70deg);
-  }
-
-  :host([effect="flip-horizontal"][position="top"][opened]) #content {
-    transform: translateX(-50%) rotateY(0deg);
-  }
-
-  :host([effect="flip-horizontal"][position="bottom"]) #content {
-    transform: translateX(-50%) rotateY(-70deg);
-  }
-
-  :host([effect="flip-horizontal"][position="bottom"][opened]) #content {
-    transform: translateX(-50%) rotateY(0deg);
-  }
-
-  :host([effect="flip-horizontal"][position="right"]) #content {
-    transform: translateY(-50%) rotateY(-70deg);
-  }
-
-  :host([effect="flip-horizontal"][position="right"][opened]) #content {
-    transform: translateY(-50%) rotateY(0deg);
-  }
-
-  :host([effect="flip-horizontal"][position="left"]) #content {
-    transform: translateY(-50%) rotateY(-70deg);
-  }
-
-  :host([effect="flip-horizontal"][position="left"][opened]) #content {
-    transform: translateY(-50%) rotateY(0deg);
-  }
-`;
-export const stylesPopperFlipVertical = css `
-  :host([effect="flip-vertical"]) {
-    perspective: 1300px;
-  }
-
-  :host([effect="flip-vertical"]) #content {
-    transform-style: preserve-3d;
-    transition: all var(--kemet-popover-transition-speed, 0.3s);
-    opacity: 0;
-  }
-
-  :host([effect="flip-vertical"][opened]) #content {
-    opacity: 1;
-  }
-
-  :host([effect="flip-vertical"][position="top"]) #content {
-    transform: translateX(-50%) rotateX(-70deg);
-  }
-
-  :host([effect="flip-vertical"][position="top"][opened]) #content {
-    transform: translateX(-50%) rotateX(0deg);
-  }
-
-  :host([effect="flip-vertical"][position="bottom"]) #content {
-    transform: translateX(-50%) rotateX(-70deg);
-  }
-
-  :host([effect="flip-vertical"][position="bottom"][opened]) #content {
-    transform: translateX(-50%) rotateX(0deg);
-  }
-
-  :host([effect="flip-vertical"][position="right"]) #content {
-    transform: translateY(-50%) rotateX(-70deg);
-  }
-
-  :host([effect="flip-vertical"][position="right"][opened]) #content {
-    transform: translateY(-50%) rotateX(0deg);
-  }
-
-  :host([effect="flip-vertical"][position="left"]) #content {
-    transform: translateY(-50%) rotateX(-70deg);
-  }
-
-  :host([effect="flip-vertical"][position="left"][opened]) #content {
-    transform: translateY(-50%) rotateX(0deg);
-  }
-`;
-export const stylesPopperSign = css `
-  :host([effect="sign"]) {
-    perspective: 1300px;
-  }
-
-  :host([effect="sign"]) #content {
-    transform-style: preserve-3d;
-    transition: all var(--kemet-popover-transition-speed, 0.3s);
-    opacity: 0;
-  }
-
-  :host([effect="sign"][opened]) #content {
-    opacity: 1;
-  }
-
-  :host([effect="sign"][position="top"]) #content {
-    transform-origin: 0 100%;
-    transform: translateX(-50%) rotateX(90deg);
-  }
-
-  :host([effect="sign"][position="top"][opened]) #content {
-    transform: translateX(-50%) rotateX(0deg);
-  }
-
-  :host([effect="sign"][position="bottom"]) #content {
-    transform-origin: 100% 0;
-    transform: translateX(-50%) rotateX(90deg);
-  }
-
-  :host([effect="sign"][position="bottom"][opened]) #content {
-    transform: translateX(-50%) rotateX(0deg);
-  }
-
-  :host([effect="sign"][position="right"]) #content {
-    transform-origin: 0 100%;
-    transform: translateY(-50%) rotateY(90deg);
-  }
-
-  :host([effect="sign"][position="right"][opened]) #content {
-    transform: translateY(-50%) rotateY(0deg);
-  }
-
-  :host([effect="sign"][position="left"]) #content {
-    transform-origin: 100% 0;
-    transform: translateY(-50%) rotateY(90deg);
-  }
-
-  :host([effect="sign"][position="left"][opened]) #content {
-    transform: translateY(-50%) rotateY(0deg);
-  }
-`;
-export const stylesPopperSuperScaled = css `
-  :host([effect="super-scaled"]) #content {
-    opacity: 0;
-    transition: all var(--kemet-popover-transition-speed, 0.3s);
-  }
-
-  :host([effect="super-scaled"][opened]) #content {
-    opacity: 1;
-  }
-
-  :host([effect="super-scaled"][position="top"]) #content,
-  :host([effect="super-scaled"][position="bottom"]) #content {
-    transform: translateX(-50%) scale(2);
-  }
-
-  :host([effect="super-scaled"][position="top"][opened]) #content,
-  :host([effect="super-scaled"][position="bottom"][opened]) #content {
-    transform: translateX(-50%) scale(1);
-  }
-
-  :host([effect="super-scaled"][position="left"]) #content,
-  :host([effect="super-scaled"][position="right"]) #content {
-    transform: translateY(-50%) scale(2);
-  }
-
-  :host([effect="super-scaled"][position="left"][opened]) #content,
-  :host([effect="super-scaled"][position="right"][opened]) #content {
-    transform: translateY(-50%) scale(1);
-  }
-`;
-//# sourceMappingURL=styles.effects.js.map