@wrrdev/fenix-ui 1.1.11 → 1.1.13

package/dist/fenix-ui4.esm.js

@@ -623,7 +623,7 @@ 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", "invalid", "success", "valid"];
+    return ["size", "disabled", "placeholder", "searchable", "clearable", "error", "invalid", "success", "valid", "placement"];
   }
   /** Tamanho do campo. Padrão: `'md'`. */
   get size() {
@@ -658,7 +658,7 @@ const _FxSelect = class _FxSelect extends FxElement {
     this.docListener = (e) => {
       if (!this.hasAttr("open")) return;
       if (e.composedPath().includes(this)) return;
-      this.removeAttribute("open");
+      this._fechar();
       this.render();
     };
     document.addEventListener("click", this.docListener);
@@ -667,10 +667,77 @@ const _FxSelect = class _FxSelect extends FxElement {
     super.disconnectedCallback();
     this.observer?.disconnect();
     if (this.docListener) document.removeEventListener("click", this.docListener);
+    this._unbindReflow();
+  }
+  /** Abre o dropdown, posiciona o painel e passa a reposicioná-lo no reflow. */
+  _abrir() {
+    this.setAttribute("open", "");
+    this._bindReflow();
+  }
+  /** Fecha o dropdown e libera os listeners de resize/scroll. */
+  _fechar() {
+    this.removeAttribute("open");
+    this.removeAttribute("data-placement");
+    this._unbindReflow();
+  }
+  /** Liga o reposicionamento (resize + scroll interno, em capture). */
+  _bindReflow() {
+    if (this.onReflow) return;
+    this.onReflow = () => {
+      if (this.hasAttr("open")) this.ajustarPosicao();
+    };
+    window.addEventListener("resize", this.onReflow);
+    window.addEventListener("scroll", this.onReflow, true);
+  }
+  _unbindReflow() {
+    if (!this.onReflow) return;
+    window.removeEventListener("resize", this.onReflow);
+    window.removeEventListener("scroll", this.onReflow, true);
+    this.onReflow = void 0;
+  }
+  /**
+   * Decide a posição vertical do painel medindo o espaço real da viewport.
+   *
+   * `placement="top"`/`"bottom"` são respeitados literalmente; o padrão
+   * (`auto`) só inverte quando o painel não cabe embaixo E couber melhor
+   * acima. Também limita a altura ao espaço disponível e evita overflow
+   * horizontal próximo à borda direita.
+   */
+  ajustarPosicao() {
+    const painel = this.root.querySelector(".panel");
+    const trigger = this.root.querySelector(".trigger");
+    if (!painel || !trigger) return;
+    const r = trigger.getBoundingClientRect();
+    const abaixo = window.innerHeight - r.bottom;
+    const acima = r.top;
+    const desejado = painel.scrollHeight;
+    const maxAltura = _FxSelect._maxAltura(this);
+    const pedido = this.getAttr("placement", "auto");
+    const paraCima = pedido === "top" || pedido !== "bottom" && abaixo < Math.min(desejado, maxAltura) && acima > abaixo;
+    if (paraCima) this.setAttribute("data-placement", "top");
+    else this.removeAttribute("data-placement");
+    const disponivel = Math.max(
+      _FxSelect.MIN_ALTURA,
+      (paraCima ? acima : abaixo) - _FxSelect.GAP
+    );
+    painel.style.maxHeight = `${Math.min(desejado || disponivel, disponivel, maxAltura)}px`;
+    painel.style.left = "";
+    const largura = painel.offsetWidth;
+    const excesso = r.left + largura - (window.innerWidth - _FxSelect.MARGEM);
+    if (excesso > 0) {
+      painel.style.left = `${-excesso}px`;
+      painel.style.right = "auto";
+    }
+  }
+  /** Altura máxima do painel a partir de `--fx-select-panel-max-height`. */
+  static _maxAltura(host) {
+    const raw = getComputedStyle(host).getPropertyValue("--fx-select-panel-max-height");
+    const n = parseInt(raw, 10);
+    return Number.isFinite(n) && n > 0 ? n : 260;
   }
   select(value) {
     this.value = value;
-    this.removeAttribute("open");
+    this._fechar();
     this.render();
     this.dispatchEvent(
       new CustomEvent("change", { bubbles: true, composed: true, detail: { value } })
@@ -680,7 +747,7 @@ const _FxSelect = class _FxSelect extends FxElement {
   _navigateOptions(e) {
     e.preventDefault();
     if (!this.hasAttr("open")) {
-      this.toggleAttribute("open");
+      this._abrir();
       this.render();
     }
     const opts = Array.from(this.root.querySelectorAll(".opt"));
@@ -725,6 +792,7 @@ const _FxSelect = class _FxSelect extends FxElement {
       </div>
     `);
     if (prevOpen) this.setAttribute("open", "");
+    if (this.hasAttr("open")) this.ajustarPosicao();
     const searchInput = this.root.querySelector(".search");
     if (searchInput) {
       searchInput.value = search;
@@ -744,7 +812,8 @@ const _FxSelect = class _FxSelect extends FxElement {
     trigger.addEventListener("click", (e) => {
       if (this.disabled) return;
       if (e.target.closest(".clear")) return;
-      this.toggleAttribute("open");
+      if (this.hasAttr("open")) this._fechar();
+      else this._abrir();
       this.render();
       this.root.querySelector(".search")?.focus();
     });
@@ -757,7 +826,7 @@ const _FxSelect = class _FxSelect extends FxElement {
       }
       if (e.key === "Escape") {
         if (this.hasAttr("open")) {
-          this.removeAttribute("open");
+          this._fechar();
           this.render();
           this.root.querySelector(".trigger")?.focus();
         }
@@ -770,7 +839,7 @@ const _FxSelect = class _FxSelect extends FxElement {
     this.root.querySelector(".clear")?.addEventListener("click", (e) => {
       e.stopPropagation();
       this.value = "";
-      this.removeAttribute("open");
+      this._fechar();
       this.render();
       this.dispatchEvent(
         new CustomEvent("change", { bubbles: true, composed: true, detail: { value: "" } })
@@ -792,6 +861,11 @@ _FxSelect.styles = css`
          e style inline no elemento definem a largura sem precisar do full. */
       width: var(--fx-select-width, max-content);
       min-width: var(--fx-select-min-width, 200px);
+      /* Espaço entre o campo e o painel + altura máxima do painel. Expostos
+         como custom property porque ::part() do lado do consumidor tem
+         prioridade MENOR que a folha do shadow root e não vence o top. */
+      --fx-select-panel-offset: 4px;
+      --fx-select-panel-max-height: 260px;
     }
     .trigger {
       display: inline-flex;
@@ -879,14 +953,15 @@ _FxSelect.styles = css`
     }
     .caret { font-size: calc(var(--fx-font-size) - 3px); color: var(--fx-text-muted); pointer-events: none; }
 
-    /* Painel do dropdown */
+    /* Painel do dropdown — a POSIÇÃO vertical é definida pelas regras
+       [data-placement] abaixo (o JS de ajustarPosicao decide), por isso
+       top/bottom não ficam aqui. */
     .panel {
       position: absolute;
-      top: calc(100% + 4px);
       left: 0;
       z-index: var(--fx-z-dropdown, 1000);
       width: max(100%, 220px);
-      max-height: 260px;
+      max-height: var(--fx-select-panel-max-height, 260px);
       overflow-y: auto;
       display: none;
       background: var(--fx-surface-background);
@@ -894,6 +969,16 @@ _FxSelect.styles = css`
       border-radius: var(--fx-radius-md);
       box-shadow: var(--fx-shadow-lg);
     }
+    /* Padrão: abre para baixo. */
+    :host([open]:not([data-placement='top'])) .panel {
+      top: calc(100% + var(--fx-select-panel-offset, 4px));
+    }
+    /* placement="top" explícito ou auto-flip: abre para cima. */
+    :host([open][placement='top']) .panel,
+    :host([open][data-placement='top']) .panel {
+      top: auto;
+      bottom: calc(100% + var(--fx-select-panel-offset, 4px));
+    }
     :host([open]) .panel { display: block; }
     .search {
       position: sticky;
@@ -941,6 +1026,9 @@ _FxSelect.styles = css`
     .clear:hover { color: var(--fx-color-danger); }
     .clear[hidden] { display: none; }
   `;
+_FxSelect.GAP = 4;
+_FxSelect.MARGEM = 8;
+_FxSelect.MIN_ALTURA = 80;
 let FxSelect = _FxSelect;
 function defineFxSelect() {
   return defineElement("fx-select", FxSelect);
@@ -3311,7 +3399,10 @@ const _FxTable = class _FxTable extends FxElement {
       "loading",
       "loading-message",
       "sort-field",
-      "sort-order"
+      "sort-order",
+      "rounded",
+      "radius",
+      "no-borders-x"
     ];
   }
   get data() {
@@ -3550,16 +3641,18 @@ const _FxTable = class _FxTable extends FxElement {
     this._shellKey = shellKey;
     this.setTemplate(`
       ${toolbarHtml}
-      <div class="table-wrap">
-        <div class="scroll">
-          <table part="table">
-            <thead><tr>${headHtml}</tr>${filterRow}</thead>
-            <tbody>${bodyHtml}</tbody>
-          </table>
+      <div class="frame${toolbar ? " has-toolbar" : ""}" part="frame">
+        <div class="table-wrap">
+          <div class="scroll">
+            <table part="table">
+              <thead><tr>${headHtml}</tr>${filterRow}</thead>
+              <tbody>${bodyHtml}</tbody>
+            </table>
+          </div>
+          ${loadingHtml}
         </div>
-        ${loadingHtml}
+        ${pagerHtml}
       </div>
-      ${pagerHtml}
     `);
     this.root.querySelectorAll("th.sortable").forEach((th) => {
       th.addEventListener("click", () => {
@@ -3691,14 +3784,61 @@ _FxTable.styles = css`
 			font-size: var(--fx-font-size);
 			color: var(--fx-text-default);
 			background: var(--fx-surface-background);
+			/* Raio da moldura (tabela + paginação). O atributo "rounded"
+			   sobrescreve este valor e o consumidor também pode sobrescrever
+			   por CSS: fx-table { --fx-table-radius: 20px; }. */
+			--fx-table-radius: var(--fx-radius-md);
+		}
+		/* Arredondamento das bordas — "none" deixa tudo reto, como nos demais
+		   tokens de radius do design system. "rounded" é o nome atual; "radius"
+		   segue aceito como alias para ficar consistente com o <fx-card>. */
+		:host([rounded="none"]),
+		:host([radius="none"]) {
+			--fx-table-radius: var(--fx-radius-none, 0);
+		}
+		:host([rounded="sm"]),
+		:host([radius="sm"]) {
+			--fx-table-radius: var(--fx-radius-sm);
+		}
+		:host([rounded="md"]),
+		:host([radius="md"]) {
+			--fx-table-radius: var(--fx-radius-md);
+		}
+		:host([rounded="lg"]),
+		:host([radius="lg"]) {
+			--fx-table-radius: var(--fx-radius-lg);
+		}
+		/* Moldura: uma única borda envolvendo a tabela E a paginação, para que
+		   o pager não fique "solto" fora do contorno da tabela. */
+		.frame {
+			border: 1px solid var(--fx-border-default);
+			border-radius: var(--fx-table-radius);
+			background: var(--fx-surface-background);
+		}
+		/* Com toolbar no topo, quem desenha a borda superior é a própria
+		   toolbar — a moldura desenha apenas o contorno restante. */
+		.frame.has-toolbar {
+			border-top: none;
+		}
+		/* "no-borders-x": mantém somente as bordas de topo e de base
+		   (tabela encaixada em um layout que já desenha as laterais). */
+		:host([no-borders-x]) .frame,
+		:host([no-borders-x]) .toolbar {
+			border-left: none;
+			border-right: none;
 		}
 		.table-wrap {
 			position: relative;
 		}
 		.scroll {
 			overflow-x: auto;
-			border: 1px solid var(--fx-border-default);
-			border-radius: var(--fx-radius-md);
+			/* O topo acompanha o raio da moldura; a base fica reta porque o
+			   rodapé (.pager) é quem a desenha. */
+			border-radius: var(--fx-table-radius) var(--fx-table-radius) 0 0;
+		}
+		/* Sem paginação não existe rodapé: a moldura fecha embaixo. */
+		:host(:not([pagination])) .scroll {
+			border-radius: var(--fx-table-radius);
 		}
 		table {
 			width: 100%;
@@ -3785,7 +3925,13 @@ _FxTable.styles = css`
 			align-items: center;
 			gap: var(--fx-space-sm);
 			flex-wrap: wrap;
-			padding: var(--fx-space-sm) 0;
+			/* O rodapé é parte da moldura: borda só no topo (separando da
+			   tabela) e o mesmo padding horizontal das células. Antes ele
+			   ficava fora do contorno, sem borda e sem respiro lateral. */
+			padding: var(--fx-space-sm) var(--fx-space-md);
+			border-top: 1px solid var(--fx-border-default);
+			border-radius: 0 0 var(--fx-table-radius) var(--fx-table-radius);
+			background: var(--fx-surface-background);
 		}
 		:host([pagination-position="center"]) .pager {
 			justify-content: center;
@@ -3834,15 +3980,27 @@ _FxTable.styles = css`
 			color: #fff;
 			font-weight: var(--fx-font-weight);
 		}
-		fx-select {
+		/* O seletor "Por página" só mostra números, então não pode herdar a
+		   largura padrão do <fx-select> (200px / 180px em size="sm"), que
+		   deixava o rodapé da paginação desproporcional. O limite tem que ser
+		   no HOST — apertar só ::part(trigger) não funciona, porque o
+		   trigger é width:100% e continua herdando o min-width do host.
+		   O painel (dropdown) continua largo (220px) em select.ts. */
+		fx-select.rows-sel {
 			vertical-align: middle;
+			/* Não deixa o flex do .pager esticar nem esmagar o controle. */
+			flex: none;
+			width: auto;
+			--fx-select-min-width: 56px;
+			--fx-select-min-width-sm: 56px;
 		}
-		fx-select::part(trigger) {
-			min-width: 64px !important;
-			min-height: var(--fx-size-sm) !important;
-			padding: 0 var(--fx-space-sm) !important;
-			border-radius: var(--fx-radius-sm) !important;
-			font-size: calc(var(--fx-font-size) - 2px) !important;
+		fx-select.rows-sel::part(trigger) {
+			min-width: 0;
+			min-height: var(--fx-size-sm);
+			/* Padding curto: sobra espaço para o número + caret. */
+			padding: 0 var(--fx-space-xs);
+			border-radius: var(--fx-radius-sm);
+			font-size: calc(var(--fx-font-size) - 2px);
 		}
 		.toolbar {
 			display: flex;
@@ -3852,7 +4010,7 @@ _FxTable.styles = css`
 			padding: var(--fx-space-sm) var(--fx-space-md);
 			border: 1px solid var(--fx-border-default);
 			border-bottom: none;
-			border-radius: var(--fx-radius-md) var(--fx-radius-md) 0 0;
+			border-radius: var(--fx-table-radius) var(--fx-table-radius) 0 0;
 			background: var(--fx-surface-background);
 		}
 		.toolbar:empty {
@@ -3873,7 +4031,7 @@ _FxTable.styles = css`
 			);
 			backdrop-filter: blur(2px);
 			z-index: 10;
-			border-radius: var(--fx-radius-md);
+			border-radius: var(--fx-table-radius) var(--fx-table-radius) 0 0;
 		}
 		.tbl-spinner {
 			width: 32px;
@@ -5650,6 +5808,24 @@ const _FxCard = class _FxCard extends FxElement {
         <footer part="footer"><slot name="footer"></slot></footer>
       </div>
     `);
+    this._syncSlots();
+    for (const name of ["header", "footer"]) {
+      this.root.querySelector(`slot[name="${name}"]`)?.addEventListener("slotchange", () => this._syncSlots());
+    }
+  }
+  /**
+   * Esconde `header`/`footer` quando o respectivo slot não recebeu nenhum nó.
+   * O `<slot>` fica no shadow e os nós no light DOM, então a checagem é feita
+   * via `assignedNodes()` — cobre conteúdo adicionado dinamicamente.
+   */
+  _syncSlots() {
+    for (const name of ["header", "footer"]) {
+      const slot = this.root.querySelector(`slot[name="${name}"]`);
+      const section = this.root.querySelector(name);
+      if (!slot || !section) continue;
+      const temConteudo = slot.assignedNodes({ flatten: true }).some((n) => n.nodeType === 1 || (n.textContent ?? "").trim() !== "") || name === "header" && Boolean(this.getAttr("heading"));
+      section.toggleAttribute("hidden", !temConteudo);
+    }
   }
 };
 _FxCard.styles = css`