@manzanohq/components 0.1.1 → 0.1.4

package/dist/components/file-input/file-input.component.js

@@ -0,0 +1,272 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+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;
+};
+import { html, nothing } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ManzanoElement } from "../../internal/manzano-element.js";
+import componentStyles from "../../styles/component.styles.js";
+import styles from "./file-input.styles.js";
+class MzFileInput extends ManzanoElement {
+  constructor() {
+    super(...arguments);
+    this.accept = "";
+    this.multiple = false;
+    this.disabled = false;
+    this.name = "";
+    this.buttonText = "Choose files";
+    this.dropzoneText = "or drag and drop files here";
+    this.noDropzone = false;
+    this.size = "medium";
+    this.files = [];
+    this.isDragOver = false;
+  }
+  /** Returns the current list of selected files. */
+  getFiles() {
+    return [...this.files];
+  }
+  /** Removes all selected files and resets the native input. */
+  clearFiles() {
+    this.files = [];
+    if (this.fileInput) {
+      this.fileInput.value = "";
+    }
+    this.emit("mz-change", { detail: { files: [] } });
+  }
+  /** Removes the file at the given index. */
+  removeFile(index) {
+    if (index < 0 || index >= this.files.length) return;
+    const removed = this.files[index];
+    this.files = this.files.filter((_, i) => i !== index);
+    if (this.fileInput) {
+      this.fileInput.value = "";
+    }
+    this.emit("mz-remove", { detail: { file: removed, index } });
+    this.emit("mz-change", { detail: { files: [...this.files] } });
+  }
+  /** Format bytes into a human-readable string. */
+  formatSize(bytes) {
+    if (bytes === 0) return "0 B";
+    const units = ["B", "KB", "MB", "GB"];
+    const k = 1024;
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    const value = bytes / Math.pow(k, i);
+    return `${i === 0 ? value : value.toFixed(1)} ${units[i]}`;
+  }
+  /** Validate and add files from a FileList. */
+  addFiles(incoming) {
+    const newFiles = Array.from(incoming);
+    let filtered = newFiles;
+    if (this.maxFileSize != null) {
+      filtered = filtered.filter((f) => f.size <= this.maxFileSize);
+    }
+    if (!this.multiple) {
+      this.files = filtered.length > 0 ? [filtered[0]] : [];
+    } else {
+      const combined = [...this.files, ...filtered];
+      if (this.maxFiles != null) {
+        this.files = combined.slice(0, this.maxFiles);
+      } else {
+        this.files = combined;
+      }
+    }
+    this.emit("mz-change", { detail: { files: [...this.files] } });
+  }
+  handleFileChange(e) {
+    const input = e.target;
+    if (input.files && input.files.length > 0) {
+      this.addFiles(input.files);
+    }
+    input.value = "";
+  }
+  handleBrowseClick() {
+    if (this.disabled) return;
+    this.fileInput?.click();
+  }
+  handleDragOver(e) {
+    e.preventDefault();
+    if (this.disabled) return;
+    this.isDragOver = true;
+  }
+  handleDragLeave() {
+    this.isDragOver = false;
+  }
+  handleDrop(e) {
+    e.preventDefault();
+    this.isDragOver = false;
+    if (this.disabled) return;
+    if (e.dataTransfer?.files && e.dataTransfer.files.length > 0) {
+      this.addFiles(e.dataTransfer.files);
+    }
+  }
+  render() {
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+      "file-input": true,
+      "file-input--drag-over": this.isDragOver,
+      "file-input--disabled": this.disabled,
+      "file-input--no-dropzone": this.noDropzone
+    })}
+      >
+        <input
+          type="file"
+          .accept=${this.accept || ""}
+          ?multiple=${this.multiple}
+          ?disabled=${this.disabled}
+          @change=${this.handleFileChange}
+          style="display:none"
+        />
+
+        ${this.noDropzone ? html`
+              <button
+                part="button"
+                class="file-input__button"
+                type="button"
+                ?disabled=${this.disabled}
+                @click=${this.handleBrowseClick}
+              >
+                <svg
+                  width="16"
+                  height="16"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  aria-hidden="true"
+                >
+                  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+                  <polyline points="17 8 12 3 7 8" />
+                  <line x1="12" y1="3" x2="12" y2="15" />
+                </svg>
+                ${this.buttonText}
+              </button>
+            ` : html`
+              <div
+                part="dropzone"
+                class="file-input__dropzone"
+                @click=${this.handleBrowseClick}
+                @dragover=${this.handleDragOver}
+                @dragleave=${this.handleDragLeave}
+                @drop=${this.handleDrop}
+              >
+                <div class="file-input__dropzone-icon">
+                  <svg
+                    width="24"
+                    height="24"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    aria-hidden="true"
+                  >
+                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+                    <polyline points="17 8 12 3 7 8" />
+                    <line x1="12" y1="3" x2="12" y2="15" />
+                  </svg>
+                </div>
+                <button
+                  part="button"
+                  class="file-input__button"
+                  type="button"
+                  ?disabled=${this.disabled}
+                  @click=${(e) => e.stopPropagation()}
+                >
+                  ${this.buttonText}
+                </button>
+                <div class="file-input__dropzone-text">${this.dropzoneText}</div>
+              </div>
+            `}
+        ${this.files.length > 0 ? html`
+              <div part="file-list" class="file-input__file-list">
+                ${this.files.map(
+      (file, i) => html`
+                    <div part="file-item" class="file-input__file-item">
+                      <span class="file-input__file-name">${file.name}</span>
+                      <span class="file-input__file-size">${this.formatSize(file.size)}</span>
+                      <button
+                        class="file-input__file-remove"
+                        type="button"
+                        aria-label="Remove ${file.name}"
+                        @click=${() => this.removeFile(i)}
+                      >
+                        <svg
+                          width="14"
+                          height="14"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="2"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          aria-hidden="true"
+                        >
+                          <line x1="18" y1="6" x2="6" y2="18" />
+                          <line x1="6" y1="6" x2="18" y2="18" />
+                        </svg>
+                      </button>
+                    </div>
+                  `
+    )}
+              </div>
+            ` : nothing}
+      </div>
+    `;
+  }
+}
+MzFileInput.styles = [componentStyles, styles];
+__decorateClass([
+  property()
+], MzFileInput.prototype, "accept", 2);
+__decorateClass([
+  property({ type: Boolean })
+], MzFileInput.prototype, "multiple", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MzFileInput.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Number, attribute: "max-file-size" })
+], MzFileInput.prototype, "maxFileSize", 2);
+__decorateClass([
+  property({ type: Number, attribute: "max-files" })
+], MzFileInput.prototype, "maxFiles", 2);
+__decorateClass([
+  property()
+], MzFileInput.prototype, "name", 2);
+__decorateClass([
+  property({ attribute: "button-text" })
+], MzFileInput.prototype, "buttonText", 2);
+__decorateClass([
+  property({ attribute: "dropzone-text" })
+], MzFileInput.prototype, "dropzoneText", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "no-dropzone", reflect: true })
+], MzFileInput.prototype, "noDropzone", 2);
+__decorateClass([
+  property({ reflect: true })
+], MzFileInput.prototype, "size", 2);
+__decorateClass([
+  state()
+], MzFileInput.prototype, "files", 2);
+__decorateClass([
+  state()
+], MzFileInput.prototype, "isDragOver", 2);
+__decorateClass([
+  query("input")
+], MzFileInput.prototype, "fileInput", 2);
+export {
+  MzFileInput
+};
+//# sourceMappingURL=file-input.component.js.map

package/dist/components/file-input/file-input.component.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/file-input/file-input.component.ts"],
+  "sourcesContent": ["import { html, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ManzanoElement } from '../../internal/manzano-element.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport styles from './file-input.styles.js';\n\n/**\n * @summary A file upload input with drag-and-drop support and a file list.\n *\n * @tag mz-file-input\n *\n * @event mz-change - Emitted when the file list changes. Detail: `{ files: File[] }`\n * @event mz-remove - Emitted when a file is removed. Detail: `{ file: File, index: number }`\n *\n * @csspart base - The component wrapper.\n * @csspart dropzone - The drag-and-drop target area.\n * @csspart button - The browse button.\n * @csspart file-list - The list of selected files.\n * @csspart file-item - An individual file row.\n */\nexport class MzFileInput extends ManzanoElement {\n  static override styles = [componentStyles, styles];\n\n  /** File type filter (e.g. `'.jpg,.png,image/*'`). */\n  @property() accept = '';\n\n  /** Allow multiple files. */\n  @property({ type: Boolean }) multiple = false;\n\n  /** Disables the file input. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Maximum size per file in bytes. */\n  @property({ type: Number, attribute: 'max-file-size' }) maxFileSize?: number;\n\n  /** Maximum number of files allowed. */\n  @property({ type: Number, attribute: 'max-files' }) maxFiles?: number;\n\n  /** Form field name. */\n  @property() name = '';\n\n  /** Text for the browse button. */\n  @property({ attribute: 'button-text' }) buttonText = 'Choose files';\n\n  /** Text displayed in the dropzone. */\n  @property({ attribute: 'dropzone-text' }) dropzoneText = 'or drag and drop files here';\n\n  /** Hide the dropzone and show only a button. */\n  @property({ type: Boolean, attribute: 'no-dropzone', reflect: true }) noDropzone = false;\n\n  /** Size variant. */\n  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Currently selected files. */\n  @state() private files: File[] = [];\n\n  /** Whether a drag operation is hovering over the dropzone. */\n  @state() private isDragOver = false;\n\n  @query('input') private fileInput!: HTMLInputElement;\n\n  /** Returns the current list of selected files. */\n  getFiles(): File[] {\n    return [...this.files];\n  }\n\n  /** Removes all selected files and resets the native input. */\n  clearFiles(): void {\n    this.files = [];\n    if (this.fileInput) {\n      this.fileInput.value = '';\n    }\n    this.emit('mz-change', { detail: { files: [] } });\n  }\n\n  /** Removes the file at the given index. */\n  removeFile(index: number): void {\n    if (index < 0 || index >= this.files.length) return;\n    const removed = this.files[index];\n    this.files = this.files.filter((_, i) => i !== index);\n    if (this.fileInput) {\n      this.fileInput.value = '';\n    }\n    this.emit('mz-remove', { detail: { file: removed, index } });\n    this.emit('mz-change', { detail: { files: [...this.files] } });\n  }\n\n  /** Format bytes into a human-readable string. */\n  private formatSize(bytes: number): string {\n    if (bytes === 0) return '0 B';\n    const units = ['B', 'KB', 'MB', 'GB'];\n    const k = 1024;\n    const i = Math.floor(Math.log(bytes) / Math.log(k));\n    const value = bytes / Math.pow(k, i);\n    return `${i === 0 ? value : value.toFixed(1)} ${units[i]}`;\n  }\n\n  /** Validate and add files from a FileList. */\n  private addFiles(incoming: FileList | File[]): void {\n    const newFiles = Array.from(incoming);\n    let filtered = newFiles;\n\n    // Filter by max file size\n    if (this.maxFileSize != null) {\n      filtered = filtered.filter(f => f.size <= this.maxFileSize!);\n    }\n\n    if (!this.multiple) {\n      // Single-file mode: replace the current file\n      this.files = filtered.length > 0 ? [filtered[0]] : [];\n    } else {\n      const combined = [...this.files, ...filtered];\n      // Filter by max files\n      if (this.maxFiles != null) {\n        this.files = combined.slice(0, this.maxFiles);\n      } else {\n        this.files = combined;\n      }\n    }\n\n    this.emit('mz-change', { detail: { files: [...this.files] } });\n  }\n\n  private handleFileChange(e: Event): void {\n    const input = e.target as HTMLInputElement;\n    if (input.files && input.files.length > 0) {\n      this.addFiles(input.files);\n    }\n    // Reset so the same file can be re-selected\n    input.value = '';\n  }\n\n  private handleBrowseClick(): void {\n    if (this.disabled) return;\n    this.fileInput?.click();\n  }\n\n  private handleDragOver(e: DragEvent): void {\n    e.preventDefault();\n    if (this.disabled) return;\n    this.isDragOver = true;\n  }\n\n  private handleDragLeave(): void {\n    this.isDragOver = false;\n  }\n\n  private handleDrop(e: DragEvent): void {\n    e.preventDefault();\n    this.isDragOver = false;\n    if (this.disabled) return;\n    if (e.dataTransfer?.files && e.dataTransfer.files.length > 0) {\n      this.addFiles(e.dataTransfer.files);\n    }\n  }\n\n  override render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap({\n          'file-input': true,\n          'file-input--drag-over': this.isDragOver,\n          'file-input--disabled': this.disabled,\n          'file-input--no-dropzone': this.noDropzone\n        })}\n      >\n        <input\n          type=\"file\"\n          .accept=${this.accept || ''}\n          ?multiple=${this.multiple}\n          ?disabled=${this.disabled}\n          @change=${this.handleFileChange}\n          style=\"display:none\"\n        />\n\n        ${this.noDropzone\n          ? html`\n              <button\n                part=\"button\"\n                class=\"file-input__button\"\n                type=\"button\"\n                ?disabled=${this.disabled}\n                @click=${this.handleBrowseClick}\n              >\n                <svg\n                  width=\"16\"\n                  height=\"16\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  aria-hidden=\"true\"\n                >\n                  <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\" />\n                  <polyline points=\"17 8 12 3 7 8\" />\n                  <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\" />\n                </svg>\n                ${this.buttonText}\n              </button>\n            `\n          : html`\n              <div\n                part=\"dropzone\"\n                class=\"file-input__dropzone\"\n                @click=${this.handleBrowseClick}\n                @dragover=${this.handleDragOver}\n                @dragleave=${this.handleDragLeave}\n                @drop=${this.handleDrop}\n              >\n                <div class=\"file-input__dropzone-icon\">\n                  <svg\n                    width=\"24\"\n                    height=\"24\"\n                    viewBox=\"0 0 24 24\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"1.5\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    aria-hidden=\"true\"\n                  >\n                    <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\" />\n                    <polyline points=\"17 8 12 3 7 8\" />\n                    <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\" />\n                  </svg>\n                </div>\n                <button\n                  part=\"button\"\n                  class=\"file-input__button\"\n                  type=\"button\"\n                  ?disabled=${this.disabled}\n                  @click=${(e: Event) => e.stopPropagation()}\n                >\n                  ${this.buttonText}\n                </button>\n                <div class=\"file-input__dropzone-text\">${this.dropzoneText}</div>\n              </div>\n            `}\n        ${this.files.length > 0\n          ? html`\n              <div part=\"file-list\" class=\"file-input__file-list\">\n                ${this.files.map(\n                  (file, i) => html`\n                    <div part=\"file-item\" class=\"file-input__file-item\">\n                      <span class=\"file-input__file-name\">${file.name}</span>\n                      <span class=\"file-input__file-size\">${this.formatSize(file.size)}</span>\n                      <button\n                        class=\"file-input__file-remove\"\n                        type=\"button\"\n                        aria-label=\"Remove ${file.name}\"\n                        @click=${() => this.removeFile(i)}\n                      >\n                        <svg\n                          width=\"14\"\n                          height=\"14\"\n                          viewBox=\"0 0 24 24\"\n                          fill=\"none\"\n                          stroke=\"currentColor\"\n                          stroke-width=\"2\"\n                          stroke-linecap=\"round\"\n                          stroke-linejoin=\"round\"\n                          aria-hidden=\"true\"\n                        >\n                          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n                          <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n                        </svg>\n                      </button>\n                    </div>\n                  `\n                )}\n              </div>\n            `\n          : nothing}\n      </div>\n    `;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;AAAA,SAAS,MAAM,eAAe;AAC9B,SAAS,UAAU,OAAO,aAAa;AACvC,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AAC/B,OAAO,qBAAqB;AAC5B,OAAO,YAAY;AAgBZ,MAAM,oBAAoB,eAAe;AAAA,EAAzC;AAAA;AAIO,kBAAS;AAGQ,oBAAW;AAGI,oBAAW;AAS3C,gBAAO;AAGqB,sBAAa;AAGX,wBAAe;AAGa,sBAAa;AAGtD,gBAAqC;AAGzD,SAAQ,QAAgB,CAAC;AAGzB,SAAQ,aAAa;AAAA;AAAA;AAAA,EAK9B,WAAmB;AACjB,WAAO,CAAC,GAAG,KAAK,KAAK;AAAA,EACvB;AAAA;AAAA,EAGA,aAAmB;AACjB,SAAK,QAAQ,CAAC;AACd,QAAI,KAAK,WAAW;AAClB,WAAK,UAAU,QAAQ;AAAA,IACzB;AACA,SAAK,KAAK,aAAa,EAAE,QAAQ,EAAE,OAAO,CAAC,EAAE,EAAE,CAAC;AAAA,EAClD;AAAA;AAAA,EAGA,WAAW,OAAqB;AAC9B,QAAI,QAAQ,KAAK,SAAS,KAAK,MAAM,OAAQ;AAC7C,UAAM,UAAU,KAAK,MAAM,KAAK;AAChC,SAAK,QAAQ,KAAK,MAAM,OAAO,CAAC,GAAG,MAAM,MAAM,KAAK;AACpD,QAAI,KAAK,WAAW;AAClB,WAAK,UAAU,QAAQ;AAAA,IACzB;AACA,SAAK,KAAK,aAAa,EAAE,QAAQ,EAAE,MAAM,SAAS,MAAM,EAAE,CAAC;AAC3D,SAAK,KAAK,aAAa,EAAE,QAAQ,EAAE,OAAO,CAAC,GAAG,KAAK,KAAK,EAAE,EAAE,CAAC;AAAA,EAC/D;AAAA;AAAA,EAGQ,WAAW,OAAuB;AACxC,QAAI,UAAU,EAAG,QAAO;AACxB,UAAM,QAAQ,CAAC,KAAK,MAAM,MAAM,IAAI;AACpC,UAAM,IAAI;AACV,UAAM,IAAI,KAAK,MAAM,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,CAAC,CAAC;AAClD,UAAM,QAAQ,QAAQ,KAAK,IAAI,GAAG,CAAC;AACnC,WAAO,GAAG,MAAM,IAAI,QAAQ,MAAM,QAAQ,CAAC,CAAC,IAAI,MAAM,CAAC,CAAC;AAAA,EAC1D;AAAA;AAAA,EAGQ,SAAS,UAAmC;AAClD,UAAM,WAAW,MAAM,KAAK,QAAQ;AACpC,QAAI,WAAW;AAGf,QAAI,KAAK,eAAe,MAAM;AAC5B,iBAAW,SAAS,OAAO,OAAK,EAAE,QAAQ,KAAK,WAAY;AAAA,IAC7D;AAEA,QAAI,CAAC,KAAK,UAAU;AAElB,WAAK,QAAQ,SAAS,SAAS,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC;AAAA,IACtD,OAAO;AACL,YAAM,WAAW,CAAC,GAAG,KAAK,OAAO,GAAG,QAAQ;AAE5C,UAAI,KAAK,YAAY,MAAM;AACzB,aAAK,QAAQ,SAAS,MAAM,GAAG,KAAK,QAAQ;AAAA,MAC9C,OAAO;AACL,aAAK,QAAQ;AAAA,MACf;AAAA,IACF;AAEA,SAAK,KAAK,aAAa,EAAE,QAAQ,EAAE,OAAO,CAAC,GAAG,KAAK,KAAK,EAAE,EAAE,CAAC;AAAA,EAC/D;AAAA,EAEQ,iBAAiB,GAAgB;AACvC,UAAM,QAAQ,EAAE;AAChB,QAAI,MAAM,SAAS,MAAM,MAAM,SAAS,GAAG;AACzC,WAAK,SAAS,MAAM,KAAK;AAAA,IAC3B;AAEA,UAAM,QAAQ;AAAA,EAChB;AAAA,EAEQ,oBAA0B;AAChC,QAAI,KAAK,SAAU;AACnB,SAAK,WAAW,MAAM;AAAA,EACxB;AAAA,EAEQ,eAAe,GAAoB;AACzC,MAAE,eAAe;AACjB,QAAI,KAAK,SAAU;AACnB,SAAK,aAAa;AAAA,EACpB;AAAA,EAEQ,kBAAwB;AAC9B,SAAK,aAAa;AAAA,EACpB;AAAA,EAEQ,WAAW,GAAoB;AACrC,MAAE,eAAe;AACjB,SAAK,aAAa;AAClB,QAAI,KAAK,SAAU;AACnB,QAAI,EAAE,cAAc,SAAS,EAAE,aAAa,MAAM,SAAS,GAAG;AAC5D,WAAK,SAAS,EAAE,aAAa,KAAK;AAAA,IACpC;AAAA,EACF;AAAA,EAES,SAAS;AAChB,WAAO;AAAA;AAAA;AAAA,gBAGK,SAAS;AAAA,MACf,cAAc;AAAA,MACd,yBAAyB,KAAK;AAAA,MAC9B,wBAAwB,KAAK;AAAA,MAC7B,2BAA2B,KAAK;AAAA,IAClC,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,oBAIU,KAAK,UAAU,EAAE;AAAA,sBACf,KAAK,QAAQ;AAAA,sBACb,KAAK,QAAQ;AAAA,oBACf,KAAK,gBAAgB;AAAA;AAAA;AAAA;AAAA,UAI/B,KAAK,aACH;AAAA;AAAA;AAAA;AAAA;AAAA,4BAKgB,KAAK,QAAQ;AAAA,yBAChB,KAAK,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAiB7B,KAAK,UAAU;AAAA;AAAA,gBAGrB;AAAA;AAAA;AAAA;AAAA,yBAIa,KAAK,iBAAiB;AAAA,4BACnB,KAAK,cAAc;AAAA,6BAClB,KAAK,eAAe;AAAA,wBACzB,KAAK,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAuBT,KAAK,QAAQ;AAAA,2BAChB,CAAC,MAAa,EAAE,gBAAgB,CAAC;AAAA;AAAA,oBAExC,KAAK,UAAU;AAAA;AAAA,yDAEsB,KAAK,YAAY;AAAA;AAAA,aAE7D;AAAA,UACH,KAAK,MAAM,SAAS,IAClB;AAAA;AAAA,kBAEM,KAAK,MAAM;AAAA,MACX,CAAC,MAAM,MAAM;AAAA;AAAA,4DAE6B,KAAK,IAAI;AAAA,4DACT,KAAK,WAAW,KAAK,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA,6CAIzC,KAAK,IAAI;AAAA,iCACrB,MAAM,KAAK,WAAW,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAmBzC,CAAC;AAAA;AAAA,gBAGL,OAAO;AAAA;AAAA;AAAA,EAGjB;AACF;AAnQa,YACK,SAAS,CAAC,iBAAiB,MAAM;AAGrC;AAAA,EAAX,SAAS;AAAA,GAJC,YAIC;AAGiB;AAAA,EAA5B,SAAS,EAAE,MAAM,QAAQ,CAAC;AAAA,GAPhB,YAOkB;AAGe;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAV/B,YAUiC;AAGY;AAAA,EAAvD,SAAS,EAAE,MAAM,QAAQ,WAAW,gBAAgB,CAAC;AAAA,GAb3C,YAa6C;AAGJ;AAAA,EAAnD,SAAS,EAAE,MAAM,QAAQ,WAAW,YAAY,CAAC;AAAA,GAhBvC,YAgByC;AAGxC;AAAA,EAAX,SAAS;AAAA,GAnBC,YAmBC;AAG4B;AAAA,EAAvC,SAAS,EAAE,WAAW,cAAc,CAAC;AAAA,GAtB3B,YAsB6B;AAGE;AAAA,EAAzC,SAAS,EAAE,WAAW,gBAAgB,CAAC;AAAA,GAzB7B,YAyB+B;AAG4B;AAAA,EAArE,SAAS,EAAE,MAAM,SAAS,WAAW,eAAe,SAAS,KAAK,CAAC;AAAA,GA5BzD,YA4B2D;AAGzC;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GA/BhB,YA+BkB;AAGZ;AAAA,EAAhB,MAAM;AAAA,GAlCI,YAkCM;AAGA;AAAA,EAAhB,MAAM;AAAA,GArCI,YAqCM;AAEO;AAAA,EAAvB,MAAM,OAAO;AAAA,GAvCH,YAuCa;",
+  "names": []
+}

