kemet-ui 4.0.2 → 5.0.0

package/dist/chunk-OURZELWQ.mjs

@@ -1,207 +0,0 @@
-import {
-  __decorateClass
-} from "./chunk-SAWN7RJP.mjs";
-
-// src/elements/flipcard.ts
-import { html, LitElement } from "lit";
-import {
-  customElement,
-  property,
-  state,
-  query
-} from "lit/decorators.js";
-
-// src/styles/elements/flipcard.ts
-import { css } from "lit";
-var stylesBase = css`
-  *,
-  ::after,
-  ::before {
-    box-sizing: border-box;
-  }
-
-  :host {
-    --kemet-flipcard-width: 100%;
-    --kemet-flipcard-height: auto;
-    --kemet-flipcard-ratio: 16/9;
-    --kemet-flipcard-border-radius: 0;
-    --kemet-flipcard-border: 2px solid rgb(var(--kemet-color-primary));
-    --kemet-flipcard-front-color: rgb(var(--kemet-color-gray-950));
-    --kemet-flipcard-front-background-color: rgb(var(--kemet-color-gray-50));
-    --kemet-flipcard-back-color: rgb(var(--kemet-color-gray-950));
-    --kemet-flipcard-back-background-color: rgb(var(--kemet-color-gray-50));
-
-    display: inline-block;
-    width: var(--kemet-flipcard-width);
-    height: var(--kemet-flipcard-height);
-    aspect-ratio: var(--kemet-flipcard-ratio);
-    perspective: 1000px;
-  }
-
-  section {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    transition: transform 0.8s;
-    transform-style: preserve-3d;
-  }
-
-  .front,
-  .back {
-    position: absolute;
-    display: flex;
-    width: 100%;
-    height: 100%;
-    backface-visibility: hidden;
-    /* overflow: hidden; */
-    border-radius: var(--kemet-flipcard-border-radius);
-    border: var(--kemet-flipcard-border);
-  }
-
-  :host([rounded]) .front,
-  :host([rounded]) .back {
-    border-radius: var(--kemet-border-radius-xl);
-  }
-
-  .front {
-    color: var(--kemet-flipcard-front-color);
-    background-color: var(--kemet-flipcard-front-background-color);
-  }
-
-  :host([flipped]) .front {
-    z-index: -1;
-  }
-
-  .back {
-    color: var(--kemet-flipcard-back-color);
-    background-color: var(--kemet-flipcard-back-background-color)
-  }
-
-  :host([axis="horizontal"]) .back {
-    transform: rotateY(180deg);
-  }
-
-  :host([flipped][axis="horizontal"]) section {
-    transform: rotateY(180deg);
-  }
-
-  :host([axis="vertical"]) .back {
-    transform: rotateX(180deg);
-  }
-
-  :host([flipped][axis="vertical"]) section {
-    transform: rotateX(180deg);
-  }
-
-  :host([flip-on-hover]) section {
-    cursor: pointer;
-  }
-
-  ::slotted([slot="front"]),
-  ::slotted([slot="back"]) {
-    display: inline-block;
-    margin: auto;
-    position: relative;
-    width: 100%;
-    height: 100%;
-  }
-`;
-
-// src/elements/flipcard.ts
-var KemetFlipcard = class extends LitElement {
-  constructor() {
-    super();
-    this.axis = "horizontal";
-    this.flipped = false;
-    this.flipOnHover = false;
-    this.height = "auto";
-    this.measure = false;
-    this.addEventListener("kemet-flipped", () => {
-      this.flipped = !this.flipped;
-    });
-  }
-  firstUpdated() {
-    this.frontElement = this.querySelector("[slot=front]");
-    this.backElement = this.querySelector("[slot=back]");
-    window.addEventListener("resize", this.determineHeight.bind(this));
-  }
-  updated() {
-    this.determineHeight();
-  }
-  render() {
-    return html`
-      <section
-        tabindex="0"
-        part="wrapper"
-        @blur=${() => {
-      if (this.flipOnHover) this.flipped = false;
-    }}
-        @focus=${() => {
-      if (this.flipOnHover) this.flipped = true;
-    }}
-        @mouseover=${() => {
-      if (this.flipOnHover) this.flipped = true;
-    }}
-        @mouseout=${() => {
-      if (this.flipOnHover) this.flipped = false;
-    }}>
-        <div id="front" class="front" part="front">
-          <slot name="front" @slotchange="${() => this.determineHeight()}"></slot>
-        </div>
-        <div id="back" class="back" part="back">
-          <slot name="back" @slotchange="${() => this.determineHeight()}"></slot>
-        </div>
-      </section>
-    `;
-  }
-  determineHeight() {
-    setTimeout(() => {
-      if (this.measure) {
-        if (this.frontElement?.offsetHeight > this.backElement?.offsetHeight) {
-          this.height = `${this.frontElement?.offsetHeight}px`;
-        } else {
-          this.height = `${this.backElement?.offsetHeight}px`;
-        }
-        this.style.height = this.height;
-      } else {
-        this.style.removeProperty("height");
-      }
-    }, 0);
-  }
-};
-KemetFlipcard.styles = [stylesBase];
-__decorateClass([
-  property({ type: String, reflect: true })
-], KemetFlipcard.prototype, "axis", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], KemetFlipcard.prototype, "flipped", 2);
-__decorateClass([
-  property({ type: Boolean, attribute: "flip-on-hover" })
-], KemetFlipcard.prototype, "flipOnHover", 2);
-__decorateClass([
-  property({ type: String })
-], KemetFlipcard.prototype, "height", 2);
-__decorateClass([
-  property({ type: Boolean })
-], KemetFlipcard.prototype, "measure", 2);
-__decorateClass([
-  query('[name="front"]')
-], KemetFlipcard.prototype, "frontChildren", 2);
-__decorateClass([
-  query('[name="back"]')
-], KemetFlipcard.prototype, "backChildren", 2);
-__decorateClass([
-  state()
-], KemetFlipcard.prototype, "frontElement", 2);
-__decorateClass([
-  state()
-], KemetFlipcard.prototype, "backElement", 2);
-KemetFlipcard = __decorateClass([
-  customElement("kemet-flipcard")
-], KemetFlipcard);
-
-export {
-  KemetFlipcard
-};
-//# sourceMappingURL=chunk-OURZELWQ.mjs.map

