kemet-ui 4.0.2 → 5.0.0

package/dist/elements/drawer/index.js

@@ -0,0 +1,436 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// src/elements/drawer/index.ts
+import { LitElement, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+// src/utilities/events.ts
+var emitEvent = (element, name, detail, bubbles = true, composed = true) => {
+  element.dispatchEvent(
+    new CustomEvent(name, { bubbles, composed, detail })
+  );
+};
+
+// src/utilities/constants.ts
+var EnumDirections = /* @__PURE__ */ ((EnumDirections2) => {
+  EnumDirections2["None"] = "none";
+  EnumDirections2["Top"] = "top";
+  EnumDirections2["Right"] = "right";
+  EnumDirections2["Bottom"] = "bottom";
+  EnumDirections2["Left"] = "left";
+  return EnumDirections2;
+})(EnumDirections || {});
+
+// src/elements/drawer/effects.ts
+import { css, unsafeCSS } from "lit";
+var documentHeight = `${document.documentElement.scrollHeight}px`;
+var effects_default = css`
+  /* slide */
+  :host([effect='slide']) [part=drawer] {
+    visibility: visible;
+    transform: translate3d(-100%, 0, 0);
+  }
+
+  :host([effect='slide'][opened]) [part=drawer] {
+    visibility: visible;
+    transform: translate3d(0, 0, 0);
+  }
+
+  :host([effect='slide']) [part=drawer]:after {
+    display: none;
+  }
+
+  :host([effect='slide'][side='right']) [part=drawer] {
+    transform: translate3d(100vw, 0, 0);
+  }
+
+  :host([effect='slide'][side='right'][opened]) [part=drawer] {
+    transform: translate3d(calc(100vw - var(--kemet-drawer-width)), 0, 0);
+  }
+
+  :host([effect='slide'][side='top']) [part=drawer] {
+    width: 100vw;
+    height: var(--kemet-drawer-height, 100vh);
+    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);
+  }
+
+  :host([effect='slide'][side='top'][opened]) [part=drawer] {
+    transform: translate3d(0, 0, 0);
+  }
+
+  :host([effect='slide'][side='bottom']) [part=drawer] {
+    width: 100vw;
+    height: var(--kemet-drawer-height, 100vh);
+    transform: translate3d(0, ${unsafeCSS(documentHeight)}, 0);
+  }
+
+  :host([effect='slide'][side='bottom'][opened]) [part=drawer] {
+    transform: translate3d(0, calc(100vh - var(--kemet-drawer-height)), 0);
+  }
+
+  /* reveal */
+  :host([effect='reveal'][opened]) [part=pusher] {
+    transform: translate3d(var(--kemet-drawer-width), 0, 0);
+  }
+
+  :host([effect='reveal']) [part=drawer] {
+    z-index: 1;
+  }
+
+  :host([effect='reveal'][opened]) [part=drawer] {
+    visibility: visible;
+    transition: transform 0.5s;
+  }
+
+  :host([effect='reveal']) [part=drawer]::after {
+    display: none;
+  }
+
+  :host([effect='reveal'][side='right'][opened]) [part=pusher] {
+    transform: translate3d(0, 0, 0);
+  }
+
+  :host([effect='reveal'][side='right']) [part=drawer] {
+    transform: translate3d(100vw, 0, 0);
+  }
+
+  :host([effect='reveal'][side='right'][opened]) [part=drawer] {
+    transform: translate3d(calc(100vw - var(--kemet-drawer-width)), 0, 0);
+  }
+
+  :host([effect='reveal'][side='top']) [part=drawer] {
+    width: 100vw;
+    height: var(--kemet-drawer-height, 100vh);
+    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);
+  }
+
+  :host([effect='reveal'][side='top'][opened]) [part=drawer] {
+    transform: translate3d(0, 0, 0);
+  }
+
+  :host([effect='reveal'][side='top'][opened]) [part=pusher] {
+    transform: translate3d(0, var(--kemet-drawer-height), 0);
+  }
+
+  :host([effect='reveal'][side='bottom']) [part=drawer] {
+    width: 100vw;
+    height: var(--kemet-drawer-height, 100vh);
+    transform: translate3d(0, ${unsafeCSS(documentHeight)}, 0);
+  }
+
+  :host([effect='reveal'][side='bottom'][opened]) [part=drawer] {
+    transform: translate3d(0, calc(100vh - var(--kemet-drawer-height)), 0);
+  }
+
+  :host([effect='reveal'][side='bottom'][opened]) [part=pusher] {
+    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);
+  }
+
+  /* push */
+  :host([effect='push'][opened]) [part=pusher] {
+    transform: translate3d(var(--kemet-drawer-width), 0, 0);
+  }
+
+  :host([effect='push']) [part=drawer] {
+    transform: translate3d(-100%, 0, 0);
+  }
+
+  :host([effect='push'][opened]) [part=drawer] {
+    visibility: visible;
+    transition: transform 0.5s;
+    transform: translate3d(0, 0, 0);
+  }
+
+  :host([effect='push']) [part=drawer]::after {
+    display: none;
+  }
+
+  :host([effect='push'][side='right'][opened]) [part=pusher] {
+    transform: translate3d(calc(var(--kemet-drawer-width) * -1), 0, 0);
+  }
+
+  :host([effect='push'][side='right']) [part=drawer] {
+    transform: translate3d(100vw, 0, 0);
+  }
+
+  :host([effect='push'][side='right'][opened]) [part=drawer] {
+    transform: translate3d(calc(100vw - var(--kemet-drawer-width)), 0, 0);
+  }
+
+  :host([effect='push'][side='top']) [part=drawer] {
+    width: 100vw;
+    height: var(--kemet-drawer-height, 100vh);
+    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);
+  }
+
+  :host([effect='push'][side='top'][opened]) [part=drawer] {
+    transform: translate3d(0, 0, 0);
+  }
+
+  :host([effect='push'][side='top'][opened]) [part=pusher] {
+    transform: translate3d(0, var(--kemet-drawer-height), 0);
+  }
+
+  :host([effect='push'][side='bottom']) [part=drawer] {
+    width: 100vw;
+    height: var(--kemet-drawer-height);
+    transform: translate3d(0, ${unsafeCSS(documentHeight)}, 0);
+  }
+
+  :host([effect='push'][side='bottom'][opened]) [part=drawer] {
+    transform: translate3d(0, calc(100vh - var(--kemet-drawer-height)), 0);
+  }
+
+  :host([effect='push'][side='bottom'][opened]) [part=pusher] {
+    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);
+  }
+
+  /* scale */
+  :host([effect='scale']) [part=pusher] {
+    transform-style: preserve-3d;
+  }
+
+  :host([effect='scale'][opened]) [part=pusher] {
+    transform: translate3d(0, 0, 0) scale(0.75);
+  }
+
+  :host([effect='scale']) [part=drawer] {
+    opacity: 1;
+    transform: translate3d(-100%, 0, 0);
+  }
+
+  :host([effect='scale'][opened]) [part=drawer] {
+    visibility: visible;
+    transition: transform 0.5s;
+    transform: translate3d(0, 0, 0);
+  }
+
+  :host([effect='scale']) [part=drawer]::after {
+    display: none;
+  }
+
+  :host([effect='scale'][side='right']) [part=drawer] {
+    transform: translate3d(100vw, 0, 0);
+  }
+
+  :host([effect='scale'][side='right'][opened]) [part=drawer] {
+    transform: translate3d(calc(100vw - var(--kemet-drawer-width)), 0, 0);
+  }
+
+  :host([effect='scale'][side='top']) [part=drawer] {
+    width: 100vw;
+    height: var(--kemet-drawer-height, 100vh);
+    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);
+  }
+
+  :host([effect='scale'][side='top'][opened]) [part=drawer] {
+    transform: translate3d(0, 0, 0);
+  }
+
+  :host([effect='scale'][side='bottom']) [part=drawer] {
+    width: 100vw;
+    height: var(--kemet-drawer-height, 100vh);
+    transform: translate3d(0, ${unsafeCSS(documentHeight)}, 0);
+  }
+
+  :host([effect='scale'][side='bottom'][opened]) [part=drawer] {
+    transform: translate3d(0, calc(100vh - var(--kemet-drawer-height)), 0);
+  }
+`;
+
+// src/elements/drawer/styles.css.ts
+import { css as css2 } from "lit";
+var styles_css_default = css2`:host {
+  --kemet-drawer-overlay-color: rgb(0 0 0 / 20%);
+  --kemet-drawer-width: 300px;
+  --kemet-drawer-height: 100%;
+  --kemet-drawer-font-color: var(--kemet-color-font-inverse-base);
+  --kemet-drawer-background-color: var(--kemet-color-background-inverse);
+
+  width: 100%;
+  display: block;
+}
+
+[part=container] {
+  position: relative;
+  overflow: hidden;
+}
+
+[part=drawer] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  visibility: hidden;
+  height: 100%;
+  overflow: auto;
+  transition: all 0.5s;
+}
+
+[part=drawer]::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.2);
+  content: '';
+  opacity: 1;
+  transition: opacity 0.5s;
+}
+
+:host([opened]) [part=drawer]::after {
+  width: 0;
+  height: 0;
+  opacity: 0;
+  transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
+}
+
+[part=pusher] {
+  position: relative;
+  left: 0;
+  z-index: 99;
+  height: 100%;
+  transition: transform 0.5s;
+}
+
+:host([overlay]) [part=pusher]::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 0;
+  height: 0;
+  background: var(--kemet-drawer-overlay-color);
+  content: '';
+  opacity: 0;
+  transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
+}
+
+:host([opened]) [part=pusher]::after {
+  width: 100%;
+  height: 100%;
+  opacity: 1;
+  transition: opacity 0.5s;
+  transform: scale(2);
+}
+
+:host([fill-viewport]) [part=content] {
+  min-height: 100vh;
+}
+
+[part=wrapper]{
+  position: relative;
+}
+
+::slotted([slot=content]) {
+  min-height: 100vh;
+}
+
+[part=drawer] {
+  width: var(--kemet-drawer-width);
+  height: var(--kemet-drawer-height);
+  color: var(--kemet-drawer-font-color);
+  background: var(--kemet-drawer-background-color);
+}
+`;
+
+// src/elements/drawer/index.ts
+var EnumEffects = /* @__PURE__ */ ((EnumEffects2) => {
+  EnumEffects2["Slide"] = "slide";
+  EnumEffects2["Reveal"] = "reveal";
+  EnumEffects2["Push"] = "push";
+  EnumEffects2["Scale"] = "scale";
+  return EnumEffects2;
+})(EnumEffects || {});
+var effects = Object.values(EnumEffects);
+var directions = Object.values(EnumDirections);
+var KemetDrawer = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.opened = false;
+    this.effect = "slide" /* Slide */;
+    this.side = "left" /* Left */;
+    this.overlay = false;
+    this.fillViewport = false;
+    this.dom = "initializing";
+  }
+  firstUpdated() {
+    this.addEventListener("click", (event) => {
+      const targetElement = event.target;
+      if (this.opened && targetElement.tagName.toLowerCase() === "kemet-drawer") {
+        this.opened = false;
+      }
+    });
+    emitEvent(this, "kemet-drawer-mounted", {
+      bubbles: true,
+      composed: true,
+      detail: {
+        element: this
+      }
+    });
+    this.dom = "mounted";
+  }
+  updated(prevProps) {
+    if (!prevProps.get("opened") && this.opened === true) {
+      emitEvent(this, "kemet-drawer-opened", { element: this });
+    }
+    if (prevProps.get("opened") && this.opened === false) {
+      emitEvent(this, "kemet-drawer-closed", { element: this });
+    }
+  }
+  render() {
+    return html`
+      <section part="container">
+        <div part="drawer" title="Drawer">
+          <slot name="sidebar"></slot>
+        </div>
+        <div part="pusher">
+          <div part="content">
+            <div part="wrapper">
+              <slot name="body"></slot>
+            </div>
+          </div>
+        </div>
+      </section>
+    `;
+  }
+};
+KemetDrawer.styles = [styles_css_default, effects_default];
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetDrawer.prototype, "opened", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetDrawer.prototype, "effect", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetDrawer.prototype, "side", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetDrawer.prototype, "overlay", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "fill-viewport" })
+], KemetDrawer.prototype, "fillViewport", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetDrawer.prototype, "polarity", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetDrawer.prototype, "dom", 2);
+KemetDrawer = __decorateClass([
+  customElement("kemet-drawer")
+], KemetDrawer);
+export {
+  EnumEffects,
+  KemetDrawer as default
+};
+//# sourceMappingURL=index.js.map

