kemet-ui 3.1.0 → 4.0.1

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

@@ -1,58 +0,0 @@
-import { LitElement } from 'lit';
-/**
- * @since 1.3.0
- * @status stable
- *
- * @tagname kemet-upload
- * @summary An interface for uploading files.
- *
- * @prop {string} slug - A unique identifier for the component
- * @prop {string} accept - Determines what file types are accepted
- * @prop {boolean} multiple - Allows for multiple files
- * @prop {boolean} over - Automatically is true when a file is being dragged over the upload area
- * @prop {string} heading - Descriptive text for the upload area
- * @prop {boolean} mobile - Displays the component in a mobile context
- * @prop {string} breakpoint - Controls the point at which the component is considered mobile
- * @prop {boolean} noDragDrop - Is true if drag and drop support is not detected
- * @prop {number} maxSize - The maximum file size for uploads
- * @prop {string} buttonLabel - The browse files button text
- *
- * @event kemet-upload-change - Fires when files have been added
- *
- * @csspart upload - The area where files are dropped.
- * @csspart heading - The description in the upload area.
- * @csspart button - The button in the upload area.
- * @csspart files - The area where uploaded files are listed.
- *
- * @cssproperty --kemet-upload-color - The default text color.
- * @cssproperty --kemet-upload-height - The height.
- * @cssproperty --kemet-upload-border - The border.
- * @cssproperty --kemet-upload-background-color - The background color.
- *
- */
-export default class KemetUpload extends LitElement {
-    static styles: import("lit").CSSResult[];
-    slug: string;
-    accept: string;
-    multiple: boolean;
-    over: boolean;
-    heading: string;
-    mobile: boolean;
-    breakpoint: string;
-    noDragDrop: boolean;
-    maxSize: number;
-    buttonLabel: string;
-    fileInputElement: HTMLInputElement;
-    upload: HTMLElement;
-    firstUpdated(): void;
-    render(): import("lit-html").TemplateResult<1>;
-    handleChange(event: Event): void;
-    handleDrop(event: DragEvent): void;
-    isMobile(): void;
-    hasDragDrop(): void;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'kemet-upload': KemetUpload;
-    }
-}

package/dist/components/kemet-upload/kemet-upload.js