package/dist/chunk-OURZELWQ.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/elements/flipcard.ts","../src/styles/elements/flipcard.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport {\n  customElement, property, state, query,\n} from 'lit/decorators.js';\nimport { stylesBase } from '../styles/elements/flipcard';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-flipcard\n * @summary A card that has a front and back side which can be flipped.\n *\n * @prop {string} axis\n * @prop {boolean} flipped\n * @prop {boolean} flipOnHover\n * @prop {string} height\n * @prop {boolean} measure\n *\n * @slot front - The front of the card.\n * @slot back - The back of the card.\n *\n * @csspart front - The front of the card.\n * @csspart back - The back of the card.\n * @csspart wrapper - A container for both front and back of the card.\n *\n * @cssproperty --kemet-flipcard-front-color - The text color for the front of the card.\n * @cssproperty --kemet-flipcard-back-color - The text color for the back of the card.\n * @cssproperty --kemet-flipcard-front-background-color - The background color for the front of the card.\n * @cssproperty --kemet-flipcard-back-background-color - The background color for the back of the card.\n * @cssproperty --kemet-flipcard-border - The border on the front and back of the card.\n * @cssproperty --kemet-flipcard-border-radius - The border radius on the front and back of the card.\n * @cssproperty --kemet-flipcard-ratio - The aspect ratio of the card.\n *\n */\n\n@customElement('kemet-flipcard')\nexport default class KemetFlipcard extends LitElement {\n  static styles = [stylesBase];\n\n  @property({ type: String, reflect: true })\n  axis: string = 'horizontal';\n\n  @property({ type: Boolean, reflect: true })\n  flipped: boolean = false;\n\n  @property({ type: Boolean, attribute: 'flip-on-hover' })\n  flipOnHover: boolean = false;\n\n  @property({ type: String })\n  height: string = 'auto';\n\n  @property({ type: Boolean })\n  measure: boolean = false;\n\n  @query('[name=\"front\"]')\n  frontChildren: HTMLSlotElement;\n\n  @query('[name=\"back\"]')\n  backChildren: HTMLSlotElement;\n\n  @state()\n  frontElement: HTMLElement;\n\n  @state()\n  backElement: HTMLElement;\n\n  constructor() {\n    super();\n\n    this.addEventListener('kemet-flipped', () => {\n      this.flipped = !this.flipped;\n    });\n  }\n\n  firstUpdated() {\n    this.frontElement = this.querySelector('[slot=front]');\n    this.backElement = this.querySelector('[slot=back]');\n    window.addEventListener('resize', this.determineHeight.bind(this));\n  }\n\n  updated() {\n    this.determineHeight();\n  }\n\n  render() {\n    return html`\n      <section\n        tabindex=\"0\"\n        part=\"wrapper\"\n        @blur=${() => { if (this.flipOnHover) this.flipped = false; }}\n        @focus=${() => { if (this.flipOnHover) this.flipped = true; }}\n        @mouseover=${() => { if (this.flipOnHover) this.flipped = true; }}\n        @mouseout=${() => { if (this.flipOnHover) this.flipped = false; }}>\n        <div id=\"front\" class=\"front\" part=\"front\">\n          <slot name=\"front\" @slotchange=\"${() => this.determineHeight()}\"></slot>\n        </div>\n        <div id=\"back\" class=\"back\" part=\"back\">\n          <slot name=\"back\" @slotchange=\"${() => this.determineHeight()}\"></slot>\n        </div>\n      </section>\n    `;\n  }\n\n  determineHeight() {\n    // setTimeout is need to simulate a DOM repaint\n    // without the repaint, offsetHeight on Custom Elements = 0\n    // so this is needed for 'measure' to work correctly\n\n    setTimeout(() => {\n      if (this.measure) {\n        if (this.frontElement?.offsetHeight > this.backElement?.offsetHeight) {\n          this.height = `${this.frontElement?.offsetHeight}px`;\n        } else {\n          this.height = `${this.backElement?.offsetHeight}px`;\n        }\n\n        this.style.height = this.height;\n      } else {\n        this.style.removeProperty('height');\n      }\n    }, 0);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-flipcard': KemetFlipcard\n  }\n}\n","import { css } from 'lit';\n\nexport const stylesBase = css`\n  *,\n  ::after,\n  ::before {\n    box-sizing: border-box;\n  }\n\n  :host {\n    --kemet-flipcard-width: 100%;\n    --kemet-flipcard-height: auto;\n    --kemet-flipcard-ratio: 16/9;\n    --kemet-flipcard-border-radius: 0;\n    --kemet-flipcard-border: 2px solid rgb(var(--kemet-color-primary));\n    --kemet-flipcard-front-color: rgb(var(--kemet-color-gray-950));\n    --kemet-flipcard-front-background-color: rgb(var(--kemet-color-gray-50));\n    --kemet-flipcard-back-color: rgb(var(--kemet-color-gray-950));\n    --kemet-flipcard-back-background-color: rgb(var(--kemet-color-gray-50));\n\n    display: inline-block;\n    width: var(--kemet-flipcard-width);\n    height: var(--kemet-flipcard-height);\n    aspect-ratio: var(--kemet-flipcard-ratio);\n    perspective: 1000px;\n  }\n\n  section {\n    position: relative;\n    width: 100%;\n    height: 100%;\n    transition: transform 0.8s;\n    transform-style: preserve-3d;\n  }\n\n  .front,\n  .back {\n    position: absolute;\n    display: flex;\n    width: 100%;\n    height: 100%;\n    backface-visibility: hidden;\n    /* overflow: hidden; */\n    border-radius: var(--kemet-flipcard-border-radius);\n    border: var(--kemet-flipcard-border);\n  }\n\n  :host([rounded]) .front,\n  :host([rounded]) .back {\n    border-radius: var(--kemet-border-radius-xl);\n  }\n\n  .front {\n    color: var(--kemet-flipcard-front-color);\n    background-color: var(--kemet-flipcard-front-background-color);\n  }\n\n  :host([flipped]) .front {\n    z-index: -1;\n  }\n\n  .back {\n    color: var(--kemet-flipcard-back-color);\n    background-color: var(--kemet-flipcard-back-background-color)\n  }\n\n  :host([axis=\"horizontal\"]) .back {\n    transform: rotateY(180deg);\n  }\n\n  :host([flipped][axis=\"horizontal\"]) section {\n    transform: rotateY(180deg);\n  }\n\n  :host([axis=\"vertical\"]) .back {\n    transform: rotateX(180deg);\n  }\n\n  :host([flipped][axis=\"vertical\"]) section {\n    transform: rotateX(180deg);\n  }\n\n  :host([flip-on-hover]) section {\n    cursor: pointer;\n  }\n\n  ::slotted([slot=\"front\"]),\n  ::slotted([slot=\"back\"]) {\n    display: inline-block;\n    margin: auto;\n    position: relative;\n    width: 100%;\n    height: 100%;\n  }\n`;\n"],"mappings":"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","names":[]}

package/dist/chunk-P7GREIMJ.mjs

@@ -1,93 +0,0 @@
-import {
-  __decorateClass
-} from "./chunk-SAWN7RJP.mjs";
-
-// src/elements/scroll-nav.ts
-import { LitElement, html } from "lit";
-import { customElement, property } from "lit/decorators.js";
-
-// src/styles/elements/scroll-nav.ts
-import { css } from "lit";
-var stylesScrollNav = css`
-  :host {
-    --kemet-scroll-nav-padding: 1rem 2rem;
-    --kemet-scroll-nav-background: rgb(var(--kemet-color-gray-50));
-    --kemet-scroll-nav-transition: 300ms;
-    --kemet-scroll-nav-resize-height: 400px;
-    --kemet-scroll-nav-resize-height-transformed: 100px;
-
-    display: block;
-    box-sizing: border-box;
-    padding: var(--kemet-scroll-nav-padding);
-    background-color: var(--kemet-scroll-nav-background);
-    transition: all var(--kemet-scroll-nav-transition, 300ms) ease;
-  }
-
-  :host([transform]),
-  :host([effect="resize"]) {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-  }
-
-  :host([effect="resize"]) {
-    height: var(--kemet-scroll-nav-resize-height);
-  }
-
-  :host([transform][effect="resize"]) {
-    height: var(--kemet-scroll-nav-resize-height-transformed);
-  }
-`;
-
-// src/elements/scroll-nav.ts
-var effects = ["sticky", "resize"];
-var EnumEffects = /* @__PURE__ */ ((EnumEffects2) => {
-  EnumEffects2["Sticky"] = "sticky";
-  EnumEffects2["Resize"] = "resize";
-  return EnumEffects2;
-})(EnumEffects || {});
-var KemetScrollNav = class extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.effect = "sticky" /* Sticky */;
-    this.transform = false;
-    this.offset = 0;
-  }
-  render() {
-    return html`
-      <slot></slot>
-    `;
-  }
-  firstUpdated() {
-    const stickPoint = this.offsetTop;
-    const elementHeight = this.offsetHeight;
-    window.addEventListener("scroll", () => {
-      this.handleScroll(stickPoint, elementHeight);
-    });
-  }
-  handleScroll(stickPoint, elementHeight) {
-    const transformPoint = this.effect === "sticky" ? stickPoint + this.offset : elementHeight + this.offset;
-    this.transform = window.pageYOffset >= transformPoint;
-  }
-};
-KemetScrollNav.styles = [stylesScrollNav];
-__decorateClass([
-  property({ type: String, reflect: true })
-], KemetScrollNav.prototype, "effect", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], KemetScrollNav.prototype, "transform", 2);
-__decorateClass([
-  property({ type: Number })
-], KemetScrollNav.prototype, "offset", 2);
-KemetScrollNav = __decorateClass([
-  customElement("kemet-scroll-nav")
-], KemetScrollNav);
-
-export {
-  effects,
-  EnumEffects,
-  KemetScrollNav
-};
-//# sourceMappingURL=chunk-P7GREIMJ.mjs.map

