kemet-ui 1.3.1 → 2.0.0

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

@@ -0,0 +1,110 @@
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { stylesUploadFile } from './styles';
+import { stylesLoaders } from './styles';
+const formatBytes = (bytes, decimals = 2) => {
+    if (bytes === 0)
+        return '0 Bytes';
+    const k = 1024;
+    const dm = decimals < 0 ? 0 : decimals;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    // eslint-disable-next-line no-restricted-properties
+    return `${parseFloat((bytes / k ** i).toFixed(dm))} ${sizes[i]}`;
+};
+/**
+ * @since 1.3.0
+ * @status stable
+ *
+ * @tagname kemet-upload-file
+ * @summary A file in the upload.
+ *
+ * @prop {string} name - The name of the file
+ * @prop {number} loaded - The number of bytes loaded
+ * @prop {number} size - The file size in bytes
+ * @prop {string} type - The file type
+ * @prop {string} status - The status of the file. Values are complete | uploading | error.
+ * @prop {number} percent - Percentage of file completion that's calculated by the loaded property.
+ * @prop {string} message - An error message to give to users
+ *
+ * @cssproperty --kemet-upload-file-color - The default text color. Default: var(--kemet-color-text).
+ * @cssproperty --kemet-upload-file-padding - The padding around the file. Default: 0.5rem 1rem.
+ * @cssproperty --kemet-upload-file-border - The border around the file. Default: 1px solid var(--kemet-color-primary).
+ *
+ * @csspart percentage - Area that displays the percentage.
+ * @csspart filename - Area that displays file name.
+ * @csspart loaded - Area that displays how much has uploaded.
+ * @csspart message - Area for the error message.
+ * @csspart indicator - Area for status icon.
+ *
+ */
+let KemetUploadFile = class KemetUploadFile extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.loaded = 0;
+        this.size = 0;
+        this.percent = 0;
+    }
+    updated() {
+        this.percent = this.calculatePercent();
+    }
+    render() {
+        return html `
+      <div class="percentage" part="percentage">
+        <span>${this.percent}%</span>
+      </div>
+      <div>
+        <h3 part="filename">${this.name}</h3>
+        <span part="loaded">${formatBytes(this.loaded)} / ${formatBytes(this.size)}</span>
+        ${this.message ? html `<div class="message" part="message">${this.message}</div>` : null}
+      </div>
+      <div class="indicator" part="indicator">
+        ${this.getStatusIcon()}
+      </div>
+    `;
+    }
+    calculatePercent() {
+        const percent = Math.round((this.loaded * 100.0) / this.size);
+        return percent > 100 ? 100 : percent;
+    }
+    getStatusIcon() {
+        if (this.status === 'uploading') {
+            return html `<div class="lds-ripple"><div></div><div></div></div>`;
+        }
+        if (this.status === 'complete') {
+            return html `<kemet-icon icon="check-circle" size="48"></kemet-icon>`;
+        }
+        if (this.status === 'error') {
+            return html `<kemet-icon icon="exclamation-circle" size="48"></kemet-icon>`;
+        }
+        return null;
+    }
+};
+KemetUploadFile.styles = [stylesUploadFile, stylesLoaders];
+__decorate([
+    property({ type: String })
+], KemetUploadFile.prototype, "name", void 0);
+__decorate([
+    property({ type: Number })
+], KemetUploadFile.prototype, "loaded", void 0);
+__decorate([
+    property({ type: Number })
+], KemetUploadFile.prototype, "size", void 0);
+__decorate([
+    property({ type: String })
+], KemetUploadFile.prototype, "type", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], KemetUploadFile.prototype, "status", void 0);
+__decorate([
+    property({ type: Number })
+], KemetUploadFile.prototype, "percent", void 0);
+__decorate([
+    property({ type: String })
+], KemetUploadFile.prototype, "message", void 0);
+KemetUploadFile = __decorate([
+    customElement('kemet-upload-file')
+], KemetUploadFile);
+export default KemetUploadFile;
+//# sourceMappingURL=kemet-upload-file.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kemet-upload-file.js","sourceRoot":"","sources":["../../../../src/components/kemet-upload/kemet-upload-file.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { stylesUploadFile } from './styles';\nimport { stylesLoaders } from './styles';\n\nconst formatBytes = (bytes, decimals = 2) => {\n  if (bytes === 0) return '0 Bytes';\n\n  const k = 1024;\n  const dm = decimals < 0 ? 0 : decimals;\n  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];\n\n  const i = Math.floor(Math.log(bytes) / Math.log(k));\n\n  // eslint-disable-next-line no-restricted-properties\n  return `${parseFloat((bytes / k ** i).toFixed(dm))} ${sizes[i]}`;\n};\n\n/**\n * @since 1.3.0\n * @status stable\n *\n * @tagname kemet-upload-file\n * @summary A file in the upload.\n *\n * @prop {string} name - The name of the file\n * @prop {number} loaded - The number of bytes loaded\n * @prop {number} size - The file size in bytes\n * @prop {string} type - The file type\n * @prop {string} status - The status of the file. Values are complete | uploading | error.\n * @prop {number} percent - Percentage of file completion that's calculated by the loaded property.\n * @prop {string} message - An error message to give to users\n *\n * @cssproperty --kemet-upload-file-color - The default text color. Default: var(--kemet-color-text).\n * @cssproperty --kemet-upload-file-padding - The padding around the file. Default: 0.5rem 1rem.\n * @cssproperty --kemet-upload-file-border - The border around the file. Default: 1px solid var(--kemet-color-primary).\n *\n * @csspart percentage - Area that displays the percentage.\n * @csspart filename - Area that displays file name.\n * @csspart loaded - Area that displays how much has uploaded.\n * @csspart message - Area for the error message.\n * @csspart indicator - Area for status icon.\n *\n */\n\n@customElement('kemet-upload-file')\nexport default class KemetUploadFile extends LitElement {\n  static styles = [stylesUploadFile, stylesLoaders];\n\n  @property({ type: String })\n  name: string;\n\n  @property({ type: Number })\n  loaded: number = 0;\n\n  @property({ type: Number })\n  size: number = 0;\n\n  @property({ type: String })\n  type: string;\n\n  @property({ type: String, reflect: true })\n  status: string;\n\n  @property({ type: Number })\n  percent: number = 0;\n\n  @property({ type: String })\n  message: string;\n\n  updated() {\n    this.percent = this.calculatePercent();\n  }\n\n  render() {\n    return html`\n      <div class=\"percentage\" part=\"percentage\">\n        <span>${this.percent}%</span>\n      </div>\n      <div>\n        <h3 part=\"filename\">${this.name}</h3>\n        <span part=\"loaded\">${formatBytes(this.loaded)} / ${formatBytes(this.size)}</span>\n        ${this.message ? html`<div class=\"message\" part=\"message\">${this.message}</div>` : null}\n      </div>\n      <div class=\"indicator\" part=\"indicator\">\n        ${this.getStatusIcon()}\n      </div>\n    `;\n  }\n\n  calculatePercent() {\n    const percent = Math.round((this.loaded * 100.0) / this.size);\n    return percent > 100 ? 100 : percent;\n  }\n\n  getStatusIcon() {\n    if (this.status === 'uploading') {\n      return html`<div class=\"lds-ripple\"><div></div><div></div></div>`;\n    }\n\n    if (this.status === 'complete') {\n      return html`<kemet-icon icon=\"check-circle\" size=\"48\"></kemet-icon>`;\n    }\n\n    if (this.status === 'error') {\n      return html`<kemet-icon icon=\"exclamation-circle\" size=\"48\"></kemet-icon>`;\n    }\n\n    return null;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-upload-file': KemetUploadFile\n  }\n}\n"]}

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

