kemet-ui 3.1.0 → 4.0.0

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

@@ -1,65 +0,0 @@
-import { html } from 'lit';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-import '../kemet-popper';
-import '../kemet-popper-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 / Popper',
-    component: 'kemet-popper',
-    args: {
-        triggerText: 'Hover Over Me',
-        content: '<kemet-popper-close style="position:absolute; right:1rem;"><kemet-icon icon="x-lg"></kemet-icon></kemet-popper-close><h2 kemet-margin-top="none">Heading</h2><img width="240" src="https://via.placeholder.com/1920x1080" alt="A placeholder" /><p><a href="https://google.com">This</a> is some <a href="https://google.com">content</a>.</p>',
-        canvasPosition: 'middle',
-    },
-    argTypes: {
-        canvasPosition: {
-            control: { type: 'select' },
-            options: ['middle', 'top-right', 'bottom-right', 'bottom-left', 'top-left'],
-        },
-        placement: {
-            control: { type: 'select' },
-            options: ['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'],
-        },
-        // effect: {
-        //   control: { type: 'select' },
-        //   options: ['none', 'fade', 'scale', 'slide', 'fall', 'flip-horizontal', 'flip-vertical', 'sign', 'super-scaled'],
-        // },
-        fireOn: {
-            control: { type: 'radio' },
-            options: ['hover', 'click'],
-        },
-        strategy: {
-            control: { type: 'radio' },
-            options: ['fixed', 'absolute'],
-        },
-    },
-};
-export default meta;
-const Template = (args) => {
-    const popper = document.querySelector('kemet-popper');
-    if (popper)
-        popper.refresh();
-    return html `
-    <div class="storybook__canvas--${args.canvasPosition}">
-      <kemet-popper ?opened=${args.opened} placement=${ifDefined(args.placement)} effect=${ifDefined(args.effect)} fire-on=${ifDefined(args.fireOn)} strategy=${ifDefined(args.strategy)} skidding=${ifDefined(args.skidding)} distance=${ifDefined(args.distance)}>
-        <kemet-button type="text" slot="trigger">${args.triggerText}</kemet-button>
-        <div slot="content" kemet-color="gray-950">${unsafeHTML(args.content)}</div>
-      </kemet-popper>
-    </div>
-  `;
-};
-export const Standard = {
-    render: (args) => Template(args),
-};
-export const OnClick = {
-    render: (args) => Template(args),
-    args: {
-        triggerText: 'Click Me',
-        fireOn: 'click',
-    }
-};
-//# sourceMappingURL=stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-popper/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAG3D,OAAO,iBAAiB,CAAC;AACzB,OAAO,uBAAuB,CAAC;AAE/B,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,iCAAiC,CAAC;AAEzC,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,cAAc;IACzB,IAAI,EAAE;QACJ,WAAW,EAAE,eAAe;QAC5B,OAAO,EAAE,gVAAgV;QACzV,cAAc,EAAE,QAAQ;KACzB;IACD,QAAQ,EAAE;QACR,cAAc,EAAE;YACd,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,cAAc,EAAE,aAAa,EAAE,UAAU,CAAC;SAC5E;QACD,SAAS,EAAE;YACT,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,UAAU,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,cAAc,EAAE,YAAY,EAAE,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,EAAE,YAAY,EAAE,UAAU,CAAC;SAC1L;QACD,YAAY;QACZ,iCAAiC;QACjC,qHAAqH;QACrH,KAAK;QACL,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YAC1B,OAAO,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC;SAC5B;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YAC1B,OAAO,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC;SAC/B;KACF;CACF,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACxB,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;IACtD,IAAI,MAAM;QAAE,MAAM,CAAC,OAAO,EAAE,CAAC;IAE7B,OAAO,IAAI,CAAA;qCACwB,IAAI,CAAC,cAAc;8BAC1B,IAAI,CAAC,MAAM,cAAc,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,WAAW,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,YAAY,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,aAAa,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,aAAa,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC;mDAC/M,IAAI,CAAC,WAAW;qDACd,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC;;;GAG1E,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,CAAC,IAAS,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;CACtC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,MAAM,EAAE,CAAC,IAAS,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IACrC,IAAI,EAAE;QACJ,WAAW,EAAE,UAAU;QACvB,MAAM,EAAE,OAAO;KAChB;CACF,CAAC","sourcesContent":["import { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-popper';\nimport '../kemet-popper-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 / Popper',\n  component: 'kemet-popper',\n  args: {\n    triggerText: 'Hover Over Me',\n    content: '<kemet-popper-close style=\"position:absolute; right:1rem;\"><kemet-icon icon=\"x-lg\"></kemet-icon></kemet-popper-close><h2 kemet-margin-top=\"none\">Heading</h2><img width=\"240\" src=\"https://via.placeholder.com/1920x1080\" alt=\"A placeholder\" /><p><a href=\"https://google.com\">This</a> is some <a href=\"https://google.com\">content</a>.</p>',\n    canvasPosition: 'middle',\n  },\n  argTypes: {\n    canvasPosition: {\n      control: { type: 'select' },\n      options: ['middle', 'top-right', 'bottom-right', 'bottom-left', 'top-left'],\n    },\n    placement: {\n      control: { type: 'select' },\n      options: ['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'],\n    },\n    // effect: {\n    //   control: { type: 'select' },\n    //   options: ['none', 'fade', 'scale', 'slide', 'fall', 'flip-horizontal', 'flip-vertical', 'sign', 'super-scaled'],\n    // },\n    fireOn: {\n      control: { type: 'radio' },\n      options: ['hover', 'click'],\n    },\n    strategy: {\n      control: { type: 'radio' },\n      options: ['fixed', 'absolute'],\n    },\n  },\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = (args) => {\n  const popper = document.querySelector('kemet-popper');\n  if (popper) popper.refresh();\n\n  return html`\n    <div class=\"storybook__canvas--${args.canvasPosition}\">\n      <kemet-popper ?opened=${args.opened} placement=${ifDefined(args.placement)} effect=${ifDefined(args.effect)} fire-on=${ifDefined(args.fireOn)} strategy=${ifDefined(args.strategy)} skidding=${ifDefined(args.skidding)} distance=${ifDefined(args.distance)}>\n        <kemet-button type=\"text\" slot=\"trigger\">${args.triggerText}</kemet-button>\n        <div slot=\"content\" kemet-color=\"gray-950\">${unsafeHTML(args.content)}</div>\n      </kemet-popper>\n    </div>\n  `;\n};\n\nexport const Standard: Story = {\n  render: (args: any) => Template(args),\n};\n\nexport const OnClick: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    triggerText: 'Click Me',\n    fireOn: 'click',\n  }\n};\n"]}

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.map

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

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

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

