kemet-ui 4.0.2 → 5.0.0

package/dist/elements/upload-file.d.mts

@@ -1,51 +0,0 @@
-import * as lit_html from 'lit-html';
-import * as lit from 'lit';
-import { LitElement } from 'lit';
-
-/**
- * @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.
- * @cssproperty --kemet-upload-file-padding - The padding around the file.
- * @cssproperty --kemet-upload-file-border - The border around the file.
- *
- * @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.
- *
- */
-declare class KemetUploadFile extends LitElement {
-    static styles: lit.CSSResult[];
-    name: string;
-    loaded: number;
-    size: number;
-    type: string;
-    status: string;
-    percent: number;
-    message: string;
-    updated(): void;
-    render(): lit_html.TemplateResult<1>;
-    calculatePercent(): number;
-    getStatusIcon(): lit_html.TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'kemet-upload-file': KemetUploadFile;
-    }
-}
-
-export { KemetUploadFile as default };

package/dist/elements/upload-file.d.ts

@@ -1,51 +0,0 @@
-import * as lit_html from 'lit-html';
-import * as lit from 'lit';
-import { LitElement } from 'lit';
-
-/**
- * @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.
- * @cssproperty --kemet-upload-file-padding - The padding around the file.
- * @cssproperty --kemet-upload-file-border - The border around the file.
- *
- * @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.
- *
- */
-declare class KemetUploadFile extends LitElement {
-    static styles: lit.CSSResult[];
-    name: string;
-    loaded: number;
-    size: number;
-    type: string;
-    status: string;
-    percent: number;
-    message: string;
-    updated(): void;
-    render(): lit_html.TemplateResult<1>;
-    calculatePercent(): number;
-    getStatusIcon(): lit_html.TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'kemet-upload-file': KemetUploadFile;
-    }
-}
-
-export { KemetUploadFile as default };

package/dist/elements/upload-file.js

@@ -1,415 +0,0 @@
-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-file.ts
-var upload_file_exports = {};
-__export(upload_file_exports, {
-  default: () => KemetUploadFile
-});
-module.exports = __toCommonJS(upload_file_exports);
-var import_lit3 = require("lit");
-var import_decorators2 = require("lit/decorators.js");
-
-// 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-file.ts
-var 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));
-  return `${parseFloat((bytes / k ** i).toFixed(dm))} ${sizes[i]}`;
-};
-var KemetUploadFile = class extends import_lit3.LitElement {
-  constructor() {
-    super(...arguments);
-    this.loaded = 0;
-    this.size = 0;
-    this.percent = 0;
-  }
-  updated() {
-    this.percent = this.calculatePercent();
-  }
-  render() {
-    return import_lit3.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 ? import_lit3.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 / this.size);
-    return percent > 100 ? 100 : percent;
-  }
-  getStatusIcon() {
-    if (this.status === "uploading") {
-      return import_lit3.html`<div class="lds-ripple"><div></div><div></div></div>`;
-    }
-    if (this.status === "complete") {
-      return import_lit3.html`<kemet-icon-bootstrap icon="check-circle" size="48"></kemet-icon-bootstrap>`;
-    }
-    if (this.status === "error") {
-      return import_lit3.html`<kemet-icon-bootstrap icon="exclamation-circle" size="48"></kemet-icon-bootstrap>`;
-    }
-    return null;
-  }
-};
-KemetUploadFile.styles = [stylesUploadFile, stylesLoaders];
-__decorateClass([
-  (0, import_decorators2.property)({ type: String })
-], KemetUploadFile.prototype, "name", 2);
-__decorateClass([
-  (0, import_decorators2.property)({ type: Number })
-], KemetUploadFile.prototype, "loaded", 2);
-__decorateClass([
-  (0, import_decorators2.property)({ type: Number })
-], KemetUploadFile.prototype, "size", 2);
-__decorateClass([
-  (0, import_decorators2.property)({ type: String })
-], KemetUploadFile.prototype, "type", 2);
-__decorateClass([
-  (0, import_decorators2.property)({ type: String, reflect: true })
-], KemetUploadFile.prototype, "status", 2);
-__decorateClass([
-  (0, import_decorators2.property)({ type: Number })
-], KemetUploadFile.prototype, "percent", 2);
-__decorateClass([
-  (0, import_decorators2.property)({ type: String })
-], KemetUploadFile.prototype, "message", 2);
-KemetUploadFile = __decorateClass([
-  (0, import_decorators2.customElement)("kemet-upload-file")
-], KemetUploadFile);
-//# sourceMappingURL=upload-file.js.map

package/dist/elements/upload-file.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/elements/upload-file.ts","../../src/styles/elements/upload.ts","../../src/elements/icon-bootstrap.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { stylesUploadFile, stylesLoaders } from '../styles/elements/upload';\nimport './icon-bootstrap';\n\nconst formatBytes = (bytes: number, 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  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.\n * @cssproperty --kemet-upload-file-padding - The padding around the file.\n * @cssproperty --kemet-upload-file-border - The border around the file.\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-bootstrap icon=\"check-circle\" size=\"48\"></kemet-icon-bootstrap>`;\n    }\n\n    if (this.status === 'error') {\n      return html`<kemet-icon-bootstrap icon=\"exclamation-circle\" size=\"48\"></kemet-icon-bootstrap>`;\n    }\n\n    return null;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-upload-file': KemetUploadFile\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-file.mjs

@@ -1,10 +0,0 @@
-import {
-  KemetUploadFile
-} from "../chunk-OIGUEDIP.mjs";
-import "../chunk-PWWLC4X4.mjs";
-import "../chunk-7DJKARFX.mjs";
-import "../chunk-SAWN7RJP.mjs";
-export {
-  KemetUploadFile as default
-};
-//# sourceMappingURL=upload-file.mjs.map

package/dist/elements/upload-file.mjs.map

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

package/dist/elements/upload.d.mts

@@ -1,69 +0,0 @@
-import * as lit_html from 'lit-html';
-import * as lit from 'lit';
-import { LitElement } from 'lit';
-import KemetUploadFile from './upload-file.mjs';
-
-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 };