kemet-ui 3.1.0 → 4.0.1

package/dist/elements/upload.d.ts

@@ -0,0 +1,69 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+import KemetUploadFile from './upload-file.js';
+
+interface InterfaceUploadChangeDetails {
+    event: Event | DragEvent;
+    files: FileList;
+    fileElement: KemetUploadFile;
+}
+/**
+ * @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-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.
+ *
+ */
+declare class KemetUpload extends LitElement {
+    static styles: 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(): lit_html.TemplateResult<1>;
+    handleChange(event: Event): void;
+    handleDrop(event: DragEvent): void;
+    isMobile(): void;
+    hasDragDrop(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-upload': KemetUpload;
+    }
+}
+
+export { type InterfaceUploadChangeDetails, KemetUpload as default };

package/dist/elements/upload.js

@@ -0,0 +1,464 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// src/elements/upload.ts
+var upload_exports = {};
+__export(upload_exports, {
+  default: () => KemetUpload
+});
+module.exports = __toCommonJS(upload_exports);
+var import_lit3 = require("lit");
+var import_decorators2 = require("lit/decorators.js");
+var import_if_defined = require("lit/directives/if-defined.js");
+
+// src/utilities/events.ts
+var emitEvent = (element, name, detail, bubbles = true, composed = true) => {
+  element.dispatchEvent(
+    new CustomEvent(name, { bubbles, composed, detail })
+  );
+};
+
+// src/styles/elements/upload.ts
+var import_lit = require("lit");
+var stylesUpload = import_lit.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 = import_lit.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 = import_lit.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;
+    }
+  }
+`;
+
+// src/elements/icon-bootstrap.ts
+var import_lit2 = require("lit");
+var import_decorators = require("lit/decorators.js");
+var KemetIconBootstrap = class extends import_lit2.LitElement {
+  constructor() {
+    super(...arguments);
+    this.icon = "code";
+    this.version = "1.11.3";
+    this.size = 24;
+    this.stylesLoaded = false;
+  }
+  async connectedCallback() {
+    super.connectedCallback();
+    await this._loadBootstrapStyles();
+  }
+  async _resolveVersion(version) {
+    if (version !== "latest" && /^\d+\.\d+\.\d+/.test(version)) {
+      return version;
+    }
+    if (KemetIconBootstrap.resolvedVersions.has(version)) {
+      return KemetIconBootstrap.resolvedVersions.get(version);
+    }
+    try {
+      const response = await fetch("https://unpkg.com/bootstrap-icons/package.json");
+      if (!response.ok) throw new Error("Failed to resolve version");
+      const pkg = await response.json();
+      const resolvedVersion = pkg.version;
+      KemetIconBootstrap.resolvedVersions.set(version, resolvedVersion);
+      return resolvedVersion;
+    } catch (error) {
+      console.warn("Failed to resolve Bootstrap Icons version, using 1.11.3:", error);
+      return "1.11.3";
+    }
+  }
+  async _loadBootstrapStyles() {
+    if (this.stylesLoaded) return;
+    try {
+      const resolvedVersion = await this._resolveVersion(this.version);
+      const cacheKey = resolvedVersion;
+      if (!KemetIconBootstrap.fontFaceLoaded.get(cacheKey)) {
+        await this._loadFontFaceInDocument(resolvedVersion);
+        KemetIconBootstrap.fontFaceLoaded.set(cacheKey, true);
+      }
+      let iconSheet = KemetIconBootstrap.iconStylesCache.get(cacheKey);
+      if (!iconSheet) {
+        const response = await fetch(
+          `https://unpkg.com/bootstrap-icons@${resolvedVersion}/font/bootstrap-icons.min.css`
+        );
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        let cssText = await response.text();
+        cssText = cssText.replace(/@font-face\s*{[^}]*}/g, "");
+        iconSheet = new CSSStyleSheet();
+        await iconSheet.replace(cssText);
+        KemetIconBootstrap.iconStylesCache.set(cacheKey, iconSheet);
+      }
+      this.shadowRoot.adoptedStyleSheets = [
+        ...this.shadowRoot.adoptedStyleSheets,
+        iconSheet
+      ];
+      this.stylesLoaded = true;
+      this.requestUpdate();
+    } catch (error) {
+      console.error("Failed to load Bootstrap Icons:", error);
+      this.requestUpdate();
+    }
+  }
+  async _loadFontFaceInDocument(resolvedVersion) {
+    try {
+      const response = await fetch(
+        `https://unpkg.com/bootstrap-icons@${resolvedVersion}/font/bootstrap-icons.min.css`
+      );
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      const cssText = await response.text();
+      const fontFaceMatches = cssText.match(/@font-face\s*{[^}]*}/g);
+      if (!fontFaceMatches) return;
+      const baseUrl = `https://unpkg.com/bootstrap-icons@${resolvedVersion}/font/`;
+      let fontFaceCss = fontFaceMatches.join("\n");
+      fontFaceCss = fontFaceCss.replace(/url\(["']?\.\/fonts\//g, `url("${baseUrl}fonts/`);
+      fontFaceCss = fontFaceCss.replace(/url\(["']?fonts\//g, `url("${baseUrl}fonts/`);
+      const styleId = `bootstrap-icons-fonts-${resolvedVersion}`;
+      if (!document.getElementById(styleId)) {
+        const style = document.createElement("style");
+        style.id = styleId;
+        style.textContent = fontFaceCss;
+        document.head.appendChild(style);
+      }
+    } catch (error) {
+      console.error("Failed to load Bootstrap Icons fonts:", error);
+      throw error;
+    }
+  }
+  render() {
+    return import_lit2.html`
+      <i class="bi bi-${this.icon}" style="font-size: ${this.size}px;"></i>
+    `;
+  }
+};
+KemetIconBootstrap.fontFaceLoaded = /* @__PURE__ */ new Map();
+KemetIconBootstrap.iconStylesCache = /* @__PURE__ */ new Map();
+KemetIconBootstrap.resolvedVersions = /* @__PURE__ */ new Map();
+KemetIconBootstrap.styles = import_lit2.css`
+    :host {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+  `;
+__decorateClass([
+  (0, import_decorators.property)()
+], KemetIconBootstrap.prototype, "icon", 2);
+__decorateClass([
+  (0, import_decorators.property)()
+], KemetIconBootstrap.prototype, "version", 2);
+__decorateClass([
+  (0, import_decorators.property)()
+], KemetIconBootstrap.prototype, "size", 2);
+KemetIconBootstrap = __decorateClass([
+  (0, import_decorators.customElement)("kemet-icon-bootstrap")
+], KemetIconBootstrap);
+
+// src/elements/upload.ts
+var preventDefaults = (event) => {
+  event.preventDefault();
+  event.stopPropagation();
+};
+var KemetUpload = class extends import_lit3.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 import_lit3.html`
+      <div class="upload" part="upload">
+        <kemet-icon-bootstrap icon="cloud-arrow-up" size="128"></kemet-icon-bootstrap>
+        <input
+          type="file"
+          id=${this.slug}
+          ?multiple=${this.multiple}
+          accept=${(0, import_if_defined.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-change", {
+      event,
+      files: this.fileInputElement.files,
+      fileElement: this.fileInputElement
+    });
+  }
+  handleDrop(event) {
+    emitEvent(this, "kemet-change", {
+      event,
+      files: 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];
+__decorateClass([
+  (0, import_decorators2.property)({ type: String })
+], KemetUpload.prototype, "slug", 2);
+__decorateClass([
+  (0, import_decorators2.property)({ type: String })
+], KemetUpload.prototype, "accept", 2);
+__decorateClass([
+  (0, import_decorators2.property)({ type: Boolean })
+], KemetUpload.prototype, "multiple", 2);
+__decorateClass([
+  (0, import_decorators2.property)({ type: Boolean, reflect: true })
+], KemetUpload.prototype, "over", 2);
+__decorateClass([
+  (0, import_decorators2.property)({ type: String })
+], KemetUpload.prototype, "heading", 2);
+__decorateClass([
+  (0, import_decorators2.property)({ type: Boolean, reflect: true })
+], KemetUpload.prototype, "mobile", 2);
+__decorateClass([
+  (0, import_decorators2.property)({ type: String, reflect: true })
+], KemetUpload.prototype, "breakpoint", 2);
+__decorateClass([
+  (0, import_decorators2.property)({ type: Boolean, reflect: true, attribute: "no-drag-drop" })
+], KemetUpload.prototype, "noDragDrop", 2);
+__decorateClass([
+  (0, import_decorators2.property)({ type: Number, attribute: "max-size" })
+], KemetUpload.prototype, "maxSize", 2);
+__decorateClass([
+  (0, import_decorators2.property)({ type: String, attribute: "button-label" })
+], KemetUpload.prototype, "buttonLabel", 2);
+__decorateClass([
+  (0, import_decorators2.state)()
+], KemetUpload.prototype, "fileInputElement", 2);
+__decorateClass([
+  (0, import_decorators2.state)()
+], KemetUpload.prototype, "upload", 2);
+KemetUpload = __decorateClass([
+  (0, import_decorators2.customElement)("kemet-upload")
+], KemetUpload);
+//# sourceMappingURL=upload.js.map

package/dist/elements/upload.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/elements/upload.ts","../../src/utilities/events.ts","../../src/styles/elements/upload.ts","../../src/elements/icon-bootstrap.ts"],"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/events';\nimport { stylesUpload } from '../styles/elements/upload';\nimport './icon-bootstrap';\nimport KemetUploadFile from './upload-file';\n\nexport interface InterfaceUploadChangeDetails {\n  event: Event | DragEvent;\n  files: FileList;\n  fileElement: KemetUploadFile;\n}\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-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-bootstrap icon=\"cloud-arrow-up\" size=\"128\"></kemet-icon-bootstrap>\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-change', {\n      event,\n      files: this.fileInputElement.files,\n      fileElement: this.fileInputElement,\n    });\n  }\n\n  handleDrop(event: DragEvent) {\n    emitEvent(this, 'kemet-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","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n","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","import { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\n@customElement('kemet-icon-bootstrap')\nexport default class KemetIconBootstrap extends LitElement {\n  @property() icon: string = 'code';\n  @property() version: string = '1.11.3'; // Default to stable version\n  @property() size: number = 24;\n\n  private static fontFaceLoaded = new Map<string, boolean>();\n  private static iconStylesCache = new Map<string, CSSStyleSheet>();\n  private static resolvedVersions = new Map<string, string>();\n  private stylesLoaded = false;\n\n  async connectedCallback() {\n    super.connectedCallback();\n    await this._loadBootstrapStyles();\n  }\n\n  private async _resolveVersion(version: string): Promise<string> {\n    // If it's already a specific version, return it\n    if (version !== 'latest' && /^\\d+\\.\\d+\\.\\d+/.test(version)) {\n      return version;\n    }\n\n    // Check cache\n    if (KemetIconBootstrap.resolvedVersions.has(version)) {\n      return KemetIconBootstrap.resolvedVersions.get(version)!;\n    }\n\n    try {\n      // Fetch without version to get redirected to latest\n      const response = await fetch('https://unpkg.com/bootstrap-icons/package.json');\n      if (!response.ok) throw new Error('Failed to resolve version');\n\n      const pkg = await response.json();\n      const resolvedVersion = pkg.version;\n\n      KemetIconBootstrap.resolvedVersions.set(version, resolvedVersion);\n      return resolvedVersion;\n    } catch (error) {\n      console.warn('Failed to resolve Bootstrap Icons version, using 1.11.3:', error);\n      return '1.11.3'; // Fallback to known stable version\n    }\n  }\n\n  private async _loadBootstrapStyles() {\n    if (this.stylesLoaded) return;\n\n    try {\n      // Resolve version if needed\n      const resolvedVersion = await this._resolveVersion(this.version);\n      const cacheKey = resolvedVersion;\n\n      // Load font-face in light DOM (only once per version)\n      if (!KemetIconBootstrap.fontFaceLoaded.get(cacheKey)) {\n        await this._loadFontFaceInDocument(resolvedVersion);\n        KemetIconBootstrap.fontFaceLoaded.set(cacheKey, true);\n      }\n\n      // Load icon classes in shadow DOM\n      let iconSheet = KemetIconBootstrap.iconStylesCache.get(cacheKey);\n\n      if (!iconSheet) {\n        const response = await fetch(\n          `https://unpkg.com/bootstrap-icons@${resolvedVersion}/font/bootstrap-icons.min.css`\n        );\n\n        if (!response.ok) {\n          throw new Error(`HTTP error! status: ${response.status}`);\n        }\n\n        let cssText = await response.text();\n\n        // Remove @font-face rules (already in light DOM)\n        cssText = cssText.replace(/@font-face\\s*{[^}]*}/g, '');\n\n        iconSheet = new CSSStyleSheet();\n        await iconSheet.replace(cssText);\n        KemetIconBootstrap.iconStylesCache.set(cacheKey, iconSheet);\n      }\n\n      this.shadowRoot!.adoptedStyleSheets = [\n        ...this.shadowRoot!.adoptedStyleSheets,\n        iconSheet\n      ];\n\n      this.stylesLoaded = true;\n      this.requestUpdate();\n    } catch (error) {\n      console.error('Failed to load Bootstrap Icons:', error);\n      this.requestUpdate();\n    }\n  }\n\n  private async _loadFontFaceInDocument(resolvedVersion: string) {\n    try {\n      const response = await fetch(\n        `https://unpkg.com/bootstrap-icons@${resolvedVersion}/font/bootstrap-icons.min.css`\n      );\n\n      if (!response.ok) {\n        throw new Error(`HTTP error! status: ${response.status}`);\n      }\n\n      const cssText = await response.text();\n\n      // Extract ONLY @font-face rules\n      const fontFaceMatches = cssText.match(/@font-face\\s*{[^}]*}/g);\n      if (!fontFaceMatches) return;\n\n      // Fix relative URLs to absolute\n      const baseUrl = `https://unpkg.com/bootstrap-icons@${resolvedVersion}/font/`;\n      let fontFaceCss = fontFaceMatches.join('\\n');\n      fontFaceCss = fontFaceCss.replace(/url\\([\"']?\\.\\/fonts\\//g, `url(\"${baseUrl}fonts/`);\n      fontFaceCss = fontFaceCss.replace(/url\\([\"']?fonts\\//g, `url(\"${baseUrl}fonts/`);\n\n      // Add to document head\n      const styleId = `bootstrap-icons-fonts-${resolvedVersion}`;\n      if (!document.getElementById(styleId)) {\n        const style = document.createElement('style');\n        style.id = styleId;\n        style.textContent = fontFaceCss;\n        document.head.appendChild(style);\n      }\n    } catch (error) {\n      console.error('Failed to load Bootstrap Icons fonts:', error);\n      throw error;\n    }\n  }\n\n  static styles = css`\n    :host {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n    }\n  `;\n\n  render() {\n    return html`\n      <i class=\"bi bi-${this.icon}\" style=\"font-size: ${this.size}px;\"></i>\n    `;\n  }\n}\n"],"mappings":"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","names":["import_lit","import_decorators","import_lit"]}

package/dist/elements/upload.mjs

@@ -0,0 +1,11 @@
+import {
+  KemetUpload
+} from "../chunk-DXRTO6DV.mjs";
+import "../chunk-PWWLC4X4.mjs";
+import "../chunk-7DJKARFX.mjs";
+import "../chunk-LHEY3UOF.mjs";
+import "../chunk-SAWN7RJP.mjs";
+export {
+  KemetUpload as default
+};
+//# sourceMappingURL=upload.mjs.map

package/dist/elements/upload.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/form-controller-BR0gZhrG.d.mts

@@ -0,0 +1,13 @@
+declare class FormSubmitController {
+    host: any;
+    form: any;
+    options: any;
+    constructor(host: any, options?: any);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    handleFormData(event: any): void;
+    handleFormSubmit(event: any): void;
+    submit(): void;
+}
+
+export { FormSubmitController as F };

package/dist/form-controller-BR0gZhrG.d.ts

@@ -0,0 +1,13 @@
+declare class FormSubmitController {
+    host: any;
+    form: any;
+    options: any;
+    constructor(host: any, options?: any);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    handleFormData(event: any): void;
+    handleFormSubmit(event: any): void;
+    submit(): void;
+}
+
+export { FormSubmitController as F };

package/dist/styles/elements/accordion.ts

@@ -0,0 +1,43 @@
+import { css } from 'lit';
+
+export const stylesBase =  css`
+  :host {
+    display: block;
+  }
+`;
+
+export const stylesPanel = css`
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  :host {
+    display: block;
+    padding: 1.5rem 1rem;
+    border-bottom: 1px solid rgb(var(--kemet-color-foreground));
+  }
+
+  .trigger {
+    color: inherit;
+    cursor: pointer;
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: 1fr auto;
+    width: 100%;
+    text-align: left;
+    padding: 0;
+    border: none;
+    background: none;
+  }
+
+  .body {
+    overflow: hidden;
+    transition: all 300ms ease;
+  }
+
+  ::slotted([slot='body']) {
+    padding: 1rem 0;
+  }
+`;