kemet-ui 4.0.0 → 4.0.2

package/dist/chunk-LKIDBCVS.mjs

@@ -0,0 +1,574 @@
+import {
+  emitEvent
+} from "./chunk-LHEY3UOF.mjs";
+import {
+  __decorateClass
+} from "./chunk-SAWN7RJP.mjs";
+
+// src/elements/popper.ts
+import { html, LitElement } from "lit";
+import {
+  customElement,
+  property,
+  query,
+  queryAll,
+  state
+} from "lit/decorators.js";
+import { createPopper } from "@popperjs/core/dist/esm";
+
+// src/styles/elements/popper.ts
+import { css } from "lit";
+var 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);
+  }
+`;
+var stylesPopperFade = css`
+  :host([effect="fade"]) #content {
+    opacity: 0;
+    transition: all var(--kemet-popover-transition-speed, 0.3s);
+  }
+
+  :host([effect="fade"][opened]) #content {
+    opacity: 1;
+  }
+`;
+var 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);
+  }
+`;
+var 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);
+  }
+`;
+var 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);
+  }
+`;
+var 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);
+  }
+`;
+var 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);
+  }
+`;
+var 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);
+  }
+`;
+var 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);
+  }
+`;
+
+// src/elements/popper.ts
+var placement = ["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"];
+var EnumPlacement = /* @__PURE__ */ ((EnumPlacement2) => {
+  EnumPlacement2["AUTO"] = "auto";
+  EnumPlacement2["AUTO_START"] = "auto-start";
+  EnumPlacement2["AUTO_END"] = "auto-end";
+  EnumPlacement2["TOP"] = "top";
+  EnumPlacement2["TOP_START"] = "top-start";
+  EnumPlacement2["TOP_END"] = "top-end";
+  EnumPlacement2["BOTTOM"] = "bottom";
+  EnumPlacement2["BOTTOM_START"] = "bottom-start";
+  EnumPlacement2["BOTTOM_END"] = "bottom-end";
+  EnumPlacement2["RIGHT"] = "right";
+  EnumPlacement2["RIGHT_START"] = "right-start";
+  EnumPlacement2["RIGHT_END"] = "right-end";
+  EnumPlacement2["LEFT"] = "left";
+  EnumPlacement2["LEFT_START"] = "left-start";
+  EnumPlacement2["LEFT_END"] = "left-end";
+  return EnumPlacement2;
+})(EnumPlacement || {});
+var fireEvents = ["click", "hover"];
+var EnumFireEvents = /* @__PURE__ */ ((EnumFireEvents2) => {
+  EnumFireEvents2["CLICK"] = "click";
+  EnumFireEvents2["HOVER"] = "hover";
+  return EnumFireEvents2;
+})(EnumFireEvents || {});
+var effects = ["none", "fade", "scale", "slide", "fall", "flip-horizontal", "flip-vertical", "sign", "super-scaled"];
+var EnumEffects = /* @__PURE__ */ ((EnumEffects2) => {
+  EnumEffects2["NONE"] = "none";
+  EnumEffects2["FADE"] = "fade";
+  EnumEffects2["SCALE"] = "scale";
+  EnumEffects2["SLIDE"] = "slide";
+  EnumEffects2["FALL"] = "fall";
+  EnumEffects2["FLIP_HORIZONTAL"] = "flip-horizontal";
+  EnumEffects2["FLIP_VERTICAL"] = "flip-vertical";
+  EnumEffects2["SIGN"] = "sign";
+  EnumEffects2["SUPER_SCALED"] = "super-scaled";
+  return EnumEffects2;
+})(EnumEffects || {});
+var strategy = ["fixed", "absolute"];
+var EnumStrategy = /* @__PURE__ */ ((EnumStrategy2) => {
+  EnumStrategy2["FIXED"] = "fixed";
+  EnumStrategy2["ABSOLUTE"] = "absolute";
+  return EnumStrategy2;
+})(EnumStrategy || {});
+var KemetPopper = class extends LitElement {
+  constructor() {
+    super();
+    this.placement = "top" /* TOP */;
+    this.fireOn = "hover" /* HOVER */;
+    this.strategy = "fixed" /* FIXED */;
+    this.skidding = 0;
+    this.distance = 0;
+    this.addEventListener("kemet-closed-pressed", () => {
+      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-opened", this);
+    }
+    if (prevProps.get("opened") && this.opened === false) {
+      emitEvent(this, "kemet-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() {
+    this.popperInstance?.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];
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetPopper.prototype, "placement", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetPopper.prototype, "opened", 2);
+__decorateClass([
+  property({ type: String, attribute: "fire-on" })
+], KemetPopper.prototype, "fireOn", 2);
+__decorateClass([
+  property({ type: String })
+], KemetPopper.prototype, "strategy", 2);
+__decorateClass([
+  property({ type: Number })
+], KemetPopper.prototype, "skidding", 2);
+__decorateClass([
+  property({ type: Number })
+], KemetPopper.prototype, "distance", 2);
+__decorateClass([
+  state()
+], KemetPopper.prototype, "popperInstance", 2);
+__decorateClass([
+  query("#trigger")
+], KemetPopper.prototype, "triggerElement", 2);
+__decorateClass([
+  query("#content")
+], KemetPopper.prototype, "contentElement", 2);
+__decorateClass([
+  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", 2);
+KemetPopper = __decorateClass([
+  customElement("kemet-popper")
+], KemetPopper);
+
+export {
+  stylesPopper,
+  stylesPopperFade,
+  stylesPopperScale,
+  stylesPopperSlide,
+  stylesPopperFall,
+  stylesPopperFlipHorizontal,
+  stylesPopperFlipVertical,
+  stylesPopperSign,
+  stylesPopperSuperScaled,
+  placement,
+  EnumPlacement,
+  fireEvents,
+  EnumFireEvents,
+  effects,
+  EnumEffects,
+  strategy,
+  EnumStrategy,
+  KemetPopper
+};
+//# sourceMappingURL=chunk-LKIDBCVS.mjs.map

package/dist/chunk-LKIDBCVS.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/popper.ts","../src/styles/elements/popper.ts"],"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/events';\nimport { stylesPopper } from '../styles/elements/popper';\n// import { stylesPopperFade, stylesPopperScale, stylesPopperSlide, stylesPopperFall, stylesPopperFlipHorizontal, stylesPopperFlipVertical, stylesPopperSign, stylesPopperSuperScaled } from './styles.effects';\n\nexport const placement = ['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'] as const;\nexport enum EnumPlacement {\n  AUTO = 'auto',\n  AUTO_START = 'auto-start',\n  AUTO_END = 'auto-end',\n  TOP = 'top',\n  TOP_START = 'top-start',\n  TOP_END = 'top-end',\n  BOTTOM = 'bottom',\n  BOTTOM_START = 'bottom-start',\n  BOTTOM_END = 'bottom-end',\n  RIGHT = 'right',\n  RIGHT_START = 'right-start',\n  RIGHT_END = 'right-end',\n  LEFT = 'left',\n  LEFT_START = 'left-start',\n  LEFT_END = 'left-end',\n}\nexport type TypePlacement = typeof placement[number];\n\n\nexport const fireEvents = ['click', 'hover'] as const;\nexport enum EnumFireEvents {\n  CLICK = \"click\",\n  HOVER = \"hover\",\n}\nexport type TypeFireEvents = typeof fireEvents[number];\n\n\nexport const effects = ['none', 'fade', 'scale', 'slide', 'fall', 'flip-horizontal', 'flip-vertical', 'sign', 'super-scaled'] as const;\nexport enum EnumEffects {\n  NONE = \"none\",\n  FADE = \"fade\",\n  SCALE = \"scale\",\n  SLIDE = \"slide\",\n  FALL = \"fall\",\n  FLIP_HORIZONTAL = \"flip-horizontal\",\n  FLIP_VERTICAL = \"flip-vertical\",\n  SIGN = \"sign\",\n  SUPER_SCALED = \"super-scaled\",\n}\nexport type TypeEffects = typeof effects[number];\n\nexport const strategy = ['fixed', 'absolute'] as const;\nexport enum EnumStrategy {\n  FIXED = \"fixed\",\n  ABSOLUTE = \"absolute\",\n}\nexport type TypeStrategy = typeof strategy[number];\n\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-opened - Fires when the popper opens\n * @event kemet-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 {TypeStrategy} 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 = EnumPlacement.TOP;\n\n  @property({ type: Boolean, reflect: true })\n  opened: boolean;\n\n  @property({ type: String, attribute: 'fire-on' })\n  fireOn: TypeFireEvents = EnumFireEvents.HOVER;\n\n  @property({ type: String })\n  strategy: TypeStrategy = EnumStrategy.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: TypeStrategy; 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-closed-pressed', () => { 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-opened', this);\n    }\n\n    if (prevProps.get('opened') && this.opened === false) {\n      emitEvent(this, 'kemet-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: 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","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\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"],"mappings":"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","names":["EnumPlacement","EnumFireEvents","EnumEffects","EnumStrategy"]}

package/dist/chunk-MJLS4VOS.mjs

@@ -0,0 +1,36 @@
+import {
+  __decorateClass
+} from "./chunk-SAWN7RJP.mjs";
+
+// src/elements/option.ts
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+var KemetOption = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.value = "";
+  }
+  render() {
+    return html`<slot></slot>`;
+  }
+};
+__decorateClass([
+  property({ type: String })
+], KemetOption.prototype, "label", 2);
+__decorateClass([
+  property({ type: String })
+], KemetOption.prototype, "value", 2);
+__decorateClass([
+  property({ type: Boolean })
+], KemetOption.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean })
+], KemetOption.prototype, "selected", 2);
+KemetOption = __decorateClass([
+  customElement("kemet-option")
+], KemetOption);
+
+export {
+  KemetOption
+};
+//# sourceMappingURL=chunk-MJLS4VOS.mjs.map

package/dist/chunk-MJLS4VOS.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/option.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-option\n * @summary An option in a select.\n *\n * @prop {string} label - The label of the option\n * @prop {string} value - The value of the options\n * @prop {boolean} disabled - Determines whether to disable the option\n * @prop {boolean} selected - Selects the option if true\n *\n */\n\n@customElement('kemet-option')\nexport default class KemetOption extends LitElement {\n  @property({ type: String })\n  label: string;\n\n  @property({ type: String })\n  value: string = '';\n\n  @property({ type: Boolean })\n  disabled: boolean;\n\n  @property({ type: Boolean })\n  selected: boolean;\n\n  render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-option': KemetOption\n  }\n}\n"],"mappings":";;;;;AAAA,SAAS,MAAM,kBAAkB;AACjC,SAAS,eAAe,gBAAgB;AAiBxC,IAAqB,cAArB,cAAyC,WAAW;AAAA,EAApD;AAAA;AAKE,iBAAgB;AAAA;AAAA,EAQhB,SAAS;AACP,WAAO;AAAA,EACT;AACF;AAdE;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GADP,YAEnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAJP,YAKnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,CAAC;AAAA,GAPR,YAQnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,CAAC;AAAA,GAVR,YAWnB;AAXmB,cAArB;AAAA,EADC,cAAc,cAAc;AAAA,GACR;","names":[]}