package/dist/components/file-input/file-input.d.ts

@@ -0,0 +1,8 @@
+import { MzFileInput } from './file-input.component.js';
+export { MzFileInput };
+declare global {
+    interface HTMLElementTagNameMap {
+        'mz-file-input': MzFileInput;
+    }
+}
+//# sourceMappingURL=file-input.d.ts.map

package/dist/components/file-input/file-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-input.d.ts","sourceRoot":"","sources":["../../../src/components/file-input/file-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAIxD,OAAO,EAAE,WAAW,EAAE,CAAC;AAEvB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,WAAW,CAAC;KAC9B;CACF"}

package/dist/components/file-input/file-input.js

@@ -0,0 +1,6 @@
+import { MzFileInput } from "./file-input.component.js";
+MzFileInput.define("mz-file-input");
+export {
+  MzFileInput
+};
+//# sourceMappingURL=file-input.js.map

package/dist/components/file-input/file-input.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/file-input/file-input.ts"],
+  "sourcesContent": ["import { MzFileInput } from './file-input.component.js';\n\nMzFileInput.define('mz-file-input');\n\nexport { MzFileInput };\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mz-file-input': MzFileInput;\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,mBAAmB;AAE5B,YAAY,OAAO,eAAe;",
+  "names": []
+}

package/dist/components/file-input/file-input.styles.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("lit").CSSResult;
+export default _default;
+//# sourceMappingURL=file-input.styles.d.ts.map