@@ -1,149 +0,0 @@
-import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { emitEvent } from '../../utilities/misc/events';
-import { stylesUpload } from './styles';
-const preventDefaults = (event) => {
-    event.preventDefault();
-    event.stopPropagation();
-};
-/**
- * @since 1.3.0
- * @status stable
- *
- * @tagname kemet-upload
- * @summary An interface for uploading files.
- *
- * @prop {string} slug - A unique identifier for the component
- * @prop {string} accept - Determines what file types are accepted
- * @prop {boolean} multiple - Allows for multiple files
- * @prop {boolean} over - Automatically is true when a file is being dragged over the upload area
- * @prop {string} heading - Descriptive text for the upload area
- * @prop {boolean} mobile - Displays the component in a mobile context
- * @prop {string} breakpoint - Controls the point at which the component is considered mobile
- * @prop {boolean} noDragDrop - Is true if drag and drop support is not detected
- * @prop {number} maxSize - The maximum file size for uploads
- * @prop {string} buttonLabel - The browse files button text
- *
- * @event kemet-upload-change - Fires when files have been added
- *
- * @csspart upload - The area where files are dropped.
- * @csspart heading - The description in the upload area.
- * @csspart button - The button in the upload area.
- * @csspart files - The area where uploaded files are listed.
- *
- * @cssproperty --kemet-upload-color - The default text color.
- * @cssproperty --kemet-upload-height - The height.
- * @cssproperty --kemet-upload-border - The border.
- * @cssproperty --kemet-upload-background-color - The background color.
- *
- */
-let KemetUpload = class KemetUpload extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.slug = 'upload';
-        this.heading = 'Drag & Drop Files';
-        this.breakpoint = '600px';
-        this.buttonLabel = 'Browse Files';
-    }
-    firstUpdated() {
-        this.fileInputElement = this.shadowRoot.querySelector('[type="file"]');
-        this.upload = this.shadowRoot.querySelector('.upload');
-        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {
-            this.upload.addEventListener(eventName, event => preventDefaults(event), false);
-        });
-        ['dragenter', 'dragover'].forEach((eventName) => {
-            this.upload.addEventListener(eventName, () => { this.over = true; }, false);
-        });
-        ['dragleave', 'drop'].forEach((eventName) => {
-            this.upload.addEventListener(eventName, () => { this.over = false; }, false);
-        });
-        this.isMobile();
-        this.hasDragDrop();
-        window.addEventListener('resize', () => { this.isMobile(); });
-        this.upload.addEventListener('drop', event => this.handleDrop(event), false);
-    }
-    render() {
-        return html `
-      <div class="upload" part="upload">
-        <kemet-icon icon="cloud-arrow-up" size="128"></kemet-icon>
-        <input
-          type="file"
-          id=${this.slug}
-          ?multiple=${this.multiple}
-          accept=${ifDefined(this.accept) ? this.accept : null}
-          @change=${(event) => this.handleChange(event)}
-        />
-        <h3 class="heading" part="heading">${this.heading}</h3>
-        <label class="button" part="button" for=${this.slug}>${this.buttonLabel}</label>
-      </div>
-      <div class="files" part="files">
-        <slot></slot>
-      </div>
-    `;
-    }
-    handleChange(event) {
-        emitEvent(this, 'kemet-upload-change', {
-            event,
-            files: this.fileInputElement.files,
-            fileElement: this.fileInputElement,
-        });
-    }
-    handleDrop(event) {
-        emitEvent(this, 'kemet-upload-change', {
-            event,
-            files: (event === null || event === void 0 ? void 0 : event.dataTransfer.files) || [],
-            fileElement: this.fileInputElement,
-        });
-    }
-    isMobile() {
-        const mediaQuery = window.matchMedia(`(max-width: ${this.breakpoint})`);
-        this.mobile = mediaQuery.matches;
-    }
-    hasDragDrop() {
-        this.noDragDrop = !('draggable' in document.createElement('span'));
-    }
-};
-KemetUpload.styles = [stylesUpload];
-__decorate([
-    property({ type: String })
-], KemetUpload.prototype, "slug", void 0);
-__decorate([
-    property({ type: String })
-], KemetUpload.prototype, "accept", void 0);
-__decorate([
-    property({ type: Boolean })
-], KemetUpload.prototype, "multiple", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], KemetUpload.prototype, "over", void 0);
-__decorate([
-    property({ type: String })
-], KemetUpload.prototype, "heading", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], KemetUpload.prototype, "mobile", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], KemetUpload.prototype, "breakpoint", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: 'no-drag-drop' })
-], KemetUpload.prototype, "noDragDrop", void 0);
-__decorate([
-    property({ type: Number, attribute: 'max-size' })
-], KemetUpload.prototype, "maxSize", void 0);
-__decorate([
-    property({ type: String, attribute: 'button-label' })
-], KemetUpload.prototype, "buttonLabel", void 0);
-__decorate([
-    state()
-], KemetUpload.prototype, "fileInputElement", void 0);
-__decorate([
-    state()
-], KemetUpload.prototype, "upload", void 0);
-KemetUpload = __decorate([
-    customElement('kemet-upload')
-], KemetUpload);
-export default KemetUpload;
-//# sourceMappingURL=kemet-upload.js.map

