@wrrdev/fenix-ui 1.1.8 → 1.1.10

package/dist/fenix-ui2.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"fenix-ui2.esm.js","sources":["../src/core/vue.ts"],"sourcesContent":["/**\n * Tipagem de componentes <fx-*> para Vue 3 (Volar / vue-tsc).\n *\n * Este módulo é OPT-IN: importe `@wrrdev/fenix-ui/vue` uma única vez\n * (ex.: no `main.ts`) para habilitar autocomplete + validação de atributos\n * dos elementos `fx-*` nos templates SFC.\n *\n * - `IntrinsicElementAttributes` (Vue 3.5+): ponto oficial de extensão para\n *   elementos nativos/custom — alimenta `NativeElements` e o\n *   `JSX.IntrinsicElements` usado pelo Volar para tags com hífen.\n * - `GlobalComponents`: registro adicional como componentes globais.\n */\nimport type {\n  FxAutocompleteProps,\n  FxAccordionPanelProps,\n  FxAccordionProps,\n  FxAlertProps,\n  FxAvatarProps,\n  FxBadgeProps,\n  FxBreadcrumbProps,\n  FxButtonProps,\n  FxCalendarProps,\n  FxCardProps,\n  FxCarouselProps,\n  FxCheckboxProps,\n  FxChipProps,\n  FxConfirmPopupProps,\n  FxDatepickerProps,\n  FxDialogProps,\n  FxDropdownItemProps,\n  FxDropdownProps,\n  FxDrawerProps,\n  FxEmptyStateProps,\n  FxFileUploadProps,\n  FxFloatlabelProps,\n  FxIconProps,\n  FxInputProps,\n  FxKnobProps,\n  FxMenuProps,\n  FxMultiselectProps,\n  FxOrderListProps,\n  FxPaginationProps,\n  FxPasswordStrengthProps,\n  FxPickListProps,\n  FxPopoverProps,\n  FxProgressProps,\n  FxRadioProps,\n  FxRatingProps,\n  FxSelectProps,\n  FxSkeletonProps,\n  FxSliderProps,\n  FxSpinnerProps,\n  FxStepperProps,\n  FxSwitchProps,\n  FxTableProps,\n  FxTabPanelProps,\n  FxTabsProps,\n  FxTextareaProps,\n  FxTimelineProps,\n  FxToastProps,\n  FxToggleButtonGroupProps,\n  FxTooltipProps,\n  FxTreeProps,\n} from './jsx';\n\nimport type {} from '@vue/runtime-dom';\n\ntype FxComp<P> = import('vue').FunctionalComponent<P>;\n\ndeclare module '@vue/runtime-core' {\n  interface GlobalComponents {\n    'fx-button': FxComp<FxButtonProps>;\n    'fx-badge': FxComp<FxBadgeProps>;\n    'fx-spinner': FxComp<FxSpinnerProps>;\n    'fx-input': FxComp<FxInputProps>;\n    'fx-select': FxComp<FxSelectProps>;\n    'fx-switch': FxComp<FxSwitchProps>;\n    'fx-checkbox': FxComp<FxCheckboxProps>;\n    'fx-radio': FxComp<FxRadioProps>;\n    'fx-textarea': FxComp<FxTextareaProps>;\n    'fx-multiselect': FxComp<FxMultiselectProps>;\n    'fx-calendar': FxComp<FxCalendarProps>;\n    'fx-datepicker': FxComp<FxDatepickerProps>;\n    'fx-table': FxComp<FxTableProps>;\n    'fx-floatlabel': FxComp<FxFloatlabelProps>;\n    'fx-dialog': FxComp<FxDialogProps>;\n    'fx-drawer': FxComp<FxDrawerProps>;\n    'fx-toast': FxComp<FxToastProps>;\n    'fx-tooltip': FxComp<FxTooltipProps>;\n    'fx-tabs': FxComp<FxTabsProps>;\n    'fx-tab-panel': FxComp<FxTabPanelProps>;\n    'fx-progress': FxComp<FxProgressProps>;\n    'fx-skeleton': FxComp<FxSkeletonProps>;\n    'fx-alert': FxComp<FxAlertProps>;\n    'fx-dropdown': FxComp<FxDropdownProps>;\n    'fx-dropdown-item': FxComp<FxDropdownItemProps>;\n    'fx-pagination': FxComp<FxPaginationProps>;\n    'fx-autocomplete': FxComp<FxAutocompleteProps>;\n    'fx-fileupload': FxComp<FxFileUploadProps>;\n    'fx-slider': FxComp<FxSliderProps>;\n    'fx-chip': FxComp<FxChipProps>;\n    'fx-avatar': FxComp<FxAvatarProps>;\n    'fx-icon': FxComp<FxIconProps>;\n    'fx-card': FxComp<FxCardProps>;\n    'fx-breadcrumb': FxComp<FxBreadcrumbProps>;\n    'fx-popover': FxComp<FxPopoverProps>;\n    'fx-stepper': FxComp<FxStepperProps>;\n    'fx-rating': FxComp<FxRatingProps>;\n    'fx-menu': FxComp<FxMenuProps>;\n    'fx-toggle-button-group': FxComp<FxToggleButtonGroupProps>;\n    'fx-empty-state': FxComp<FxEmptyStateProps>;\n    'fx-password-strength': FxComp<FxPasswordStrengthProps>;\n    'fx-timeline': FxComp<FxTimelineProps>;\n    'fx-carousel': FxComp<FxCarouselProps>;\n    'fx-tree': FxComp<FxTreeProps>;\n    'fx-confirmpopup': FxComp<FxConfirmPopupProps>;\n    'fx-knob': FxComp<FxKnobProps>;\n    'fx-accordion': FxComp<FxAccordionProps>;\n    'fx-accordion-panel': FxComp<FxAccordionPanelProps>;\n    'fx-orderlist': FxComp<FxOrderListProps>;\n    'fx-picklist': FxComp<FxPickListProps>;\n  }\n}\n\ndeclare module '@vue/runtime-dom' {\n  interface IntrinsicElementAttributes {\n    'fx-button': FxButtonProps;\n    'fx-badge': FxBadgeProps;\n    'fx-spinner': FxSpinnerProps;\n    'fx-input': FxInputProps;\n    'fx-select': FxSelectProps;\n    'fx-switch': FxSwitchProps;\n    'fx-checkbox': FxCheckboxProps;\n    'fx-radio': FxRadioProps;\n    'fx-textarea': FxTextareaProps;\n    'fx-multiselect': FxMultiselectProps;\n    'fx-calendar': FxCalendarProps;\n    'fx-datepicker': FxDatepickerProps;\n    'fx-table': FxTableProps;\n    'fx-floatlabel': FxFloatlabelProps;\n    'fx-dialog': FxDialogProps;\n    'fx-drawer': FxDrawerProps;\n    'fx-toast': FxToastProps;\n    'fx-tooltip': FxTooltipProps;\n    'fx-tabs': FxTabsProps;\n    'fx-tab-panel': FxTabPanelProps;\n    'fx-progress': FxProgressProps;\n    'fx-skeleton': FxSkeletonProps;\n    'fx-alert': FxAlertProps;\n    'fx-dropdown': FxDropdownProps;\n    'fx-dropdown-item': FxDropdownItemProps;\n    'fx-pagination': FxPaginationProps;\n    'fx-autocomplete': FxAutocompleteProps;\n    'fx-fileupload': FxFileUploadProps;\n    'fx-slider': FxSliderProps;\n    'fx-chip': FxChipProps;\n    'fx-avatar': FxAvatarProps;\n    'fx-icon': FxIconProps;\n    'fx-card': FxCardProps;\n    'fx-breadcrumb': FxBreadcrumbProps;\n    'fx-popover': FxPopoverProps;\n    'fx-stepper': FxStepperProps;\n    'fx-rating': FxRatingProps;\n    'fx-menu': FxMenuProps;\n    'fx-toggle-button-group': FxToggleButtonGroupProps;\n    'fx-empty-state': FxEmptyStateProps;\n    'fx-password-strength': FxPasswordStrengthProps;\n    'fx-timeline': FxTimelineProps;\n    'fx-carousel': FxCarouselProps;\n    'fx-tree': FxTreeProps;\n    'fx-confirmpopup': FxConfirmPopupProps;\n    'fx-knob': FxKnobProps;\n    'fx-accordion': FxAccordionProps;\n    'fx-accordion-panel': FxAccordionPanelProps;\n    'fx-orderlist': FxOrderListProps;\n    'fx-picklist': FxPickListProps;\n  }\n}\n\n/** Marcador para `import '@wrrdev/fenix-ui/vue'` funcionar como side-effect import. */\nexport const FX_VUE_TYPES = true as const;\n\n/** Reexporta os tipos nomeados de props para consumidores Vue. */\nexport type * from './jsx';\n\n"],"names":[],"mappings":"AAoLO,MAAM,eAAe;"}
+{"version":3,"file":"fenix-ui2.esm.js","sources":["../src/core/vue.ts"],"sourcesContent":["/**\n * Tipagem de componentes <fx-*> para Vue 3 (Volar / vue-tsc).\n *\n * Este módulo é OPT-IN: importe `@wrrdev/fenix-ui/vue` uma única vez\n * (ex.: no `main.ts`) para habilitar autocomplete + validação de atributos\n * dos elementos `fx-*` nos templates SFC.\n *\n * - `IntrinsicElementAttributes` (Vue 3.5+): ponto oficial de extensão para\n *   elementos nativos/custom — alimenta `NativeElements` e o\n *   `JSX.IntrinsicElements` usado pelo Volar para tags com hífen.\n * - `GlobalComponents`: registro adicional como componentes globais.\n */\nimport type {\n  FxAutocompleteProps,\n  FxAccordionPanelProps,\n  FxAccordionProps,\n  FxAlertProps,\n  FxAvatarProps,\n  FxBadgeProps,\n  FxBreadcrumbProps,\n  FxButtonProps,\n  FxCalendarProps,\n  FxCardProps,\n  FxCarouselProps,\n  FxCellProps,\n  FxCheckboxProps,\n  FxChipProps,\n  FxColumnProps,\n  FxConfirmPopupProps,\n  FxDatepickerProps,\n  FxDialogProps,\n  FxDropdownItemProps,\n  FxDropdownProps,\n  FxDrawerProps,\n  FxEmptyStateProps,\n  FxFileUploadProps,\n  FxFloatlabelProps,\n  FxIconProps,\n  FxInputProps,\n  FxKnobProps,\n  FxMenuProps,\n  FxMultiselectProps,\n  FxOrderListProps,\n  FxPaginationProps,\n  FxPasswordStrengthProps,\n  FxPickListProps,\n  FxPopoverProps,\n  FxProgressProps,\n  FxRadioProps,\n  FxRatingProps,\n  FxSelectProps,\n  FxSkeletonProps,\n  FxSliderProps,\n  FxSpinnerProps,\n  FxStepperProps,\n  FxSwitchProps,\n  FxTableProps,\n  FxTabPanelProps,\n  FxTabsProps,\n  FxTextareaProps,\n  FxTimelineProps,\n  FxToastProps,\n  FxToggleButtonGroupProps,\n  FxToolbarProps,\n  FxTooltipProps,\n  FxTreeProps,\n} from './jsx';\n\nimport type {} from '@vue/runtime-dom';\n\ntype FxComp<P> = import('vue').FunctionalComponent<P>;\n\ndeclare module '@vue/runtime-core' {\n  interface GlobalComponents {\n    'fx-button': FxComp<FxButtonProps>;\n    'fx-badge': FxComp<FxBadgeProps>;\n    'fx-spinner': FxComp<FxSpinnerProps>;\n    'fx-input': FxComp<FxInputProps>;\n    'fx-select': FxComp<FxSelectProps>;\n    'fx-switch': FxComp<FxSwitchProps>;\n    'fx-checkbox': FxComp<FxCheckboxProps>;\n    'fx-radio': FxComp<FxRadioProps>;\n    'fx-textarea': FxComp<FxTextareaProps>;\n    'fx-multiselect': FxComp<FxMultiselectProps>;\n    'fx-calendar': FxComp<FxCalendarProps>;\n    'fx-datepicker': FxComp<FxDatepickerProps>;\n    'fx-table': FxComp<FxTableProps>;\n    'fx-column': FxComp<FxColumnProps>;\n    'fx-cell': FxComp<FxCellProps>;\n    'fx-toolbar': FxComp<FxToolbarProps>;\n    'fx-floatlabel': FxComp<FxFloatlabelProps>;\n    'fx-dialog': FxComp<FxDialogProps>;\n    'fx-drawer': FxComp<FxDrawerProps>;\n    'fx-toast': FxComp<FxToastProps>;\n    'fx-tooltip': FxComp<FxTooltipProps>;\n    'fx-tabs': FxComp<FxTabsProps>;\n    'fx-tab-panel': FxComp<FxTabPanelProps>;\n    'fx-progress': FxComp<FxProgressProps>;\n    'fx-skeleton': FxComp<FxSkeletonProps>;\n    'fx-alert': FxComp<FxAlertProps>;\n    'fx-dropdown': FxComp<FxDropdownProps>;\n    'fx-dropdown-item': FxComp<FxDropdownItemProps>;\n    'fx-pagination': FxComp<FxPaginationProps>;\n    'fx-autocomplete': FxComp<FxAutocompleteProps>;\n    'fx-fileupload': FxComp<FxFileUploadProps>;\n    'fx-slider': FxComp<FxSliderProps>;\n    'fx-chip': FxComp<FxChipProps>;\n    'fx-avatar': FxComp<FxAvatarProps>;\n    'fx-icon': FxComp<FxIconProps>;\n    'fx-card': FxComp<FxCardProps>;\n    'fx-breadcrumb': FxComp<FxBreadcrumbProps>;\n    'fx-popover': FxComp<FxPopoverProps>;\n    'fx-stepper': FxComp<FxStepperProps>;\n    'fx-rating': FxComp<FxRatingProps>;\n    'fx-menu': FxComp<FxMenuProps>;\n    'fx-toggle-button-group': FxComp<FxToggleButtonGroupProps>;\n    'fx-empty-state': FxComp<FxEmptyStateProps>;\n    'fx-password-strength': FxComp<FxPasswordStrengthProps>;\n    'fx-timeline': FxComp<FxTimelineProps>;\n    'fx-carousel': FxComp<FxCarouselProps>;\n    'fx-tree': FxComp<FxTreeProps>;\n    'fx-confirmpopup': FxComp<FxConfirmPopupProps>;\n    'fx-knob': FxComp<FxKnobProps>;\n    'fx-accordion': FxComp<FxAccordionProps>;\n    'fx-accordion-panel': FxComp<FxAccordionPanelProps>;\n    'fx-orderlist': FxComp<FxOrderListProps>;\n    'fx-picklist': FxComp<FxPickListProps>;\n  }\n}\n\ndeclare module '@vue/runtime-dom' {\n  interface IntrinsicElementAttributes {\n    'fx-button': FxButtonProps;\n    'fx-badge': FxBadgeProps;\n    'fx-spinner': FxSpinnerProps;\n    'fx-input': FxInputProps;\n    'fx-select': FxSelectProps;\n    'fx-switch': FxSwitchProps;\n    'fx-checkbox': FxCheckboxProps;\n    'fx-radio': FxRadioProps;\n    'fx-textarea': FxTextareaProps;\n    'fx-multiselect': FxMultiselectProps;\n    'fx-calendar': FxCalendarProps;\n    'fx-datepicker': FxDatepickerProps;\n    'fx-table': FxTableProps;\n    'fx-column': FxColumnProps;\n    'fx-cell': FxCellProps;\n    'fx-toolbar': FxToolbarProps;\n    'fx-floatlabel': FxFloatlabelProps;\n    'fx-dialog': FxDialogProps;\n    'fx-drawer': FxDrawerProps;\n    'fx-toast': FxToastProps;\n    'fx-tooltip': FxTooltipProps;\n    'fx-tabs': FxTabsProps;\n    'fx-tab-panel': FxTabPanelProps;\n    'fx-progress': FxProgressProps;\n    'fx-skeleton': FxSkeletonProps;\n    'fx-alert': FxAlertProps;\n    'fx-dropdown': FxDropdownProps;\n    'fx-dropdown-item': FxDropdownItemProps;\n    'fx-pagination': FxPaginationProps;\n    'fx-autocomplete': FxAutocompleteProps;\n    'fx-fileupload': FxFileUploadProps;\n    'fx-slider': FxSliderProps;\n    'fx-chip': FxChipProps;\n    'fx-avatar': FxAvatarProps;\n    'fx-icon': FxIconProps;\n    'fx-card': FxCardProps;\n    'fx-breadcrumb': FxBreadcrumbProps;\n    'fx-popover': FxPopoverProps;\n    'fx-stepper': FxStepperProps;\n    'fx-rating': FxRatingProps;\n    'fx-menu': FxMenuProps;\n    'fx-toggle-button-group': FxToggleButtonGroupProps;\n    'fx-empty-state': FxEmptyStateProps;\n    'fx-password-strength': FxPasswordStrengthProps;\n    'fx-timeline': FxTimelineProps;\n    'fx-carousel': FxCarouselProps;\n    'fx-tree': FxTreeProps;\n    'fx-confirmpopup': FxConfirmPopupProps;\n    'fx-knob': FxKnobProps;\n    'fx-accordion': FxAccordionProps;\n    'fx-accordion-panel': FxAccordionPanelProps;\n    'fx-orderlist': FxOrderListProps;\n    'fx-picklist': FxPickListProps;\n  }\n}\n\n/** Marcador para `import '@wrrdev/fenix-ui/vue'` funcionar como side-effect import. */\nexport const FX_VUE_TYPES = true as const;\n\n/** Reexporta os tipos nomeados de props para consumidores Vue. */\nexport type * from './jsx';\n\n"],"names":[],"mappings":"AA6LO,MAAM,eAAe;"}