package/dist/components/file-input/file-input.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-input.styles.d.ts","sourceRoot":"","sources":["../../../src/components/file-input/file-input.styles.ts"],"names":[],"mappings":";AAEA,wBAwJE"}

package/dist/components/file-input/file-input.styles.js

@@ -0,0 +1,158 @@
+import { css } from "lit";
+var file_input_styles_default = css`
+  :host {
+    display: block;
+  }
+
+  .file-input__dropzone {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--mz-space-sm);
+    padding: var(--mz-space-xl) var(--mz-space-lg);
+    border: 2px dashed var(--mz-color-border);
+    border-radius: var(--mz-radius-lg, 0.75rem);
+    background: var(--mz-color-surface-raised);
+    cursor: pointer;
+    transition: border-color 0.15s, background 0.15s;
+    text-align: center;
+  }
+
+  .file-input__dropzone:hover {
+    border-color: var(--mz-color-primary);
+    background: color-mix(in srgb, var(--mz-color-primary) 10%, var(--mz-color-surface));
+  }
+
+  .file-input--drag-over .file-input__dropzone {
+    border-color: var(--mz-color-primary);
+    background: color-mix(in srgb, var(--mz-color-primary) 10%, var(--mz-color-surface));
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mz-color-primary) 15%, transparent);
+  }
+
+  .file-input--disabled .file-input__dropzone {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  .file-input__dropzone-icon {
+    color: var(--mz-color-text-disabled);
+  }
+
+  .file-input__dropzone-text {
+    font-family: var(--mz-font-sans);
+    font-size: var(--mz-font-size-sm);
+    color: var(--mz-color-text-secondary);
+  }
+
+  .file-input__button {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--mz-space-xs);
+    padding: var(--mz-space-xs) var(--mz-space-md);
+    border: 1px solid var(--mz-color-border);
+    border-radius: var(--mz-radius-md, 0.5rem);
+    background: var(--mz-color-surface, #fff);
+    font-family: var(--mz-font-sans);
+    font-size: var(--mz-font-size-sm);
+    font-weight: var(--mz-font-weight-medium, 500);
+    color: var(--mz-color-text);
+    cursor: pointer;
+    transition: background 0.15s, border-color 0.15s;
+  }
+
+  .file-input__button:hover:not(:disabled) {
+    background: var(--mz-color-surface-raised);
+    border-color: var(--mz-color-text-disabled);
+  }
+
+  .file-input__button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .file-input__file-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mz-space-xs);
+    margin-top: var(--mz-space-sm);
+  }
+
+  .file-input__file-item {
+    display: flex;
+    align-items: center;
+    gap: var(--mz-space-sm);
+    padding: var(--mz-space-xs) var(--mz-space-sm);
+    border: 1px solid var(--mz-color-border);
+    border-radius: var(--mz-radius-md, 0.5rem);
+    background: var(--mz-color-surface, #fff);
+    font-family: var(--mz-font-sans);
+    font-size: var(--mz-font-size-sm);
+  }
+
+  .file-input__file-name {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--mz-color-text);
+  }
+
+  .file-input__file-size {
+    color: var(--mz-color-text-secondary);
+    font-size: var(--mz-font-size-xs);
+    white-space: nowrap;
+  }
+
+  .file-input__file-remove {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    background: none;
+    color: var(--mz-color-text-disabled);
+    cursor: pointer;
+    padding: 0.125rem;
+    border-radius: var(--mz-radius-sm, 0.25rem);
+    transition: color 0.15s, background 0.15s;
+  }
+
+  .file-input__file-remove:hover {
+    color: var(--mz-color-danger);
+    background: color-mix(in srgb, var(--mz-color-danger) 10%, var(--mz-color-surface));
+  }
+
+  /* Sizes */
+  :host([size='small']) .file-input__dropzone {
+    padding: var(--mz-space-md) var(--mz-space-sm);
+  }
+
+  :host([size='small']) .file-input__button {
+    font-size: var(--mz-font-size-xs);
+    padding: 0.25rem var(--mz-space-sm);
+  }
+
+  :host([size='small']) .file-input__dropzone-icon svg {
+    width: 20px;
+    height: 20px;
+  }
+
+  :host([size='large']) .file-input__dropzone {
+    padding: var(--mz-space-2xl, 2rem) var(--mz-space-xl);
+  }
+
+  :host([size='large']) .file-input__button {
+    font-size: var(--mz-font-size-base);
+    padding: var(--mz-space-sm) var(--mz-space-lg);
+  }
+
+  :host([size='large']) .file-input__dropzone-icon svg {
+    width: 32px;
+    height: 32px;
+  }
+`;
+export {
+  file_input_styles_default as default
+};
+//# sourceMappingURL=file-input.styles.js.map