package/dist/components/kemet-upload/kemet-upload.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"kemet-upload.js","sourceRoot":"","sources":["../../../src/components/kemet-upload/kemet-upload.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExC,MAAM,eAAe,GAAG,CAAC,KAAY,EAAE,EAAE;IACvC,KAAK,CAAC,cAAc,EAAE,CAAC;IACvB,KAAK,CAAC,eAAe,EAAE,CAAC;AAC1B,CAAC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAGY,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QAIb,SAAI,GAAW,QAAQ,CAAC;QAYxB,YAAO,GAAW,mBAAmB,CAAC;QAMtC,eAAU,GAAW,OAAO,CAAC;QAS7B,gBAAW,GAAW,cAAc,CAAC;IA2EvC,CAAC;IAnEC,YAAY;QACV,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;QACvE,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;QAEvD,CAAC,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,SAAS,EAAE,EAAE;YACnE,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;QAClF,CAAC,CAAC,CAAC;QAEH,CAAC,WAAW,EAAE,UAAU,CAAC,CAAC,OAAO,CAAC,CAAC,SAAS,EAAE,EAAE;YAC9C,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;QAC9E,CAAC,CAAC,CAAC;QAEH,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,SAAS,EAAE,EAAE;YAC1C,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;QAC/E,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,QAAQ,EAAE,CAAC;QAChB,IAAI,CAAC,WAAW,EAAE,CAAC;QAEnB,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;QAC9D,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;IAC/E,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;eAKA,IAAI,CAAC,IAAI;sBACF,IAAI,CAAC,QAAQ;mBAChB,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI;oBAC1C,CAAC,KAAY,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;;6CAEjB,IAAI,CAAC,OAAO;kDACP,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,WAAW;;;;;KAK1E,CAAC;IACJ,CAAC;IAED,YAAY,CAAC,KAAY;QACvB,SAAS,CAAC,IAAI,EAAE,qBAAqB,EAAE;YACrC,KAAK;YACL,KAAK,EAAE,IAAI,CAAC,gBAAgB,CAAC,KAAK;YAClC,WAAW,EAAE,IAAI,CAAC,gBAAgB;SACnC,CAAC,CAAC;IACL,CAAC;IAED,UAAU,CAAC,KAAgB;QACzB,SAAS,CAAC,IAAI,EAAE,qBAAqB,EAAE;YACrC,KAAK;YACL,KAAK,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,YAAY,CAAC,KAAK,KAAI,EAAE;YACtC,WAAW,EAAE,IAAI,CAAC,gBAAgB;SACnC,CAAC,CAAC;IACL,CAAC;IAED,QAAQ;QACN,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,eAAe,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC;QACxE,IAAI,CAAC,MAAM,GAAG,UAAU,CAAC,OAAO,CAAC;IACnC,CAAC;IAED,WAAW;QACT,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,WAAW,IAAI,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC;IACrE,CAAC;;AAxGM,kBAAM,GAAG,CAAC,YAAY,CAAC,AAAjB,CAAkB;AAG/B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCACH;AAGxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACZ;AAGf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CACV;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAC7B;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACW;AAGtC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAC3B;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CACb;AAG7B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;+CAClD;AAGpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;4CAClC;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;gDACjB;AAGrC;IADC,KAAK,EAAE;qDAC2B;AAGnC;IADC,KAAK,EAAE;2CACY;AArCD,WAAW;IAD/B,aAAa,CAAC,cAAc,CAAC;GACT,WAAW,CA0G/B;eA1GoB,WAAW","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { stylesUpload } from './styles';\n\nconst preventDefaults = (event: Event) => {\n  event.preventDefault();\n  event.stopPropagation();\n};\n\n/**\n * @since 1.3.0\n * @status stable\n *\n * @tagname kemet-upload\n * @summary An interface for uploading files.\n *\n * @prop {string} slug - A unique identifier for the component\n * @prop {string} accept - Determines what file types are accepted\n * @prop {boolean} multiple - Allows for multiple files\n * @prop {boolean} over - Automatically is true when a file is being dragged over the upload area\n * @prop {string} heading - Descriptive text for the upload area\n * @prop {boolean} mobile - Displays the component in a mobile context\n * @prop {string} breakpoint - Controls the point at which the component is considered mobile\n * @prop {boolean} noDragDrop - Is true if drag and drop support is not detected\n * @prop {number} maxSize - The maximum file size for uploads\n * @prop {string} buttonLabel - The browse files button text\n *\n * @event kemet-upload-change - Fires when files have been added\n *\n * @csspart upload - The area where files are dropped.\n * @csspart heading - The description in the upload area.\n * @csspart button - The button in the upload area.\n * @csspart files - The area where uploaded files are listed.\n *\n * @cssproperty --kemet-upload-color - The default text color.\n * @cssproperty --kemet-upload-height - The height.\n * @cssproperty --kemet-upload-border - The border.\n * @cssproperty --kemet-upload-background-color - The background color.\n *\n */\n\n@customElement('kemet-upload')\nexport default class KemetUpload extends LitElement {\n  static styles = [stylesUpload];\n\n  @property({ type: String })\n  slug: string = 'upload';\n\n  @property({ type: String })\n  accept: string;\n\n  @property({ type: Boolean })\n  multiple: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  over: boolean;\n\n  @property({ type: String })\n  heading: string = 'Drag & Drop Files';\n\n  @property({ type: Boolean, reflect: true })\n  mobile: boolean;\n\n  @property({ type: String, reflect: true })\n  breakpoint: string = '600px';\n\n  @property({ type: Boolean, reflect: true, attribute: 'no-drag-drop' })\n  noDragDrop: boolean;\n\n  @property({ type: Number, attribute: 'max-size' })\n  maxSize: number;\n\n  @property({ type: String, attribute: 'button-label' })\n  buttonLabel: string = 'Browse Files';\n\n  @state()\n  fileInputElement: HTMLInputElement;\n\n  @state()\n  upload: HTMLElement;\n\n  firstUpdated() {\n    this.fileInputElement = this.shadowRoot.querySelector('[type=\"file\"]');\n    this.upload = this.shadowRoot.querySelector('.upload');\n\n    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {\n      this.upload.addEventListener(eventName, event => preventDefaults(event), false);\n    });\n\n    ['dragenter', 'dragover'].forEach((eventName) => {\n      this.upload.addEventListener(eventName, () => { this.over = true; }, false);\n    });\n\n    ['dragleave', 'drop'].forEach((eventName) => {\n      this.upload.addEventListener(eventName, () => { this.over = false; }, false);\n    });\n\n    this.isMobile();\n    this.hasDragDrop();\n\n    window.addEventListener('resize', () => { this.isMobile(); });\n    this.upload.addEventListener('drop', event => this.handleDrop(event), false);\n  }\n\n  render() {\n    return html`\n      <div class=\"upload\" part=\"upload\">\n        <kemet-icon icon=\"cloud-arrow-up\" size=\"128\"></kemet-icon>\n        <input\n          type=\"file\"\n          id=${this.slug}\n          ?multiple=${this.multiple}\n          accept=${ifDefined(this.accept) ? this.accept : null}\n          @change=${(event: Event) => this.handleChange(event)}\n        />\n        <h3 class=\"heading\" part=\"heading\">${this.heading}</h3>\n        <label class=\"button\" part=\"button\" for=${this.slug}>${this.buttonLabel}</label>\n      </div>\n      <div class=\"files\" part=\"files\">\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  handleChange(event: Event) {\n    emitEvent(this, 'kemet-upload-change', {\n      event,\n      files: this.fileInputElement.files,\n      fileElement: this.fileInputElement,\n    });\n  }\n\n  handleDrop(event: DragEvent) {\n    emitEvent(this, 'kemet-upload-change', {\n      event,\n      files: event?.dataTransfer.files || [],\n      fileElement: this.fileInputElement,\n    });\n  }\n\n  isMobile() {\n    const mediaQuery = window.matchMedia(`(max-width: ${this.breakpoint})`);\n    this.mobile = mediaQuery.matches;\n  }\n\n  hasDragDrop() {\n    this.noDragDrop = !('draggable' in document.createElement('span'));\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-upload': KemetUpload\n  }\n}\n"]}