package/dist/elements/drawer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/drawer/index.ts","../../../src/utilities/events.ts","../../../src/utilities/constants.ts","../../../src/elements/drawer/effects.ts","../../../src/elements/drawer/styles.css.ts"],"sourcesContent":["import { LitElement, css, html, unsafeCSS } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/events';\nimport { EnumDirections } from '../../utilities/constants';\nimport effectsStyles from './effects';\nimport styles from './styles.css.ts';\n\n\nexport enum EnumEffects {\n  Slide = 'slide',\n  Reveal = 'reveal',\n  Push = 'push',\n  Scale = 'scale'\n}\n\nconst effects = Object.values(EnumEffects) as string[];\n\nconst directions = Object.values(EnumDirections) as string[];\n\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-drawer\n * @summary A component that adds an off-canvas menu with different effects.\n *\n * @prop {boolean} opened - Determines if the drawer is opened or not.\n * @prop {string} effect - The animation effect for opening and closing the drawer. Values include: (slide | reveal | push | scale)\n * @prop {EnumDirection} side - Allows you to control which side the drawer opens from. Values include: (left | right | top | bottom)\n * @prop {boolean} overlay - Adds an overlay over the content section of the Drawer when opened\n * @prop {boolean} fillViewport - Makes the drawer fill the viewport height\n * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\n *\n * @slot sidebar - The off-screen nav area of your app or site\n * @slot body - The main content area of your app or site.\n *\n * @csspart container\n * @csspart drawer\n * @csspart pusher\n * @csspart content\n * @csspart wrapper\n *\n * @cssproperty --kemet-drawer-width - The width of the drawer.\n * @cssproperty --kemet-drawer-height - The height of the drawer.\n * @cssproperty --kemet-drawer-color - The text color of the drawer.\n * @cssproperty --kemet-drawer-background-color - The background color of the drawer.\n * @cssproperty --kemet-drawer-overlay-color - The color of the overlay.\n *\n * @event kemet-drawer-opened - Fires when the drawer opens.\n * @event kemet-drawer-closed - Fires when the drawer closes.\n *\n * @fires kemet-drawer-mounted - Fired when the button is mounted to the DOM\n * @detail {HTMLElement} element - The button element\n *\n */\n\n@customElement('kemet-drawer')\nexport default class KemetDrawer extends LitElement {\n  static styles = [styles, effectsStyles];\n\n  @property({ type: Boolean, reflect: true })\n  opened: boolean = false;\n\n  @property({ type: String, reflect: true })\n  effect: typeof effects[number] = EnumEffects.Slide;\n\n  @property({ type: String, reflect: true })\n  side: typeof directions[number] = EnumDirections.Left;\n\n  @property({ type: Boolean, reflect: true })\n  overlay: boolean = false;\n\n  @property({ type: Boolean, reflect: true, attribute: 'fill-viewport' })\n  fillViewport: boolean = false;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  firstUpdated() {\n    this.addEventListener('click', (event) => {\n      const targetElement = event.target as HTMLElement;\n      if (this.opened && targetElement.tagName.toLowerCase() === 'kemet-drawer') {\n        this.opened = false;\n      }\n    });\n\n    emitEvent(this, 'kemet-drawer-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  updated(prevProps: Map<string, never>) {\n    if (!prevProps.get('opened') && this.opened === true) {\n      emitEvent(this, 'kemet-drawer-opened', { element: this });\n    }\n\n    if (prevProps.get('opened') && this.opened === false) {\n      emitEvent(this, 'kemet-drawer-closed', { element: this });\n    }\n  }\n\n  render() {\n    return html`\n      <section part=\"container\">\n        <div part=\"drawer\" title=\"Drawer\">\n          <slot name=\"sidebar\"></slot>\n        </div>\n        <div part=\"pusher\">\n          <div part=\"content\">\n            <div part=\"wrapper\">\n              <slot name=\"body\"></slot>\n            </div>\n          </div>\n        </div>\n      </section>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-drawer': KemetDrawer\n  }\n}\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n","import KemetCount from \"../elements/count\";\nimport HTMLKemetInputElement from \"../elements/input\";\n\nexport enum EnumKeyCodes {\n  ESCAPE = 'Escape',\n  ENTER = 'Enter',\n  SPACE = 'Space',\n  BACKSPACE = 'Backspace',\n  DELETE = 'Delete'\n}\n\nexport const directions = ['none','top', 'right', 'bottom', 'left'] as const;\nexport enum EnumDirections {\n  None = 'none',\n  Top = 'top',\n  Right = 'right',\n  Bottom = 'bottom',\n  Left = 'left'\n}\nexport type TypeDirection = typeof directions[number];\n\nexport const appearances = ['neutral', 'brand', 'success', 'warning', 'error'] as const;\nexport enum EnumAppearances {\n  Neutral = 'neutral',\n  Brand = 'brand',\n  Success = 'success',\n  Warning = 'warning',\n  Error = 'error',\n  Info = 'info',\n  Link = 'link'\n}\nexport type TypeAppearance = typeof appearances[number];\n\nexport const axis = ['horizontal', 'vertical'] as const;\nexport enum EnumAxis {\n  Horizontal = 'horizontal',\n  Vertical = 'vertical'\n}\nexport type TypeAxis = typeof axis[number];\n\nexport const roundedSizes = ['sm', 'md', 'lg', 'xl', 'circle', 'pill'] as const;\nexport enum EnumRoundedSizes {\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  Circle = 'circle',\n  Pill = 'pill'\n}\nexport type TypeRoundedSizes = typeof roundedSizes[number];\n\nexport interface InterfaceInputDetails {\n  status: TypeAppearance;\n  validity: ValidityState;\n  element: HTMLElement | KemetCount | HTMLKemetInputElement;\n  value?: string;\n}\n","import { css, unsafeCSS } from 'lit';\n\nconst documentHeight = `${document.documentElement.scrollHeight}px`;\n\nexport default css`\n  /* slide */\n  :host([effect='slide']) [part=drawer] {\n    visibility: visible;\n    transform: translate3d(-100%, 0, 0);\n  }\n\n  :host([effect='slide'][opened]) [part=drawer] {\n    visibility: visible;\n    transform: translate3d(0, 0, 0);\n  }\n\n  :host([effect='slide']) [part=drawer]:after {\n    display: none;\n  }\n\n  :host([effect='slide'][side='right']) [part=drawer] {\n    transform: translate3d(100vw, 0, 0);\n  }\n\n  :host([effect='slide'][side='right'][opened]) [part=drawer] {\n    transform: translate3d(calc(100vw - var(--kemet-drawer-width)), 0, 0);\n  }\n\n  :host([effect='slide'][side='top']) [part=drawer] {\n    width: 100vw;\n    height: var(--kemet-drawer-height, 100vh);\n    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);\n  }\n\n  :host([effect='slide'][side='top'][opened]) [part=drawer] {\n    transform: translate3d(0, 0, 0);\n  }\n\n  :host([effect='slide'][side='bottom']) [part=drawer] {\n    width: 100vw;\n    height: var(--kemet-drawer-height, 100vh);\n    transform: translate3d(0, ${unsafeCSS(documentHeight)}, 0);\n  }\n\n  :host([effect='slide'][side='bottom'][opened]) [part=drawer] {\n    transform: translate3d(0, calc(100vh - var(--kemet-drawer-height)), 0);\n  }\n\n  /* reveal */\n  :host([effect='reveal'][opened]) [part=pusher] {\n    transform: translate3d(var(--kemet-drawer-width), 0, 0);\n  }\n\n  :host([effect='reveal']) [part=drawer] {\n    z-index: 1;\n  }\n\n  :host([effect='reveal'][opened]) [part=drawer] {\n    visibility: visible;\n    transition: transform 0.5s;\n  }\n\n  :host([effect='reveal']) [part=drawer]::after {\n    display: none;\n  }\n\n  :host([effect='reveal'][side='right'][opened]) [part=pusher] {\n    transform: translate3d(0, 0, 0);\n  }\n\n  :host([effect='reveal'][side='right']) [part=drawer] {\n    transform: translate3d(100vw, 0, 0);\n  }\n\n  :host([effect='reveal'][side='right'][opened]) [part=drawer] {\n    transform: translate3d(calc(100vw - var(--kemet-drawer-width)), 0, 0);\n  }\n\n  :host([effect='reveal'][side='top']) [part=drawer] {\n    width: 100vw;\n    height: var(--kemet-drawer-height, 100vh);\n    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);\n  }\n\n  :host([effect='reveal'][side='top'][opened]) [part=drawer] {\n    transform: translate3d(0, 0, 0);\n  }\n\n  :host([effect='reveal'][side='top'][opened]) [part=pusher] {\n    transform: translate3d(0, var(--kemet-drawer-height), 0);\n  }\n\n  :host([effect='reveal'][side='bottom']) [part=drawer] {\n    width: 100vw;\n    height: var(--kemet-drawer-height, 100vh);\n    transform: translate3d(0, ${unsafeCSS(documentHeight)}, 0);\n  }\n\n  :host([effect='reveal'][side='bottom'][opened]) [part=drawer] {\n    transform: translate3d(0, calc(100vh - var(--kemet-drawer-height)), 0);\n  }\n\n  :host([effect='reveal'][side='bottom'][opened]) [part=pusher] {\n    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);\n  }\n\n  /* push */\n  :host([effect='push'][opened]) [part=pusher] {\n    transform: translate3d(var(--kemet-drawer-width), 0, 0);\n  }\n\n  :host([effect='push']) [part=drawer] {\n    transform: translate3d(-100%, 0, 0);\n  }\n\n  :host([effect='push'][opened]) [part=drawer] {\n    visibility: visible;\n    transition: transform 0.5s;\n    transform: translate3d(0, 0, 0);\n  }\n\n  :host([effect='push']) [part=drawer]::after {\n    display: none;\n  }\n\n  :host([effect='push'][side='right'][opened]) [part=pusher] {\n    transform: translate3d(calc(var(--kemet-drawer-width) * -1), 0, 0);\n  }\n\n  :host([effect='push'][side='right']) [part=drawer] {\n    transform: translate3d(100vw, 0, 0);\n  }\n\n  :host([effect='push'][side='right'][opened]) [part=drawer] {\n    transform: translate3d(calc(100vw - var(--kemet-drawer-width)), 0, 0);\n  }\n\n  :host([effect='push'][side='top']) [part=drawer] {\n    width: 100vw;\n    height: var(--kemet-drawer-height, 100vh);\n    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);\n  }\n\n  :host([effect='push'][side='top'][opened]) [part=drawer] {\n    transform: translate3d(0, 0, 0);\n  }\n\n  :host([effect='push'][side='top'][opened]) [part=pusher] {\n    transform: translate3d(0, var(--kemet-drawer-height), 0);\n  }\n\n  :host([effect='push'][side='bottom']) [part=drawer] {\n    width: 100vw;\n    height: var(--kemet-drawer-height);\n    transform: translate3d(0, ${unsafeCSS(documentHeight)}, 0);\n  }\n\n  :host([effect='push'][side='bottom'][opened]) [part=drawer] {\n    transform: translate3d(0, calc(100vh - var(--kemet-drawer-height)), 0);\n  }\n\n  :host([effect='push'][side='bottom'][opened]) [part=pusher] {\n    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);\n  }\n\n  /* scale */\n  :host([effect='scale']) [part=pusher] {\n    transform-style: preserve-3d;\n  }\n\n  :host([effect='scale'][opened]) [part=pusher] {\n    transform: translate3d(0, 0, 0) scale(0.75);\n  }\n\n  :host([effect='scale']) [part=drawer] {\n    opacity: 1;\n    transform: translate3d(-100%, 0, 0);\n  }\n\n  :host([effect='scale'][opened]) [part=drawer] {\n    visibility: visible;\n    transition: transform 0.5s;\n    transform: translate3d(0, 0, 0);\n  }\n\n  :host([effect='scale']) [part=drawer]::after {\n    display: none;\n  }\n\n  :host([effect='scale'][side='right']) [part=drawer] {\n    transform: translate3d(100vw, 0, 0);\n  }\n\n  :host([effect='scale'][side='right'][opened]) [part=drawer] {\n    transform: translate3d(calc(100vw - var(--kemet-drawer-width)), 0, 0);\n  }\n\n  :host([effect='scale'][side='top']) [part=drawer] {\n    width: 100vw;\n    height: var(--kemet-drawer-height, 100vh);\n    transform: translate3d(0, calc(var(--kemet-drawer-height) * -1), 0);\n  }\n\n  :host([effect='scale'][side='top'][opened]) [part=drawer] {\n    transform: translate3d(0, 0, 0);\n  }\n\n  :host([effect='scale'][side='bottom']) [part=drawer] {\n    width: 100vw;\n    height: var(--kemet-drawer-height, 100vh);\n    transform: translate3d(0, ${unsafeCSS(documentHeight)}, 0);\n  }\n\n  :host([effect='scale'][side='bottom'][opened]) [part=drawer] {\n    transform: translate3d(0, calc(100vh - var(--kemet-drawer-height)), 0);\n  }\n`;\n","import { css } from 'lit';\n\nexport default css`:host {\n  --kemet-drawer-overlay-color: rgb(0 0 0 / 20%);\n  --kemet-drawer-width: 300px;\n  --kemet-drawer-height: 100%;\n  --kemet-drawer-font-color: var(--kemet-color-font-inverse-base);\n  --kemet-drawer-background-color: var(--kemet-color-background-inverse);\n\n  width: 100%;\n  display: block;\n}\n\n[part=container] {\n  position: relative;\n  overflow: hidden;\n}\n\n[part=drawer] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 100;\n  visibility: hidden;\n  height: 100%;\n  overflow: auto;\n  transition: all 0.5s;\n}\n\n[part=drawer]::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(0, 0, 0, 0.2);\n  content: '';\n  opacity: 1;\n  transition: opacity 0.5s;\n}\n\n:host([opened]) [part=drawer]::after {\n  width: 0;\n  height: 0;\n  opacity: 0;\n  transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;\n}\n\n[part=pusher] {\n  position: relative;\n  left: 0;\n  z-index: 99;\n  height: 100%;\n  transition: transform 0.5s;\n}\n\n:host([overlay]) [part=pusher]::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 0;\n  height: 0;\n  background: var(--kemet-drawer-overlay-color);\n  content: '';\n  opacity: 0;\n  transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;\n}\n\n:host([opened]) [part=pusher]::after {\n  width: 100%;\n  height: 100%;\n  opacity: 1;\n  transition: opacity 0.5s;\n  transform: scale(2);\n}\n\n:host([fill-viewport]) [part=content] {\n  min-height: 100vh;\n}\n\n[part=wrapper]{\n  position: relative;\n}\n\n::slotted([slot=content]) {\n  min-height: 100vh;\n}\n\n[part=drawer] {\n  width: var(--kemet-drawer-width);\n  height: var(--kemet-drawer-height);\n  color: var(--kemet-drawer-font-color);\n  background: var(--kemet-drawer-background-color);\n}\n`;\n"],"mappings":"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","names":["EnumDirections","css","EnumEffects"]}

package/dist/elements/drawer/styles.css.d.ts

@@ -0,0 +1,5 @@
+import * as lit from 'lit';
+
+declare const _default: lit.CSSResult;
+
+export { _default as default };

package/dist/elements/drawer/styles.css.js

@@ -0,0 +1,99 @@
+// src/elements/drawer/styles.css.ts
+import { css } from "lit";
+var styles_css_default = css`:host {
+  --kemet-drawer-overlay-color: rgb(0 0 0 / 20%);
+  --kemet-drawer-width: 300px;
+  --kemet-drawer-height: 100%;
+  --kemet-drawer-font-color: var(--kemet-color-font-inverse-base);
+  --kemet-drawer-background-color: var(--kemet-color-background-inverse);
+
+  width: 100%;
+  display: block;
+}
+
+[part=container] {
+  position: relative;
+  overflow: hidden;
+}
+
+[part=drawer] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  visibility: hidden;
+  height: 100%;
+  overflow: auto;
+  transition: all 0.5s;
+}
+
+[part=drawer]::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.2);
+  content: '';
+  opacity: 1;
+  transition: opacity 0.5s;
+}
+
+:host([opened]) [part=drawer]::after {
+  width: 0;
+  height: 0;
+  opacity: 0;
+  transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
+}
+
+[part=pusher] {
+  position: relative;
+  left: 0;
+  z-index: 99;
+  height: 100%;
+  transition: transform 0.5s;
+}
+
+:host([overlay]) [part=pusher]::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 0;
+  height: 0;
+  background: var(--kemet-drawer-overlay-color);
+  content: '';
+  opacity: 0;
+  transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
+}
+
+:host([opened]) [part=pusher]::after {
+  width: 100%;
+  height: 100%;
+  opacity: 1;
+  transition: opacity 0.5s;
+  transform: scale(2);
+}
+
+:host([fill-viewport]) [part=content] {
+  min-height: 100vh;
+}
+
+[part=wrapper]{
+  position: relative;
+}
+
+::slotted([slot=content]) {
+  min-height: 100vh;
+}
+
+[part=drawer] {
+  width: var(--kemet-drawer-width);
+  height: var(--kemet-drawer-height);
+  color: var(--kemet-drawer-font-color);
+  background: var(--kemet-drawer-background-color);
+}
+`;
+export {
+  styles_css_default as default
+};
+//# sourceMappingURL=styles.css.js.map

package/dist/elements/drawer/styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/drawer/styles.css.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport default css`:host {\n  --kemet-drawer-overlay-color: rgb(0 0 0 / 20%);\n  --kemet-drawer-width: 300px;\n  --kemet-drawer-height: 100%;\n  --kemet-drawer-font-color: var(--kemet-color-font-inverse-base);\n  --kemet-drawer-background-color: var(--kemet-color-background-inverse);\n\n  width: 100%;\n  display: block;\n}\n\n[part=container] {\n  position: relative;\n  overflow: hidden;\n}\n\n[part=drawer] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 100;\n  visibility: hidden;\n  height: 100%;\n  overflow: auto;\n  transition: all 0.5s;\n}\n\n[part=drawer]::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(0, 0, 0, 0.2);\n  content: '';\n  opacity: 1;\n  transition: opacity 0.5s;\n}\n\n:host([opened]) [part=drawer]::after {\n  width: 0;\n  height: 0;\n  opacity: 0;\n  transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;\n}\n\n[part=pusher] {\n  position: relative;\n  left: 0;\n  z-index: 99;\n  height: 100%;\n  transition: transform 0.5s;\n}\n\n:host([overlay]) [part=pusher]::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 0;\n  height: 0;\n  background: var(--kemet-drawer-overlay-color);\n  content: '';\n  opacity: 0;\n  transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;\n}\n\n:host([opened]) [part=pusher]::after {\n  width: 100%;\n  height: 100%;\n  opacity: 1;\n  transition: opacity 0.5s;\n  transform: scale(2);\n}\n\n:host([fill-viewport]) [part=content] {\n  min-height: 100vh;\n}\n\n[part=wrapper]{\n  position: relative;\n}\n\n::slotted([slot=content]) {\n  min-height: 100vh;\n}\n\n[part=drawer] {\n  width: var(--kemet-drawer-width);\n  height: var(--kemet-drawer-height);\n  color: var(--kemet-drawer-font-color);\n  background: var(--kemet-drawer-background-color);\n}\n`;\n"],"mappings":";AAAA,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}

package/dist/elements/fab/index.d.ts

@@ -0,0 +1,62 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+import { e as EnumRoundedSizes, E as EnumAppearances } from '../../constants-W9QKPlZP.js';
+import '../../form-controller-3q581XcZ.js';
+
+/**
+ * @since 1.2.0
+ * @status stable
+ *
+ * @tagname kemet-fab
+ * @summary The FAB, or Floating Action Button, performs a primary action on a page.
+ *
+ * @prop {boolean} expanded - The expanded state of the button.
+ * @prop {boolean} outlined - Outline style for a button.
+ * @prop {boolean} disabled - Determines whether not a button is disabled.
+ * @prop {EnumRoundedSizes} rounded - Displays the fab with rounded corners.
+ * @prop {EnumAppearances} appearance - The appearance of the fab.
+ * @prop {number} expandPoint - The distance, in pixels, where the fab should automatically expand.
+ * @prop {number} collapsePoint - The distance, in pixels, where the fab should automatically collapse.
+ * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background.
+ * @prop {string} dom - The status of dom initalization.
+ *
+ * @slot Icon - A slot for an icon to display.
+ * @slot default - The text for the FAB.
+ * *
+ * @cssproperty --kemet-fab-size - The width and height of the fab.
+ * @cssproperty --kemet-fab-color - The text color of the fab.
+ * @cssproperty --kemet-fab-icon-color - The color of the fab icon.
+ * @cssproperty --kemet-fab-label-color - The color of the fab label.
+ * @cssproperty --kemet-fab-padding - The padding of the fab.
+ * @cssproperty --kemet-fab-border - The border of the fab.
+ *
+ * @csspart button - The button's container.
+ * @csspart icon -  The FAB icon.
+ * @csspart label - The text in the FAB.
+ *
+ */
+declare class KemetFAB extends LitElement {
+    static styles: lit.CSSResult[];
+    expanded: boolean;
+    outlined: boolean;
+    disabled: boolean;
+    rounded?: EnumRoundedSizes;
+    appearance?: EnumAppearances;
+    expandPoint: number;
+    collapsePoint: number;
+    polarity?: 'light' | 'dark';
+    dom: string;
+    firstUpdated(): void;
+    render(): lit_html.TemplateResult<1>;
+    handleMouseOver(): void;
+    handleMouseOut(): void;
+    handleScroll(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-fab': KemetFAB;
+    }
+}
+
+export { KemetFAB as default };