kemet-ui 1.4.0 → 2.0.1

package/dist/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/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/components/kemet-popper/styles.d.ts

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

package/dist/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/components/{kemet-popover → kemet-popper}/styles.effects.js

@@ -1,6 +1,5 @@
 import { css } from 'lit';
-
-export const fade = css`
+export const stylesPopperFade = css `
   :host([effect="fade"]) #content {
     opacity: 0;
     transition: all var(--kemet-popover-transition-speed, 0.3s);
@@ -10,8 +9,7 @@ export const fade = css`
     opacity: 1;
   }
 `;
-
-export const scale = css`
+export const stylesPopperScale = css `
   :host([effect="scale"]) #content {
     opacity: 0;
     transition: all var(--kemet-popover-transition-speed, 0.3s);
@@ -41,8 +39,7 @@ export const scale = css`
     transform: translateY(-50%) scale(1);
   }
 `;
-
-export const slide = css`
+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);
@@ -84,8 +81,7 @@ export const slide = css`
     transform: translateY(-50%) translateX(0);
   }
 `;
-
-export const fall = css`
+export const stylesPopperFall = css `
   :host([effect="fall"]) {
     perspective: 1300px;
   }
@@ -132,8 +128,7 @@ export const fall = css`
     transform: translateY(-50%) translateZ(0px) rotateX(0deg);
   }
 `;
-
-export const flipHorizontal = css`
+export const stylesPopperFlipHorizontal = css `
   :host([effect="flip-horizontal"]) {
     perspective: 1300px;
   }
@@ -180,8 +175,7 @@ export const flipHorizontal = css`
     transform: translateY(-50%) rotateY(0deg);
   }
 `;
-
-export const flipVertical = css`
+export const stylesPopperFlipVertical = css `
   :host([effect="flip-vertical"]) {
     perspective: 1300px;
   }
@@ -228,8 +222,7 @@ export const flipVertical = css`
     transform: translateY(-50%) rotateX(0deg);
   }
 `;
-
-export const sign = css`
+export const stylesPopperSign = css `
   :host([effect="sign"]) {
     perspective: 1300px;
   }
@@ -280,8 +273,7 @@ export const sign = css`
     transform: translateY(-50%) rotateY(0deg);
   }
 `;
-
-export const superScaled = css`
+export const stylesPopperSuperScaled = css `
   :host([effect="super-scaled"]) #content {
     opacity: 0;
     transition: all var(--kemet-popover-transition-speed, 0.3s);
@@ -311,3 +303,4 @@ export const superScaled = css`
     transform: translateY(-50%) scale(1);
   }
 `;
+//# sourceMappingURL=styles.effects.js.map

package/dist/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/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/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/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/components/kemet-popper/types.js

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

package/dist/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"]}

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

@@ -0,0 +1,10 @@
+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;
+declare type Story = StoryObj;
+export declare const Standard: Story;

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

@@ -0,0 +1,40 @@
+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',
+};
+export default meta;
+const Template = ({ legend = 'Legend', axis = 'horizontal', filled = false, }) => html `
+  <kemet-radios legend=${legend} axis=${axis}>
+    <kemet-radio value="1" name="kemet-radio-button" label="Item 1" ?filled=${filled}></kemet-radio>
+    <kemet-radio value="2" name="kemet-radio-button" label="Item 2" ?filled=${filled}></kemet-radio>
+    <kemet-radio value="3" name="kemet-radio-button" label="Item 3"  ?filled=${filled}></kemet-radio>
+    <kemet-radio value="4" name="kemet-radio-button" label="Item 4" ?filled=${filled}></kemet-radio>
+  </kemet-radios>
+`;
+export const Standard = {
+    render: args => Template(args),
+    args: {
+        legend: 'Legend',
+        axis: 'horizontal',
+        filled: false,
+    },
+    argTypes: {
+        legend: {
+            control: { type: 'text' },
+        },
+        axis: {
+            control: { type: 'radio' },
+            options: ['horizontal', 'vertical'],
+        },
+        filled: {
+            control: { type: 'boolean' },
+        },
+    }
+};
+//# sourceMappingURL=stories.js.map

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

@@ -0,0 +1 @@
+{"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;CACzB,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,EAChB,MAAM,GAAG,QAAQ,EACjB,IAAI,GAAG,YAAY,EACnB,MAAM,GAAG,KAAK,GACf,EAAE,EAAE,CAAC,IAAI,CAAA;yBACe,MAAM,SAAS,IAAI;8EACkC,MAAM;8EACN,MAAM;+EACL,MAAM;8EACP,MAAM;;CAEnF,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC9B,IAAI,EAAE;QACJ,MAAM,EAAE,QAAQ;QAChB,IAAI,EAAE,YAAY;QAClB,MAAM,EAAE,KAAK;KACd;IACD,QAAQ,EAAE;QACR,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YAC1B,OAAO,EAAE,CAAC,YAAY,EAAE,UAAU,CAAC;SACpC;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;KACF;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};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = ({\n  legend = 'Legend',\n  axis = 'horizontal',\n  filled = false,\n}) => html`\n  <kemet-radios legend=${legend} axis=${axis}>\n    <kemet-radio value=\"1\" name=\"kemet-radio-button\" label=\"Item 1\" ?filled=${filled}></kemet-radio>\n    <kemet-radio value=\"2\" name=\"kemet-radio-button\" label=\"Item 2\" ?filled=${filled}></kemet-radio>\n    <kemet-radio value=\"3\" name=\"kemet-radio-button\" label=\"Item 3\"  ?filled=${filled}></kemet-radio>\n    <kemet-radio value=\"4\" name=\"kemet-radio-button\" label=\"Item 4\" ?filled=${filled}></kemet-radio>\n  </kemet-radios>\n`;\n\nexport const Standard: Story = {\n  render: args => Template(args),\n  args: {\n    legend: 'Legend',\n    axis: 'horizontal',\n    filled: false,\n  },\n  argTypes: {\n    legend: {\n      control: { type: 'text' },\n    },\n    axis: {\n      control: { type: 'radio' },\n      options: ['horizontal', 'vertical'],\n    },\n    filled: {\n      control: { type: 'boolean' },\n    },\n  }\n};\n"]}

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