package/dist/components/kemet-upload/styles.d.ts

@@ -1,3 +0,0 @@
-export declare const stylesUpload: import("lit").CSSResult;
-export declare const stylesUploadFile: import("lit").CSSResult;
-export declare const stylesLoaders: import("lit").CSSResult;

package/dist/components/kemet-upload/styles.js

@@ -1,178 +0,0 @@
-import { css } from 'lit';
-export const 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;
-  }
-`;
-export const 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));
-  }
-`;
-export const 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;
-    }
-  }
-`;
-//# sourceMappingURL=styles.js.map

package/dist/components/kemet-upload/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-upload/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0E9B,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiDlC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkD/B,CAAC","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"]}

package/dist/components/kemet-upload/types.d.ts

@@ -1,21 +0,0 @@
-export interface KemetUploadInterface extends HTMLElement {
-    slug?: string;
-    accept?: string;
-    multiple?: boolean;
-    over?: boolean;
-    heading?: string;
-    mobile?: boolean;
-    breakpoint?: string;
-    noDragDrop?: boolean;
-    maxSize?: number;
-    buttonLabel?: string;
-}
-export interface KemetUploadFile extends HTMLElement {
-    name?: string;
-    loaded?: number;
-    size?: number;
-    type?: string;
-    status?: string;
-    percent?: number;
-    message?: string;
-}

package/dist/components/kemet-upload/types.js

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

package/dist/components/kemet-upload/types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/kemet-upload/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface KemetUploadInterface extends HTMLElement {\n  slug?: string,\n  accept?: string,\n  multiple?: boolean,\n  over?: boolean,\n  heading?: string,\n  mobile?: boolean,\n  breakpoint?: string,\n  noDragDrop?: boolean,\n  maxSize?: number,\n  buttonLabel?: string\n}\n\nexport interface KemetUploadFile extends HTMLElement {\n  name?: string,\n  loaded?: number,\n  size?: number,\n  type?: string,\n  status?: string,\n  percent?: number,\n  message?: string,\n}\n"]}