kemet-ui 2.0.0 → 2.0.2

package/dist/src/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 { 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

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

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

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

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

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

@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;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

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

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

package/dist/src/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/src/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;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/src/components/kemet-radio/kemet-radio.d.ts

@@ -1,56 +0,0 @@
-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;
-    }
-}

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

@@ -1,129 +0,0 @@
-import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { live } from 'lit/directives/live.js';
-import { emitEvent } from '../../utilities/misc/events';
-import { stylesRadio } from './styles';
-/**
- * @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
- *
- */
-let KemetRadio = class KemetRadio extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.label = '';
-        this.disabled = false;
-    }
-    firstUpdated() {
-        const radiosElement = this.closest('kemet-radios');
-        this.name = radiosElement.name || 'radio-button';
-        this.input = this.shadowRoot.querySelector('input');
-        this.setAttribute('role', 'radio');
-        if (this.checked) {
-            this.setAttribute('aria-checked', 'true');
-        }
-        else {
-            this.setAttribute('aria-checked', 'false');
-        }
-    }
-    render() {
-        return html `
-      <label part="label">
-        <input
-          type="radio"
-          name=${ifDefined(this.name)}
-          .value=${this.value}
-          .checked=${live(this.checked)}
-          .disabled=${this.disabled}
-          @blur=${() => this.handleBlur()}
-          @focus=${() => this.handleFocus()}
-        />
-        <button part="button" aria-label=${this.label}>${this.makeDot()}</button>
-        <span part="text">${this.label}</span>
-      </label>
-    `;
-    }
-    click() {
-        this.input.click();
-    }
-    blur() {
-        this.input.blur();
-    }
-    focus() {
-        this.input.focus();
-    }
-    handleBlur() {
-        this.focused = false;
-        emitEvent(this, 'kemet-radio-focused', false);
-    }
-    handleFocus() {
-        this.focused = true;
-        emitEvent(this, 'kemet-radio-focused', true);
-    }
-    makeDot() {
-        if (this.checked) {
-            return html `
-        <span part="dot"></span>
-      `;
-        }
-        return null;
-    }
-};
-KemetRadio.styles = [stylesRadio];
-__decorate([
-    property({ type: String })
-], KemetRadio.prototype, "label", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], KemetRadio.prototype, "checked", void 0);
-__decorate([
-    property({ type: String })
-], KemetRadio.prototype, "name", void 0);
-__decorate([
-    property({ type: String })
-], KemetRadio.prototype, "value", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], KemetRadio.prototype, "disabled", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], KemetRadio.prototype, "focused", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], KemetRadio.prototype, "filled", void 0);
-__decorate([
-    state()
-], KemetRadio.prototype, "input", void 0);
-KemetRadio = __decorate([
-    customElement('kemet-radio')
-], KemetRadio);
-export default KemetRadio;
-//# sourceMappingURL=kemet-radio.js.map

package/dist/src/components/kemet-radio/kemet-radio.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"kemet-radio.js","sourceRoot":"","sources":["../../../../src/components/kemet-radio/kemet-radio.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { stylesRadio } from './styles';\nimport { KemetRadioInterface } from './types';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-radio\n * @summary An enhanced radio button.\n *\n * @prop {string} label - The text next to the radio button\n * @prop {boolean} checked - Determines whether or not the button is checked\n * @prop {string} name - The name of the field\n * @prop {string} value - The value of the radio button\n * @prop {boolean} disabled - Determines if the button should be disabled\n * @prop {boolean} focused - Is true when the button is focused on\n * @prop {boolean} filled - Displayed the button as a filled button\n *\n * @csspart label - The label that contains the radio button.\n * @csspart button - The radio button.\n * @csspart text - The text next to the radio button.\n * @csspart dot - The circle that fills the radio button.\n *\n * @cssproperty --kemet-radio-size - The size of the radio button. Default: 18px.\n * @cssproperty --kemet-radio-border - The outer border of the radio button. Default: 1px solid var(--kemet-color-primary).\n * @cssproperty --kemet-radio-dot-color - The color of the radio button's dot. Default: var(--kemet-color-primary).\n * @cssproperty --kemet-radio-dot-border-width - The border width of the radio button's dot. Default: 3px.\n * @cssproperty --kemet-radio-dot-border-color - The border color of the radio button's dot. Default: var(--kemet-color-white).\n * @cssproperty --kemet-radio-dot-color-filled - The filled color of the radio button. Default: var(--kemet-color-white).\n *\n * @event kemet-radio-focused -  Fires when the checkbox loses or receives focus\n * @event kemet-radio-focused - Fires when the checkbox loses or receives focus\n *\n */\n\n@customElement('kemet-radio')\nexport default class KemetRadio extends LitElement {\n  static styles = [stylesRadio];\n\n  @property({ type: String })\n  label: string = '';\n\n  @property({ type: Boolean, reflect: true })\n  checked: boolean;\n\n  @property({ type: String })\n  name: string;\n\n  @property({ type: String })\n  value: string;\n\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  focused: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  filled: boolean;\n\n  @state()\n  input: HTMLInputElement;\n\n  firstUpdated() {\n    const radiosElement = this.closest('kemet-radios') as KemetRadioInterface;\n\n    this.name = radiosElement.name || 'radio-button';\n    this.input = this.shadowRoot.querySelector('input');\n    this.setAttribute('role', 'radio');\n\n    if (this.checked) {\n      this.setAttribute('aria-checked', 'true');\n    } else {\n      this.setAttribute('aria-checked', 'false');\n    }\n  }\n\n  render() {\n    return html`\n      <label part=\"label\">\n        <input\n          type=\"radio\"\n          name=${ifDefined(this.name)}\n          .value=${this.value}\n          .checked=${live(this.checked)}\n          .disabled=${this.disabled}\n          @blur=${() => this.handleBlur()}\n          @focus=${() => this.handleFocus()}\n        />\n        <button part=\"button\" aria-label=${this.label}>${this.makeDot()}</button>\n        <span part=\"text\">${this.label}</span>\n      </label>\n    `;\n  }\n\n  click() {\n    this.input.click();\n  }\n\n  blur() {\n    this.input.blur();\n  }\n\n  focus() {\n    this.input.focus();\n  }\n\n  handleBlur() {\n    this.focused = false;\n    emitEvent(this, 'kemet-radio-focused', false);\n  }\n\n  handleFocus() {\n    this.focused = true;\n    emitEvent(this, 'kemet-radio-focused', true);\n  }\n\n  makeDot() {\n    if (this.checked) {\n      return html`\n        <span part=\"dot\"></span>\n      `;\n    }\n\n    return null;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-radio': KemetRadio\n  }\n}\n"]}