kemet-ui 1.3.1 → 2.0.0

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

@@ -0,0 +1,63 @@
+import { LitElement } from 'lit';
+import { TypeEffect, 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 the Popper is opened or closed
+ * @prop {TypeEffect} effect - The open/close animation effect for the Popper
+ * @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;
+    effect: TypeEffect;
+    fireOn: TypeFireOn;
+    strategy: 'fixed' | 'absolute';
+    skidding: number;
+    distance: number;
+    /** @internal */
+    popperInstance: any;
+    /** @internal */
+    triggerElement: HTMLElement;
+    /** @internal */
+    contentElement: HTMLElement;
+    /** @internal */
+    focusableElements: any;
+    constructor();
+    firstUpdated(): void;
+    updated(prevProps: any): void;
+    render(): import("lit-html").TemplateResult<1>;
+    refresh(): void;
+    makePopper(): void;
+    toggle(event: any): void;
+    handleKeyUp(event: any): void;
+    handleFocusableDown(event: any): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-popper': KemetPopper;
+    }
+}

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

@@ -0,0 +1,182 @@
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { customElement, property, query, queryAll, state } from 'lit/decorators.js';
+import { createPopper } from '@popperjs/core';
+import { emitEvent } from '../../utilities/misc/events';
+import { keyCodes } from '../../utilities/misc/constants';
+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 the Popper is opened or closed
+ * @prop {TypeEffect} effect - The open/close animation effect for the Popper
+ * @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.effect = 'fade';
+        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() {
+        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 isSlotTrigger = event.target.getAttribute('slot') === 'trigger';
+        const isPartTrigger = event.target.getAttribute('part') === 'trigger';
+        if (isSlotTrigger || isPartTrigger) {
+            if (this.opened) {
+                this.opened = false;
+            }
+            else {
+                this.opened = true;
+            }
+        }
+    }
+    handleKeyUp(event) {
+        event.preventDefault();
+        if (event.keyCode === keyCodes.ESC) {
+            this.opened = false;
+        }
+        if (event.keyCode === keyCodes.ENTER || event.keyCode === keyCodes.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, stylesPopperFade, stylesPopperScale, stylesPopperSlide, stylesPopperFall, stylesPopperFlipHorizontal, stylesPopperFlipVertical, stylesPopperSign, stylesPopperSuperScaled];
+__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, reflect: true })
+], KemetPopper.prototype, "effect", 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/src/components/kemet-popper/kemet-popper.js.map