@@ -1 +0,0 @@
-{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkC9B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesPopper = css`\n  :host {\n    --kemet-popper-width: auto;\n    --kemet-popper-height: auto;\n    --kemet-popper-padding: 1rem;\n    --kemet-popper-border-color: rgb(var(--kemet-color-foreground));\n    --kemet-popper-background-color: rgb(var(--kemet-color-background));\n\n    display: inline-block;\n  }\n\n  #content {\n    visibility: hidden;\n    pointer-events: none;\n    width: var(--kemet-popper-width);\n    height: var(--kemet-popper-height);\n    position: absolute;\n    z-index: -1;\n    opacity: 0;\n    transition: all var(--kemet-popover-transition-speed, 0.3s);\n  }\n\n  :host([opened]) #content {\n    visibility: visible;\n    z-index: 9;\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  ::slotted([slot=\"content\"]) {\n    padding: var(--kemet-popper-padding);\n    border: 1px solid var(--kemet-popper-border-color);\n    background-color: var(--kemet-popper-background-color);\n  }\n`;\n"]}

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

@@ -1,3 +0,0 @@
-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';
-export type TypeFireOn = 'click' | 'hover';
-export type TypeEffect = 'none' | 'fade' | 'scale' | 'slide' | 'fall' | 'flip-horizontal' | 'flip-vertical' | 'sign' | 'super-scaled';

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

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

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

@@ -1 +0,0 @@
-{"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"]}

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

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

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