package/dist/chunk-P7GREIMJ.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/elements/scroll-nav.ts","../src/styles/elements/scroll-nav.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { stylesScrollNav } from '../styles/elements/scroll-nav';\n\nexport const effects = ['sticky', 'resize'] as const;\nexport enum EnumEffects {\n  Sticky = 'sticky',\n  Resize = 'resize'\n}\nexport type TypeEffects = typeof effects[number];\n\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-scroll-nav\n * @summary An element that transforms at a scroll point.\n *\n * @prop {TypeEffect} effect - Determines where the transform point is activated. Values include: (sticky | resize)\n * @prop {boolean} transform - Whether the nav has shifted into a new state.\n * @prop {number} offset - Allows for an arbitrary adjustment of the transform point in pixels. Works with negative values.\n *\n * @cssproperty --kemet-scroll-nav-padding - The padding of the nav.\n * @cssproperty --kemet-scroll-nav-background - The background color of the nav.\n * @cssproperty --kemet-scroll-nav-transition - The transition speed of the transformation.\n * @cssproperty --kemet-scroll-nav-resize-height - The height of the pre-transformed nav.\n * @cssproperty --kemet-scroll-nav-resize-height-transformed - The height of the transformed nav.\n *\n */\n\n@customElement('kemet-scroll-nav')\nexport default class KemetScrollNav extends LitElement {\n  static styles = [stylesScrollNav];\n\n  @property({ type: String, reflect: true })\n  effect: TypeEffects = EnumEffects.Sticky;\n\n  @property({ type: Boolean, reflect: true })\n  transform: boolean = false;\n\n  @property({ type: Number })\n  offset: number = 0;\n\n  render() {\n    return html`\n      <slot></slot>\n    `;\n  }\n\n  firstUpdated() {\n    const stickPoint = this.offsetTop;\n    const elementHeight = this.offsetHeight;\n\n    window.addEventListener('scroll', () => {\n      // we pass stickPoint and elementHeight as recorded constants\n      // so that it does not update for each call to handleScroll\n      this.handleScroll(stickPoint, elementHeight);\n    });\n  }\n\n  handleScroll(stickPoint: number, elementHeight: number) {\n    const transformPoint = (this.effect === 'sticky')\n      ? stickPoint + this.offset\n      : elementHeight + this.offset;\n\n    this.transform = window.pageYOffset >= transformPoint;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-scroll-nav': KemetScrollNav\n  }\n}\n","import { css } from 'lit';\n\nexport const stylesScrollNav = css`\n  :host {\n    --kemet-scroll-nav-padding: 1rem 2rem;\n    --kemet-scroll-nav-background: rgb(var(--kemet-color-gray-50));\n    --kemet-scroll-nav-transition: 300ms;\n    --kemet-scroll-nav-resize-height: 400px;\n    --kemet-scroll-nav-resize-height-transformed: 100px;\n\n    display: block;\n    box-sizing: border-box;\n    padding: var(--kemet-scroll-nav-padding);\n    background-color: var(--kemet-scroll-nav-background);\n    transition: all var(--kemet-scroll-nav-transition, 300ms) ease;\n  }\n\n  :host([transform]),\n  :host([effect=\"resize\"]) {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n  }\n\n  :host([effect=\"resize\"]) {\n    height: var(--kemet-scroll-nav-resize-height);\n  }\n\n  :host([transform][effect=\"resize\"]) {\n    height: var(--kemet-scroll-nav-resize-height-transformed);\n  }\n`;\n"],"mappings":";;;;;AAAA,SAAS,YAAY,YAAY;AACjC,SAAS,eAAe,gBAAgB;;;ACDxC,SAAS,WAAW;AAEb,IAAM,kBAAkB;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;;;ADExB,IAAM,UAAU,CAAC,UAAU,QAAQ;AACnC,IAAK,cAAL,kBAAKA,iBAAL;AACL,EAAAA,aAAA,YAAS;AACT,EAAAA,aAAA,YAAS;AAFC,SAAAA;AAAA,GAAA;AA2BZ,IAAqB,iBAArB,cAA4C,WAAW;AAAA,EAAvD;AAAA;AAIE,kBAAsB;AAGtB,qBAAqB;AAGrB,kBAAiB;AAAA;AAAA,EAEjB,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,EAGT;AAAA,EAEA,eAAe;AACb,UAAM,aAAa,KAAK;AACxB,UAAM,gBAAgB,KAAK;AAE3B,WAAO,iBAAiB,UAAU,MAAM;AAGtC,WAAK,aAAa,YAAY,aAAa;AAAA,IAC7C,CAAC;AAAA,EACH;AAAA,EAEA,aAAa,YAAoB,eAAuB;AACtD,UAAM,iBAAkB,KAAK,WAAW,WACpC,aAAa,KAAK,SAClB,gBAAgB,KAAK;AAEzB,SAAK,YAAY,OAAO,eAAe;AAAA,EACzC;AACF;AApCqB,eACZ,SAAS,CAAC,eAAe;AAGhC;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAHtB,eAInB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GANvB,eAOnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GATP,eAUnB;AAVmB,iBAArB;AAAA,EADC,cAAc,kBAAkB;AAAA,GACZ;","names":["EnumEffects"]}

package/dist/chunk-PWWLC4X4.mjs

@@ -1,185 +0,0 @@
-// src/styles/elements/upload.ts
-import { css } from "lit";
-var stylesUpload = css`
-  :host {
-    --kemet-upload-color: rgb(var(--kemet-color-white));
-    --kemet-upload-height: 364px;
-    --kemet-upload-border: 1rem solid rgb(var(--kemet-color-gray-50-to-transparent));
-    --kemet-upload-background-color: rgb(var(--kemet-color-primary-to-transparent));
-
-
-    color: var(--kemet-upload-color);
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    height: var(--kemet-upload-height);
-    border: var(--kemet-upload-border);
-    background-color: var(--kemet-upload-background-color);
-  }
-
-  :host([mobile]) {
-    display: block;
-    height: auto;
-  }
-
-  input {
-    display: none;
-  }
-
-  .button {
-    cursor: pointer;
-    font-size: 1rem;
-    display: block;
-    color: rgb(var(--kemet-color-white));
-    padding: 0.5rem 1rem;
-    border: 1px solid rgb(var(--kemet-color-white));
-    background-color: transparent;
-  }
-
-  .upload {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin: var(--kemet-upload-margin);
-    flex-direction: column;
-    border: 2px dashed rgb(var(--kemet-color-white));
-  }
-
-  :host([over]) .upload {
-    background-color: rgb(var(--kemet-color-green-600));
-  }
-
-  :host([mobile]) .upload {
-    height: 280px;
-  }
-
-  .files {
-    display: flex;
-    gap: 1rem;
-    flex-direction: column;
-    padding: 0 1rem;
-    overflow: auto;
-    background-color: rgb(var(--kemet-color-gray-50-to-transparent));
-  }
-
-  :host([mobile]) .files {
-    padding: 0;
-    max-height: 280px;
-  }
-
-  .heading {
-    font-size: 1.25rem;
-    margin: 0 0 2rem 0;
-  }
-
-  :host([no-drag-drop]) .heading {
-    display: none;
-  }
-`;
-var stylesUploadFile = css`
-  :host {
-    --kemet-upload-file-ripple-color: rgb(var(--kemet-color-primary));
-    --kemet-upload-file-color: rgb(var(--kemet-color-text));
-    --kemet-upload-file-padding: 0.5rem 1rem;
-    --kemet-upload-file-border: 1px solid rgb(var(--kemet-color-primary));
-
-    color: var(--kemet-upload-file-color);
-    display: grid;
-    gap: 1rem;
-    grid-template-columns: auto 1fr auto;
-    align-items: center;
-    height: 100%;
-    max-height: 50%;
-    padding: var(--kemet-upload-file-padding);
-    border: var(--kemet-upload-file-border);
-  }
-
-  :host([status='error']) {
-    border: 1px solid rgb(var(--kemet-color-error));
-  }
-
-  :host([status='complete']) {
-    border: 1px solid rgb(var(--kemet-color-success));
-  }
-
-  h3 {
-    margin: 0;
-  }
-
-  .percentage {
-    font-size: clamp(2rem, 3vw, 2.5rem);
-    align-self: center;
-    justify-self: center;
-  }
-
-  .indicator {
-    transform: scale(0.8);
-  }
-
-  :host([status='complete']) .message,
-  :host([status='complete']) .indicator {
-    color: rgb(var(--kemet-color-success));
-  }
-
-  :host([status='error']) .message,
-  :host([status='error']) .indicator {
-    color: rgb(var(--kemet-color-error));
-  }
-`;
-var stylesLoaders = css`
-  .lds-ripple {
-    display: inline-block;
-    position: relative;
-    width: 80px;
-    height: 80px;
-  }
-
-  .lds-ripple div {
-    position: absolute;
-    border: 4px solid var(--kemet-upload-file-ripple-color);
-    opacity: 1;
-    border-radius: var(--kemet-border-radius-circle);
-    animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
-  }
-
-  .lds-ripple div:nth-child(2) {
-    animation-delay: -0.5s;
-  }
-
-  @keyframes lds-ripple {
-    0% {
-      top: 36px;
-      left: 36px;
-      width: 0;
-      height: 0;
-      opacity: 0;
-    }
-    4.9% {
-      top: 36px;
-      left: 36px;
-      width: 0;
-      height: 0;
-      opacity: 0;
-    }
-    5% {
-      top: 36px;
-      left: 36px;
-      width: 0;
-      height: 0;
-      opacity: 1;
-    }
-    100% {
-      top: 0px;
-      left: 0px;
-      width: 72px;
-      height: 72px;
-      opacity: 0;
-    }
-  }
-`;
-
-export {
-  stylesUpload,
-  stylesUploadFile,
-  stylesLoaders
-};
-//# sourceMappingURL=chunk-PWWLC4X4.mjs.map

package/dist/chunk-PWWLC4X4.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/styles/elements/upload.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const stylesUpload = css`\n  :host {\n    --kemet-upload-color: rgb(var(--kemet-color-white));\n    --kemet-upload-height: 364px;\n    --kemet-upload-border: 1rem solid rgb(var(--kemet-color-gray-50-to-transparent));\n    --kemet-upload-background-color: rgb(var(--kemet-color-primary-to-transparent));\n\n\n    color: var(--kemet-upload-color);\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    height: var(--kemet-upload-height);\n    border: var(--kemet-upload-border);\n    background-color: var(--kemet-upload-background-color);\n  }\n\n  :host([mobile]) {\n    display: block;\n    height: auto;\n  }\n\n  input {\n    display: none;\n  }\n\n  .button {\n    cursor: pointer;\n    font-size: 1rem;\n    display: block;\n    color: rgb(var(--kemet-color-white));\n    padding: 0.5rem 1rem;\n    border: 1px solid rgb(var(--kemet-color-white));\n    background-color: transparent;\n  }\n\n  .upload {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin: var(--kemet-upload-margin);\n    flex-direction: column;\n    border: 2px dashed rgb(var(--kemet-color-white));\n  }\n\n  :host([over]) .upload {\n    background-color: rgb(var(--kemet-color-green-600));\n  }\n\n  :host([mobile]) .upload {\n    height: 280px;\n  }\n\n  .files {\n    display: flex;\n    gap: 1rem;\n    flex-direction: column;\n    padding: 0 1rem;\n    overflow: auto;\n    background-color: rgb(var(--kemet-color-gray-50-to-transparent));\n  }\n\n  :host([mobile]) .files {\n    padding: 0;\n    max-height: 280px;\n  }\n\n  .heading {\n    font-size: 1.25rem;\n    margin: 0 0 2rem 0;\n  }\n\n  :host([no-drag-drop]) .heading {\n    display: none;\n  }\n`;\n\nexport const stylesUploadFile = css`\n  :host {\n    --kemet-upload-file-ripple-color: rgb(var(--kemet-color-primary));\n    --kemet-upload-file-color: rgb(var(--kemet-color-text));\n    --kemet-upload-file-padding: 0.5rem 1rem;\n    --kemet-upload-file-border: 1px solid rgb(var(--kemet-color-primary));\n\n    color: var(--kemet-upload-file-color);\n    display: grid;\n    gap: 1rem;\n    grid-template-columns: auto 1fr auto;\n    align-items: center;\n    height: 100%;\n    max-height: 50%;\n    padding: var(--kemet-upload-file-padding);\n    border: var(--kemet-upload-file-border);\n  }\n\n  :host([status='error']) {\n    border: 1px solid rgb(var(--kemet-color-error));\n  }\n\n  :host([status='complete']) {\n    border: 1px solid rgb(var(--kemet-color-success));\n  }\n\n  h3 {\n    margin: 0;\n  }\n\n  .percentage {\n    font-size: clamp(2rem, 3vw, 2.5rem);\n    align-self: center;\n    justify-self: center;\n  }\n\n  .indicator {\n    transform: scale(0.8);\n  }\n\n  :host([status='complete']) .message,\n  :host([status='complete']) .indicator {\n    color: rgb(var(--kemet-color-success));\n  }\n\n  :host([status='error']) .message,\n  :host([status='error']) .indicator {\n    color: rgb(var(--kemet-color-error));\n  }\n`;\n\nexport const stylesLoaders = css`\n  .lds-ripple {\n    display: inline-block;\n    position: relative;\n    width: 80px;\n    height: 80px;\n  }\n\n  .lds-ripple div {\n    position: absolute;\n    border: 4px solid var(--kemet-upload-file-ripple-color);\n    opacity: 1;\n    border-radius: var(--kemet-border-radius-circle);\n    animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;\n  }\n\n  .lds-ripple div:nth-child(2) {\n    animation-delay: -0.5s;\n  }\n\n  @keyframes lds-ripple {\n    0% {\n      top: 36px;\n      left: 36px;\n      width: 0;\n      height: 0;\n      opacity: 0;\n    }\n    4.9% {\n      top: 36px;\n      left: 36px;\n      width: 0;\n      height: 0;\n      opacity: 0;\n    }\n    5% {\n      top: 36px;\n      left: 36px;\n      width: 0;\n      height: 0;\n      opacity: 1;\n    }\n    100% {\n      top: 0px;\n      left: 0px;\n      width: 72px;\n      height: 72px;\n      opacity: 0;\n    }\n  }\n`;\n"],"mappings":";AAAA,SAAS,WAAW;AAEb,IAAM,eAAe;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;AA4ErB,IAAM,mBAAmB;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;AAmDzB,IAAM,gBAAgB;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/chunk-Q3TV6JZX.mjs

@@ -1,162 +0,0 @@
-import {
-  __decorateClass
-} from "./chunk-SAWN7RJP.mjs";
-
-// src/elements/badge.ts
-import { html, LitElement } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-
-// src/styles/elements/badge.ts
-import { css } from "lit";
-var stylesBase = css`
-  :host {
-    --kemet-badge-padding: 10px;
-    --kemet-badge-color: rgb(var(--kemet-color-white));
-    --kemet-badge-background-color: rgb(var(--kemet-color-primary));
-    --kemet-badge-border: 0;
-    --kemet-badge-border-width: 1px;
-    --kemet-badge-border-style: solid;
-    --kemet-badge-border-color: rgb(var(--kemet-color-primary));
-
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: var(--kemet-badge-padding);
-    line-height: 1;
-    color: var(--kemet-badge-color);
-    background-color: var(--kemet-badge-background-color);
-    border: var(--kemet-badge-border);
-  }
-
-  :host([status='primary']) {
-    --kemet-badge-background-color: rgb(var(--kemet-color-primary));
-  }
-
-  :host([status='success']) {
-    --kemet-badge-background-color: rgb(var(--kemet-color-success));
-  }
-
-  :host([status='standard']) {
-    --kemet-badge-background-color: rgb(var(--kemet-color-gray-500));
-  }
-
-  :host([status='warning']) {
-    --kemet-badge-background-color: rgb(var(--kemet-color-warning));
-  }
-
-  :host([status='error']) {
-    --kemet-badge-background-color: rgb(var(--kemet-color-error));
-  }
-
-  :host([rounded]) {
-    border-radius: var(--kemet-border-radius-md);
-  }
-
-  :host([rounded=sm]) {
-    border-radius: var(--kemet-border-radius-sm);
-  }
-
-  :host([rounded=md]) {
-    border-radius: var(--kemet-border-radius-md);
-  }
-
-  :host([rounded=lg]) {
-    border-radius: var(--kemet-border-radius-lg);
-  }
-
-  :host([rounded=xl]) {
-    border-radius: var(--kemet-border-radius-xl);
-  }
-
-  :host([rounded=circle]) {
-    border-radius: var(--kemet-border-radius-circle);
-  }
-
-  :host([rounded=pill]) {
-    border-radius: var(--kemet-border-radius-pill);
-  }
-
-  :host([outlined]) {
-    --kemet-badge-color: rgb(var(--kemet-color-foreground));
-    --kemet-badge-background-color: transparent;
-    --kemet-badge-border: var(--kemet-badge-border-width) var(--kemet-badge-border-style) var(--kemet-badge-border-color);
-  }
-
-  :host([outlined][status=primary]) {
-    --kemet-badge-border-color: rgb(var(--kemet-color-primary));
-  }
-
-  :host([outlined][status=success]) {
-    --kemet-badge-border-color: rgb(var(--kemet-color-success));
-  }
-
-  :host([outlined][status=warning]) {
-    --kemet-badge-border-color: rgb(var(--kemet-color-warning));
-  }
-
-  :host([outlined][status=error]) {
-    --kemet-badge-border-color: rgb(var(--kemet-color-error));
-  }
-`;
-
-// src/elements/badge.ts
-var KemetBadge = class extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.status = "primary" /* Primary */;
-    this.circlePadding = 0;
-    this.outlined = false;
-    this.iconLeft = false;
-    this.iconRight = false;
-  }
-  render() {
-    return html`
-      <slot name="left" @slotchange=${() => this.handleLeftChange()}></slot>
-      ${this.iconLeft ? html`&nbsp;` : ""}
-      <slot @slotchange=${() => this.handleSlotChange()}></slot>
-      ${this.iconRight ? html`&nbsp;` : ""}
-      <slot name="right" @slotchange=${() => this.handleRightChange()}></slot>
-    `;
-  }
-  handleSlotChange() {
-    if (this.rounded === "circle" /* CIRCLE */) {
-      this.style.height = `${this.offsetWidth + this.circlePadding}px`;
-      this.style.width = `${this.offsetWidth + this.circlePadding}px`;
-    }
-  }
-  handleLeftChange() {
-    const left = this.querySelector('[slot="left"]');
-    if (left) this.iconLeft = true;
-  }
-  handleRightChange() {
-    const right = this.querySelector('[slot="right"]');
-    if (right) this.iconRight = true;
-  }
-};
-KemetBadge.styles = [stylesBase];
-__decorateClass([
-  property({ reflect: true })
-], KemetBadge.prototype, "status", 2);
-__decorateClass([
-  property({ type: Number, attribute: "circle-padding" })
-], KemetBadge.prototype, "circlePadding", 2);
-__decorateClass([
-  property({ type: String, reflect: true })
-], KemetBadge.prototype, "rounded", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], KemetBadge.prototype, "outlined", 2);
-__decorateClass([
-  state()
-], KemetBadge.prototype, "iconLeft", 2);
-__decorateClass([
-  state()
-], KemetBadge.prototype, "iconRight", 2);
-KemetBadge = __decorateClass([
-  customElement("kemet-badge")
-], KemetBadge);
-
-export {
-  KemetBadge
-};
-//# sourceMappingURL=chunk-Q3TV6JZX.mjs.map