@@ -0,0 +1,58 @@
+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 - If 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. Default: var(--kemet-color-white).
+ * @cssproperty --kemet-upload-height - The height. Default: 364px.
+ * @cssproperty --kemet-upload-border - The border. Default: 1rem solid var(--kemet-color-gray1-to-transparent).
+ * @cssproperty --kemet-upload-background-color - The background color. Default: var(--kemet-color-primary-to-transparent).
+ *
+ */
+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: any): void;
+    handleDrop(event: any): void;
+    isMobile(): void;
+    hasDragDrop(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-upload': KemetUpload;
+    }
+}

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

@@ -0,0 +1,154 @@
+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 - If 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. Default: var(--kemet-color-white).
+ * @cssproperty --kemet-upload-height - The height. Default: 364px.
+ * @cssproperty --kemet-upload-border - The border. Default: 1rem solid var(--kemet-color-gray1-to-transparent).
+ * @cssproperty --kemet-upload-background-color - The background color. Default: var(--kemet-color-primary-to-transparent).
+ *
+ */
+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() {
+        if ('draggable' in document.createElement('span')) {
+            this.noDragDrop = false;
+        }
+        else {
+            this.noDragDrop = true;
+        }
+    }
+};
+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/src/components/kemet-upload/kemet-upload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kemet-upload.js","sourceRoot":"","sources":["../../../../src/components/kemet-upload/kemet-upload.ts"],"names":[],"mappings":"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","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) => {\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 - If 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. Default: var(--kemet-color-white).\n * @cssproperty --kemet-upload-height - The height. Default: 364px.\n * @cssproperty --kemet-upload-border - The border. Default: 1rem solid var(--kemet-color-gray1-to-transparent).\n * @cssproperty --kemet-upload-background-color - The background color. Default: var(--kemet-color-primary-to-transparent).\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 => 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) {\n    emitEvent(this, 'kemet-upload-change', {\n      event,\n      files: this.fileInputElement.files,\n      fileElement: this.fileInputElement,\n    });\n  }\n\n  handleDrop(event) {\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    if ('draggable' in document.createElement('span')) {\n      this.noDragDrop = false;\n    } else {\n      this.noDragDrop = true;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-upload': KemetUpload\n  }\n}\n"]}

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

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

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

@@ -0,0 +1,169 @@
+import { css } from 'lit';
+export const stylesUpload = css `
+  :host {
+    color: var(--kemet-upload-color, var(--kemet-color-white));
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    height: var(--kemet-upload-height, 364px);
+    border: var(--kemet-upload-border, 1rem solid var(--kemet-color-gray1-to-transparent));
+    background-color: var(--kemet-upload-background-color, var(--kemet-color-primary-to-transparent));
+  }
+
+  :host([mobile]) {
+    display: block;
+    height: auto;
+  }
+
+  input {
+    display: none;
+  }
+
+  .button {
+    cursor: pointer;
+    font-size: 1rem;
+    display: block;
+    color: var(--kemet-color-white);
+    padding: 0.5rem 1rem;
+    border: 1px solid 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 var(--kemet-color-white);
+  }
+
+  :host([over]) .upload {
+    background-color: green;
+  }
+
+  :host([mobile]) .upload {
+    height: 280px;
+  }
+
+  .files {
+    display: flex;
+    gap: 1rem;
+    flex-direction: column;
+    padding: 0 1rem;
+    overflow: auto;
+    background-color: var(--kemet-color-gray1-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: var(--kemet-color-primary);
+
+    color: var(--kemet-upload-file-color, var(--kemet-color-text));
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: auto 1fr auto;
+    align-items: center;
+    height: 100%;
+    max-height: 50%;
+    padding: var(--kemet-upload-file-padding, 0.5rem 1rem);
+    border: var(--kemet-upload-file-border, 1px solid var(--kemet-color-primary));
+  }
+
+  :host([status='error']) {
+    border: 1px solid var(--kemet-color-error);
+  }
+
+  :host([status='complete']) {
+    border: 1px solid 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: var(--kemet-color-success);
+  }
+
+  :host([status='error']) .message,
+  :host([status='error']) .indicator {
+    color: 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: 50%;
+    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/src/components/kemet-upload/styles.js.map

@@ -0,0 +1 @@
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoE9B,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8ClC,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    color: var(--kemet-upload-color, var(--kemet-color-white));\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    height: var(--kemet-upload-height, 364px);\n    border: var(--kemet-upload-border, 1rem solid var(--kemet-color-gray1-to-transparent));\n    background-color: var(--kemet-upload-background-color, var(--kemet-color-primary-to-transparent));\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: var(--kemet-color-white);\n    padding: 0.5rem 1rem;\n    border: 1px solid 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 var(--kemet-color-white);\n  }\n\n  :host([over]) .upload {\n    background-color: green;\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: var(--kemet-color-gray1-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: var(--kemet-color-primary);\n\n    color: var(--kemet-upload-file-color, var(--kemet-color-text));\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, 0.5rem 1rem);\n    border: var(--kemet-upload-file-border, 1px solid var(--kemet-color-primary));\n  }\n\n  :host([status='error']) {\n    border: 1px solid var(--kemet-color-error);\n  }\n\n  :host([status='complete']) {\n    border: 1px solid 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: var(--kemet-color-success);\n  }\n\n  :host([status='error']) .message,\n  :host([status='error']) .indicator {\n    color: 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: 50%;\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/src/components/kemet-upload/types.d.ts

@@ -0,0 +1,21 @@
+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/src/components/kemet-upload/types.js

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

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

@@ -0,0 +1 @@
+{"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"]}

package/dist/src/stories/styles/borders/borders.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+declare const meta: Meta;
+export default meta;
+declare type Story = StoryObj;
+export declare const Standard: Story;

package/dist/src/stories/styles/borders/borders.stories.js

@@ -0,0 +1,46 @@
+import { html } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+const meta = {
+    title: 'Styles / Border',
+};
+export default meta;
+const Template = ({ width = '1', side = 'all', style = 'solid', color = 'primary', radius = 'none', }) => {
+    const borderRadius = radius !== 'none' ? `kemet-border-radius="${radius}"` : null;
+    const template = `
+    <div kemet-border="${side}-${width} ${style} ${color}" ${borderRadius} kemet-margin="tiny:normal" kemet-padding="tiny:normal">The quick brown fox jumps over the lazy dog.</div>
+  `;
+    return html `${unsafeHTML(template)}`;
+};
+export const Standard = {
+    render: Template,
+    args: {
+        width: '1',
+        side: 'all',
+        style: 'solid',
+        color: 'auto',
+        radius: 'none',
+    },
+    argTypes: {
+        width: {
+            control: { type: 'select' },
+            options: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
+        },
+        side: {
+            control: { type: 'select' },
+            options: ['all', 'top', 'right', 'bottom', 'left', 'horizontal', 'vertical'],
+        },
+        style: {
+            control: { type: 'select' },
+            options: ['dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset', 'none', 'hidden'],
+        },
+        color: {
+            control: { type: 'select' },
+            options: ['auto', 'primary', 'black', 'white', 'gray1', 'gray2', 'gray3', 'gray4', 'gray5', 'gray6', 'gray7', 'gray8', 'gray9', 'gray10'],
+        },
+        radius: {
+            control: { type: 'select' },
+            options: ['none', 'small', 'medium', 'large'],
+        },
+    }
+};
+//# sourceMappingURL=borders.stories.js.map

package/dist/src/stories/styles/borders/borders.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"borders.stories.js","sourceRoot":"","sources":["../../../../../src/stories/styles/borders/borders.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAG3D,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,iBAAiB;CACzB,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,EAChB,KAAK,GAAG,GAAG,EACX,IAAI,GAAG,KAAK,EACZ,KAAK,GAAG,OAAO,EACf,KAAK,GAAG,SAAS,EACjB,MAAM,GAAG,MAAM,GAChB,EAAE,EAAE;IACH,MAAM,YAAY,GAAG,MAAM,KAAK,MAAM,CAAC,CAAC,CAAC,wBAAwB,MAAM,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC;IAElF,MAAM,QAAQ,GAAG;yBACM,IAAI,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,KAAK,YAAY;GACtE,CAAC;IAEF,OAAO,IAAI,CAAA,GAAG,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC;AACvC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,QAAQ;IAChB,IAAI,EAAE;QACJ,KAAK,EAAE,GAAG;QACV,IAAI,EAAE,KAAK;QACX,KAAK,EAAE,OAAO;QACd,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;KACf;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;SAC5D;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,YAAY,EAAE,UAAU,CAAC;SAC7E;QACD,KAAK,EAAE;YACL,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,CAAC;SACzG;QACD,KAAK,EAAE;YACL,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,CAAC;SAC1I;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC;SAC9C;KACF;CACF,CAAA","sourcesContent":["import { html } from 'lit';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nconst meta: Meta = {\n  title: 'Styles / Border',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = ({\n  width = '1',\n  side = 'all',\n  style = 'solid',\n  color = 'primary',\n  radius = 'none',\n}) => {\n  const borderRadius = radius !== 'none' ? `kemet-border-radius=\"${radius}\"` : null;\n\n  const template = `\n    <div kemet-border=\"${side}-${width} ${style} ${color}\" ${borderRadius} kemet-margin=\"tiny:normal\" kemet-padding=\"tiny:normal\">The quick brown fox jumps over the lazy dog.</div>\n  `;\n\n  return html`${unsafeHTML(template)}`;\n};\n\nexport const Standard: Story = {\n  render: Template,\n  args: {\n    width: '1',\n    side: 'all',\n    style: 'solid',\n    color: 'auto',\n    radius: 'none',\n  },\n  argTypes: {\n    width: {\n      control: { type: 'select' },\n      options: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],\n    },\n    side: {\n      control: { type: 'select' },\n      options: ['all', 'top', 'right', 'bottom', 'left', 'horizontal', 'vertical'],\n    },\n    style: {\n      control: { type: 'select' },\n      options: ['dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset', 'none', 'hidden'],\n    },\n    color: {\n      control: { type: 'select' },\n      options: ['auto', 'primary', 'black', 'white', 'gray1', 'gray2', 'gray3', 'gray4', 'gray5', 'gray6', 'gray7', 'gray8', 'gray9', 'gray10'],\n    },\n    radius: {\n      control: { type: 'select' },\n      options: ['none', 'small', 'medium', 'large'],\n    },\n  }\n}\n"]}

package/dist/src/stories/styles/borders/stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+declare const meta: Meta;
+export default meta;
+declare type Story = StoryObj;
+export declare const Standard: Story;