package/dist/fenix-ui4.esm.js

@@ -4,8 +4,8 @@ var __typeError = (msg) => {
 var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _FxToast_instances, render_fn;
-import { a as FENIX_ICON_BASE_CSS, f as fenixIconHtml, e as esc, i as isFenixIconName, l as loadFenixIconsFont } from "./assets/font-CF0TXsAP.js";
+var _FxToast_instances, syncProgress_fn, render_fn;
+import { a as FENIX_ICON_BASE_CSS, f as fenixIconHtml, e as esc, l as loadFenixIconsFont, i as isFenixIconName } from "./assets/font-CF0TXsAP.js";
 import { s, g } from "./assets/font-CF0TXsAP.js";
 const lightTokens = {
   color: {
@@ -3301,12 +3301,16 @@ const _FxTable = class _FxTable extends FxElement {
       "rows",
       "rows-options",
       "striped",
+      "hover",
+      "toolbar",
       "empty-message",
       "pagination-position",
       "lazy",
       "total",
       "loading",
-      "loading-message"
+      "loading-message",
+      "sort-field",
+      "sort-order"
     ];
   }
   get data() {
@@ -3335,7 +3339,7 @@ const _FxTable = class _FxTable extends FxElement {
   }
   get columns() {
     return [...this.querySelectorAll("fx-column")].map((c) => {
-      const tpl = c.querySelector("template");
+      const tpl = this._resolveCellTemplate(c);
       const direct = tpl ? void 0 : c.innerHTML.trim();
       const align = c.getAttribute("align") ?? "left";
       return {
@@ -3349,13 +3353,71 @@ const _FxTable = class _FxTable extends FxElement {
       };
     });
   }
+  /**
+   * Resolve o template de célula de uma `<fx-column>`, em ordem de prioridade:
+   *
+   * 1. `<fx-cell>` — **recomendado**. Tag própria, sem significado especial
+   *    para Vue/React/Angular/Svelte: nenhum framework a intercepta, então o
+   *    `innerHTML` sempre chega intacto ao componente. O light DOM do
+   *    `<fx-table>` não é exibido (a tabela não usa `<slot>`), então o
+   *    conteúdo-fonte nunca aparece na tela.
+   *
+   *    ⚠️ O conteúdo é TEXTO CRU para o motor de expressões: o `{{ }}` NÃO é
+   *    interpretado pelo framework hospedeiro. Cada um precisa neutralizar a
+   *    própria sintaxe antes (ver o cabeçalho do arquivo): `v-pre` no Vue,
+   *    `{'{{ }}'}` no JSX, `ngNonBindable` no Angular, string/entidades no
+   *    Svelte. Sem isso o template não chega ao `renderCell`.
+   * 2. `template="#id"` (ou `template="id"`) — aponta para um `<template>`
+   *    declarado **fora** da tabela, útil em React/Angular, onde é mais
+   *    simples manter o markup num único lugar.
+   * 3. `<template>` dentro da coluna — forma **legada**, mantida por
+   *    compatibilidade. Em Vue 3 ela vira um bloco do compilador e em React os
+   *    filhos são gerenciados pelo framework; nos dois casos o `innerHTML`
+   *    chega vazio e a célula não renderiza. Prefira `<fx-cell>`.
+   */
+  _resolveCellTemplate(c) {
+    const cell = c.querySelector(":scope > fx-cell");
+    if (cell) return cell;
+    const ref = c.getAttribute("template");
+    if (ref) {
+      const alvo = this._resolveRef(ref);
+      if (alvo) return alvo;
+    }
+    return c.querySelector("template");
+  }
   get toolbarTemplate() {
-    return this.querySelector(
-      'template[slot="toolbar"]'
-    );
+    const bar = this.querySelector(":scope > fx-toolbar");
+    if (bar) return bar;
+    const ref = this.getAttr("toolbar");
+    if (ref) {
+      const alvo = this._resolveRef(ref);
+      if (alvo) return alvo;
+    }
+    return this.querySelector('template[slot="toolbar"]');
+  }
+  /**
+   * Resolve `ref` para um elemento: `#id`/`id` ⇒ `getElementById` no
+   * documento; qualquer outro valor é tratado como seletor CSS relativo à
+   * própria tabela. Valores inválidos devolvem `null` (sem exceção).
+   */
+  _resolveRef(ref) {
+    const valor = ref.trim();
+    if (!valor) return null;
+    const doc = this.ownerDocument;
+    if (valor.startsWith("#")) return doc?.getElementById(valor.slice(1)) ?? null;
+    if (/^[.#[>]/.test(valor)) {
+      try {
+        return this.querySelector(valor);
+      } catch {
+        return null;
+      }
+    }
+    return doc?.getElementById(valor) ?? null;
   }
   connectedCallback() {
     this._parseDataAttribute();
+    this._parseSortAttributes();
+    loadFenixIconsFont();
     super.connectedCallback();
     this._columnObserver = new MutationObserver(() => this.render());
     this._columnObserver.observe(this, { childList: true, subtree: true });
@@ -3364,6 +3426,13 @@ const _FxTable = class _FxTable extends FxElement {
     this._columnObserver?.disconnect();
     super.disconnectedCallback();
   }
+  /** Ordenação inicial via `sort-field` / `sort-order` (documentados na API). */
+  _parseSortAttributes() {
+    const field = this.getAttr("sort-field");
+    if (field) this.sortField = field;
+    const order = this.getAttr("sort-order");
+    if (order === "asc" || order === "desc") this.sortDir = order === "asc" ? 1 : -1;
+  }
   _parseDataAttribute() {
     if (!this._data.length) {
       try {
@@ -3447,11 +3516,11 @@ const _FxTable = class _FxTable extends FxElement {
     const pagerHtml = !paginated ? "" : `
       <div class="pager" part="pager">
         <span class="info">Página ${this.page + 1} de ${pages} · ${total} registros</span>
-        <button type="button" class="pg-btn" data-pg="first" ${this.page === 0 ? "disabled" : ""}>«</button>
-        <button type="button" class="pg-btn" data-pg="prev" ${this.page === 0 ? "disabled" : ""}>‹</button>
+        <button type="button" class="pg-btn" part="first" aria-label="Primeira página" data-pg="first" ${this.page === 0 ? "disabled" : ""}>${fenixIconHtml("first_page")}</button>
+        <button type="button" class="pg-btn" part="prev" aria-label="Página anterior" data-pg="prev" ${this.page === 0 ? "disabled" : ""}>${fenixIconHtml("navigate_before")}</button>
         ${Array.from({ length: pages }, (_, p) => `<button type="button" class="pg-btn" data-pg="${p}" aria-current="${p === this.page}">${p + 1}</button>`).join("")}
-        <button type="button" class="pg-btn" data-pg="next" ${this.page >= pages - 1 ? "disabled" : ""}>›</button>
-        <button type="button" class="pg-btn" data-pg="last" ${this.page >= pages - 1 ? "disabled" : ""}>»</button>
+        <button type="button" class="pg-btn" part="next" aria-label="Próxima página" data-pg="next" ${this.page >= pages - 1 ? "disabled" : ""}>${fenixIconHtml("navigate_next")}</button>
+        <button type="button" class="pg-btn" part="last" aria-label="Última página" data-pg="last" ${this.page >= pages - 1 ? "disabled" : ""}>${fenixIconHtml("last_page")}</button>
         <label class="info">${esc("Por página:")}
           <fx-select class="rows-sel" size="sm" value="${this.rowsPerPage}" aria-label="Itens por página">${this.getAttr(
       "rows-options",
@@ -3588,6 +3657,7 @@ const _FxTable = class _FxTable extends FxElement {
   }
 };
 _FxTable.styles = css`
+		${FENIX_ICON_BASE_CSS}
 		:host {
 			display: block;
 			font-family: var(--fx-font-family);
@@ -3664,17 +3734,14 @@ _FxTable.styles = css`
 			transition: background-color var(--fx-motion-duration-fast)
 				var(--fx-motion-easing);
 		}
-		tbody tr:hover {
-			background: color-mix(
-				in srgb,
-				var(--fx-color-primary) 8%,
-				transparent
-			);
-		}
+		/* Listrado: alterna a superfície (cinza). Antes usava
+		   --fx-surface-background, que é a MESMA cor do fundo do :host e
+		   portanto pintava branco sobre branco (listrado invisível). */
 		:host([striped]) tbody tr:nth-child(even) {
-			background: var(--fx-surface-background);
+			background: var(--fx-surface-surface, #f8fafc);
 		}
-		:host([striped]) tbody tr:hover {
+		/* O hover é opt-in via atributo (o clique na linha continua sempre ativo). */
+		:host([hover]) tbody tr:hover {
 			background: color-mix(
 				in srgb,
 				var(--fx-color-primary) 8%,
@@ -3704,6 +3771,9 @@ _FxTable.styles = css`
 			font-size: calc(var(--fx-font-size) - 2px);
 		}
 		.pg-btn {
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
 			min-width: var(--fx-size-sm);
 			height: var(--fx-size-sm);
 			font: inherit;
@@ -3717,6 +3787,12 @@ _FxTable.styles = css`
 			transition: border-color var(--fx-motion-duration-fast)
 				var(--fx-motion-easing);
 		}
+		/* O glifo precisa de 1px a mais que o dígito: a altura de traço do ícone é
+		   maior que a do número, então igualar os dois font-size deixa a seta
+		   visivelmente maior que o texto. */
+		.pg-btn .fx-icon {
+			font-size: calc(var(--fx-font-size) - 1px);
+		}
 		.pg-btn:hover:not(:disabled):not([aria-current="true"]) {
 			border-color: var(--fx-color-primary);
 			color: var(--fx-color-primary);
@@ -7153,6 +7229,48 @@ const CARD_CSS = `
   color: var(--fx-text-muted, #64748b); font-size: 15px; padding: 2px 4px; border-radius: 4px;
 }
 .close:hover { color: var(--fx-color-danger, #f43f5e); background: var(--fx-surface-surface-hover, rgba(0,0,0,.05)); }
+
+/* --- Barra de contagem regressiva (atributo progress) ---
+   Fica na base do card e esvazia durante a duração, na cor do kind (--kind) —
+   ou seja, acompanha success/error/warning/info sem configuração extra.
+
+   O lado é configurável pelo atributo progress-origin (padrão: left):
+     left  → a barra drena da direita para a esquerda (ancorada à esquerda)
+     right → a barra drena da esquerda para a direita (ancorada à direita)
+   A origem entra como custom property, então os keyframes são compartilhados.
+
+   Usa escalaX em vez de width: a animação escreve só na compositor, sem
+   reflow por frame. */
+.card { position: relative; overflow: hidden; }
+.progress {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 3px;
+  background: var(--kind);
+  transform-origin: var(--toast-progress-origin, left center);
+  transform: scaleX(1);
+  border-radius: 0 0 var(--fx-radius-md, 8px) var(--fx-radius-md, 8px);
+  pointer-events: none;
+  will-change: transform;
+}
+.progress.run { animation: fx-toast-drain var(--toast-duration, 4000ms) linear forwards; }
+/* No modo hover a animação fica parada até o cursor/foco entrar no card. */
+.card:hover .progress.run,
+.card:focus-within .progress.run { animation-play-state: running; }
+@keyframes fx-toast-drain {
+  from { transform: scaleX(1); }
+  to   { transform: scaleX(0); }
+}
+/* A barra só começa a correr no 2º frame: no 1º ela já apareceria zerada
+   (o elemento acabou de ser inserido e a animação aplica o estado final). */
+.card.entering .progress { animation: none; }
+/* Ao dispensar, congela a barra: ela some junto com o card em .2s. */
+.card.leaving .progress { animation-play-state: paused; }
+@media (prefers-reduced-motion: reduce) {
+  .progress.run { animation-duration: 0.01ms; }
+}
 `;
 class FxToast extends HTMLElement {
   constructor() {
@@ -7162,7 +7280,51 @@ class FxToast extends HTMLElement {
     this.attachShadow({ mode: "open" });
   }
   static get observedAttributes() {
-    return ["kind", "title", "message", "duration", "icon", "mode"];
+    return ["kind", "title", "message", "duration", "icon", "mode", "progress", "progress-origin"];
+  }
+  /**
+   * Exibe a barra de contagem regressiva na base do card.
+   *
+   * A barra esvazia da esquerda para a direita durante exatamente `duration`
+   * e usa a cor do `kind`. Com `duration="0"` (toast fixo) a barra é
+   * omitida — não há tempo restante a representar.
+   *
+   * - `'always'` (ou atributo vazio): barra sempre correndo.
+   * - `'hover'`: a barra só corre enquanto o cursor estiver sobre o toast;
+   *   ao sair, a animação pausa, então dá tempo de ler a mensagem.
+   * - `'paused'`: barra visível, porém parada.
+   */
+  get progress() {
+    if (!this.hasAttribute("progress")) return void 0;
+    const v = this.getAttribute("progress");
+    return v === "hover" || v === "paused" ? v : "always";
+  }
+  set progress(value) {
+    if (value) this.setAttribute("progress", value);
+    else this.removeAttribute("progress");
+  }
+  /**
+   * Lado a partir do qual a barra esvazia.
+   *
+   * - `'left'` (padrão): a barra fica ancorada à esquerda e drena da direita
+   *   para a esquerda.
+   * - `'right'`: a barra fica ancorada à direita e drena da esquerda para a
+   *   direita (espelhado).
+   *
+   * Só tem efeito junto com `progress`; qualquer valor fora da lista cai em
+   * `'left'`.
+   */
+  get progressOrigin() {
+    return this.getAttribute("progress-origin") === "right" ? "right" : "left";
+  }
+  set progressOrigin(value) {
+    this.setAttribute("progress-origin", value);
+  }
+  /** Duração efetiva em ms (0 = fixo). Mesma regra usada no timer. */
+  get safeDuration() {
+    const dur = Number(this.getAttribute("duration") ?? "4000");
+    if (dur === 0) return 0;
+    return Math.max(Number.isNaN(dur) ? 4e3 : dur, 1e3);
   }
   /** Esquema de cores forçado do card: 'light' | 'dark' | undefined (segue o tema). */
   get mode() {
@@ -7175,16 +7337,21 @@ class FxToast extends HTMLElement {
   }
   connectedCallback() {
     if (!this.shadowRoot.firstChild) __privateMethod(this, _FxToast_instances, render_fn).call(this);
-    const dur = Number(this.getAttribute("duration") ?? "4000");
-    const safe = dur === 0 ? 0 : Math.max(Number.isNaN(dur) ? 4e3 : dur, 1e3);
-    if (!Number.isNaN(safe) && safe > 0 && !this.timer) {
+    const safe = this.safeDuration;
+    if (safe > 0 && !this.timer) {
       this.timer = setTimeout(() => this.dismiss(), safe);
     }
+    __privateMethod(this, _FxToast_instances, syncProgress_fn).call(this);
   }
   disconnectedCallback() {
     if (this.timer) clearTimeout(this.timer);
     this.timer = null;
   }
+  attributeChangedCallback(name) {
+    if (name === "duration" || name === "progress" || name === "progress-origin" || name === "kind") {
+      __privateMethod(this, _FxToast_instances, syncProgress_fn).call(this);
+    }
+  }
   dismiss() {
     if (this.timer) clearTimeout(this.timer);
     this.timer = null;
@@ -7198,6 +7365,36 @@ class FxToast extends HTMLElement {
   }
 }
 _FxToast_instances = new WeakSet();
+/**
+ * Aplica (ou remove) a barra de contagem regressiva.
+ *
+ * A barra só existe com `progress` e `duration > 0`. O tempo da animação
+ * vem de `--toast-duration`, sempre igual ao do `setTimeout` que fecha o
+ * toast — assim a barra e o desaparecimento nunca desalinham.
+ */
+syncProgress_fn = function() {
+  const card = this.shadowRoot?.querySelector(".card");
+  if (!card) return;
+  const bar = this.shadowRoot.querySelector(".progress");
+  const mode = this.progress;
+  const dur = this.safeDuration;
+  const shouldShow = !!mode && dur > 0;
+  if (!shouldShow) {
+    bar?.remove();
+    card.classList.remove("entering");
+    return;
+  }
+  if (!bar) {
+    this.shadowRoot.querySelector(".card").insertAdjacentHTML("beforeend", '<span class="progress" part="progress" aria-hidden="true"></span>');
+  }
+  const el = this.shadowRoot.querySelector(".progress");
+  el.style.setProperty("--toast-duration", `${dur}ms`);
+  el.style.setProperty("--toast-progress-origin", `${this.progressOrigin} center`);
+  el.classList.remove("run");
+  if (mode !== "paused") el.classList.add("run");
+  card.classList.add("entering");
+  requestAnimationFrame(() => requestAnimationFrame(() => card.classList.remove("entering")));
+};
 render_fn = function() {
   const kind = this.getAttribute("kind") || "info";
   const title = this.getAttribute("title") ?? "";
@@ -7267,6 +7464,8 @@ class ToastApi {
     el.setAttribute("position", o.position ?? "top-right");
     el.setAttribute("duration", String(o.duration ?? 4e3));
     if (o.mode) el.setAttribute("mode", o.mode);
+    if (o.progress) el.setAttribute("progress", o.progress);
+    if (o.progressOrigin) el.setAttribute("progress-origin", o.progressOrigin);
     regionFor(o.position ?? "top-right").appendChild(el);
     this.map.set(id, el);
     return id;
@@ -8364,6 +8563,10 @@ _FxDrawer.styles = css`
 			position: sticky;
 			top: 0;
 			background: var(--fx-surface-background);
+			/* O conteúdo do drawer (ex.: abas da customização de tema)
+			   rola por trás do header: sem z-index o texto passava POR CIMA
+			   e o header parecia transparente. */
+			z-index: 1;
 		}
 		.title {
 			font-weight: 700;
@@ -8428,6 +8631,10 @@ const _FxPagination = class _FxPagination extends FxElement {
   get pages() {
     return Math.max(1, Math.ceil(this.total / this.rows));
   }
+  connectedCallback() {
+    loadFenixIconsFont();
+    super.connectedCallback();
+  }
   render() {
     const pages = this.pages;
     const current = Math.min(Math.max(1, this.page), pages);
@@ -8438,11 +8645,13 @@ const _FxPagination = class _FxPagination extends FxElement {
     const to = Math.min(current * this.rows, this.total);
     this.setTemplate(`
       <span class="info">${this.total ? `${from}-${to} de ${this.total}` : "0 itens"}</span>
-      <button type="button" class="nav" part="prev" data-go="${current - 1}" ${current <= 1 ? "disabled" : ""}>‹</button>
+      <button type="button" class="nav" part="first" aria-label="Primeira página" data-go="1" ${current <= 1 ? "disabled" : ""}>${fenixIconHtml("first_page")}</button>
+      <button type="button" class="nav" part="prev" aria-label="Página anterior" data-go="${current - 1}" ${current <= 1 ? "disabled" : ""}>${fenixIconHtml("navigate_before")}</button>
       ${window_[0] !== 1 && pages > 5 ? `<button type="button" class="nav" data-go="1">1</button>` : ""}
       ${window_.map((p) => `<button type="button" class="nav ${p === current ? "active" : ""}" data-go="${p}">${p}</button>`).join("")}
       ${window_[window_.length - 1] !== pages && pages > 5 ? `<button type="button" class="nav" data-go="${pages}">${pages}</button>` : ""}
-      <button type="button" class="nav" part="next" data-go="${current + 1}" ${current >= pages ? "disabled" : ""}>›</button>
+      <button type="button" class="nav" part="next" aria-label="Próxima página" data-go="${current + 1}" ${current >= pages ? "disabled" : ""}>${fenixIconHtml("navigate_next")}</button>
+      <button type="button" class="nav" part="last" aria-label="Última página" data-go="${pages}" ${current >= pages ? "disabled" : ""}>${fenixIconHtml("last_page")}</button>
       ${opts.length ? `
         <fx-select class="rows-sel" part="rows" size="sm" value="${this.rows}" aria-label="Itens por página">
           ${opts.map((o) => `<option value="${esc(o)}">${esc(o)}</option>`).join("")}
@@ -8478,6 +8687,7 @@ const _FxPagination = class _FxPagination extends FxElement {
   }
 };
 _FxPagination.styles = css`
+    ${FENIX_ICON_BASE_CSS}
     :host {
       display: flex;
       align-items: center;
@@ -8489,6 +8699,9 @@ _FxPagination.styles = css`
     :host([position='center']) { justify-content: center; }
     :host([position='right']) { justify-content: flex-end; }
     .nav {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
       min-width: var(--fx-size-sm);
       height: var(--fx-size-sm);
       border: 1px solid var(--fx-border-default);
@@ -8503,6 +8716,10 @@ _FxPagination.styles = css`
         border-color var(--fx-motion-duration-fast) var(--fx-motion-easing),
         background var(--fx-motion-duration-fast) var(--fx-motion-easing);
     }
+    /* O glifo precisa de 1px a mais que o dígito: a altura de traço do ícone é
+       maior que a do número, então igualar os dois font-size deixa a seta
+       visivelmente maior que o texto. */
+    .nav .fx-icon { font-size: calc(var(--fx-font-size) - 1px); }
     .nav:hover:not([disabled]):not(.active) { border-color: var(--fx-color-primary); color: var(--fx-color-primary); }
     .nav[disabled] { opacity: 0.5; cursor: not-allowed; }
     .nav.active {