@wrrdev/fenix-ui 1.0.17 → 1.1.0

package/dist/components/fileupload/fileupload.js

@@ -0,0 +1,284 @@
+import { FxElement } from "../../core/base.js";
+import { css } from "../../core/css.js";
+import { defineElement } from "../../core/define.js";
+import { esc } from "../../core/sanitize.js";
+const _FxFileUpload = class _FxFileUpload extends FxElement {
+  constructor() {
+    super(...arguments);
+    this._files = [];
+    this._done = false;
+  }
+  static get observedAttributes() {
+    return ["mode", "size", "severity", "label", "icon", "accept", "multiple", "disabled", "show-progress", "progress", "value"];
+  }
+  get size() {
+    const s = this.getAttr("size", "md");
+    return s === "sm" || s === "lg" ? s : "md";
+  }
+  set size(value) {
+    this.setAttribute("size", value);
+  }
+  /** Nomes dos arquivos selecionados (espelho em `value`). */
+  get value() {
+    return this.getAttr("value");
+  }
+  set value(v) {
+    this.setAttribute("value", v);
+  }
+  get progress() {
+    return Math.min(100, Math.max(0, Number(this.getAttr("progress", "0")) || 0));
+  }
+  set progress(v) {
+    this.setAttribute("progress", String(v));
+  }
+  /** Arquivos selecionados (não serializável em atributo). */
+  get files() {
+    return this._files;
+  }
+  set files(files) {
+    this._files = Array.from(files);
+    this.value = this._files.map((f) => f.name).join(", ");
+    this._syncFilesArea();
+  }
+  render() {
+    const mode = this.getAttr("mode", "basic");
+    const advanced = mode === "advanced";
+    const label = this.getAttr("label", "Escolher arquivo");
+    const icon = this.getAttr("icon");
+    const accept = this.getAttr("accept");
+    const multiple = this.hasAttr("multiple");
+    const disabled = this.hasAttr("disabled");
+    const showProgress = this.hasAttr("show-progress");
+    const pct = this.progress;
+    const fileInput = `<input type="file" class="picker" ${accept ? `accept="${esc(accept)}"` : ""} ${multiple ? "multiple" : ""} ${disabled ? "disabled" : ""} />`;
+    this.setTemplate(`
+      ${advanced ? `<div class="drop" part="dropzone" role="button" tabindex="0" aria-label="${esc(label)}">
+             ${icon ? `<span class="icon" aria-hidden="true">${esc(icon)}</span>` : ""}
+             <span>${esc(label)}</span>
+             <span class="hint">ou arraste e solte aqui</span>
+           </div>` : `<button type="button" class="btn" part="button">
+             ${icon ? `<span class="icon" aria-hidden="true">${esc(icon)}</span>` : ""}
+             <span>${esc(label)}</span>
+           </button>`}
+      ${fileInput}
+      <div class="files" part="files"></div>
+      ${showProgress ? `
+      <div class="progress-row" part="progress">
+        <div class="track" role="progressbar" aria-valuenow="${pct}" aria-valuemin="0" aria-valuemax="100">
+          <div class="bar" style="width: ${pct}%"></div>
+        </div>
+        <span class="pct">${pct}%</span>
+      </div>` : ""}
+    `);
+    this._bindPicker();
+    this._syncFilesArea();
+    if (!this._done && showProgress && pct >= 100 && this._files.length) {
+      this._done = true;
+      this.dispatchEvent(new CustomEvent("complete", { bubbles: true, composed: true }));
+    }
+    if (pct < 100) this._done = false;
+  }
+  _picker() {
+    return this.root.querySelector(".picker");
+  }
+  _bindPicker() {
+    const picker = this._picker();
+    if (!picker) return;
+    const trigger = this.root.querySelector(".btn") ?? this.root.querySelector(".drop");
+    trigger?.addEventListener("click", () => picker.click());
+    trigger?.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        picker.click();
+      }
+    });
+    picker.addEventListener("change", () => this._acceptFiles(picker.files ?? []));
+    const drop = this.root.querySelector(".drop");
+    if (!drop) return;
+    drop.addEventListener("dragover", (e) => {
+      e.preventDefault();
+      drop.classList.add("over");
+    });
+    drop.addEventListener("dragleave", () => drop.classList.remove("over"));
+    drop.addEventListener("drop", (e) => {
+      e.preventDefault();
+      drop.classList.remove("over");
+      if (e.dataTransfer?.files.length) this._acceptFiles(e.dataTransfer.files);
+    });
+  }
+  _acceptFiles(list) {
+    const picked = this.hasAttr("multiple") ? Array.from(list) : [list[0]].filter(Boolean);
+    this.files = picked;
+    const picker = this._picker();
+    if (picker) picker.value = "";
+    this.dispatchEvent(
+      new CustomEvent("select", { bubbles: true, composed: true, detail: { files: picked } })
+    );
+  }
+  _fmtSize(bytes) {
+    if (bytes < 1024) return `${bytes} B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  }
+  /** Renderiza a lista de arquivos sem re-renderizar o template (mantém estado). */
+  _syncFilesArea() {
+    const area = this.root?.querySelector?.(".files");
+    if (!area) return;
+    area.innerHTML = this._files.map(
+      (f, i) => `
+        <div class="file" part="file">
+          <span class="name">${esc(f.name)}</span>
+          <span class="size">${this._fmtSize(f.size)}</span>
+          <button type="button" class="remove" data-i="${i}" part="remove" aria-label="Remover ${esc(f.name)}">×</button>
+        </div>`
+    ).join("");
+    area.querySelectorAll(".remove").forEach(
+      (btn) => btn.addEventListener("click", () => {
+        const removed = this._files.splice(Number(btn.dataset.i), 1)[0];
+        this.value = this._files.map((f) => f.name).join(", ");
+        this.progress = 0;
+        this._syncFilesArea();
+        this.dispatchEvent(
+          new CustomEvent("remove", { bubbles: true, composed: true, detail: { file: removed } })
+        );
+      })
+    );
+  }
+};
+_FxFileUpload.styles = css`
+    :host {
+      display: inline-block;
+      font-family: var(--fx-font-family);
+      font-size: var(--fx-font-size);
+    }
+    :host([disabled]) { opacity: 0.55; pointer-events: none; }
+    input[type='file'] { display: none; }
+
+    /* ---- botão (basic) ---- */
+    .btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--fx-space-sm);
+      min-height: var(--fx-size-md);
+      padding: var(--fx-space-md) var(--fx-space-lg);
+      font-family: inherit;
+      font-size: inherit;
+      font-weight: var(--fx-font-weight);
+      color: var(--fx-text-default);
+      background-color: var(--fx-surface-background);
+      border: 1px solid var(--fx-border-default);
+      border-radius: var(--fx-radius-md);
+      cursor: pointer;
+      box-sizing: border-box;
+      transition:
+        border-color var(--fx-motion-duration-normal) var(--fx-motion-easing),
+        box-shadow var(--fx-motion-duration-normal) var(--fx-motion-easing),
+        background var(--fx-motion-duration-normal) var(--fx-motion-easing);
+    }
+    .btn:hover { border-color: var(--fx-border-hover); background: var(--fx-surface-surface-hover, rgba(0,0,0,0.03)); }
+    .btn:focus-visible {
+      outline: none;
+      border-color: var(--fx-color-primary);
+      box-shadow: var(--fx-effect-focus-ring, none);
+    }
+    /* Severities (como no <fx-button>) — aplicam-se ao botão do modo basic */
+    :host([severity='primary']) .btn { background: var(--fx-color-primary); border-color: transparent; color: #fff; }
+    :host([severity='secondary']) .btn { background: var(--fx-color-secondary); border-color: transparent; color: #fff; }
+    :host([severity='success']) .btn { background: var(--fx-color-success); border-color: transparent; color: #fff; }
+    :host([severity='warning']) .btn { background: var(--fx-color-warning); border-color: transparent; color: #fff; }
+    :host([severity='danger']) .btn { background: var(--fx-color-danger); border-color: transparent; color: #fff; }
+    :host([severity='info']) .btn { background: var(--fx-color-info); border-color: transparent; color: #fff; }
+    :host([severity]) .btn:hover { filter: brightness(0.88); }
+    :host([severity]) .btn:focus-visible { border-color: transparent; }
+    :host([size='sm']) .btn { min-height: var(--fx-size-sm); padding: var(--fx-space-sm) var(--fx-space-md); font-size: calc(var(--fx-font-size) - 2px); }
+    :host([size='lg']) .btn { min-height: var(--fx-size-lg); padding: var(--fx-space-lg) var(--fx-space-xl); font-size: calc(var(--fx-font-size) + 4px); }
+    :host([size='sm']) .drop { min-height: 72px; }
+    :host([size='lg']) .drop { min-height: 132px; }
+
+    /* ---- dropzone (advanced) ---- */
+    .drop {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: var(--fx-space-sm);
+      min-height: 100px;
+      padding: var(--fx-space-lg);
+      border: 2px dashed var(--fx-border-default);
+      border-radius: var(--fx-radius-md);
+      color: var(--fx-text-muted);
+      cursor: pointer;
+      text-align: center;
+      transition: border-color var(--fx-motion-duration-normal) var(--fx-motion-easing), background var(--fx-motion-duration-normal) var(--fx-motion-easing);
+    }
+    .drop:hover, .drop.over {
+      border-color: var(--fx-color-primary);
+      background: color-mix(in srgb, var(--fx-color-primary) 6%, transparent);
+    }
+    .drop .icon { font-size: calc(var(--fx-font-size) + 12px); line-height: 1; }
+    .drop .hint { font-size: calc(var(--fx-font-size) - 2px); }
+
+    /* ---- ícone comum ---- */
+    .icon { line-height: 1; }
+
+    /* ---- arquivo(s) selecionado(s) ---- */
+    .files { display: flex; flex-direction: column; gap: var(--fx-space-xs); margin-top: var(--fx-space-sm); }
+    .file {
+      display: flex;
+      align-items: center;
+      gap: var(--fx-space-sm);
+      padding: var(--fx-space-xs) var(--fx-space-sm);
+      border: 1px solid var(--fx-border-default);
+      border-radius: var(--fx-radius-sm);
+      font-size: calc(var(--fx-font-size) - 2px);
+      color: var(--fx-text-default);
+    }
+    .file .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .file .size { color: var(--fx-text-muted); white-space: nowrap; }
+    .file .remove {
+      border: none;
+      background: transparent;
+      color: var(--fx-text-muted);
+      cursor: pointer;
+      font-size: calc(var(--fx-font-size) + 2px);
+      line-height: 1;
+      padding: 0 var(--fx-space-xs);
+      border-radius: var(--fx-radius-full);
+    }
+    .file .remove:hover { color: var(--fx-color-danger); }
+
+    /* ---- progresso ---- */
+    .progress-row { display: flex; align-items: center; gap: var(--fx-space-sm); margin-top: var(--fx-space-sm); }
+    .track {
+      flex: 1;
+      height: 6px;
+      background: var(--fx-surface-surface-hover);
+      border-radius: var(--fx-radius-full);
+      overflow: hidden;
+    }
+    .bar {
+      height: 100%;
+      width: 0%;
+      background: var(--fx-color-primary);
+      border-radius: var(--fx-radius-full);
+      transition: width var(--fx-motion-duration-normal) var(--fx-motion-easing);
+    }
+    :host([progress='100']) .bar { background: var(--fx-color-success); }
+    .pct {
+      font-size: calc(var(--fx-font-size) - 2px);
+      font-weight: 600;
+      color: var(--fx-text-default);
+      min-width: 34px;
+      text-align: right;
+    }
+  `;
+let FxFileUpload = _FxFileUpload;
+function defineFxFileUpload() {
+  return defineElement("fx-fileupload", FxFileUpload);
+}
+export {
+  FxFileUpload,
+  defineFxFileUpload
+};
+//# sourceMappingURL=fileupload.js.map

package/dist/components/fileupload/fileupload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fileupload.js","sources":["../../../src/components/fileupload/fileupload.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\nimport { esc } from '../../core/sanitize';\n\n/**\n * <fx-fileupload> — Seletor de arquivos com upload e progresso (estilo FileUpload do PrimeVue).\n *\n * Atributos:\n *  - mode (basic|advanced — `basic`: botão; `advanced`: dropzone com drag & drop);\n *  - size (sm|md|lg, padrão md);\n *  - severity (primary|secondary|success|warning|danger|info — cor do botão no modo basic);\n *  - label (texto do botão/área, padrão 'Escolher arquivo');\n *  - icon (glifo/emoji exibido antes do texto — sem o atributo, sem ícone);\n *  - accept, multiple, disabled (como no <input type=\"file\">);\n *  - show-progress (exibe barra + % de upload);\n *  - progress (0-100 — o consumidor atualiza durante o upload real);\n *  - value (nome(s) do(s) arquivo(s) carregado(s), somente leitura/espelho).\n *\n * Eventos (composed): `select` (detail: { files: File[] }), `remove`, `complete`.\n */\nexport class FxFileUpload extends FxElement {\n  static override styles = css`\n    :host {\n      display: inline-block;\n      font-family: var(--fx-font-family);\n      font-size: var(--fx-font-size);\n    }\n    :host([disabled]) { opacity: 0.55; pointer-events: none; }\n    input[type='file'] { display: none; }\n\n    /* ---- botão (basic) ---- */\n    .btn {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      gap: var(--fx-space-sm);\n      min-height: var(--fx-size-md);\n      padding: var(--fx-space-md) var(--fx-space-lg);\n      font-family: inherit;\n      font-size: inherit;\n      font-weight: var(--fx-font-weight);\n      color: var(--fx-text-default);\n      background-color: var(--fx-surface-background);\n      border: 1px solid var(--fx-border-default);\n      border-radius: var(--fx-radius-md);\n      cursor: pointer;\n      box-sizing: border-box;\n      transition:\n        border-color var(--fx-motion-duration-normal) var(--fx-motion-easing),\n        box-shadow var(--fx-motion-duration-normal) var(--fx-motion-easing),\n        background var(--fx-motion-duration-normal) var(--fx-motion-easing);\n    }\n    .btn:hover { border-color: var(--fx-border-hover); background: var(--fx-surface-surface-hover, rgba(0,0,0,0.03)); }\n    .btn:focus-visible {\n      outline: none;\n      border-color: var(--fx-color-primary);\n      box-shadow: var(--fx-effect-focus-ring, none);\n    }\n    /* Severities (como no <fx-button>) — aplicam-se ao botão do modo basic */\n    :host([severity='primary']) .btn { background: var(--fx-color-primary); border-color: transparent; color: #fff; }\n    :host([severity='secondary']) .btn { background: var(--fx-color-secondary); border-color: transparent; color: #fff; }\n    :host([severity='success']) .btn { background: var(--fx-color-success); border-color: transparent; color: #fff; }\n    :host([severity='warning']) .btn { background: var(--fx-color-warning); border-color: transparent; color: #fff; }\n    :host([severity='danger']) .btn { background: var(--fx-color-danger); border-color: transparent; color: #fff; }\n    :host([severity='info']) .btn { background: var(--fx-color-info); border-color: transparent; color: #fff; }\n    :host([severity]) .btn:hover { filter: brightness(0.88); }\n    :host([severity]) .btn:focus-visible { border-color: transparent; }\n    :host([size='sm']) .btn { min-height: var(--fx-size-sm); padding: var(--fx-space-sm) var(--fx-space-md); font-size: calc(var(--fx-font-size) - 2px); }\n    :host([size='lg']) .btn { min-height: var(--fx-size-lg); padding: var(--fx-space-lg) var(--fx-space-xl); font-size: calc(var(--fx-font-size) + 4px); }\n    :host([size='sm']) .drop { min-height: 72px; }\n    :host([size='lg']) .drop { min-height: 132px; }\n\n    /* ---- dropzone (advanced) ---- */\n    .drop {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      gap: var(--fx-space-sm);\n      min-height: 100px;\n      padding: var(--fx-space-lg);\n      border: 2px dashed var(--fx-border-default);\n      border-radius: var(--fx-radius-md);\n      color: var(--fx-text-muted);\n      cursor: pointer;\n      text-align: center;\n      transition: border-color var(--fx-motion-duration-normal) var(--fx-motion-easing), background var(--fx-motion-duration-normal) var(--fx-motion-easing);\n    }\n    .drop:hover, .drop.over {\n      border-color: var(--fx-color-primary);\n      background: color-mix(in srgb, var(--fx-color-primary) 6%, transparent);\n    }\n    .drop .icon { font-size: calc(var(--fx-font-size) + 12px); line-height: 1; }\n    .drop .hint { font-size: calc(var(--fx-font-size) - 2px); }\n\n    /* ---- ícone comum ---- */\n    .icon { line-height: 1; }\n\n    /* ---- arquivo(s) selecionado(s) ---- */\n    .files { display: flex; flex-direction: column; gap: var(--fx-space-xs); margin-top: var(--fx-space-sm); }\n    .file {\n      display: flex;\n      align-items: center;\n      gap: var(--fx-space-sm);\n      padding: var(--fx-space-xs) var(--fx-space-sm);\n      border: 1px solid var(--fx-border-default);\n      border-radius: var(--fx-radius-sm);\n      font-size: calc(var(--fx-font-size) - 2px);\n      color: var(--fx-text-default);\n    }\n    .file .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n    .file .size { color: var(--fx-text-muted); white-space: nowrap; }\n    .file .remove {\n      border: none;\n      background: transparent;\n      color: var(--fx-text-muted);\n      cursor: pointer;\n      font-size: calc(var(--fx-font-size) + 2px);\n      line-height: 1;\n      padding: 0 var(--fx-space-xs);\n      border-radius: var(--fx-radius-full);\n    }\n    .file .remove:hover { color: var(--fx-color-danger); }\n\n    /* ---- progresso ---- */\n    .progress-row { display: flex; align-items: center; gap: var(--fx-space-sm); margin-top: var(--fx-space-sm); }\n    .track {\n      flex: 1;\n      height: 6px;\n      background: var(--fx-surface-surface-hover);\n      border-radius: var(--fx-radius-full);\n      overflow: hidden;\n    }\n    .bar {\n      height: 100%;\n      width: 0%;\n      background: var(--fx-color-primary);\n      border-radius: var(--fx-radius-full);\n      transition: width var(--fx-motion-duration-normal) var(--fx-motion-easing);\n    }\n    :host([progress='100']) .bar { background: var(--fx-color-success); }\n    .pct {\n      font-size: calc(var(--fx-font-size) - 2px);\n      font-weight: 600;\n      color: var(--fx-text-default);\n      min-width: 34px;\n      text-align: right;\n    }\n  `;\n\n  static override get observedAttributes(): string[] {\n    return ['mode', 'size', 'severity', 'label', 'icon', 'accept', 'multiple', 'disabled', 'show-progress', 'progress', 'value'];\n  }\n\n  get size(): string {\n    const s = this.getAttr('size', 'md');\n    return s === 'sm' || s === 'lg' ? s : 'md';\n  }\n  set size(value: string) { this.setAttribute('size', value); }\n\n  /** Nomes dos arquivos selecionados (espelho em `value`). */\n  get value(): string { return this.getAttr('value'); }\n  set value(v: string) { this.setAttribute('value', v); }\n\n  get progress(): number { return Math.min(100, Math.max(0, Number(this.getAttr('progress', '0')) || 0)); }\n  set progress(v: number) { this.setAttribute('progress', String(v)); }\n\n  /** Arquivos selecionados (não serializável em atributo). */\n  get files(): File[] { return this._files; }\n  set files(files: File[]) {\n    this._files = Array.from(files);\n    this.value = this._files.map((f) => f.name).join(', ');\n    this._syncFilesArea();\n  }\n\n  protected override render(): void {\n    const mode = this.getAttr('mode', 'basic');\n    const advanced = mode === 'advanced';\n    const label = this.getAttr('label', 'Escolher arquivo');\n    const icon = this.getAttr('icon');\n    const accept = this.getAttr('accept');\n    const multiple = this.hasAttr('multiple');\n    const disabled = this.hasAttr('disabled');\n    const showProgress = this.hasAttr('show-progress');\n    const pct = this.progress;\n\n    const fileInput = `<input type=\"file\" class=\"picker\" ${accept ? `accept=\"${esc(accept)}\"` : ''} ${multiple ? 'multiple' : ''} ${disabled ? 'disabled' : ''} />`;\n\n    this.setTemplate(`\n      ${advanced\n        ? `<div class=\"drop\" part=\"dropzone\" role=\"button\" tabindex=\"0\" aria-label=\"${esc(label)}\">\n             ${icon ? `<span class=\"icon\" aria-hidden=\"true\">${esc(icon)}</span>` : ''}\n             <span>${esc(label)}</span>\n             <span class=\"hint\">ou arraste e solte aqui</span>\n           </div>`\n        : `<button type=\"button\" class=\"btn\" part=\"button\">\n             ${icon ? `<span class=\"icon\" aria-hidden=\"true\">${esc(icon)}</span>` : ''}\n             <span>${esc(label)}</span>\n           </button>`}\n      ${fileInput}\n      <div class=\"files\" part=\"files\"></div>\n      ${showProgress ? `\n      <div class=\"progress-row\" part=\"progress\">\n        <div class=\"track\" role=\"progressbar\" aria-valuenow=\"${pct}\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n          <div class=\"bar\" style=\"width: ${pct}%\"></div>\n        </div>\n        <span class=\"pct\">${pct}%</span>\n      </div>` : ''}\n    `);\n\n    this._bindPicker();\n    this._syncFilesArea();\n\n    if (!this._done && showProgress && pct >= 100 && this._files.length) {\n      this._done = true;\n      this.dispatchEvent(new CustomEvent('complete', { bubbles: true, composed: true }));\n    }\n    if (pct < 100) this._done = false;\n  }\n\n  private _files: File[] = [];\n  private _done = false;\n\n  private _picker(): HTMLInputElement | null {\n    return this.root.querySelector<HTMLInputElement>('.picker');\n  }\n\n  private _bindPicker(): void {\n    const picker = this._picker();\n    if (!picker) return;\n    const trigger = this.root.querySelector('.btn') ?? this.root.querySelector('.drop');\n    trigger?.addEventListener('click', () => picker.click());\n    trigger?.addEventListener('keydown', (e) => {\n      if ((e as KeyboardEvent).key === 'Enter' || (e as KeyboardEvent).key === ' ') {\n        e.preventDefault();\n        picker.click();\n      }\n    });\n    picker.addEventListener('change', () => this._acceptFiles(picker.files ?? []));\n\n    // drag & drop (advanced)\n    const drop = this.root.querySelector<HTMLElement>('.drop');\n    if (!drop) return;\n    drop.addEventListener('dragover', (e) => { e.preventDefault(); drop.classList.add('over'); });\n    drop.addEventListener('dragleave', () => drop.classList.remove('over'));\n    drop.addEventListener('drop', (e) => {\n      e.preventDefault();\n      drop.classList.remove('over');\n      if (e.dataTransfer?.files.length) this._acceptFiles(e.dataTransfer.files);\n    });\n  }\n\n  private _acceptFiles(list: FileList | File[]): void {\n    const picked = this.hasAttr('multiple') ? Array.from(list) : [list[0]].filter(Boolean);\n    this.files = picked;\n    const picker = this._picker();\n    if (picker) picker.value = '';\n    this.dispatchEvent(\n      new CustomEvent('select', { bubbles: true, composed: true, detail: { files: picked } }),\n    );\n  }\n\n  private _fmtSize(bytes: number): string {\n    if (bytes < 1024) return `${bytes} B`;\n    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;\n    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;\n  }\n\n  /** Renderiza a lista de arquivos sem re-renderizar o template (mantém estado). */\n  private _syncFilesArea(): void {\n    const area = this.root?.querySelector?.('.files') as HTMLElement | null;\n    if (!area) return;\n    area.innerHTML = this._files\n      .map(\n        (f, i) => `\n        <div class=\"file\" part=\"file\">\n          <span class=\"name\">${esc(f.name)}</span>\n          <span class=\"size\">${this._fmtSize(f.size)}</span>\n          <button type=\"button\" class=\"remove\" data-i=\"${i}\" part=\"remove\" aria-label=\"Remover ${esc(f.name)}\">×</button>\n        </div>`,\n      )\n      .join('');\n    area.querySelectorAll<HTMLButtonElement>('.remove').forEach((btn) =>\n      btn.addEventListener('click', () => {\n        const removed = this._files.splice(Number(btn.dataset.i), 1)[0];\n        this.value = this._files.map((f) => f.name).join(', ');\n        this.progress = 0;\n        this._syncFilesArea();\n        this.dispatchEvent(\n          new CustomEvent('remove', { bubbles: true, composed: true, detail: { file: removed } }),\n        );\n      }),\n    );\n  }\n}\n\nexport function defineFxFileUpload(): typeof FxFileUpload {\n  return defineElement('fx-fileupload', FxFileUpload);\n}\n\n\n"],"names":[],"mappings":"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"}

package/dist/components/fileupload/index.d.ts

@@ -0,0 +1,8 @@
+import { FxFileUpload } from './fileupload';
+export { FxFileUpload };
+declare global {
+    interface HTMLElementTagNameMap {
+        'fx-fileupload': FxFileUpload;
+    }
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/components/fileupload/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/fileupload/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAsB,MAAM,cAAc,CAAC;AAEhE,OAAO,EAAE,YAAY,EAAE,CAAC;AAIxB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAC;KAC/B;CACF"}

package/dist/components/fileupload/index.js

@@ -0,0 +1,7 @@
+import { defineFxFileUpload } from "./fileupload.js";
+import { FxFileUpload } from "./fileupload.js";
+defineFxFileUpload();
+export {
+  FxFileUpload
+};
+//# sourceMappingURL=index.js.map

package/dist/components/fileupload/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/fileupload/index.ts"],"sourcesContent":["import { FxFileUpload, defineFxFileUpload } from './fileupload';\n\nexport { FxFileUpload };\n\ndefineFxFileUpload();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'fx-fileupload': FxFileUpload;\n  }\n}\n"],"names":[],"mappings":";;AAIA,mBAAA;"}

package/dist/components/menu/index.d.ts

@@ -0,0 +1,8 @@
+import { FxMenu } from './menu';
+export { FxMenu };
+declare global {
+    interface HTMLElementTagNameMap {
+        'fx-menu': FxMenu;
+    }
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/components/menu/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAgB,MAAM,QAAQ,CAAC;AAE9C,OAAO,EAAE,MAAM,EAAE,CAAC;AAIlB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}

package/dist/components/menu/index.js

@@ -0,0 +1,7 @@
+import { defineFxMenu } from "./menu.js";
+import { FxMenu } from "./menu.js";
+defineFxMenu();
+export {
+  FxMenu
+};
+//# sourceMappingURL=index.js.map

package/dist/components/menu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/menu/index.ts"],"sourcesContent":["import { FxMenu, defineFxMenu } from './menu';\n\nexport { FxMenu };\n\ndefineFxMenu();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'fx-menu': FxMenu;\n  }\n}"],"names":[],"mappings":";;AAIA,aAAA;"}

package/dist/components/menu/menu.d.ts

@@ -0,0 +1,23 @@
+import { FxElement } from '../../core/base';
+/**
+ * <fx-menu> — Menú de navegación (horizontal o vertical) con ítems y submenús.
+ *
+ * Atributos: orientation (horizontal|vertical), size (sm|md|lg),
+ * dense (reduce el alto), titles (separado por `,` para navegación).
+ * Slots `item`: cada ítem de menú con [slot="item"].
+ * Evento (composed): `select` (detail: { index, label }).
+ */
+export declare class FxMenu extends FxElement {
+    static styles: string;
+    static get observedAttributes(): string[];
+    get orientation(): string;
+    get items(): HTMLElement[];
+    protected render(): void;
+    private _bindItems;
+    protected connectedCallback(): void;
+    protected disconnectedCallback(): void;
+    private _onOutside;
+    private _setActive;
+}
+export declare function defineFxMenu(): typeof FxMenu;
+//# sourceMappingURL=menu.d.ts.map

package/dist/components/menu/menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../src/components/menu/menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAK5C;;;;;;;GAOG;AACH,qBAAa,MAAO,SAAQ,SAAS;IACnC,OAAgB,MAAM,SAmDpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAED,IAAI,WAAW,IAAI,MAAM,CAAsD;IAE/E,IAAI,KAAK,IAAI,WAAW,EAAE,CAEzB;cAEkB,MAAM,IAAI,IAAI;IAgCjC,OAAO,CAAC,UAAU;cAgCC,iBAAiB,IAAI,IAAI;cAKzB,oBAAoB,IAAI,IAAI;IAK/C,OAAO,CAAC,UAAU,CAKhB;IAEF,OAAO,CAAC,UAAU;CAKnB;AAED,wBAAgB,YAAY,IAAI,OAAO,MAAM,CAE5C"}

package/dist/components/menu/menu.js

@@ -0,0 +1,155 @@
+import { FxElement } from "../../core/base.js";
+import { css } from "../../core/css.js";
+import { defineElement } from "../../core/define.js";
+import { esc } from "../../core/sanitize.js";
+const _FxMenu = class _FxMenu extends FxElement {
+  constructor() {
+    super(...arguments);
+    this._onOutside = (e) => {
+      const path = e.composedPath();
+      this.root.querySelectorAll(".dropdown.open").forEach((d) => {
+        if (!path.includes(d)) d.classList.remove("open");
+      });
+    };
+  }
+  static get observedAttributes() {
+    return ["orientation", "size", "dense", "titles"];
+  }
+  get orientation() {
+    return this.getAttr("orientation", "horizontal");
+  }
+  get items() {
+    return Array.from(this.children).filter((el) => el.matches('[slot="item"]')).map((el) => el);
+  }
+  render() {
+    const titleAttr = this.getAttr("titles");
+    const titles = titleAttr ? titleAttr.split(",").map((s) => s.trim()) : [];
+    const items = this.items;
+    const itemsHtml = items.map((it, i) => {
+      const label = titles[i] || it.textContent?.trim() || `Item ${i + 1}`;
+      const hasSub = it.matches("[submenu]");
+      const disabled = it.hasAttribute("disabled");
+      const item = `
+          <span class="item" part="item" data-i="${i}" ${disabled ? 'aria-disabled="true"' : ""}>
+            ${esc(label)}${hasSub ? `<span class="caret">▾</span>` : ""}
+          </span>`;
+      if (!hasSub) return item;
+      return `
+          <span class="submenu-wrap" part="submenu-wrap">
+            ${item}
+            <div class="dropdown" part="submenu"><slot name="submenu-${i}"></slot></div>
+          </span>`;
+    }).join("");
+    this.setTemplate(`
+      <nav part="menu" aria-label="Menu">
+        ${itemsHtml}
+      </nav>
+    `);
+    this._bindItems();
+  }
+  _bindItems() {
+    const items = Array.from(this.root.querySelectorAll(".item"));
+    items.forEach((item) => {
+      const i = Number(item.dataset.i);
+      item.addEventListener("click", () => {
+        if (item.getAttribute("aria-disabled") === "true") return;
+        const source = this.items[i];
+        const hasSub = source?.hasAttribute("submenu");
+        if (hasSub) {
+          this.root.querySelectorAll(".dropdown.open").forEach((d) => {
+            if (d !== item.parentElement?.querySelector(".dropdown")) d.classList.remove("open");
+          });
+          item.parentElement?.querySelector(".dropdown")?.classList.toggle("open");
+          return;
+        }
+        this._setActive(item);
+        this.dispatchEvent(new CustomEvent("select", {
+          bubbles: true,
+          composed: true,
+          detail: { index: i, label: item.textContent?.trim() ?? "" }
+        }));
+      });
+      item.addEventListener("keydown", (e) => {
+        const ev = e;
+        if (ev.key === "Enter" || ev.key === " ") {
+          ev.preventDefault();
+          item.click();
+        }
+      });
+    });
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    document.addEventListener("pointerdown", this._onOutside);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener("pointerdown", this._onOutside);
+  }
+  _setActive(active) {
+    Array.from(this.root.querySelectorAll(".item")).forEach((it) => {
+      it.classList.toggle("active", it === active);
+    });
+  }
+};
+_FxMenu.styles = css`
+    :host { display: block; font-family: var(--fx-font-family); font-size: var(--fx-font-size); }
+    :host([orientation='vertical']) { border: 1px solid var(--fx-border-default); border-radius: var(--fx-radius-md); }
+    nav {
+      display: flex;
+      align-items: center;
+      gap: var(--fx-space-xs);
+      flex-wrap: wrap;
+      background: var(--fx-surface-background);
+    }
+    :host([orientation='vertical']) nav { flex-direction: column; align-items: stretch; }
+    .item {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--fx-space-xs);
+      padding: var(--fx-space-sm) var(--fx-space-md);
+      min-height: var(--fx-size-sm);
+      border-radius: var(--fx-radius-sm);
+      color: var(--fx-text-default);
+      cursor: pointer;
+      user-select: none;
+      white-space: nowrap;
+      transition: background var(--fx-motion-duration-fast) var(--fx-motion-easing), color var(--fx-motion-duration-fast) var(--fx-motion-easing);
+    }
+    :host([size='sm']) .item { min-height: var(--fx-size-sm); padding: var(--fx-space-xs) var(--fx-space-sm); font-size: calc(var(--fx-font-size) - 2px); }
+    :host([size='lg']) .item { min-height: var(--fx-size-lg); padding: var(--fx-space-md) var(--fx-space-lg); font-size: calc(var(--fx-font-size) + 1px); }
+    .item:hover { background: var(--fx-surface-surface-hover, rgba(0,0,0,0.06)); }
+    .item.active { background: var(--fx-color-primary); color: #fff; font-weight: 600; }
+    .item[aria-disabled='true'] { opacity: 0.5; cursor: not-allowed; }
+    .item[aria-disabled='true']:hover { background: none; }
+    .item .caret { font-size: calc(var(--fx-font-size) - 2px); color: var(--fx-text-muted); }
+
+    /* submenú ancorado ao item */
+    .submenu-wrap { position: relative; display: inline-flex; }
+    :host([orientation='vertical']) .submenu-wrap { width: 100%; }
+    .dropdown {
+      position: absolute;
+      left: 0;
+      top: calc(100% + 4px);
+      min-width: 180px;
+      background: var(--fx-surface-background);
+      border: 1px solid var(--fx-border-default);
+      border-radius: var(--fx-radius-sm);
+      box-shadow: var(--fx-shadow-lg);
+      padding: var(--fx-space-xs);
+      z-index: var(--fx-z-dropdown, 1060);
+      display: none;
+      flex-direction: column;
+    }
+    .dropdown.open { display: flex; }
+    :host([orientation='vertical']) .dropdown { left: 100%; top: 0; }
+  `;
+let FxMenu = _FxMenu;
+function defineFxMenu() {
+  return defineElement("fx-menu", FxMenu);
+}
+export {
+  FxMenu,
+  defineFxMenu
+};
+//# sourceMappingURL=menu.js.map

package/dist/components/menu/menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.js","sources":["../../../src/components/menu/menu.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\nimport { esc } from '../../core/sanitize';\n\n/**\n * <fx-menu> — Menú de navegación (horizontal o vertical) con ítems y submenús.\n *\n * Atributos: orientation (horizontal|vertical), size (sm|md|lg),\n * dense (reduce el alto), titles (separado por `,` para navegación).\n * Slots `item`: cada ítem de menú con [slot=\"item\"].\n * Evento (composed): `select` (detail: { index, label }).\n */\nexport class FxMenu extends FxElement {\n  static override styles = css`\n    :host { display: block; font-family: var(--fx-font-family); font-size: var(--fx-font-size); }\n    :host([orientation='vertical']) { border: 1px solid var(--fx-border-default); border-radius: var(--fx-radius-md); }\n    nav {\n      display: flex;\n      align-items: center;\n      gap: var(--fx-space-xs);\n      flex-wrap: wrap;\n      background: var(--fx-surface-background);\n    }\n    :host([orientation='vertical']) nav { flex-direction: column; align-items: stretch; }\n    .item {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--fx-space-xs);\n      padding: var(--fx-space-sm) var(--fx-space-md);\n      min-height: var(--fx-size-sm);\n      border-radius: var(--fx-radius-sm);\n      color: var(--fx-text-default);\n      cursor: pointer;\n      user-select: none;\n      white-space: nowrap;\n      transition: background var(--fx-motion-duration-fast) var(--fx-motion-easing), color var(--fx-motion-duration-fast) var(--fx-motion-easing);\n    }\n    :host([size='sm']) .item { min-height: var(--fx-size-sm); padding: var(--fx-space-xs) var(--fx-space-sm); font-size: calc(var(--fx-font-size) - 2px); }\n    :host([size='lg']) .item { min-height: var(--fx-size-lg); padding: var(--fx-space-md) var(--fx-space-lg); font-size: calc(var(--fx-font-size) + 1px); }\n    .item:hover { background: var(--fx-surface-surface-hover, rgba(0,0,0,0.06)); }\n    .item.active { background: var(--fx-color-primary); color: #fff; font-weight: 600; }\n    .item[aria-disabled='true'] { opacity: 0.5; cursor: not-allowed; }\n    .item[aria-disabled='true']:hover { background: none; }\n    .item .caret { font-size: calc(var(--fx-font-size) - 2px); color: var(--fx-text-muted); }\n\n    /* submenú ancorado ao item */\n    .submenu-wrap { position: relative; display: inline-flex; }\n    :host([orientation='vertical']) .submenu-wrap { width: 100%; }\n    .dropdown {\n      position: absolute;\n      left: 0;\n      top: calc(100% + 4px);\n      min-width: 180px;\n      background: var(--fx-surface-background);\n      border: 1px solid var(--fx-border-default);\n      border-radius: var(--fx-radius-sm);\n      box-shadow: var(--fx-shadow-lg);\n      padding: var(--fx-space-xs);\n      z-index: var(--fx-z-dropdown, 1060);\n      display: none;\n      flex-direction: column;\n    }\n    .dropdown.open { display: flex; }\n    :host([orientation='vertical']) .dropdown { left: 100%; top: 0; }\n  `;\n\n  static override get observedAttributes(): string[] {\n    return ['orientation', 'size', 'dense', 'titles'];\n  }\n\n  get orientation(): string { return this.getAttr('orientation', 'horizontal'); }\n\n  get items(): HTMLElement[] {\n    return Array.from(this.children).filter((el) => el.matches('[slot=\"item\"]')).map((el) => el as HTMLElement);\n  }\n\n  protected override render(): void {\n    const titleAttr = this.getAttr('titles');\n    const titles = titleAttr ? titleAttr.split(',').map((s) => s.trim()) : [];\n\n    const items = this.items;\n    const itemsHtml = items\n      .map((it, i) => {\n        const label = titles[i] || it.textContent?.trim() || `Item ${i + 1}`;\n        const hasSub = it.matches('[submenu]');\n        const disabled = it.hasAttribute('disabled');\n        const item = `\n          <span class=\"item\" part=\"item\" data-i=\"${i}\" ${disabled ? 'aria-disabled=\"true\"' : ''}>\n            ${esc(label)}${hasSub ? `<span class=\"caret\">▾</span>` : ''}\n          </span>`;\n        if (!hasSub) return item;\n        return `\n          <span class=\"submenu-wrap\" part=\"submenu-wrap\">\n            ${item}\n            <div class=\"dropdown\" part=\"submenu\"><slot name=\"submenu-${i}\"></slot></div>\n          </span>`;\n      })\n      .join('');\n\n    this.setTemplate(`\n      <nav part=\"menu\" aria-label=\"Menu\">\n        ${itemsHtml}\n      </nav>\n    `);\n\n    this._bindItems();\n  }\n\n  private _bindItems(): void {\n    const items = Array.from(this.root.querySelectorAll<HTMLElement>('.item'));\n    items.forEach((item) => {\n      const i = Number(item.dataset.i);\n      item.addEventListener('click', () => {\n        if (item.getAttribute('aria-disabled') === 'true') return;\n        const source = this.items[i];\n        const hasSub = source?.hasAttribute('submenu');\n        if (hasSub) {\n          // fecha outros dropdowns e alterna o deste item\n          this.root.querySelectorAll<HTMLElement>('.dropdown.open').forEach((d) => {\n            if (d !== item.parentElement?.querySelector('.dropdown')) d.classList.remove('open');\n          });\n          item.parentElement?.querySelector('.dropdown')?.classList.toggle('open');\n          return;\n        }\n        this._setActive(item);\n        this.dispatchEvent(new CustomEvent('select', {\n          bubbles: true, composed: true,\n          detail: { index: i, label: item.textContent?.trim() ?? '' },\n        }));\n      });\n      item.addEventListener('keydown', (e) => {\n        const ev = e as KeyboardEvent;\n        if (ev.key === 'Enter' || ev.key === ' ') {\n          ev.preventDefault();\n          item.click();\n        }\n      });\n    });\n  }\n\n  protected override connectedCallback(): void {\n    super.connectedCallback();\n    document.addEventListener('pointerdown', this._onOutside);\n  }\n\n  protected override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    document.removeEventListener('pointerdown', this._onOutside);\n  }\n\n  private _onOutside = (e: MouseEvent): void => {\n    const path = e.composedPath();\n    this.root.querySelectorAll<HTMLElement>('.dropdown.open').forEach((d) => {\n      if (!path.includes(d)) d.classList.remove('open');\n    });\n  };\n\n  private _setActive(active: HTMLElement): void {\n    Array.from(this.root.querySelectorAll<HTMLElement>('.item')).forEach((it) => {\n      it.classList.toggle('active', it === active);\n    });\n  }\n}\n\nexport function defineFxMenu(): typeof FxMenu {\n  return defineElement('fx-menu', FxMenu);\n}"],"names":[],"mappings":"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"}

package/dist/components/orderlist/orderlist.d.ts

@@ -49,7 +49,7 @@ export declare class FxOrderList extends FxElement {
     private _optionTemplate;
     setOptionTemplate(template: (item: OrderListItem) => string): void;
     protected connectedCallback(): void;
-    protected attributeChangedCallback(): void;
+    protected attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     private _parseDataAttribute;
     private _applyFilter;
     private _getDisplayData;

package/dist/components/orderlist/orderlist.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"orderlist.d.ts","sourceRoot":"","sources":["../../../src/components/orderlist/orderlist.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAK5C,MAAM,WAAW,aAAa;IAC5B,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED;;;;;;;;;;GAUG;AACH,qBAAa,WAAY,SAAQ,SAAS;IACxC,OAAgB,MAAM,SA2ElB;IAEJ,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAc7C;IAEL,IAAI,IAAI,CAAC,KAAK,EAAE,aAAa,EAAE,EAI9B;IACD,IAAI,IAAI,IAAI,aAAa,EAAE,CAE1B;IACD,OAAO,CAAC,KAAK,CAAuB;IACpC,OAAO,CAAC,aAAa,CAAgC;IAErD,IAAI,SAAS,CAAC,KAAK,EAAE,aAAa,EAAE,EAGnC;IACD,IAAI,SAAS,IAAI,aAAa,EAAE,CAE/B;IACC,OAAO,CAAC,UAAU,CAAuB;IAE3C,IAAI,OAAO,IAAI,MAAM,CAEpB;IACD,IAAI,OAAO,CAAC,CAAC,EAAE,MAAM,EAEpB;IAED,IAAI,MAAM,IAAI,OAAO,CAEpB;IACC,IAAI,MAAM,CAAC,CAAC,EAAE,OAAO,EAEtB;IAED,IAAI,QAAQ,IAAI,MAAM,CAErB;IACD,IAAI,QAAQ,CAAC,CAAC,EAAE,MAAM,EAErB;IAED,IAAI,iBAAiB,IAAI,MAAM,CAE9B;IACD,IAAI,iBAAiB,CAAC,CAAC,EAAE,MAAM,EAE9B;IAED,IAAI,UAAU,IAAI,MAAM,CAEvB;IACD,IAAI,UAAU,CAAC,CAAC,EAAE,MAAM,EAEvB;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,CAAC,EAAE,OAAO,EAEtB;IAED,IAAI,OAAO,IAAI,OAAO,CAErB;IACC,IAAI,OAAO,CAAC,CAAC,EAAE,OAAO,EAEvB;IAED,IAAI,aAAa,IAAI,MAAM,CAG1B;IACD,IAAI,aAAa,CAAC,CAAC,EAAE,MAAM,EAE1B;IAED,IAAI,aAAa,IAAI,OAAO,CAE3B;IACC,IAAI,aAAa,CAAC,CAAC,EAAE,OAAO,EAE7B;IAED,IAAI,WAAW,IAAI,MAAM,CAExB;IACD,IAAI,WAAW,CAAC,CAAC,EAAE,MAAM,EAIxB;IACD,OAAO,CAAC,YAAY,CAAM;IAE1B,OAAO,CAAC,aAAa,CAAuB;IAC5C,OAAO,CAAC,kBAAkB,CAAS;IACnC,OAAO,CAAC,eAAe,CAAkD;IAEzE,iBAAiB,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,MAAM,GAAG,IAAI;cAK/C,iBAAiB,IAAI,IAAI;cAKzB,wBAAwB,IAAI,IAAI;IAOnD,OAAO,CAAC,mBAAmB;IAY3B,OAAO,CAAC,YAAY;IAepB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,SAAS;IAYjB,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,oBAAoB;IAQ5B,OAAO,CAAC,gBAAgB;IAexB,OAAO,CAAC,UAAU;IAQlB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,gBAAgB;cASL,MAAM,IAAI,IAAI;IAsFjC,OAAO,CAAC,gBAAgB;IAqExB,OAAO,CAAC,oBAAoB;IAyC5B,OAAO,CAAC,kBAAkB;IA0D1B,OAAO,CAAC,iBAAiB;IA0BzB,OAAO,CAAC,oBAAoB;IAqB5B,OAAO,CAAC,kBAAkB;IAsB1B,OAAO,CAAC,kBAAkB;IA+C1B,OAAO,CAAC,oBAAoB;CA2B7B;AAED,wBAAgB,iBAAiB,IAAI,OAAO,WAAW,CAEtD"}
+{"version":3,"file":"orderlist.d.ts","sourceRoot":"","sources":["../../../src/components/orderlist/orderlist.ts"],"names":[],"mappings":"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"}

package/dist/components/orderlist/orderlist.js

@@ -114,11 +114,11 @@ const _FxOrderList = class _FxOrderList extends FxElement {
     this._parseDataAttribute();
     super.connectedCallback();
   }
-  attributeChangedCallback() {
+  attributeChangedCallback(name, oldValue, newValue) {
     if (this.getAttr("data", "") !== "") {
       this._parseDataAttribute();
     }
-    super.attributeChangedCallback();
+    super.attributeChangedCallback(name, oldValue, newValue);
   }
   _parseDataAttribute() {
     const dataAttr = this.getAttr("data", "");