package/dist/components/file-input/file-input.styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/file-input/file-input.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host {\n    display: block;\n  }\n\n  .file-input__dropzone {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: var(--mz-space-sm);\n    padding: var(--mz-space-xl) var(--mz-space-lg);\n    border: 2px dashed var(--mz-color-border);\n    border-radius: var(--mz-radius-lg, 0.75rem);\n    background: var(--mz-color-surface-raised);\n    cursor: pointer;\n    transition: border-color 0.15s, background 0.15s;\n    text-align: center;\n  }\n\n  .file-input__dropzone:hover {\n    border-color: var(--mz-color-primary);\n    background: color-mix(in srgb, var(--mz-color-primary) 10%, var(--mz-color-surface));\n  }\n\n  .file-input--drag-over .file-input__dropzone {\n    border-color: var(--mz-color-primary);\n    background: color-mix(in srgb, var(--mz-color-primary) 10%, var(--mz-color-surface));\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mz-color-primary) 15%, transparent);\n  }\n\n  .file-input--disabled .file-input__dropzone {\n    opacity: 0.5;\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  .file-input__dropzone-icon {\n    color: var(--mz-color-text-disabled);\n  }\n\n  .file-input__dropzone-text {\n    font-family: var(--mz-font-sans);\n    font-size: var(--mz-font-size-sm);\n    color: var(--mz-color-text-secondary);\n  }\n\n  .file-input__button {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--mz-space-xs);\n    padding: var(--mz-space-xs) var(--mz-space-md);\n    border: 1px solid var(--mz-color-border);\n    border-radius: var(--mz-radius-md, 0.5rem);\n    background: var(--mz-color-surface, #fff);\n    font-family: var(--mz-font-sans);\n    font-size: var(--mz-font-size-sm);\n    font-weight: var(--mz-font-weight-medium, 500);\n    color: var(--mz-color-text);\n    cursor: pointer;\n    transition: background 0.15s, border-color 0.15s;\n  }\n\n  .file-input__button:hover:not(:disabled) {\n    background: var(--mz-color-surface-raised);\n    border-color: var(--mz-color-text-disabled);\n  }\n\n  .file-input__button:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .file-input__file-list {\n    display: flex;\n    flex-direction: column;\n    gap: var(--mz-space-xs);\n    margin-top: var(--mz-space-sm);\n  }\n\n  .file-input__file-item {\n    display: flex;\n    align-items: center;\n    gap: var(--mz-space-sm);\n    padding: var(--mz-space-xs) var(--mz-space-sm);\n    border: 1px solid var(--mz-color-border);\n    border-radius: var(--mz-radius-md, 0.5rem);\n    background: var(--mz-color-surface, #fff);\n    font-family: var(--mz-font-sans);\n    font-size: var(--mz-font-size-sm);\n  }\n\n  .file-input__file-name {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    color: var(--mz-color-text);\n  }\n\n  .file-input__file-size {\n    color: var(--mz-color-text-secondary);\n    font-size: var(--mz-font-size-xs);\n    white-space: nowrap;\n  }\n\n  .file-input__file-remove {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    background: none;\n    color: var(--mz-color-text-disabled);\n    cursor: pointer;\n    padding: 0.125rem;\n    border-radius: var(--mz-radius-sm, 0.25rem);\n    transition: color 0.15s, background 0.15s;\n  }\n\n  .file-input__file-remove:hover {\n    color: var(--mz-color-danger);\n    background: color-mix(in srgb, var(--mz-color-danger) 10%, var(--mz-color-surface));\n  }\n\n  /* Sizes */\n  :host([size='small']) .file-input__dropzone {\n    padding: var(--mz-space-md) var(--mz-space-sm);\n  }\n\n  :host([size='small']) .file-input__button {\n    font-size: var(--mz-font-size-xs);\n    padding: 0.25rem var(--mz-space-sm);\n  }\n\n  :host([size='small']) .file-input__dropzone-icon svg {\n    width: 20px;\n    height: 20px;\n  }\n\n  :host([size='large']) .file-input__dropzone {\n    padding: var(--mz-space-2xl, 2rem) var(--mz-space-xl);\n  }\n\n  :host([size='large']) .file-input__button {\n    font-size: var(--mz-font-size-base);\n    padding: var(--mz-space-sm) var(--mz-space-lg);\n  }\n\n  :host([size='large']) .file-input__dropzone-icon svg {\n    width: 32px;\n    height: 32px;\n  }\n`;\n"],
+  "mappings": "AAAA,SAAS,WAAW;AAEpB,IAAO,4BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/components/format-bytes/format-bytes.component.d.ts

@@ -0,0 +1,25 @@
+import { ManzanoElement } from '../../internal/manzano-element.js';
+/**
+ * @summary Formats byte values into human-readable strings (KB, MB, GB, etc.).
+ *
+ * @tag mz-format-bytes
+ *
+ * @example
+ * ```html
+ * <mz-format-bytes value="1048576"></mz-format-bytes>
+ * <!-- Outputs: 1 MB -->
+ * ```
+ */
+export declare class MzFormatBytes extends ManzanoElement {
+    static styles: import("lit").CSSResult[];
+    /** The number of bytes (or bits) to format. */
+    value: number;
+    /** Whether to display as bytes or bits. */
+    unit: 'byte' | 'bit';
+    /** The display format: 'short' (KB), 'long' (kilobytes), or 'narrow' (KB without space). */
+    display: 'short' | 'long' | 'narrow';
+    /** The locale to use for formatting. Defaults to the browser's locale. */
+    locale?: string;
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=format-bytes.component.d.ts.map

package/dist/components/format-bytes/format-bytes.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"format-bytes.component.d.ts","sourceRoot":"","sources":["../../../src/components/format-bytes/format-bytes.component.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAOnE;;;;;;;;;;GAUG;AACH,qBAAa,aAAc,SAAQ,cAAc;IAC/C,MAAM,CAAC,MAAM,4BAAU;IAEvB,+CAA+C;IACnB,KAAK,EAAE,MAAM,CAAK;IAE9C,2CAA2C;IAC/B,IAAI,EAAE,MAAM,GAAG,KAAK,CAAU;IAE1C,4FAA4F;IAChF,OAAO,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAW;IAE3D,0EAA0E;IAC9D,MAAM,CAAC,EAAE,MAAM,CAAC;IAE5B,MAAM;CAmCP"}

package/dist/components/format-bytes/format-bytes.component.js

@@ -0,0 +1,68 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+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;
+};
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+import { ManzanoElement } from "../../internal/manzano-element.js";
+import styles from "./format-bytes.styles.js";
+const BYTE_UNITS = ["byte", "kilobyte", "megabyte", "gigabyte", "terabyte", "petabyte"];
+const BIT_UNITS = ["bit", "kilobit", "megabit", "gigabit", "terabit", "petabit"];
+class MzFormatBytes extends ManzanoElement {
+  constructor() {
+    super(...arguments);
+    this.value = 0;
+    this.unit = "byte";
+    this.display = "short";
+  }
+  render() {
+    if (isNaN(this.value)) {
+      return html``;
+    }
+    const units = this.unit === "bit" ? BIT_UNITS : BYTE_UNITS;
+    const base = 1024;
+    let unitIndex = 0;
+    let displayValue = Math.abs(this.value);
+    while (displayValue >= base && unitIndex < units.length - 1) {
+      displayValue /= base;
+      unitIndex++;
+    }
+    if (this.value < 0) {
+      displayValue = -displayValue;
+    }
+    try {
+      const formatted = new Intl.NumberFormat(this.locale, {
+        style: "unit",
+        unit: units[unitIndex],
+        unitDisplay: this.display,
+        maximumFractionDigits: unitIndex > 0 ? 2 : 0
+      }).format(displayValue);
+      return html`<span>${formatted}</span>`;
+    } catch {
+      return html`<span>${displayValue.toFixed(unitIndex > 0 ? 2 : 0)} ${units[unitIndex]}</span>`;
+    }
+  }
+}
+MzFormatBytes.styles = styles;
+__decorateClass([
+  property({ type: Number })
+], MzFormatBytes.prototype, "value", 2);
+__decorateClass([
+  property()
+], MzFormatBytes.prototype, "unit", 2);
+__decorateClass([
+  property()
+], MzFormatBytes.prototype, "display", 2);
+__decorateClass([
+  property()
+], MzFormatBytes.prototype, "locale", 2);
+export {
+  MzFormatBytes
+};
+//# sourceMappingURL=format-bytes.component.js.map

package/dist/components/format-bytes/format-bytes.component.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/format-bytes/format-bytes.component.ts"],
+  "sourcesContent": ["import { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ManzanoElement } from '../../internal/manzano-element.js';\nimport styles from './format-bytes.styles.js';\n\n/** Byte units in ascending order for binary (1024-based) sizing. */\nconst BYTE_UNITS = ['byte', 'kilobyte', 'megabyte', 'gigabyte', 'terabyte', 'petabyte'] as const;\nconst BIT_UNITS = ['bit', 'kilobit', 'megabit', 'gigabit', 'terabit', 'petabit'] as const;\n\n/**\n * @summary Formats byte values into human-readable strings (KB, MB, GB, etc.).\n *\n * @tag mz-format-bytes\n *\n * @example\n * ```html\n * <mz-format-bytes value=\"1048576\"></mz-format-bytes>\n * <!-- Outputs: 1 MB -->\n * ```\n */\nexport class MzFormatBytes extends ManzanoElement {\n  static styles = styles;\n\n  /** The number of bytes (or bits) to format. */\n  @property({ type: Number }) value: number = 0;\n\n  /** Whether to display as bytes or bits. */\n  @property() unit: 'byte' | 'bit' = 'byte';\n\n  /** The display format: 'short' (KB), 'long' (kilobytes), or 'narrow' (KB without space). */\n  @property() display: 'short' | 'long' | 'narrow' = 'short';\n\n  /** The locale to use for formatting. Defaults to the browser's locale. */\n  @property() locale?: string;\n\n  render() {\n    if (isNaN(this.value)) {\n      return html``;\n    }\n\n    const units = this.unit === 'bit' ? BIT_UNITS : BYTE_UNITS;\n    const base = 1024;\n    let unitIndex = 0;\n    let displayValue = Math.abs(this.value);\n\n    // Find the appropriate unit\n    while (displayValue >= base && unitIndex < units.length - 1) {\n      displayValue /= base;\n      unitIndex++;\n    }\n\n    // Preserve sign\n    if (this.value < 0) {\n      displayValue = -displayValue;\n    }\n\n    try {\n      const formatted = new Intl.NumberFormat(this.locale, {\n        style: 'unit',\n        unit: units[unitIndex],\n        unitDisplay: this.display,\n        maximumFractionDigits: unitIndex > 0 ? 2 : 0\n      }).format(displayValue);\n\n      return html`<span>${formatted}</span>`;\n    } catch {\n      // Fallback for environments that don't support all units\n      return html`<span>${displayValue.toFixed(unitIndex > 0 ? 2 : 0)} ${units[unitIndex]}</span>`;\n    }\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;AAAA,SAAS,YAAY;AACrB,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AAC/B,OAAO,YAAY;AAGnB,MAAM,aAAa,CAAC,QAAQ,YAAY,YAAY,YAAY,YAAY,UAAU;AACtF,MAAM,YAAY,CAAC,OAAO,WAAW,WAAW,WAAW,WAAW,SAAS;AAaxE,MAAM,sBAAsB,eAAe;AAAA,EAA3C;AAAA;AAIuB,iBAAgB;AAGhC,gBAAuB;AAGvB,mBAAuC;AAAA;AAAA,EAKnD,SAAS;AACP,QAAI,MAAM,KAAK,KAAK,GAAG;AACrB,aAAO;AAAA,IACT;AAEA,UAAM,QAAQ,KAAK,SAAS,QAAQ,YAAY;AAChD,UAAM,OAAO;AACb,QAAI,YAAY;AAChB,QAAI,eAAe,KAAK,IAAI,KAAK,KAAK;AAGtC,WAAO,gBAAgB,QAAQ,YAAY,MAAM,SAAS,GAAG;AAC3D,sBAAgB;AAChB;AAAA,IACF;AAGA,QAAI,KAAK,QAAQ,GAAG;AAClB,qBAAe,CAAC;AAAA,IAClB;AAEA,QAAI;AACF,YAAM,YAAY,IAAI,KAAK,aAAa,KAAK,QAAQ;AAAA,QACnD,OAAO;AAAA,QACP,MAAM,MAAM,SAAS;AAAA,QACrB,aAAa,KAAK;AAAA,QAClB,uBAAuB,YAAY,IAAI,IAAI;AAAA,MAC7C,CAAC,EAAE,OAAO,YAAY;AAEtB,aAAO,aAAa,SAAS;AAAA,IAC/B,QAAQ;AAEN,aAAO,aAAa,aAAa,QAAQ,YAAY,IAAI,IAAI,CAAC,CAAC,IAAI,MAAM,SAAS,CAAC;AAAA,IACrF;AAAA,EACF;AACF;AAlDa,cACJ,SAAS;AAGY;AAAA,EAA3B,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAJf,cAIiB;AAGhB;AAAA,EAAX,SAAS;AAAA,GAPC,cAOC;AAGA;AAAA,EAAX,SAAS;AAAA,GAVC,cAUC;AAGA;AAAA,EAAX,SAAS;AAAA,GAbC,cAaC;",
+  "names": []
+}

package/dist/components/format-bytes/format-bytes.d.ts

@@ -0,0 +1,8 @@
+import { MzFormatBytes } from './format-bytes.component.js';
+export * from './format-bytes.component.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'mz-format-bytes': MzFormatBytes;
+    }
+}
+//# sourceMappingURL=format-bytes.d.ts.map

package/dist/components/format-bytes/format-bytes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"format-bytes.d.ts","sourceRoot":"","sources":["../../../src/components/format-bytes/format-bytes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAE5D,cAAc,6BAA6B,CAAC;AAI5C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}

package/dist/components/format-bytes/format-bytes.js

@@ -0,0 +1,4 @@
+import { MzFormatBytes } from "./format-bytes.component.js";
+export * from "./format-bytes.component.js";
+MzFormatBytes.define("mz-format-bytes");
+//# sourceMappingURL=format-bytes.js.map