@@ -1,44 +0,0 @@
-import { html } from 'lit';
-import '../kemet-radio';
-import '../kemet-radios';
-import '../../kemet-tabs/kemet-tabs';
-import '../../kemet-tabs/kemet-tab';
-import '../../kemet-tabs/kemet-tab-panel';
-const meta = {
-    title: 'Components / Radio',
-    component: 'kemet-radio',
-    args: {
-        legend: 'Legend',
-    },
-    argTypes: {
-        axis: {
-            control: { type: 'radio' },
-            options: ['horizontal', 'vertical'],
-        },
-    }
-};
-export default meta;
-const Template = (args) => html `
-  <kemet-radios legend=${args.legend} axis=${args.axis}>
-    <kemet-radio value="1" name="kemet-radio-button" label="Item 1" ?filled=${args.filled}></kemet-radio>
-    <kemet-radio value="2" name="kemet-radio-button" label="Item 2" ?filled=${args.filled}></kemet-radio>
-    <kemet-radio value="3" name="kemet-radio-button" label="Item 3"  ?filled=${args.filled}></kemet-radio>
-    <kemet-radio value="4" name="kemet-radio-button" label="Item 4" ?filled=${args.filled}></kemet-radio>
-  </kemet-radios>
-`;
-export const Standard = {
-    render: args => Template(args),
-};
-export const Vertical = {
-    render: args => Template(args),
-    args: {
-        axis: 'vertical',
-    },
-};
-export const Filled = {
-    render: args => Template(args),
-    args: {
-        filled: true,
-    },
-};
-//# sourceMappingURL=stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-radio/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,OAAO,gBAAgB,CAAC;AACxB,OAAO,iBAAiB,CAAC;AAEzB,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAE1C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,aAAa;IACxB,IAAI,EAAE;QACJ,MAAM,EAAE,QAAQ;KACjB;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YAC1B,OAAO,EAAE,CAAC,YAAY,EAAE,UAAU,CAAC;SACpC;KACF;CACF,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;yBACN,IAAI,CAAC,MAAM,SAAS,IAAI,CAAC,IAAI;8EACwB,IAAI,CAAC,MAAM;8EACX,IAAI,CAAC,MAAM;+EACV,IAAI,CAAC,MAAM;8EACZ,IAAI,CAAC,MAAM;;CAExF,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;CAC/B,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC9B,IAAI,EAAE;QACJ,IAAI,EAAE,UAAU;KACjB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAU;IAC3B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC9B,IAAI,EAAE;QACJ,MAAM,EAAE,IAAI;KACb;CACF,CAAC","sourcesContent":["import { html } from 'lit';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-radio';\nimport '../kemet-radios';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n  title: 'Components / Radio',\n  component: 'kemet-radio',\n  args: {\n    legend: 'Legend',\n  },\n  argTypes: {\n    axis: {\n      control: { type: 'radio' },\n      options: ['horizontal', 'vertical'],\n    },\n  }\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = (args) => html`\n  <kemet-radios legend=${args.legend} axis=${args.axis}>\n    <kemet-radio value=\"1\" name=\"kemet-radio-button\" label=\"Item 1\" ?filled=${args.filled}></kemet-radio>\n    <kemet-radio value=\"2\" name=\"kemet-radio-button\" label=\"Item 2\" ?filled=${args.filled}></kemet-radio>\n    <kemet-radio value=\"3\" name=\"kemet-radio-button\" label=\"Item 3\"  ?filled=${args.filled}></kemet-radio>\n    <kemet-radio value=\"4\" name=\"kemet-radio-button\" label=\"Item 4\" ?filled=${args.filled}></kemet-radio>\n  </kemet-radios>\n`;\n\nexport const Standard: Story = {\n  render: args => Template(args),\n};\n\nexport const Vertical: Story = {\n  render: args => Template(args),\n  args: {\n    axis: 'vertical',\n  },\n};\n\nexport const Filled: Story = {\n  render: args => Template(args),\n  args: {\n    filled: true,\n  },\n};\n"]}