@wrrdev/fenix-ui 1.0.0

package/dist/components/select/select.js

@@ -0,0 +1,287 @@
+import { FxElement } from "../../core/base.js";
+import { css } from "../../core/css.js";
+import { defineElement } from "../../core/define.js";
+const _FxSelect = class _FxSelect extends FxElement {
+  // `value` fica FORA da observação: refleti-lo no change não pode
+  // re-renderizar o template e fechar o dropdown.
+  static get observedAttributes() {
+    return ["size", "disabled", "placeholder", "searchable", "clearable", "error", "success"];
+  }
+  /** Tamanho do campo. Padrão: `'md'`. */
+  get size() {
+    const s = this.getAttr("size", "md");
+    return s === "sm" || s === "lg" ? s : "md";
+  }
+  set size(value) {
+    this.setAttribute("size", value);
+  }
+  get value() {
+    return this.getAttr("value");
+  }
+  set value(value) {
+    this.setAttribute("value", value);
+  }
+  get disabled() {
+    return this.hasAttr("disabled");
+  }
+  set disabled(value) {
+    this.toggleAttr("disabled", Boolean(value));
+  }
+  get options() {
+    return [...this.querySelectorAll("option")].map((o) => ({
+      value: o.getAttribute("value") ?? o.textContent?.trim() ?? "",
+      label: o.textContent?.trim() ?? ""
+    }));
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.observer = new MutationObserver(() => this.render());
+    this.observer.observe(this, { childList: true, subtree: true, characterData: true });
+    this.docListener = (e) => {
+      if (!this.hasAttr("open")) return;
+      if (e.composedPath().includes(this)) return;
+      this.removeAttribute("open");
+      this.render();
+    };
+    document.addEventListener("click", this.docListener);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.observer?.disconnect();
+    if (this.docListener) document.removeEventListener("click", this.docListener);
+  }
+  select(value) {
+    this.value = value;
+    this.removeAttribute("open");
+    this.render();
+    this.dispatchEvent(
+      new CustomEvent("change", { bubbles: true, composed: true, detail: { value } })
+    );
+  }
+  render() {
+    const prevOpen = this.hasAttr("open");
+    const prevSearch = this.root.querySelector(".search");
+    const search = prevSearch?.value ?? "";
+    const searchFocused = prevSearch != null && this.root.activeElement === prevSearch;
+    const caretPos = searchFocused ? prevSearch.selectionStart : null;
+    const opts = this.options;
+    let current = this.getAttr("value");
+    if (!current) {
+      const explicit = this.querySelector("option[selected]");
+      current = explicit?.getAttribute("value") ?? explicit?.textContent?.trim() ?? "";
+    }
+    const selectedLabel = opts.find((o) => o.value === current)?.label ?? "";
+    const placeholder = this.getAttr("placeholder", "Selecione…");
+    const filtered = search ? opts.filter((o) => o.label.toLowerCase().includes(search.toLowerCase())) : opts;
+    this.setTemplate(`
+      <span class="trigger" part="trigger" role="button" tabindex="${this.disabled ? -1 : 0}" aria-haspopup="listbox" aria-expanded="${prevOpen}">
+        <span class="${selectedLabel ? "label" : "placeholder"}">${selectedLabel || placeholder}</span>
+        <span class="actions">
+          ${this.hasAttr("clearable") && current ? '<button type="button" class="clear" part="clear" aria-label="Limpar">×</button>' : ""}
+          <span class="caret">▼</span>
+        </span>
+      </span>
+      <div class="panel" part="panel" role="listbox">
+        ${this.hasAttr("searchable") ? `<input class="search" part="search" type="text" placeholder="${this.getAttr("search-placeholder", "Pesquisar…")}">` : ""}
+        ${filtered.map((o) => `
+          <button type="button" class="opt" role="option" data-value="${o.value}"
+            aria-selected="${o.value === current}">${o.label}</button>`).join("")}
+        ${filtered.length === 0 ? `<div class="empty">${this.getAttr("no-results", "Nenhum resultado")}</div>` : ""}
+      </div>
+    `);
+    if (prevOpen) this.setAttribute("open", "");
+    const searchInput = this.root.querySelector(".search");
+    if (searchInput) {
+      searchInput.value = search;
+      searchInput.addEventListener("input", () => this.render());
+      searchInput.addEventListener("click", (e) => e.stopPropagation());
+      if (searchFocused) {
+        searchInput.focus();
+        try {
+          searchInput.setSelectionRange(caretPos, caretPos);
+        } catch {
+        }
+      }
+    }
+    const trigger = this.root.querySelector(".trigger");
+    if (!trigger) return;
+    if (this.disabled) trigger.setAttribute("aria-disabled", "true");
+    trigger.addEventListener("click", (e) => {
+      if (this.disabled) return;
+      if (e.target.closest(".clear")) return;
+      this.toggleAttribute("open");
+      this.render();
+      this.root.querySelector(".search")?.focus();
+    });
+    trigger.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        trigger.click();
+      }
+    });
+    this.root.querySelector(".clear")?.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this.value = "";
+      this.removeAttribute("open");
+      this.render();
+      this.dispatchEvent(
+        new CustomEvent("change", { bubbles: true, composed: true, detail: { value: "" } })
+      );
+    });
+    this.root.querySelectorAll(".opt").forEach((opt) => {
+      opt.addEventListener("click", () => this.select(opt.dataset.value));
+    });
+  }
+};
+_FxSelect.styles = css`
+    :host {
+      display: inline-block;
+      vertical-align: middle;
+      font-family: var(--fx-font-family);
+      font-size: var(--fx-font-size);
+      position: relative;
+    }
+    .trigger {
+      display: inline-flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--fx-space-sm);
+      box-sizing: border-box;
+      min-height: var(--fx-size-md);
+      min-width: 200px;
+      font: inherit;
+      font-weight: var(--fx-font-weight);
+      color: var(--fx-text-default);
+      text-align: left;
+      background-color: var(--fx-surface-background);
+      border: 1px solid var(--fx-border-default);
+      border-radius: var(--fx-radius-md);
+      padding: var(--fx-space-xs) var(--fx-space-md);
+      cursor: pointer;
+      transition:
+        border-color var(--fx-motion-duration-normal) var(--fx-motion-easing),
+        box-shadow var(--fx-motion-duration-normal) var(--fx-motion-easing);
+    }
+    .trigger:hover { border-color: var(--fx-border-hover); }
+    .trigger:focus-visible,
+    :host([open]) .trigger {
+      outline: none;
+      border-color: var(--fx-color-primary);
+      box-shadow: var(--fx-effect-focus-ring, none);
+    }
+        :host([size='sm']) .trigger { min-width: 180px; min-height: var(--fx-size-sm); }
+    :host([size='lg']) .trigger { min-height: var(--fx-size-lg); font-size: calc(var(--fx-font-size) + 4px); }
+        /* Validação */
+    :host([error]) .trigger,
+    :host([invalid]) .trigger {
+      border-color: var(--fx-color-danger, #dc2626);
+    }
+    :host([error]) .trigger:focus-visible,
+    :host([invalid]) .trigger:focus-visible,
+    :host([error][open]) .trigger,
+    :host([invalid][open]) .trigger {
+      border-color: var(--fx-color-danger, #dc2626);
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-color-danger, #dc2626) 18%, transparent);
+    }
+    :host([success]) .trigger,
+    :host([valid]) .trigger {
+      border-color: var(--fx-color-success, #16a34a);
+    }
+    :host([success]) .trigger:focus-visible,
+    :host([valid]) .trigger:focus-visible,
+    :host([success][open]) .trigger,
+    :host([valid][open]) .trigger {
+      border-color: var(--fx-color-success, #16a34a);
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-color-success, #16a34a) 18%, transparent);
+    }
+    :host([disabled]) .trigger,
+    .trigger[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; background-color: var(--fx-surface-surface-hover); }
+    /* O rótulo encolhe (ellipsis) e os ícones NUNCA saem do campo. */
+    .label,
+    .placeholder {
+      flex: 1 1 auto;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .placeholder { color: var(--fx-text-muted); }
+    .actions {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--fx-space-xs, 8px);
+      flex-shrink: 0;
+    }
+    .caret { font-size: calc(var(--fx-font-size) - 3px); color: var(--fx-text-muted); pointer-events: none; }
+
+    /* Painel do dropdown */
+    .panel {
+      position: absolute;
+      top: calc(100% + 4px);
+      left: 0;
+      z-index: var(--fx-z-dropdown, 1000);
+      width: max(100%, 220px);
+      max-height: 260px;
+      overflow-y: auto;
+      display: none;
+      background: var(--fx-surface-background);
+      border: 1px solid var(--fx-border-default);
+      border-radius: var(--fx-radius-md);
+      box-shadow: var(--fx-shadow-lg);
+    }
+    :host([open]) .panel { display: block; }
+    .search {
+      position: sticky;
+      top: 0;
+      width: 100%;
+      box-sizing: border-box;
+      font: inherit;
+      color: var(--fx-text-default);
+      background: var(--fx-surface-background);
+      border: none;
+      border-bottom: 1px solid var(--fx-border-default);
+      padding: var(--fx-space-sm) var(--fx-space-md);
+      outline: none;
+    }
+    .opt {
+      display: block;
+      width: 100%;
+      text-align: left;
+      font: inherit;
+      color: var(--fx-text-default);
+      background: none;
+      border: none;
+      padding: var(--fx-space-sm) var(--fx-space-md);
+      cursor: pointer;
+    }
+    /* Hover e selecionado com a cor primária do tema (igual ao multiselect). */
+    .opt:hover { background: color-mix(in srgb, var(--fx-color-primary) 12%, transparent); }
+    .opt[aria-selected='true'] {
+      background: color-mix(in srgb, var(--fx-color-primary) 18%, transparent);
+      color: var(--fx-color-primary);
+      font-weight: var(--fx-font-weight);
+    }
+    .empty { padding: var(--fx-space-sm) var(--fx-space-md); color: var(--fx-text-muted); }
+
+    /* Clearable */
+    .clear {
+      border: none;
+      background: transparent;
+      color: var(--fx-text-muted);
+      font-size: calc(var(--fx-font-size) + 2px);
+      line-height: 1;
+      cursor: pointer;
+      padding: 0;
+    }
+    .clear:hover { color: var(--fx-color-danger); }
+    .clear[hidden] { display: none; }
+  `;
+let FxSelect = _FxSelect;
+function defineFxSelect() {
+  return defineElement("fx-select", FxSelect);
+}
+export {
+  FxSelect,
+  defineFxSelect
+};
+//# sourceMappingURL=select.js.map