@@ -0,0 +1,56 @@
+import { LitElement } from 'lit';
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-radio
+ * @summary An enhanced radio button.
+ *
+ * @prop {string} label - The text next to the radio button
+ * @prop {boolean} checked - Determines whether or not the button is checked
+ * @prop {string} name - The name of the field
+ * @prop {string} value - The value of the radio button
+ * @prop {boolean} disabled - Determines if the button should be disabled
+ * @prop {boolean} focused - Is true when the button is focused on
+ * @prop {boolean} filled - Displayed the button as a filled button
+ *
+ * @csspart label - The label that contains the radio button.
+ * @csspart button - The radio button.
+ * @csspart text - The text next to the radio button.
+ * @csspart dot - The circle that fills the radio button.
+ *
+ * @cssproperty --kemet-radio-size - The size of the radio button. Default: 18px.
+ * @cssproperty --kemet-radio-border - The outer border of the radio button. Default: 1px solid var(--kemet-color-primary).
+ * @cssproperty --kemet-radio-dot-color - The color of the radio button's dot. Default: var(--kemet-color-primary).
+ * @cssproperty --kemet-radio-dot-border-width - The border width of the radio button's dot. Default: 3px.
+ * @cssproperty --kemet-radio-dot-border-color - The border color of the radio button's dot. Default: var(--kemet-color-white).
+ * @cssproperty --kemet-radio-dot-color-filled - The filled color of the radio button. Default: var(--kemet-color-white).
+ *
+ * @event kemet-radio-focused -  Fires when the checkbox loses or receives focus
+ * @event kemet-radio-focused - Fires when the checkbox loses or receives focus
+ *
+ */
+export default class KemetRadio extends LitElement {
+    static styles: import("lit").CSSResult[];
+    label: string;
+    checked: boolean;
+    name: string;
+    value: string;
+    disabled: boolean;
+    focused: boolean;
+    filled: boolean;
+    input: HTMLInputElement;
+    firstUpdated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    click(): void;
+    blur(): void;
+    focus(): void;
+    handleBlur(): void;
+    handleFocus(): void;
+    makeDot(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-radio': KemetRadio;
+    }
+}