@@ -0,0 +1 @@
+{"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 { customElement, property, query, queryAll, state } from 'lit/decorators.js';\nimport { createPopper } from '@popperjs/core';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { keyCodes } from '../../utilities/misc/constants';\nimport { TypeEffect, TypeFireOn, TypePlacement } from './types';\nimport { stylesPopper } from './styles';\nimport { 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 the Popper is opened or closed\n * @prop {TypeEffect} effect - The open/close animation effect for the Popper\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, stylesPopperFade, stylesPopperScale, stylesPopperSlide, stylesPopperFall, stylesPopperFlipHorizontal, stylesPopperFlipVertical, stylesPopperSign, stylesPopperSuperScaled];\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, reflect: true })\n  effect: TypeEffect = 'fade';\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: any;\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: any;\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 => this.handleFocusableDown(event));\n      });\n    }\n  }\n\n  updated(prevProps) {\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    return html`\n      <div\n        id=\"trigger\"\n        part=\"trigger\"\n        tabIndex=\"0\"\n        @click=${this.fireOn === 'click' ? event => this.toggle(event) : null}\n        @keyup=${this.fireOn === 'click' ? event => this.handleKeyUp(event) : null}\n        @mouseover=${this.fireOn !== 'click' ? () => this.opened = true : null}\n        @focus=${this.fireOn !== 'click' ? () => this.opened = true : null}\n        @mouseout=${this.fireOn !== 'click' ? () => this.opened = false : null}\n        @blur=${this.fireOn !== 'click' ? () => this.opened = false : null}\n      >\n        <slot name=\"trigger\"></slot>\n      </div>\n      <div\n        id=\"content\"\n        @mouseover=${this.fireOn !== 'click' ? () => this.opened = true : null}\n        @mouseout=${this.fireOn !== 'click' ? () => this.opened = false : null}\n      >\n        <slot name=\"content\" @slotchange=${() => this.makePopper()}></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) {\n    const isSlotTrigger = event.target.getAttribute('slot') === 'trigger';\n    const isPartTrigger = event.target.getAttribute('part') === 'trigger';\n\n    if (isSlotTrigger || isPartTrigger) {\n      if (this.opened) {\n        this.opened = false;\n      } else {\n        this.opened = true;\n      }\n    }\n  }\n\n  handleKeyUp(event) {\n    event.preventDefault();\n\n    if (event.keyCode === keyCodes.ESC) {\n      this.opened = false;\n    }\n\n    if (event.keyCode === keyCodes.ENTER || event.keyCode === keyCodes.SPACE) {\n      this.toggle(event);\n    }\n  }\n\n  handleFocusableDown(event) {\n    const firstFocusable = this.focusableElements[0];\n    const lastFocusable = this.focusableElements[this.focusableElements.length - 1];\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/src/components/kemet-popper/styles.d.ts

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

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

@@ -0,0 +1,8 @@
+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/src/components/kemet-popper/styles.effects.js

@@ -0,0 +1,306 @@
+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

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.effects.js","sourceRoot":"","sources":["../../../../src/components/kemet-popper/styles.effects.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;CASlC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BnC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCnC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8ClC,CAAC;AAEF,MAAM,CAAC,MAAM,0BAA0B,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8C5C,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8C1C,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDlC,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BzC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesPopperFade = css`\n  :host([effect=\"fade\"]) #content {\n    opacity: 0;\n    transition: all var(--kemet-popover-transition-speed, 0.3s);\n  }\n\n  :host([effect=\"fade\"][opened]) #content {\n    opacity: 1;\n  }\n`;\n\nexport const stylesPopperScale = css`\n  :host([effect=\"scale\"]) #content {\n    opacity: 0;\n    transition: all var(--kemet-popover-transition-speed, 0.3s);\n  }\n\n  :host([effect=\"scale\"][opened]) #content {\n    opacity: 1;\n  }\n\n  :host([effect=\"scale\"][position=\"top\"]) #content,\n  :host([effect=\"scale\"][position=\"bottom\"]) #content {\n    transform: translateX(-50%) scale(0.7);\n  }\n\n  :host([effect=\"scale\"][position=\"top\"][opened]) #content,\n  :host([effect=\"scale\"][position=\"bottom\"][opened]) #content {\n    transform: translateX(-50%) scale(1);\n  }\n\n  :host([effect=\"scale\"][position=\"left\"]) #content,\n  :host([effect=\"scale\"][position=\"right\"]) #content {\n    transform: translateY(-50%) scale(0.7);\n  }\n\n  :host([effect=\"scale\"][position=\"left\"][opened]) #content,\n  :host([effect=\"scale\"][position=\"right\"][opened]) #content {\n    transform: translateY(-50%) scale(1);\n  }\n`;\n\nexport const stylesPopperSlide = css`\n  :host([effect=\"slide\"]) #content {\n    opacity: 0;\n    transition: all var(--kemet-popover-transition-speed, 0.3s) cubic-bezier(0.25, 0.5, 0.5, 0.9);\n  }\n\n  :host([effect=\"slide\"][opened]) #content {\n    opacity: 1;\n  }\n\n  :host([effect=\"slide\"][position=\"top\"]) #content {\n    transform: translateX(-50%) translateY(20%);\n  }\n\n  :host([effect=\"slide\"][position=\"top\"][opened]) #content {\n    transform: translateX(-50%) translateY(0);\n  }\n\n  :host([effect=\"slide\"][position=\"bottom\"]) #content {\n    transform: translateX(-50%) translateY(-20%);\n  }\n\n  :host([effect=\"slide\"][position=\"bottom\"][opened]) #content {\n    transform: translateX(-50%) translateY(0);\n  }\n\n  :host([effect=\"slide\"][position=\"right\"]) #content {\n    transform: translateY(-50%) translateX(-20%);\n  }\n\n  :host([effect=\"slide\"][position=\"right\"][opened]) #content {\n    transform: translateY(-50%) translateX(0);\n  }\n\n  :host([effect=\"slide\"][position=\"left\"]) #content {\n    transform: translateY(-50%) translateX(20%);\n  }\n\n  :host([effect=\"slide\"][position=\"left\"][opened]) #content {\n    transform: translateY(-50%) translateX(0);\n  }\n`;\n\nexport const stylesPopperFall = css`\n  :host([effect=\"fall\"]) {\n    perspective: 1300px;\n  }\n\n  :host([effect=\"fall\"]) #content {\n    transform-style: preserve-3d;\n    opacity: 0;\n  }\n\n  :host([effect=\"fall\"][opened]) #content {\n    transition: all var(--kemet-popover-transition-speed, 0.3s) ease-in;\n    opacity: 1;\n  }\n\n  :host([effect=\"fall\"][position=\"top\"]) #content {\n    transform: translateX(-50%) translateZ(600px) rotateX(20deg);\n  }\n\n  :host([effect=\"fall\"][position=\"top\"][opened]) #content {\n    transform: translateX(-50%) translateZ(0px) rotateX(0deg);\n  }\n\n  :host([effect=\"fall\"][position=\"bottom\"]) #content {\n    transform: translateX(-50%) translateZ(600px) rotateX(20deg);\n  }\n\n  :host([effect=\"fall\"][position=\"bottom\"][opened]) #content {\n    transform: translateX(-50%) translateZ(0px) rotateX(0deg);\n  }\n\n  :host([effect=\"fall\"][position=\"right\"]) #content {\n    transform: translateY(-50%) translateZ(600px) rotateX(20deg);\n  }\n\n  :host([effect=\"fall\"][position=\"right\"][opened]) #content {\n    transform: translateY(-50%) translateZ(0px) rotateX(0deg);\n  }\n\n  :host([effect=\"fall\"][position=\"left\"]) #content {\n    transform: translateY(-50%) translateZ(600px) rotateX(20deg);\n  }\n\n  :host([effect=\"fall\"][position=\"left\"][opened]) #content {\n    transform: translateY(-50%) translateZ(0px) rotateX(0deg);\n  }\n`;\n\nexport const stylesPopperFlipHorizontal = css`\n  :host([effect=\"flip-horizontal\"]) {\n    perspective: 1300px;\n  }\n\n  :host([effect=\"flip-horizontal\"]) #content {\n    transform-style: preserve-3d;\n    transition: all var(--kemet-popover-transition-speed, 0.3s);\n    opacity: 0;\n  }\n\n  :host([effect=\"flip-horizontal\"][opened]) #content {\n    opacity: 1;\n  }\n\n  :host([effect=\"flip-horizontal\"][position=\"top\"]) #content {\n    transform: translateX(-50%) rotateY(-70deg);\n  }\n\n  :host([effect=\"flip-horizontal\"][position=\"top\"][opened]) #content {\n    transform: translateX(-50%) rotateY(0deg);\n  }\n\n  :host([effect=\"flip-horizontal\"][position=\"bottom\"]) #content {\n    transform: translateX(-50%) rotateY(-70deg);\n  }\n\n  :host([effect=\"flip-horizontal\"][position=\"bottom\"][opened]) #content {\n    transform: translateX(-50%) rotateY(0deg);\n  }\n\n  :host([effect=\"flip-horizontal\"][position=\"right\"]) #content {\n    transform: translateY(-50%) rotateY(-70deg);\n  }\n\n  :host([effect=\"flip-horizontal\"][position=\"right\"][opened]) #content {\n    transform: translateY(-50%) rotateY(0deg);\n  }\n\n  :host([effect=\"flip-horizontal\"][position=\"left\"]) #content {\n    transform: translateY(-50%) rotateY(-70deg);\n  }\n\n  :host([effect=\"flip-horizontal\"][position=\"left\"][opened]) #content {\n    transform: translateY(-50%) rotateY(0deg);\n  }\n`;\n\nexport const stylesPopperFlipVertical = css`\n  :host([effect=\"flip-vertical\"]) {\n    perspective: 1300px;\n  }\n\n  :host([effect=\"flip-vertical\"]) #content {\n    transform-style: preserve-3d;\n    transition: all var(--kemet-popover-transition-speed, 0.3s);\n    opacity: 0;\n  }\n\n  :host([effect=\"flip-vertical\"][opened]) #content {\n    opacity: 1;\n  }\n\n  :host([effect=\"flip-vertical\"][position=\"top\"]) #content {\n    transform: translateX(-50%) rotateX(-70deg);\n  }\n\n  :host([effect=\"flip-vertical\"][position=\"top\"][opened]) #content {\n    transform: translateX(-50%) rotateX(0deg);\n  }\n\n  :host([effect=\"flip-vertical\"][position=\"bottom\"]) #content {\n    transform: translateX(-50%) rotateX(-70deg);\n  }\n\n  :host([effect=\"flip-vertical\"][position=\"bottom\"][opened]) #content {\n    transform: translateX(-50%) rotateX(0deg);\n  }\n\n  :host([effect=\"flip-vertical\"][position=\"right\"]) #content {\n    transform: translateY(-50%) rotateX(-70deg);\n  }\n\n  :host([effect=\"flip-vertical\"][position=\"right\"][opened]) #content {\n    transform: translateY(-50%) rotateX(0deg);\n  }\n\n  :host([effect=\"flip-vertical\"][position=\"left\"]) #content {\n    transform: translateY(-50%) rotateX(-70deg);\n  }\n\n  :host([effect=\"flip-vertical\"][position=\"left\"][opened]) #content {\n    transform: translateY(-50%) rotateX(0deg);\n  }\n`;\n\nexport const stylesPopperSign = css`\n  :host([effect=\"sign\"]) {\n    perspective: 1300px;\n  }\n\n  :host([effect=\"sign\"]) #content {\n    transform-style: preserve-3d;\n    transition: all var(--kemet-popover-transition-speed, 0.3s);\n    opacity: 0;\n  }\n\n  :host([effect=\"sign\"][opened]) #content {\n    opacity: 1;\n  }\n\n  :host([effect=\"sign\"][position=\"top\"]) #content {\n    transform-origin: 0 100%;\n    transform: translateX(-50%) rotateX(90deg);\n  }\n\n  :host([effect=\"sign\"][position=\"top\"][opened]) #content {\n    transform: translateX(-50%) rotateX(0deg);\n  }\n\n  :host([effect=\"sign\"][position=\"bottom\"]) #content {\n    transform-origin: 100% 0;\n    transform: translateX(-50%) rotateX(90deg);\n  }\n\n  :host([effect=\"sign\"][position=\"bottom\"][opened]) #content {\n    transform: translateX(-50%) rotateX(0deg);\n  }\n\n  :host([effect=\"sign\"][position=\"right\"]) #content {\n    transform-origin: 0 100%;\n    transform: translateY(-50%) rotateY(90deg);\n  }\n\n  :host([effect=\"sign\"][position=\"right\"][opened]) #content {\n    transform: translateY(-50%) rotateY(0deg);\n  }\n\n  :host([effect=\"sign\"][position=\"left\"]) #content {\n    transform-origin: 100% 0;\n    transform: translateY(-50%) rotateY(90deg);\n  }\n\n  :host([effect=\"sign\"][position=\"left\"][opened]) #content {\n    transform: translateY(-50%) rotateY(0deg);\n  }\n`;\n\nexport const stylesPopperSuperScaled = css`\n  :host([effect=\"super-scaled\"]) #content {\n    opacity: 0;\n    transition: all var(--kemet-popover-transition-speed, 0.3s);\n  }\n\n  :host([effect=\"super-scaled\"][opened]) #content {\n    opacity: 1;\n  }\n\n  :host([effect=\"super-scaled\"][position=\"top\"]) #content,\n  :host([effect=\"super-scaled\"][position=\"bottom\"]) #content {\n    transform: translateX(-50%) scale(2);\n  }\n\n  :host([effect=\"super-scaled\"][position=\"top\"][opened]) #content,\n  :host([effect=\"super-scaled\"][position=\"bottom\"][opened]) #content {\n    transform: translateX(-50%) scale(1);\n  }\n\n  :host([effect=\"super-scaled\"][position=\"left\"]) #content,\n  :host([effect=\"super-scaled\"][position=\"right\"]) #content {\n    transform: translateY(-50%) scale(2);\n  }\n\n  :host([effect=\"super-scaled\"][position=\"left\"][opened]) #content,\n  :host([effect=\"super-scaled\"][position=\"right\"][opened]) #content {\n    transform: translateY(-50%) scale(1);\n  }\n`;\n"]}

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

@@ -0,0 +1,28 @@
+import { css } from 'lit';
+export const stylesPopper = css `
+  :host {
+    display: inline-block;
+  }
+
+  #content {
+    visibility: hidden;
+    pointer-events: none;
+    width: var(--kemet-popper-width, auto);
+    height: var(--kemet-popper-height, auto);
+    position: absolute;
+    z-index: -1;
+  }
+
+  :host([opened]) #content {
+    visibility: visible;
+    z-index: 9;
+    pointer-events: auto;
+  }
+
+  ::slotted([slot="content"]) {
+    padding: var(--kemet-popper-padding, 1rem);
+    border: 1px solid var(--kemet-popper-border-color, var(--kemet-color-background));
+    background-color: var(--kemet-popper-background-color, var(--kemet-color-foreground));
+  }
+`;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/components/kemet-popper/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;CAyB9B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesPopper = css`\n  :host {\n    display: inline-block;\n  }\n\n  #content {\n    visibility: hidden;\n    pointer-events: none;\n    width: var(--kemet-popper-width, auto);\n    height: var(--kemet-popper-height, auto);\n    position: absolute;\n    z-index: -1;\n  }\n\n  :host([opened]) #content {\n    visibility: visible;\n    z-index: 9;\n    pointer-events: auto;\n  }\n\n  ::slotted([slot=\"content\"]) {\n    padding: var(--kemet-popper-padding, 1rem);\n    border: 1px solid var(--kemet-popper-border-color, var(--kemet-color-background));\n    background-color: var(--kemet-popper-background-color, var(--kemet-color-foreground));\n  }\n`;\n"]}

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

@@ -0,0 +1,3 @@
+export declare type TypePlacement = 'auto' | 'auto-start' | 'auto-end' | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
+export declare type TypeFireOn = 'click' | 'hover';
+export declare type TypeEffect = 'none' | 'fade' | 'scale' | 'slide' | 'fall' | 'flip-horizontal' | 'flip-vertical' | 'sign' | 'super-scaled';

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/kemet-popper/types.ts"],"names":[],"mappings":"","sourcesContent":["export type TypePlacement = 'auto' | 'auto-start' | 'auto-end' | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';\nexport type TypeFireOn = 'click' | 'hover';\nexport type TypeEffect = 'none' | 'fade' | 'scale' | 'slide' | 'fall' | 'flip-horizontal' | 'flip-vertical' | 'sign' | 'super-scaled';\n"]}