package/dist/components/select/select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.js","sources":["../../../src/components/select/select.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\r\nimport { css } from '../../core/css';\r\nimport { defineElement } from '../../core/define';\r\n\r\n/**\r\n * <fx-select> — Campo de seleção com dropdown customizado.\r\n *\r\n * Escreva os filhos como `<option>` nativos no light DOM; eles são\r\n * espelhados automaticamente (MutationObserver):\r\n *\r\n *   <fx-select value=\"b\" searchable clearable>\r\n *     <option value=\"a\">Opção A</option>\r\n *     <option value=\"b\">Opção B</option>\r\n *   </fx-select>\r\n *\r\n * Atributos: value, size (sm|md|lg), disabled, placeholder,\r\n * searchable, clearable, search-placeholder, no-results.\r\n * Evento: `change` (composed, detail: { value }).\r\n */\r\nexport class FxSelect extends FxElement {\r\n  static override styles = css`\r\n    :host {\r\n      display: inline-block;\r\n      vertical-align: middle;\r\n      font-family: var(--fx-font-family);\r\n      font-size: var(--fx-font-size);\r\n      position: relative;\r\n    }\r\n    .trigger {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: space-between;\r\n      gap: var(--fx-space-sm);\r\n      box-sizing: border-box;\r\n      min-height: var(--fx-size-md);\r\n      min-width: 200px;\r\n      font: inherit;\r\n      font-weight: var(--fx-font-weight);\r\n      color: var(--fx-text-default);\r\n      text-align: left;\r\n      background-color: var(--fx-surface-background);\r\n      border: 1px solid var(--fx-border-default);\r\n      border-radius: var(--fx-radius-md);\r\n      padding: var(--fx-space-xs) var(--fx-space-md);\r\n      cursor: pointer;\r\n      transition:\r\n        border-color var(--fx-motion-duration-normal) var(--fx-motion-easing),\r\n        box-shadow var(--fx-motion-duration-normal) var(--fx-motion-easing);\r\n    }\r\n    .trigger:hover { border-color: var(--fx-border-hover); }\r\n    .trigger:focus-visible,\r\n    :host([open]) .trigger {\r\n      outline: none;\r\n      border-color: var(--fx-color-primary);\r\n      box-shadow: var(--fx-effect-focus-ring, none);\r\n    }\r\n        :host([size='sm']) .trigger { min-width: 180px; min-height: var(--fx-size-sm); }\r\n    :host([size='lg']) .trigger { min-height: var(--fx-size-lg); font-size: calc(var(--fx-font-size) + 4px); }\r\n        /* Validação */\r\n    :host([error]) .trigger,\r\n    :host([invalid]) .trigger {\r\n      border-color: var(--fx-color-danger, #dc2626);\r\n    }\r\n    :host([error]) .trigger:focus-visible,\r\n    :host([invalid]) .trigger:focus-visible,\r\n    :host([error][open]) .trigger,\r\n    :host([invalid][open]) .trigger {\r\n      border-color: var(--fx-color-danger, #dc2626);\r\n      box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-color-danger, #dc2626) 18%, transparent);\r\n    }\r\n    :host([success]) .trigger,\r\n    :host([valid]) .trigger {\r\n      border-color: var(--fx-color-success, #16a34a);\r\n    }\r\n    :host([success]) .trigger:focus-visible,\r\n    :host([valid]) .trigger:focus-visible,\r\n    :host([success][open]) .trigger,\r\n    :host([valid][open]) .trigger {\r\n      border-color: var(--fx-color-success, #16a34a);\r\n      box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-color-success, #16a34a) 18%, transparent);\r\n    }\r\n    :host([disabled]) .trigger,\r\n    .trigger[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; background-color: var(--fx-surface-surface-hover); }\r\n    /* O rótulo encolhe (ellipsis) e os ícones NUNCA saem do campo. */\r\n    .label,\r\n    .placeholder {\r\n      flex: 1 1 auto;\r\n      min-width: 0;\r\n      overflow: hidden;\r\n      text-overflow: ellipsis;\r\n      white-space: nowrap;\r\n    }\r\n    .placeholder { color: var(--fx-text-muted); }\r\n    .actions {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: var(--fx-space-xs, 8px);\r\n      flex-shrink: 0;\r\n    }\r\n    .caret { font-size: calc(var(--fx-font-size) - 3px); color: var(--fx-text-muted); pointer-events: none; }\r\n\r\n    /* Painel do dropdown */\r\n    .panel {\r\n      position: absolute;\r\n      top: calc(100% + 4px);\r\n      left: 0;\r\n      z-index: var(--fx-z-dropdown, 1000);\r\n      width: max(100%, 220px);\r\n      max-height: 260px;\r\n      overflow-y: auto;\r\n      display: none;\r\n      background: var(--fx-surface-background);\r\n      border: 1px solid var(--fx-border-default);\r\n      border-radius: var(--fx-radius-md);\r\n      box-shadow: var(--fx-shadow-lg);\r\n    }\r\n    :host([open]) .panel { display: block; }\r\n    .search {\r\n      position: sticky;\r\n      top: 0;\r\n      width: 100%;\r\n      box-sizing: border-box;\r\n      font: inherit;\r\n      color: var(--fx-text-default);\r\n      background: var(--fx-surface-background);\r\n      border: none;\r\n      border-bottom: 1px solid var(--fx-border-default);\r\n      padding: var(--fx-space-sm) var(--fx-space-md);\r\n      outline: none;\r\n    }\r\n    .opt {\r\n      display: block;\r\n      width: 100%;\r\n      text-align: left;\r\n      font: inherit;\r\n      color: var(--fx-text-default);\r\n      background: none;\r\n      border: none;\r\n      padding: var(--fx-space-sm) var(--fx-space-md);\r\n      cursor: pointer;\r\n    }\r\n    /* Hover e selecionado com a cor primária do tema (igual ao multiselect). */\r\n    .opt:hover { background: color-mix(in srgb, var(--fx-color-primary) 12%, transparent); }\r\n    .opt[aria-selected='true'] {\r\n      background: color-mix(in srgb, var(--fx-color-primary) 18%, transparent);\r\n      color: var(--fx-color-primary);\r\n      font-weight: var(--fx-font-weight);\r\n    }\r\n    .empty { padding: var(--fx-space-sm) var(--fx-space-md); color: var(--fx-text-muted); }\r\n\r\n    /* Clearable */\r\n    .clear {\r\n      border: none;\r\n      background: transparent;\r\n      color: var(--fx-text-muted);\r\n      font-size: calc(var(--fx-font-size) + 2px);\r\n      line-height: 1;\r\n      cursor: pointer;\r\n      padding: 0;\r\n    }\r\n    .clear:hover { color: var(--fx-color-danger); }\r\n    .clear[hidden] { display: none; }\r\n  `;\r\n\r\n  // `value` fica FORA da observação: refleti-lo no change não pode\r\n  // re-renderizar o template e fechar o dropdown.\r\n  static override get observedAttributes(): string[] {\r\n        return ['size', 'disabled', 'placeholder', 'searchable', 'clearable', 'error', 'success'];\r\n  }\r\n\r\n  private observer?: MutationObserver;\r\n  private docListener?: (e: Event) => void;\r\n\r\n  /** Tamanho do campo. Padrão: `'md'`. */\r\n  get size(): string {\r\n    const s = this.getAttr('size', 'md');\r\n    return s === 'sm' || s === 'lg' ? s : 'md';\r\n  }\r\n  set size(value: string) {\r\n    this.setAttribute('size', value);\r\n  }\r\n\r\n  get value(): string {\r\n    return this.getAttr('value');\r\n  }\r\n  set value(value: string) {\r\n    this.setAttribute('value', value);\r\n  }\r\n\r\n  get disabled(): boolean {\r\n    return this.hasAttr('disabled');\r\n  }\r\n  set disabled(value: boolean) {\r\n    this.toggleAttr('disabled', Boolean(value));\r\n  }\r\n\r\n  private get options(): { value: string; label: string }[] {\r\n    return [...this.querySelectorAll('option')].map((o) => ({\r\n      value: o.getAttribute('value') ?? o.textContent?.trim() ?? '',\r\n      label: o.textContent?.trim() ?? '',\r\n    }));\r\n  }\r\n\r\n  protected override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    // Espelha mudanças nas <option> do light DOM.\r\n    this.observer = new MutationObserver(() => this.render());\r\n    this.observer.observe(this, { childList: true, subtree: true, characterData: true });\r\n    // Fecha o dropdown ao clicar fora.\r\n    this.docListener = (e: Event) => {\r\n      if (!this.hasAttr('open')) return;\r\n      if (e.composedPath().includes(this)) return;\r\n      this.removeAttribute('open');\r\n      this.render();\r\n    };\r\n    document.addEventListener('click', this.docListener);\r\n  }\r\n\r\n  protected override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.observer?.disconnect();\r\n    if (this.docListener) document.removeEventListener('click', this.docListener);\r\n  }\r\n\r\n  private select(value: string): void {\r\n    this.value = value;\r\n    this.removeAttribute('open');\r\n    this.render();\r\n    this.dispatchEvent(\r\n      new CustomEvent('change', { bubbles: true, composed: true, detail: { value } }),\r\n    );\r\n  }\r\n\r\n  protected override render(): void {\r\n    const prevOpen = this.hasAttr('open');\r\n    const prevSearch = this.root.querySelector<HTMLInputElement>('.search');\r\n    // Estado do campo de busca antes de re-renderizar (valor, foco e cursor).\r\n    const search = prevSearch?.value ?? '';\r\n    const searchFocused =\r\n      prevSearch != null && this.root.activeElement === prevSearch;\r\n    const caretPos = searchFocused ? prevSearch!.selectionStart : null;\r\n\r\n    const opts = this.options;\r\n    let current = this.getAttr('value');\r\n    if (!current) {\r\n      const explicit = this.querySelector('option[selected]');\r\n      current = explicit?.getAttribute('value') ?? explicit?.textContent?.trim() ?? '';\r\n    }\r\n    const selectedLabel = opts.find((o) => o.value === current)?.label ?? '';\r\n    const placeholder = this.getAttr('placeholder', 'Selecione…');\r\n\r\n    const filtered = search\r\n      ? opts.filter((o) => o.label.toLowerCase().includes(search.toLowerCase()))\r\n      : opts;\r\n\r\n    this.setTemplate(`\r\n      <span class=\"trigger\" part=\"trigger\" role=\"button\" tabindex=\"${this.disabled ? -1 : 0}\" aria-haspopup=\"listbox\" aria-expanded=\"${prevOpen}\">\r\n        <span class=\"${selectedLabel ? 'label' : 'placeholder'}\">${selectedLabel || placeholder}</span>\r\n        <span class=\"actions\">\r\n          ${this.hasAttr('clearable') && current ? '<button type=\"button\" class=\"clear\" part=\"clear\" aria-label=\"Limpar\">×</button>' : ''}\r\n          <span class=\"caret\">▼</span>\r\n        </span>\r\n      </span>\r\n      <div class=\"panel\" part=\"panel\" role=\"listbox\">\r\n        ${this.hasAttr('searchable') ? `<input class=\"search\" part=\"search\" type=\"text\" placeholder=\"${this.getAttr('search-placeholder', 'Pesquisar…')}\">` : ''}\r\n        ${filtered.map((o) => `\r\n          <button type=\"button\" class=\"opt\" role=\"option\" data-value=\"${o.value}\"\r\n            aria-selected=\"${o.value === current}\">${o.label}</button>`).join('')}\r\n        ${filtered.length === 0 ? `<div class=\"empty\">${this.getAttr('no-results', 'Nenhum resultado')}</div>` : ''}\r\n      </div>\r\n    `);\r\n\r\n    if (prevOpen) this.setAttribute('open', '');\r\n    const searchInput = this.root.querySelector<HTMLInputElement>('.search');\r\n    if (searchInput) {\r\n      searchInput.value = search;\r\n      searchInput.addEventListener('input', () => this.render());\r\n      searchInput.addEventListener('click', (e) => e.stopPropagation());\r\n      // Re-render não pode roubar o foco nem perder a posição do cursor.\r\n      if (searchFocused) {\r\n        searchInput.focus();\r\n        try { searchInput.setSelectionRange(caretPos!, caretPos!); } catch { /* type=text sempre suporta */ }\r\n      }\r\n    }\r\n\r\n    const trigger = this.root.querySelector<HTMLElement>('.trigger');\r\n    if (!trigger) return;\r\n    if (this.disabled) trigger.setAttribute('aria-disabled', 'true');\r\n\r\n    trigger.addEventListener('click', (e) => {\r\n      if (this.disabled) return;\r\n      if ((e.target as HTMLElement).closest('.clear')) return;\r\n      this.toggleAttribute('open');\r\n      this.render();\r\n      this.root.querySelector<HTMLInputElement>('.search')?.focus();\r\n    });\r\n\r\n    // Teclado: Enter/Espaço abrem o dropdown.\r\n    trigger.addEventListener('keydown', (e) => {\r\n      if (e.key === 'Enter' || e.key === ' ') {\r\n        e.preventDefault();\r\n        trigger.click();\r\n      }\r\n    });\r\n\r\n    // Limpar.\r\n    this.root.querySelector('.clear')?.addEventListener('click', (e) => {\r\n      e.stopPropagation();\r\n      this.value = '';\r\n      this.removeAttribute('open');\r\n      this.render();\r\n      this.dispatchEvent(\r\n        new CustomEvent('change', { bubbles: true, composed: true, detail: { value: '' } }),\r\n      );\r\n    });\r\n\r\n    // Escolher opção.\r\n    this.root.querySelectorAll<HTMLElement>('.opt').forEach((opt) => {\r\n      opt.addEventListener('click', () => this.select(opt.dataset.value!));\r\n    });\r\n  }\r\n}\r\n\r\nexport function defineFxSelect(): typeof FxSelect {\r\n  return defineElement('fx-select', FxSelect);\r\n}\r\n\r\n"],"names":[],"mappings":"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"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAoB,MAAM,YAAY,CAAC;AAE1D,OAAO,EAAE,UAAU,EAAE,CAAC;AAKtB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/dist/components/skeleton/index.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/skeleton/index.ts"],"sourcesContent":["import { FxSkeleton, defineFxSkeleton } from './skeleton';\n\nexport { FxSkeleton };\n\n\ndefineFxSkeleton();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'fx-skeleton': FxSkeleton;\n  }\n}\n\r\n\r\n"],"names":[],"mappings":";;AAKA,iBAAA;"}

package/dist/components/skeleton/skeleton.d.ts

@@ -0,0 +1,13 @@
+import { FxElement } from '../../core/base';
+/**
+ * <fx-skeleton> — Placeholder animado para carregamento de conteúdo.
+ *
+ * Atributos: variant (text|circle|rect, padrão text), width, height, lines (para text).
+ */
+export declare class FxSkeleton extends FxElement {
+    static styles: string;
+    static get observedAttributes(): string[];
+    protected render(): void;
+}
+export declare function defineFxSkeleton(): typeof FxSkeleton;
+//# sourceMappingURL=skeleton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/skeleton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C;;;;GAIG;AACH,qBAAa,UAAW,SAAQ,SAAS;IACvC,OAAgB,MAAM,SAkBpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;cAEkB,MAAM,IAAI,IAAI;CAyBlC;AAED,wBAAgB,gBAAgB,IAAI,OAAO,UAAU,CAEpD"}

package/dist/components/skeleton/skeleton.js

@@ -0,0 +1,57 @@
+import { FxElement } from "../../core/base.js";
+import { css } from "../../core/css.js";
+import { defineElement } from "../../core/define.js";
+const _FxSkeleton = class _FxSkeleton extends FxElement {
+  static get observedAttributes() {
+    return ["variant", "width", "height", "lines"];
+  }
+  render() {
+    const variant = this.getAttr("variant", "text");
+    const width = this.getAttr("width");
+    const height = this.getAttr("height");
+    const style = `${width ? `width:${width};` : ""}${height ? `height:${height};` : ""}`;
+    if (variant === "circle") {
+      const size = height || width || "40px";
+      const diameter = !style.includes("height") ? `width:${size};height:${size};` : style;
+      this.setTemplate(`<div class="bone circle" part="bone" style="${diameter}"></div>`);
+      return;
+    }
+    if (variant === "rect") {
+      const s = style || "width:100%;height:80px;";
+      this.setTemplate(`<div class="bone" part="bone" style="${s}"></div>`);
+      return;
+    }
+    const lines = Number(this.getAttr("lines", "3")) || 3;
+    this.setTemplate(`
+      ${Array.from({ length: lines }, () => '<div class="bone text"></div>').join("")}
+    `);
+  }
+};
+_FxSkeleton.styles = css`
+    :host { display: block; width: 100%; min-width: 80px; font-family: var(--fx-font-family); }
+    .bone {
+      background: linear-gradient(
+        90deg,
+        var(--fx-surface-surface-hover) 25%,
+        color-mix(in srgb, var(--fx-surface-surface-hover) 55%, var(--fx-surface-background)) 50%,
+        var(--fx-surface-surface-hover) 75%
+      );
+      background-size: 200% 100%;
+      animation: shimmer 1.4s ease-in-out infinite;
+      border-radius: var(--fx-radius-sm);
+    }
+    @keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
+    .bone[hidden] { display: none; }
+    .text { height: 12px; width: 100%; margin-bottom: var(--fx-space-sm); }
+    .text:last-of-type { width: 60%; margin-bottom: 0; }
+    .circle { border-radius: var(--fx-radius-full); }
+  `;
+let FxSkeleton = _FxSkeleton;
+function defineFxSkeleton() {
+  return defineElement("fx-skeleton", FxSkeleton);
+}
+export {
+  FxSkeleton,
+  defineFxSkeleton
+};
+//# sourceMappingURL=skeleton.js.map

package/dist/components/skeleton/skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.js","sources":["../../../src/components/skeleton/skeleton.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\n\n/**\n * <fx-skeleton> — Placeholder animado para carregamento de conteúdo.\n *\n * Atributos: variant (text|circle|rect, padrão text), width, height, lines (para text).\n */\nexport class FxSkeleton extends FxElement {\n  static override styles = css`\n    :host { display: block; width: 100%; min-width: 80px; font-family: var(--fx-font-family); }\n    .bone {\n      background: linear-gradient(\n        90deg,\n        var(--fx-surface-surface-hover) 25%,\n        color-mix(in srgb, var(--fx-surface-surface-hover) 55%, var(--fx-surface-background)) 50%,\n        var(--fx-surface-surface-hover) 75%\n      );\n      background-size: 200% 100%;\n      animation: shimmer 1.4s ease-in-out infinite;\n      border-radius: var(--fx-radius-sm);\n    }\n    @keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }\n    .bone[hidden] { display: none; }\n    .text { height: 12px; width: 100%; margin-bottom: var(--fx-space-sm); }\n    .text:last-of-type { width: 60%; margin-bottom: 0; }\n    .circle { border-radius: var(--fx-radius-full); }\n  `;\n\n  static override get observedAttributes(): string[] {\n    return ['variant', 'width', 'height', 'lines'];\n  }\n\n  protected override render(): void {\n    const variant = this.getAttr('variant', 'text');\n    const width = this.getAttr('width');\n    const height = this.getAttr('height');\n    const style = `${width ? `width:${width};` : ''}${height ? `height:${height};` : ''}`;\n\n    if (variant === 'circle') {\n      const size = height || width || '40px';\n      const diameter = !style.includes('height') ? `width:${size};height:${size};` : style;\n      this.setTemplate(`<div class=\"bone circle\" part=\"bone\" style=\"${diameter}\"></div>`);\n      return;\n    }\n\n    if (variant === 'rect') {\n      const s = style || 'width:100%;height:80px;';\n      this.setTemplate(`<div class=\"bone\" part=\"bone\" style=\"${s}\"></div>`);\n      return;\n    }\n\n    // text (padrão): N linhas\n    const lines = Number(this.getAttr('lines', '3')) || 3;\n    this.setTemplate(`\n      ${Array.from({ length: lines }, () => '<div class=\"bone text\"></div>').join('')}\n    `);\n  }\n}\n\nexport function defineFxSkeleton(): typeof FxSkeleton {\n  return defineElement('fx-skeleton', FxSkeleton);\n}\n"],"names":[],"mappings":";;;AASO,MAAM,cAAN,MAAM,oBAAmB,UAAU;AAAA,EAqBxC,WAAoB,qBAA+B;AACjD,WAAO,CAAC,WAAW,SAAS,UAAU,OAAO;AAAA,EAC/C;AAAA,EAEmB,SAAe;AAChC,UAAM,UAAU,KAAK,QAAQ,WAAW,MAAM;AAC9C,UAAM,QAAQ,KAAK,QAAQ,OAAO;AAClC,UAAM,SAAS,KAAK,QAAQ,QAAQ;AACpC,UAAM,QAAQ,GAAG,QAAQ,SAAS,KAAK,MAAM,EAAE,GAAG,SAAS,UAAU,MAAM,MAAM,EAAE;AAEnF,QAAI,YAAY,UAAU;AACxB,YAAM,OAAO,UAAU,SAAS;AAChC,YAAM,WAAW,CAAC,MAAM,SAAS,QAAQ,IAAI,SAAS,IAAI,WAAW,IAAI,MAAM;AAC/E,WAAK,YAAY,+CAA+C,QAAQ,UAAU;AAClF;AAAA,IACF;AAEA,QAAI,YAAY,QAAQ;AACtB,YAAM,IAAI,SAAS;AACnB,WAAK,YAAY,wCAAwC,CAAC,UAAU;AACpE;AAAA,IACF;AAGA,UAAM,QAAQ,OAAO,KAAK,QAAQ,SAAS,GAAG,CAAC,KAAK;AACpD,SAAK,YAAY;AAAA,QACb,MAAM,KAAK,EAAE,QAAQ,MAAA,GAAS,MAAM,+BAA+B,EAAE,KAAK,EAAE,CAAC;AAAA,KAChF;AAAA,EACH;AACF;AAjDE,YAAgB,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AADpB,IAAM,aAAN;AAoDA,SAAS,mBAAsC;AACpD,SAAO,cAAc,eAAe,UAAU;AAChD;"}

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

@@ -0,0 +1,2 @@
+export { FxSpinner } from './spinner';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC"}

package/dist/components/spinner/index.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/spinner/index.ts"],"sourcesContent":["import { defineFxSpinner } from './spinner';\n\n// Reexporta a classe para uso programático.\nexport { FxSpinner } from './spinner';\n\n// Auto-registro ao importar o subpath `@wrrdev/fenix-ui/spinner`.\ndefineFxSpinner();"],"names":[],"mappings":";;AAMA,gBAAA;"}

package/dist/components/spinner/spinner.d.ts

@@ -0,0 +1,16 @@
+import { FxElement } from '../../core/base';
+/**
+ * <fx-spinner> — Indicador de progresso indeterminado.
+ *
+ * Atributos: size (sm|md|lg).
+ */
+export declare class FxSpinner extends FxElement {
+    static styles: string;
+    static get observedAttributes(): string[];
+    /** Tamanho do spinner. Padrão: `'md'`. */
+    get size(): string;
+    set size(value: string);
+    protected render(): void;
+}
+export declare function defineFxSpinner(): typeof FxSpinner;
+//# sourceMappingURL=spinner.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/spinner.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C;;;;GAIG;AACH,qBAAa,SAAU,SAAQ,SAAS;IACtC,OAAgB,MAAM,SAqBpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAED,0CAA0C;IAC1C,IAAI,IAAI,IAAI,MAAM,CAGjB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAErB;cAEkB,MAAM,IAAI,IAAI;CAGlC;AAED,wBAAgB,eAAe,IAAI,OAAO,SAAS,CAElD"}

package/dist/components/spinner/spinner.js

@@ -0,0 +1,50 @@
+import { FxElement } from "../../core/base.js";
+import { css } from "../../core/css.js";
+import { defineElement } from "../../core/define.js";
+const _FxSpinner = class _FxSpinner extends FxElement {
+  static get observedAttributes() {
+    return ["size"];
+  }
+  /** Tamanho do spinner. Padrão: `'md'`. */
+  get size() {
+    const s = this.getAttr("size", "md");
+    return s === "sm" || s === "lg" ? s : "md";
+  }
+  set size(value) {
+    this.setAttribute("size", value);
+  }
+  render() {
+    this.setTemplate(`<span class="spinner" part="spinner" role="status" aria-label="Carregando"></span>`);
+  }
+};
+_FxSpinner.styles = css`
+    :host {
+      display: inline-block;
+      vertical-align: middle;
+    }
+    /* Escala: sm 16px · md 24px (padrão) · lg 32px */
+    .spinner {
+      display: inline-block;
+      width: var(--fx-space-xl, 20px);
+      height: var(--fx-space-xl, 20px);
+      border: 2px solid var(--fx-border-default, #e2e8f0);
+      border-top-color: var(--fx-color-primary, #2563eb);
+      border-radius: var(--fx-radius-full, 9999px);
+      animation: fx-spin 0.8s linear infinite;
+    }
+    :host([size='sm']) .spinner { width: var(--fx-space-lg, 16px); height: var(--fx-space-lg, 16px); }
+    :host([size='lg']) .spinner { width: 32px; height: 32px; border-width: 3px; }
+    @keyframes fx-spin { to { transform: rotate(360deg); } }
+    @media (prefers-reduced-motion: reduce) {
+      .spinner { animation-duration: 2.5s; }
+    }
+  `;
+let FxSpinner = _FxSpinner;
+function defineFxSpinner() {
+  return defineElement("fx-spinner", FxSpinner);
+}
+export {
+  FxSpinner,
+  defineFxSpinner
+};
+//# sourceMappingURL=spinner.js.map

package/dist/components/spinner/spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.js","sources":["../../../src/components/spinner/spinner.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\n\n/**\n * <fx-spinner> — Indicador de progresso indeterminado.\n *\n * Atributos: size (sm|md|lg).\n */\nexport class FxSpinner extends FxElement {\n  static override styles = css`\n    :host {\n      display: inline-block;\n      vertical-align: middle;\n    }\n    /* Escala: sm 16px · md 24px (padrão) · lg 32px */\n    .spinner {\n      display: inline-block;\n      width: var(--fx-space-xl, 20px);\n      height: var(--fx-space-xl, 20px);\n      border: 2px solid var(--fx-border-default, #e2e8f0);\n      border-top-color: var(--fx-color-primary, #2563eb);\n      border-radius: var(--fx-radius-full, 9999px);\n      animation: fx-spin 0.8s linear infinite;\n    }\n    :host([size='sm']) .spinner { width: var(--fx-space-lg, 16px); height: var(--fx-space-lg, 16px); }\n    :host([size='lg']) .spinner { width: 32px; height: 32px; border-width: 3px; }\n    @keyframes fx-spin { to { transform: rotate(360deg); } }\n    @media (prefers-reduced-motion: reduce) {\n      .spinner { animation-duration: 2.5s; }\n    }\n  `;\n\n  static override get observedAttributes(): string[] {\n    return ['size'];\n  }\n\n  /** Tamanho do spinner. Padrão: `'md'`. */\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) {\n    this.setAttribute('size', value);\n  }\n\n  protected override render(): void {\n    this.setTemplate(`<span class=\"spinner\" part=\"spinner\" role=\"status\" aria-label=\"Carregando\"></span>`);\n  }\n}\n\nexport function defineFxSpinner(): typeof FxSpinner {\n  return defineElement('fx-spinner', FxSpinner);\n}"],"names":[],"mappings":";;;AASO,MAAM,aAAN,MAAM,mBAAkB,UAAU;AAAA,EAwBvC,WAAoB,qBAA+B;AACjD,WAAO,CAAC,MAAM;AAAA,EAChB;AAAA;AAAA,EAGA,IAAI,OAAe;AACjB,UAAM,IAAI,KAAK,QAAQ,QAAQ,IAAI;AACnC,WAAO,MAAM,QAAQ,MAAM,OAAO,IAAI;AAAA,EACxC;AAAA,EACA,IAAI,KAAK,OAAe;AACtB,SAAK,aAAa,QAAQ,KAAK;AAAA,EACjC;AAAA,EAEmB,SAAe;AAChC,SAAK,YAAY,oFAAoF;AAAA,EACvG;AACF;AAvCE,WAAgB,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AADpB,IAAM,YAAN;AA0CA,SAAS,kBAAoC;AAClD,SAAO,cAAc,cAAc,SAAS;AAC9C;"}

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

@@ -0,0 +1,2 @@
+export { FxSwitch } from './switch';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/switch/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC"}

package/dist/components/switch/index.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/switch/index.ts"],"sourcesContent":["import { defineFxSwitch } from './switch';\n\n// Reexporta a classe para uso programático (instanceof, herança).\nexport { FxSwitch } from './switch';\n\n// Auto-registro ao importar o subpath `@wrrdev/fenix-ui/switch`.\ndefineFxSwitch();\n"],"names":[],"mappings":";;AAMA,eAAA;"}

package/dist/components/switch/switch.d.ts

@@ -0,0 +1,22 @@
+import { FxElement } from '../../core/base';
+/**
+ * <fx-switch> — Interruptor ligado/desligado (role="switch").
+ *
+ * O texto do slot (light DOM) é o rótulo clicável.
+ * Atributos: checked, disabled, size (sm|md|lg).
+ * Evento: `change` (composed, detail: { checked }).
+ */
+export declare class FxSwitch extends FxElement {
+    static styles: string;
+    static get observedAttributes(): string[];
+    /** Tamanho da trilha. Padrão: `'md'`. */
+    get size(): string;
+    set size(value: string);
+    get checked(): boolean;
+    set checked(value: boolean);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    protected render(): void;
+}
+export declare function defineFxSwitch(): typeof FxSwitch;
+//# sourceMappingURL=switch.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../src/components/switch/switch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C;;;;;;GAMG;AACH,qBAAa,QAAS,SAAQ,SAAS;IACrC,OAAgB,MAAM,SAsDpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAED,yCAAyC;IACzC,IAAI,IAAI,IAAI,MAAM,CAGjB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAErB;IAED,IAAI,OAAO,IAAI,OAAO,CAErB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,EAEzB;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;cAEkB,MAAM,IAAI,IAAI;CAwBlC;AAED,wBAAgB,cAAc,IAAI,OAAO,QAAQ,CAEhD"}