@ngx-smz/ui-kit 21.9.0-next.9 → 21.10.0-next.2

package/fesm2022/ngx-smz-ui-kit.mjs

@@ -173,17 +173,26 @@ const SINGLE_GROUPS = [
 function tokensOf(value) {
     return (value ?? '').split(/\s+/).filter(Boolean);
 }
-function hasPrefix(tokens, prefixes) {
-    return tokens.some((token) => prefixes.some((prefix) => token.startsWith(prefix)));
+/**
+ * Utilitario de padding de verdade (`p-4`, `px-[3px]`, `pl-px`, `px-input-x`), e nao uma classe qualquer que
+ * so comeca com "p-" (`p-col-12`, `p-column-filter`, ...), que nao pode remover o padding base do componente.
+ */
+const PADDING_UTILITY = /^p([xytblrse]?)-(?:\d|\[|px$|auto$|input-|control-)/;
+function isPadding(token, sides) {
+    const match = PADDING_UTILITY.exec(token);
+    return match !== null && sides.includes(`p${match[1]}`);
+}
+function hasPadding(tokens, sides) {
+    return tokens.some((token) => isPadding(token, sides));
 }
 /** Resolve o padding de um eixo (x ou y) quando o consumidor sobrescreve so um lado. */
 function resolveAxis(token, axis, extra) {
-    const all = hasPrefix(extra, ['p-']);
-    const both = hasPrefix(extra, [`p${axis}-`]);
-    const sides = axis === 'x' ? ['pl-', 'ps-'] : ['pt-'];
-    const otherSides = axis === 'x' ? ['pr-', 'pe-'] : ['pb-'];
-    const first = hasPrefix(extra, sides);
-    const second = hasPrefix(extra, otherSides);
+    const all = hasPadding(extra, ['p']);
+    const both = hasPadding(extra, [`p${axis}`]);
+    const sides = axis === 'x' ? ['pl', 'ps'] : ['pt'];
+    const otherSides = axis === 'x' ? ['pr', 'pe'] : ['pb'];
+    const first = hasPadding(extra, sides);
+    const second = hasPadding(extra, otherSides);
     const value = token.slice(3);
     if (all || both || (first && second))
         return null;
@@ -1707,6 +1716,44 @@ class SmzDialogRef {
     }
 }
 
+const KEYS = {
+    width: 'width',
+    height: 'height',
+    minWidth: 'minWidth',
+    'min-width': 'minWidth',
+    maxWidth: 'maxWidth',
+    'max-width': 'maxWidth',
+    minHeight: 'minHeight',
+    'min-height': 'minHeight',
+    maxHeight: 'maxHeight',
+    'max-height': 'maxHeight',
+};
+/**
+ * Separa os estilos de tamanho (`width`, `height`, `min-*`, `max-*`) do resto do `style`.
+ *
+ * Porcentagens so significam "porcentagem da tela" quando aplicadas ao painel do overlay (cujo pai ocupa a viewport);
+ * dentro do frame elas seriam relativas ao painel, que tem largura "shrink-to-fit" (ex.: 60% de 531px).
+ * O painel recebe o tamanho; o frame passa a ocupar 100% dele.
+ */
+function smzSplitDialogSize(style, extra) {
+    const pane = { ...(extra ?? {}) };
+    const rest = {};
+    for (const [key, value] of Object.entries(style ?? {})) {
+        if (value === null || value === undefined || value === '')
+            continue;
+        const target = KEYS[key];
+        if (target)
+            pane[target] = String(value);
+        else
+            rest[key] = value;
+    }
+    for (const key of Object.keys(pane)) {
+        if (!pane[key])
+            delete pane[key];
+    }
+    return { pane, rest };
+}
+
 /* eslint-disable max-len -- classes Tailwind nos templates */
 /** Componente que sera criado dentro do dialog. */
 const SMZ_DIALOG_CONTENT = new InjectionToken('SMZ_DIALOG_CONTENT');
@@ -1714,6 +1761,8 @@ const SMZ_DIALOG_CONTENT = new InjectionToken('SMZ_DIALOG_CONTENT');
 class SmzDialogFrameComponent {
     config = inject(SmzDialogConfig);
     ref = inject(SmzDialogRef);
+    /** Tamanho vai para o painel do overlay (ver `smzSplitDialogSize`); o frame ocupa 100% dele. */
+    size = smzSplitDialogSize(this.config.style, { width: this.config.width, height: this.config.height });
     injector = inject(Injector);
     contentType = inject(SMZ_DIALOG_CONTENT);
     host = viewChild.required('content', { read: ViewContainerRef });
@@ -1723,16 +1772,16 @@ class SmzDialogFrameComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzDialogFrameComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzDialogFrameComponent, isStandalone: true, selector: "ui-dialog-frame", host: { classAttribute: "pointer-events-auto block" }, viewQueries: [{ propertyName: "host", first: true, predicate: ["content"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzDialogFrameComponent, isStandalone: true, selector: "ui-dialog-frame", host: { properties: { "class.w-full": "!!size.pane.width", "class.h-full": "!!size.pane.height" }, classAttribute: "pointer-events-auto block" }, viewQueries: [{ propertyName: "host", first: true, predicate: ["content"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: `
     <div
       role="dialog"
       aria-modal="true"
       [attr.aria-label]="config.header || null"
       class="flex max-h-[90vh] max-w-[95vw] flex-col rounded-overlay border border-ui-line bg-ui-surface-2 font-ui text-ui-fg shadow-overlay"
       [class]="config.styleClass ?? ''"
-      [style.width]="config.width ?? null"
-      [style.height]="config.height ?? null"
-      [ngStyle]="config.style"
+      [style.width]="size.pane.width ? '100%' : null"
+      [style.height]="size.pane.height ? '100%' : null"
+      [ngStyle]="size.rest"
     >
       @if (config.showHeader !== false) {
         <div class="flex items-center justify-between gap-4 border-b border-ui-line px-4 py-3">
@@ -1763,7 +1812,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                     selector: 'ui-dialog-frame',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [NgStyle],
-                    host: { class: 'pointer-events-auto block' },
+                    // O painel do CDK e `display:flex`: o host e item flex e so ocupa o painel dimensionado se tiver largura/altura 100%.
+                    host: { class: 'pointer-events-auto block', '[class.w-full]': '!!size.pane.width', '[class.h-full]': '!!size.pane.height' },
                     template: `
     <div
       role="dialog"
@@ -1771,9 +1821,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
       [attr.aria-label]="config.header || null"
       class="flex max-h-[90vh] max-w-[95vw] flex-col rounded-overlay border border-ui-line bg-ui-surface-2 font-ui text-ui-fg shadow-overlay"
       [class]="config.styleClass ?? ''"
-      [style.width]="config.width ?? null"
-      [style.height]="config.height ?? null"
-      [ngStyle]="config.style"
+      [style.width]="size.pane.width ? '100%' : null"
+      [style.height]="size.pane.height ? '100%' : null"
+      [ngStyle]="size.rest"
     >
       @if (config.showHeader !== false) {
         <div class="flex items-center justify-between gap-4 border-b border-ui-line px-4 py-3">
@@ -1814,10 +1864,14 @@ class SmzDialogService {
         const resolved = Object.assign(new SmzDialogConfig(), config);
         const ref = new SmzDialogRef();
         const modal = resolved.modal !== false;
+        // Porcentagens (ex.: `width: '60%'`) sao relativas a viewport quando aplicadas ao painel do overlay.
+        const pane = smzSplitDialogSize(resolved.style, { width: resolved.width, height: resolved.height }).pane;
         const overlayRef = this.overlay.create({
             hasBackdrop: modal,
             positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically(),
             scrollStrategy: this.overlay.scrollStrategies.block(),
+            ...pane,
+            maxWidth: pane.maxWidth ?? '95vw',
         });
         if (resolved.baseZIndex != null) {
             overlayRef.hostElement.style.zIndex = String(resolved.baseZIndex + 1);
@@ -1896,6 +1950,8 @@ class SmzDialogComponent {
     viewContainer = inject(ViewContainerRef);
     host = inject(ElementRef);
     overlayRef;
+    /** `width`/`height`/`min-*`/`max-*` de `style` vao para o painel do overlay (relativos a viewport); o frame ocupa 100% dele. */
+    sizing = computed(() => smzSplitDialogSize(this.style()), ...(ngDevMode ? [{ debugName: "sizing" }] : []));
     dx = signal(0, ...(ngDevMode ? [{ debugName: "dx" }] : []));
     dy = signal(0, ...(ngDevMode ? [{ debugName: "dy" }] : []));
     constructor() {
@@ -1905,6 +1961,17 @@ class SmzDialogComponent {
             else
                 this.dispose();
         });
+        effect(() => {
+            const maximized = this.maximized();
+            const pane = this.sizing().pane;
+            // `updateSize` do CDK so MESCLA as chaves recebidas: ao restaurar, height/max-height/min-* do maximizado
+            // (100vh, 0) sobrevivem se nao forem repostos explicitamente (vazio = remove o estilo inline).
+            this.overlayRef?.updateSize(maximized
+                ? { width: '100vw', height: '100vh', maxWidth: '100vw', maxHeight: '100vh', minWidth: '0', minHeight: '0' }
+                : { width: pane.width ?? '', height: pane.height ?? '', minWidth: pane.minWidth ?? '', minHeight: pane.minHeight ?? '', maxWidth: pane.maxWidth ?? '95vw', maxHeight: pane.maxHeight ?? '' });
+            // A estrategia global alinha por tamanho (flush a 100vh/100vw); reaplica para voltar ao alinhamento do `position`.
+            this.overlayRef?.updatePosition();
+        });
         effect(() => {
             const position = this.position();
             this.overlayRef?.updatePositionStrategy(this.strategyFor(position));
@@ -1965,6 +2032,7 @@ class SmzDialogComponent {
             hasBackdrop: modal,
             positionStrategy: this.strategyFor(this.position()),
             scrollStrategy: this.overlay.scrollStrategies.block(),
+            ...(this.maximized() ? { width: '100vw', height: '100vh', maxWidth: '100vw', maxHeight: '100vh' } : { ...this.sizing().pane, maxWidth: this.sizing().pane.maxWidth ?? '95vw' }),
         });
         SmzZIndex.set('modal', this.overlayRef.hostElement, 1100 + this.baseZIndex());
         if (this.overlayRef.backdropElement) {
@@ -1995,56 +2063,58 @@ class SmzDialogComponent {
             this.overlayRef?.overlayElement.querySelector('[role="dialog"]')?.setAttribute('data-testid', testId);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzDialogComponent, isStandalone: true, selector: "ui-dialog", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, dismissableMask: { classPropertyName: "dismissableMask", publicName: "dismissableMask", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, baseZIndex: { classPropertyName: "baseZIndex", publicName: "baseZIndex", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, maximizable: { classPropertyName: "maximizable", publicName: "maximizable", isSignal: true, isRequired: false, transformFunction: null }, maximized: { classPropertyName: "maximized", publicName: "maximized", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", maximized: "maximizedChange", shown: "shown", hidden: "hidden" }, queries: [{ propertyName: "templates", predicate: SmzTemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <ng-template #panel>
-      <div
-        role="dialog"
-        aria-modal="true"
-        [attr.aria-label]="header() || null"
-        class="pointer-events-auto flex flex-col border border-ui-line bg-ui-surface-2 font-ui text-ui-fg shadow-overlay"
-        [class]="(maximized() ? 'h-screen w-screen max-h-none max-w-none rounded-none ' : 'max-h-[90vh] max-w-[95vw] rounded-overlay ') + (resizable() && !maximized() ? 'resize overflow-auto ' : '') + (styleClass() ?? '')"
-        [ngStyle]="maximized() ? null : style()"
-        [style.transform]="maximized() || (dx() === 0 && dy() === 0) ? null : 'translate(' + dx() + 'px, ' + dy() + 'px)'"
-      >
-        @if (headerTemplate(); as headerTpl) {
-          <div class="border-b border-ui-line px-4 py-3" [class.cursor-move]="draggable() && !maximized()" (pointerdown)="startDrag($event)">
-            <ng-container [ngTemplateOutlet]="headerTpl" />
-          </div>
-        }
-        @else if (header() || closable()) {
-          <div class="flex items-center justify-between gap-4 border-b border-ui-line px-4 py-3" [class.cursor-move]="draggable() && !maximized()" (pointerdown)="startDrag($event)">
-            <span class="text-ui-lg font-medium">{{ header() }}</span>
-            <div class="flex items-center gap-1">
-            @if (maximizable()) {
-              <button type="button" class="inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-full text-ui-fg-muted transition-colors duration-ui hover:bg-ui-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus" [attr.aria-label]="maximized() ? 'Restaurar' : 'Maximizar'" (click)="maximize()">
-                <svg viewBox="0 0 16 16" class="h-4 w-4" fill="none" aria-hidden="true">
-                  @if (maximized()) { <path d="M5 3h8v8M3 5h8v8H3z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" /> } @else { <rect x="3" y="3" width="10" height="10" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" /> }
-                </svg>
-              </button>
-            }
-            @if (closable()) {
-              <button
-                type="button"
-                class="inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-full text-ui-fg-muted transition-colors duration-ui hover:bg-ui-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus"
-                aria-label="Fechar"
-                (click)="close()"
-              >
-                <svg viewBox="0 0 16 16" class="h-4 w-4" fill="none" aria-hidden="true">
-                  <path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" />
-                </svg>
-              </button>
-            }
-            </div>
-          </div>
-        }
-        <div class="min-h-0 flex-1 overflow-auto p-4"><ng-content /></div>
-        @if (footerTemplate(); as footerTpl) {
-          <div class="flex justify-end gap-2 border-t border-ui-line px-4 py-3">
-            <ng-container [ngTemplateOutlet]="footerTpl" />
-          </div>
-        }
-      </div>
-    </ng-template>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzDialogComponent, isStandalone: true, selector: "ui-dialog", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, dismissableMask: { classPropertyName: "dismissableMask", publicName: "dismissableMask", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, baseZIndex: { classPropertyName: "baseZIndex", publicName: "baseZIndex", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, maximizable: { classPropertyName: "maximizable", publicName: "maximizable", isSignal: true, isRequired: false, transformFunction: null }, maximized: { classPropertyName: "maximized", publicName: "maximized", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", maximized: "maximizedChange", shown: "shown", hidden: "hidden" }, queries: [{ propertyName: "templates", predicate: SmzTemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <ng-template #panel>
+      <div
+        role="dialog"
+        aria-modal="true"
+        [attr.aria-label]="header() || null"
+        class="pointer-events-auto flex flex-col border border-ui-line bg-ui-surface-2 font-ui text-ui-fg shadow-overlay"
+        [class]="(maximized() ? 'h-screen w-screen max-h-none max-w-none rounded-none ' : 'max-h-[90vh] max-w-[95vw] rounded-overlay ') + (resizable() && !maximized() ? 'resize overflow-auto ' : '') + (styleClass() ?? '')"
+        [ngStyle]="maximized() ? null : sizing().rest"
+        [style.width]="!maximized() && sizing().pane.width ? '100%' : null"
+        [style.height]="!maximized() && sizing().pane.height ? '100%' : null"
+        [style.transform]="maximized() || (dx() === 0 && dy() === 0) ? null : 'translate(' + dx() + 'px, ' + dy() + 'px)'"
+      >
+        @if (headerTemplate(); as headerTpl) {
+          <div class="border-b border-ui-line px-4 py-3" [class.cursor-move]="draggable() && !maximized()" (pointerdown)="startDrag($event)">
+            <ng-container [ngTemplateOutlet]="headerTpl" />
+          </div>
+        }
+        @else if (header() || closable()) {
+          <div class="flex items-center justify-between gap-4 border-b border-ui-line px-4 py-3" [class.cursor-move]="draggable() && !maximized()" (pointerdown)="startDrag($event)">
+            <span class="text-ui-lg font-medium">{{ header() }}</span>
+            <div class="flex items-center gap-1">
+            @if (maximizable()) {
+              <button type="button" class="inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-full text-ui-fg-muted transition-colors duration-ui hover:bg-ui-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus" [attr.aria-label]="maximized() ? 'Restaurar' : 'Maximizar'" (click)="maximize()">
+                <svg viewBox="0 0 16 16" class="h-4 w-4" fill="none" aria-hidden="true">
+                  @if (maximized()) { <path d="M5 3h8v8M3 5h8v8H3z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" /> } @else { <rect x="3" y="3" width="10" height="10" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" /> }
+                </svg>
+              </button>
+            }
+            @if (closable()) {
+              <button
+                type="button"
+                class="inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-full text-ui-fg-muted transition-colors duration-ui hover:bg-ui-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus"
+                aria-label="Fechar"
+                (click)="close()"
+              >
+                <svg viewBox="0 0 16 16" class="h-4 w-4" fill="none" aria-hidden="true">
+                  <path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" />
+                </svg>
+              </button>
+            }
+            </div>
+          </div>
+        }
+        <div class="min-h-0 flex-1 overflow-auto p-4"><ng-content /></div>
+        @if (footerTemplate(); as footerTpl) {
+          <div class="flex justify-end gap-2 border-t border-ui-line px-4 py-3">
+            <ng-container [ngTemplateOutlet]="footerTpl" />
+          </div>
+        }
+      </div>
+    </ng-template>
   `, isInline: true, dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzDialogComponent, decorators: [{
@@ -2053,56 +2123,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                     selector: 'ui-dialog',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [NgStyle, NgTemplateOutlet],
-                    template: `
-    <ng-template #panel>
-      <div
-        role="dialog"
-        aria-modal="true"
-        [attr.aria-label]="header() || null"
-        class="pointer-events-auto flex flex-col border border-ui-line bg-ui-surface-2 font-ui text-ui-fg shadow-overlay"
-        [class]="(maximized() ? 'h-screen w-screen max-h-none max-w-none rounded-none ' : 'max-h-[90vh] max-w-[95vw] rounded-overlay ') + (resizable() && !maximized() ? 'resize overflow-auto ' : '') + (styleClass() ?? '')"
-        [ngStyle]="maximized() ? null : style()"
-        [style.transform]="maximized() || (dx() === 0 && dy() === 0) ? null : 'translate(' + dx() + 'px, ' + dy() + 'px)'"
-      >
-        @if (headerTemplate(); as headerTpl) {
-          <div class="border-b border-ui-line px-4 py-3" [class.cursor-move]="draggable() && !maximized()" (pointerdown)="startDrag($event)">
-            <ng-container [ngTemplateOutlet]="headerTpl" />
-          </div>
-        }
-        @else if (header() || closable()) {
-          <div class="flex items-center justify-between gap-4 border-b border-ui-line px-4 py-3" [class.cursor-move]="draggable() && !maximized()" (pointerdown)="startDrag($event)">
-            <span class="text-ui-lg font-medium">{{ header() }}</span>
-            <div class="flex items-center gap-1">
-            @if (maximizable()) {
-              <button type="button" class="inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-full text-ui-fg-muted transition-colors duration-ui hover:bg-ui-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus" [attr.aria-label]="maximized() ? 'Restaurar' : 'Maximizar'" (click)="maximize()">
-                <svg viewBox="0 0 16 16" class="h-4 w-4" fill="none" aria-hidden="true">
-                  @if (maximized()) { <path d="M5 3h8v8M3 5h8v8H3z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" /> } @else { <rect x="3" y="3" width="10" height="10" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" /> }
-                </svg>
-              </button>
-            }
-            @if (closable()) {
-              <button
-                type="button"
-                class="inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-full text-ui-fg-muted transition-colors duration-ui hover:bg-ui-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus"
-                aria-label="Fechar"
-                (click)="close()"
-              >
-                <svg viewBox="0 0 16 16" class="h-4 w-4" fill="none" aria-hidden="true">
-                  <path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" />
-                </svg>
-              </button>
-            }
-            </div>
-          </div>
-        }
-        <div class="min-h-0 flex-1 overflow-auto p-4"><ng-content /></div>
-        @if (footerTemplate(); as footerTpl) {
-          <div class="flex justify-end gap-2 border-t border-ui-line px-4 py-3">
-            <ng-container [ngTemplateOutlet]="footerTpl" />
-          </div>
-        }
-      </div>
-    </ng-template>
+                    template: `
+    <ng-template #panel>
+      <div
+        role="dialog"
+        aria-modal="true"
+        [attr.aria-label]="header() || null"
+        class="pointer-events-auto flex flex-col border border-ui-line bg-ui-surface-2 font-ui text-ui-fg shadow-overlay"
+        [class]="(maximized() ? 'h-screen w-screen max-h-none max-w-none rounded-none ' : 'max-h-[90vh] max-w-[95vw] rounded-overlay ') + (resizable() && !maximized() ? 'resize overflow-auto ' : '') + (styleClass() ?? '')"
+        [ngStyle]="maximized() ? null : sizing().rest"
+        [style.width]="!maximized() && sizing().pane.width ? '100%' : null"
+        [style.height]="!maximized() && sizing().pane.height ? '100%' : null"
+        [style.transform]="maximized() || (dx() === 0 && dy() === 0) ? null : 'translate(' + dx() + 'px, ' + dy() + 'px)'"
+      >
+        @if (headerTemplate(); as headerTpl) {
+          <div class="border-b border-ui-line px-4 py-3" [class.cursor-move]="draggable() && !maximized()" (pointerdown)="startDrag($event)">
+            <ng-container [ngTemplateOutlet]="headerTpl" />
+          </div>
+        }
+        @else if (header() || closable()) {
+          <div class="flex items-center justify-between gap-4 border-b border-ui-line px-4 py-3" [class.cursor-move]="draggable() && !maximized()" (pointerdown)="startDrag($event)">
+            <span class="text-ui-lg font-medium">{{ header() }}</span>
+            <div class="flex items-center gap-1">
+            @if (maximizable()) {
+              <button type="button" class="inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-full text-ui-fg-muted transition-colors duration-ui hover:bg-ui-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus" [attr.aria-label]="maximized() ? 'Restaurar' : 'Maximizar'" (click)="maximize()">
+                <svg viewBox="0 0 16 16" class="h-4 w-4" fill="none" aria-hidden="true">
+                  @if (maximized()) { <path d="M5 3h8v8M3 5h8v8H3z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" /> } @else { <rect x="3" y="3" width="10" height="10" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" /> }
+                </svg>
+              </button>
+            }
+            @if (closable()) {
+              <button
+                type="button"
+                class="inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-full text-ui-fg-muted transition-colors duration-ui hover:bg-ui-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus"
+                aria-label="Fechar"
+                (click)="close()"
+              >
+                <svg viewBox="0 0 16 16" class="h-4 w-4" fill="none" aria-hidden="true">
+                  <path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" />
+                </svg>
+              </button>
+            }
+            </div>
+          </div>
+        }
+        <div class="min-h-0 flex-1 overflow-auto p-4"><ng-content /></div>
+        @if (footerTemplate(); as footerTpl) {
+          <div class="flex justify-end gap-2 border-t border-ui-line px-4 py-3">
+            <ng-container [ngTemplateOutlet]="footerTpl" />
+          </div>
+        }
+      </div>
+    </ng-template>
   `,
                 }]
         }], ctorParameters: () => [], propDecorators: { visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], modal: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], dismissableMask: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissableMask", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], baseZIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "baseZIndex", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], maximizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "maximizable", required: false }] }], maximized: [{ type: i0.Input, args: [{ isSignal: true, alias: "maximized", required: false }] }, { type: i0.Output, args: ["maximizedChange"] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], shown: [{ type: i0.Output, args: ["shown"] }], hidden: [{ type: i0.Output, args: ["hidden"] }], panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SmzTemplateDirective), { isSignal: true }] }] } });
@@ -2471,11 +2543,28 @@ class SmzToastContainerComponent {
         const key = this.key();
         return this.service.messages().filter((message) => (key ? message.key === key : !message.key));
     }, ...(ngDevMode ? [{ debugName: "visibleMessages" }] : []));
+    layer = viewChild('layer', ...(ngDevMode ? [{ debugName: "layer" }] : []));
     constructor() {
         effect(() => {
             for (const message of this.visibleMessages())
                 this.schedule(message);
         });
+        // Abre a camada quando ha mensagens (reabrindo a cada mudanca para ficar acima de overlays abertos depois) e fecha quando nao ha.
+        effect(() => {
+            const count = this.visibleMessages().length;
+            const element = this.layer()?.nativeElement;
+            if (!element || typeof element.showPopover !== 'function')
+                return;
+            try {
+                if (element.matches(':popover-open'))
+                    element.hidePopover?.();
+                if (count > 0)
+                    element.showPopover();
+            }
+            catch {
+                /* sem suporte: segue com z-index */
+            }
+        });
         inject(DestroyRef).onDestroy(() => this.timers.forEach((timer) => clearTimeout(timer.handle)));
     }
     toneClasses(message) {
@@ -2515,7 +2604,9 @@ class SmzToastContainerComponent {
         this.timers.delete(message.id);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzToastContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzToastContainerComponent, isStandalone: true, selector: "ui-toast", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: false, transformFunction: null }, life: { classPropertyName: "life", publicName: "life", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzToastContainerComponent, isStandalone: true, selector: "ui-toast", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: false, transformFunction: null }, life: { classPropertyName: "life", publicName: "life", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "layer", first: true, predicate: ["layer"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <!-- Camada na top layer (Popover API): overlays do CDK (drawer/dialog) ficam la e z-index nao os supera. -->
+    <div #layer popover="manual" class="pointer-events-none fixed inset-0 m-0 h-full w-full overflow-visible border-0 bg-transparent p-0">
     <div
       class="pointer-events-none fixed z-[2000] flex w-80 max-w-[95vw] flex-col gap-2"
       [class]="positionClasses()"
@@ -2558,6 +2649,7 @@ class SmzToastContainerComponent {
         </div>
       }
     </div>
+    </div>
   `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzToastContainerComponent, decorators: [{
@@ -2567,6 +2659,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [NgClass, NgStyle],
                     template: `
+    <!-- Camada na top layer (Popover API): overlays do CDK (drawer/dialog) ficam la e z-index nao os supera. -->
+    <div #layer popover="manual" class="pointer-events-none fixed inset-0 m-0 h-full w-full overflow-visible border-0 bg-transparent p-0">
     <div
       class="pointer-events-none fixed z-[2000] flex w-80 max-w-[95vw] flex-col gap-2"
       [class]="positionClasses()"
@@ -2609,9 +2703,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
         </div>
       }
     </div>
+    </div>
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: false }] }], life: [{ type: i0.Input, args: [{ isSignal: true, alias: "life", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: false }] }], life: [{ type: i0.Input, args: [{ isSignal: true, alias: "life", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], layer: [{ type: i0.ViewChild, args: ['layer', { isSignal: true }] }] } });
 
 /* eslint-disable max-len -- classes Tailwind nos templates */
 const POSITIONS$1 = [
@@ -3176,6 +3271,10 @@ class SmzSelectComponent extends SmzValueAccessor {
         dataKey: this.dataKey(),
     }), ...(ngDevMode ? [{ debugName: "config" }] : []));
     visibleOptions = computed(() => filterOptions(this.options() ?? [], this.filterText(), { ...this.config(), filterBy: this.filterBy(), mode: this.filterMatchMode() }), ...(ngDevMode ? [{ debugName: "visibleOptions" }] : []));
+    /** Templates opcionais: `item` (linha da lista) e `selectedItem` (valor exibido no campo), como no `p-select`. */
+    templates = contentChildren(SmzTemplateDirective, ...(ngDevMode ? [{ debugName: "templates" }] : []));
+    itemTemplate = computed(() => smzFindTemplate(this.templates(), 'item'), ...(ngDevMode ? [{ debugName: "itemTemplate" }] : []));
+    selectedItemTemplate = computed(() => smzFindTemplate(this.templates(), 'selectedItem'), ...(ngDevMode ? [{ debugName: "selectedItemTemplate" }] : []));
     hasValue = computed(() => this.selectedOption() !== undefined, ...(ngDevMode ? [{ debugName: "hasValue" }] : []));
     selectedOption = computed(() => {
         const current = this.current();
@@ -3346,7 +3445,7 @@ class SmzSelectComponent extends SmzValueAccessor {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzSelectComponent, isStandalone: true, selector: "ui-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, optionDisabled: { classPropertyName: "optionDisabled", publicName: "optionDisabled", isSignal: true, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, filterBy: { classPropertyName: "filterBy", publicName: "filterBy", isSignal: true, isRequired: false, transformFunction: null }, filterMatchMode: { classPropertyName: "filterMatchMode", publicName: "filterMatchMode", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, emptyFilterMessage: { classPropertyName: "emptyFilterMessage", publicName: "emptyFilterMessage", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed", showed: "showed", hidden: "hidden" }, host: { classAttribute: "block min-w-0" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SmzSelectComponent), multi: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzSelectComponent, isStandalone: true, selector: "ui-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, optionDisabled: { classPropertyName: "optionDisabled", publicName: "optionDisabled", isSignal: true, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, filterBy: { classPropertyName: "filterBy", publicName: "filterBy", isSignal: true, isRequired: false, transformFunction: null }, filterMatchMode: { classPropertyName: "filterMatchMode", publicName: "filterMatchMode", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, emptyFilterMessage: { classPropertyName: "emptyFilterMessage", publicName: "emptyFilterMessage", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed", showed: "showed", hidden: "hidden" }, host: { classAttribute: "block min-w-0" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SmzSelectComponent), multi: true }], queries: [{ propertyName: "templates", predicate: SmzTemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
     <button
       #trigger
       type="button"
@@ -3364,7 +3463,13 @@ class SmzSelectComponent extends SmzValueAccessor {
       (keydown)="onKeydown($event)"
       (blur)="onBlur()"
     >
-      <span class="min-w-0 flex-1 truncate" [class.text-ui-fg-subtle]="!hasValue()">{{ displayLabel() }}</span>
+      <span class="min-w-0 flex-1 truncate" [class.text-ui-fg-subtle]="!hasValue()">
+        @if (hasValue() && selectedItemTemplate(); as tpl) {
+          <ng-container [ngTemplateOutlet]="tpl" [ngTemplateOutletContext]="{ $implicit: selectedOption() }" />
+        } @else {
+          {{ displayLabel() }}
+        }
+      </span>
       @if (showClear() && hasValue() && !isDisabled()) {
         <span
           role="button"
@@ -3413,7 +3518,11 @@ class SmzSelectComponent extends SmzValueAccessor {
               (mouseenter)="activeIndex.set(index)"
               (click)="select(option, $event)"
             >
-              {{ labelOf(option) }}
+              @if (itemTemplate(); as tpl) {
+                <ng-container [ngTemplateOutlet]="tpl" [ngTemplateOutletContext]="{ $implicit: option, index: index }" />
+              } @else {
+                {{ labelOf(option) }}
+              }
             </li>
           }
           @empty {
@@ -3422,14 +3531,14 @@ class SmzSelectComponent extends SmzValueAccessor {
         </ul>
       </div>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: SmzInputTextDirective, selector: "input[smzInputText]", inputs: ["size", "invalid"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: SmzInputTextDirective, selector: "input[smzInputText]", inputs: ["size", "invalid"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzSelectComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ui-select',
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [NgClass, SmzInputTextDirective],
+                    imports: [NgClass, NgTemplateOutlet, SmzInputTextDirective],
                     providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SmzSelectComponent), multi: true }],
                     host: { class: 'block min-w-0' },
                     template: `
@@ -3450,7 +3559,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
       (keydown)="onKeydown($event)"
       (blur)="onBlur()"
     >
-      <span class="min-w-0 flex-1 truncate" [class.text-ui-fg-subtle]="!hasValue()">{{ displayLabel() }}</span>
+      <span class="min-w-0 flex-1 truncate" [class.text-ui-fg-subtle]="!hasValue()">
+        @if (hasValue() && selectedItemTemplate(); as tpl) {
+          <ng-container [ngTemplateOutlet]="tpl" [ngTemplateOutletContext]="{ $implicit: selectedOption() }" />
+        } @else {
+          {{ displayLabel() }}
+        }
+      </span>
       @if (showClear() && hasValue() && !isDisabled()) {
         <span
           role="button"
@@ -3499,7 +3614,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
               (mouseenter)="activeIndex.set(index)"
               (click)="select(option, $event)"
             >
-              {{ labelOf(option) }}
+              @if (itemTemplate(); as tpl) {
+                <ng-container [ngTemplateOutlet]="tpl" [ngTemplateOutletContext]="{ $implicit: option, index: index }" />
+              } @else {
+                {{ labelOf(option) }}
+              }
             </li>
           }
           @empty {
@@ -3510,7 +3629,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
     </ng-template>
   `,
                 }]
-        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], optionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionDisabled", required: false }] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterBy", required: false }] }], filterMatchMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterMatchMode", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], emptyFilterMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyFilterMessage", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }], showed: [{ type: i0.Output, args: ["showed"] }], hidden: [{ type: i0.Output, args: ["hidden"] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], filterInput: [{ type: i0.ViewChild, args: ['filterInput', { isSignal: true }] }] } });
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], optionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionDisabled", required: false }] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterBy", required: false }] }], filterMatchMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterMatchMode", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], emptyFilterMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyFilterMessage", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }], showed: [{ type: i0.Output, args: ["showed"] }], hidden: [{ type: i0.Output, args: ["hidden"] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SmzTemplateDirective), { isSignal: true }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], filterInput: [{ type: i0.ViewChild, args: ['filterInput', { isSignal: true }] }] } });
 
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-unsafe-return, max-len */
 /* eslint-disable max-len -- classes Tailwind nos templates */
@@ -3559,6 +3678,10 @@ class SmzMultiSelectComponent extends SmzValueAccessor {
         dataKey: this.dataKey(),
     }), ...(ngDevMode ? [{ debugName: "config" }] : []));
     visibleOptions = computed(() => filterOptions(this.options() ?? [], this.filterText(), { ...this.config(), filterBy: this.filterBy(), mode: this.filterMatchMode() }), ...(ngDevMode ? [{ debugName: "visibleOptions" }] : []));
+    /** Templates opcionais: `item` (linha da lista) e `selectedItems` (valor exibido no campo; `$implicit` = valores selecionados), como no `p-multiselect`. */
+    templates = contentChildren(SmzTemplateDirective, ...(ngDevMode ? [{ debugName: "templates" }] : []));
+    itemTemplate = computed(() => smzFindTemplate(this.templates(), 'item'), ...(ngDevMode ? [{ debugName: "itemTemplate" }] : []));
+    selectedItemsTemplate = computed(() => smzFindTemplate(this.templates(), 'selectedItems'), ...(ngDevMode ? [{ debugName: "selectedItemsTemplate" }] : []));
     selectedValues = computed(() => (Array.isArray(this.current()) ? this.current() : []), ...(ngDevMode ? [{ debugName: "selectedValues" }] : []));
     selectedOptions = computed(() => (this.options() ?? []).filter((option) => this.selectedValues().some((value) => sameValue(optionValue(option, this.config()), value, this.dataKey()))), ...(ngDevMode ? [{ debugName: "selectedOptions" }] : []));
     allSelected = computed(() => {
@@ -3701,7 +3824,7 @@ class SmzMultiSelectComponent extends SmzValueAccessor {
         this.touch();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzMultiSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzMultiSelectComponent, isStandalone: true, selector: "ui-multi-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, optionDisabled: { classPropertyName: "optionDisabled", publicName: "optionDisabled", isSignal: true, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, filterBy: { classPropertyName: "filterBy", publicName: "filterBy", isSignal: true, isRequired: false, transformFunction: null }, filterMatchMode: { classPropertyName: "filterMatchMode", publicName: "filterMatchMode", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, showToggleAll: { classPropertyName: "showToggleAll", publicName: "showToggleAll", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, emptyFilterMessage: { classPropertyName: "emptyFilterMessage", publicName: "emptyFilterMessage", isSignal: true, isRequired: false, transformFunction: null }, maxSelectedLabels: { classPropertyName: "maxSelectedLabels", publicName: "maxSelectedLabels", isSignal: true, isRequired: false, transformFunction: null }, selectedItemsLabel: { classPropertyName: "selectedItemsLabel", publicName: "selectedItemsLabel", isSignal: true, isRequired: false, transformFunction: null }, panelStyle: { classPropertyName: "panelStyle", publicName: "panelStyle", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, autofocusFilter: { classPropertyName: "autofocusFilter", publicName: "autofocusFilter", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed", panelHide: "panelHide", panelShow: "panelShow" }, host: { classAttribute: "block min-w-0" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SmzMultiSelectComponent), multi: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzMultiSelectComponent, isStandalone: true, selector: "ui-multi-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, optionDisabled: { classPropertyName: "optionDisabled", publicName: "optionDisabled", isSignal: true, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, filterBy: { classPropertyName: "filterBy", publicName: "filterBy", isSignal: true, isRequired: false, transformFunction: null }, filterMatchMode: { classPropertyName: "filterMatchMode", publicName: "filterMatchMode", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, showToggleAll: { classPropertyName: "showToggleAll", publicName: "showToggleAll", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, emptyFilterMessage: { classPropertyName: "emptyFilterMessage", publicName: "emptyFilterMessage", isSignal: true, isRequired: false, transformFunction: null }, maxSelectedLabels: { classPropertyName: "maxSelectedLabels", publicName: "maxSelectedLabels", isSignal: true, isRequired: false, transformFunction: null }, selectedItemsLabel: { classPropertyName: "selectedItemsLabel", publicName: "selectedItemsLabel", isSignal: true, isRequired: false, transformFunction: null }, panelStyle: { classPropertyName: "panelStyle", publicName: "panelStyle", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, autofocusFilter: { classPropertyName: "autofocusFilter", publicName: "autofocusFilter", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed", panelHide: "panelHide", panelShow: "panelShow" }, host: { classAttribute: "block min-w-0" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SmzMultiSelectComponent), multi: true }], queries: [{ propertyName: "templates", predicate: SmzTemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
     <button
       #trigger
       type="button"
@@ -3717,7 +3840,13 @@ class SmzMultiSelectComponent extends SmzValueAccessor {
       (keydown)="onKeydown($event)"
       (blur)="onBlur()"
     >
-      <span class="min-w-0 flex-1 truncate" [class.text-ui-fg-subtle]="selectedOptions().length === 0">{{ displayLabel() }}</span>
+      <span class="min-w-0 flex-1 truncate" [class.text-ui-fg-subtle]="selectedOptions().length === 0">
+        @if (selectedOptions().length > 0 && selectedItemsTemplate(); as tpl) {
+          <ng-container [ngTemplateOutlet]="tpl" [ngTemplateOutletContext]="{ $implicit: selectedValues(), options: selectedOptions() }" />
+        } @else {
+          {{ displayLabel() }}
+        }
+      </span>
       @if (showClear() && selectedOptions().length > 0 && !isDisabled()) {
         <span
           role="button"
@@ -3787,7 +3916,13 @@ class SmzMultiSelectComponent extends SmzValueAccessor {
                   <path d="M3 8.5l3.2 3L13 4.5" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" />
                 </svg>
               </span>
-              <span class="min-w-0 flex-1 truncate">{{ labelOf(option) }}</span>
+              <span class="min-w-0 flex-1 truncate">
+                @if (itemTemplate(); as tpl) {
+                  <ng-container [ngTemplateOutlet]="tpl" [ngTemplateOutletContext]="{ $implicit: option, index: index }" />
+                } @else {
+                  {{ labelOf(option) }}
+                }
+              </span>
             </li>
           }
           @empty {
@@ -3796,14 +3931,14 @@ class SmzMultiSelectComponent extends SmzValueAccessor {
         </ul>
       </div>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: SmzInputTextDirective, selector: "input[smzInputText]", inputs: ["size", "invalid"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: SmzInputTextDirective, selector: "input[smzInputText]", inputs: ["size", "invalid"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzMultiSelectComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ui-multi-select',
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [NgClass, NgStyle, SmzInputTextDirective],
+                    imports: [NgClass, NgStyle, NgTemplateOutlet, SmzInputTextDirective],
                     providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SmzMultiSelectComponent), multi: true }],
                     host: { class: 'block min-w-0' },
                     template: `
@@ -3822,7 +3957,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
       (keydown)="onKeydown($event)"
       (blur)="onBlur()"
     >
-      <span class="min-w-0 flex-1 truncate" [class.text-ui-fg-subtle]="selectedOptions().length === 0">{{ displayLabel() }}</span>
+      <span class="min-w-0 flex-1 truncate" [class.text-ui-fg-subtle]="selectedOptions().length === 0">
+        @if (selectedOptions().length > 0 && selectedItemsTemplate(); as tpl) {
+          <ng-container [ngTemplateOutlet]="tpl" [ngTemplateOutletContext]="{ $implicit: selectedValues(), options: selectedOptions() }" />
+        } @else {
+          {{ displayLabel() }}
+        }
+      </span>
       @if (showClear() && selectedOptions().length > 0 && !isDisabled()) {
         <span
           role="button"
@@ -3892,7 +4033,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                   <path d="M3 8.5l3.2 3L13 4.5" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" />
                 </svg>
               </span>
-              <span class="min-w-0 flex-1 truncate">{{ labelOf(option) }}</span>
+              <span class="min-w-0 flex-1 truncate">
+                @if (itemTemplate(); as tpl) {
+                  <ng-container [ngTemplateOutlet]="tpl" [ngTemplateOutletContext]="{ $implicit: option, index: index }" />
+                } @else {
+                  {{ labelOf(option) }}
+                }
+              </span>
             </li>
           }
           @empty {
@@ -3903,7 +4050,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
     </ng-template>
   `,
                 }]
-        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], optionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionDisabled", required: false }] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterBy", required: false }] }], filterMatchMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterMatchMode", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], showToggleAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToggleAll", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], emptyFilterMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyFilterMessage", required: false }] }], maxSelectedLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSelectedLabels", required: false }] }], selectedItemsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItemsLabel", required: false }] }], panelStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelStyle", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], autofocusFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocusFilter", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }], panelHide: [{ type: i0.Output, args: ["panelHide"] }], panelShow: [{ type: i0.Output, args: ["panelShow"] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], filterInput: [{ type: i0.ViewChild, args: ['filterInput', { isSignal: true }] }] } });
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], optionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionDisabled", required: false }] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterBy", required: false }] }], filterMatchMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterMatchMode", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], showToggleAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToggleAll", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], emptyFilterMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyFilterMessage", required: false }] }], maxSelectedLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSelectedLabels", required: false }] }], selectedItemsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItemsLabel", required: false }] }], panelStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelStyle", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], autofocusFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocusFilter", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }], panelHide: [{ type: i0.Output, args: ["panelHide"] }], panelShow: [{ type: i0.Output, args: ["panelShow"] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SmzTemplateDirective), { isSignal: true }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], filterInput: [{ type: i0.ViewChild, args: ['filterInput', { isSignal: true }] }] } });
 
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-unsafe-return, max-len */
 /* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-argument */
@@ -4448,6 +4595,7 @@ class SmzInputNumberComponent extends SmzValueAccessor {
     placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
     readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : {}), transform: booleanAttribute });
     inputId = input('', ...(ngDevMode ? [{ debugName: "inputId" }] : []));
+    name = input('', ...(ngDevMode ? [{ debugName: "name" }] : []));
     inputed = output();
     keyDown = output();
     blurred = output();
@@ -4584,7 +4732,7 @@ class SmzInputNumberComponent extends SmzValueAccessor {
         return value;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzInputNumberComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzInputNumberComponent, isStandalone: true, selector: "ui-input-number", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, localeMatcher: { classPropertyName: "localeMatcher", publicName: "localeMatcher", isSignal: true, isRequired: false, transformFunction: null }, currency: { classPropertyName: "currency", publicName: "currency", isSignal: true, isRequired: false, transformFunction: null }, currencyDisplay: { classPropertyName: "currencyDisplay", publicName: "currencyDisplay", isSignal: true, isRequired: false, transformFunction: null }, useGrouping: { classPropertyName: "useGrouping", publicName: "useGrouping", isSignal: true, isRequired: false, transformFunction: null }, minFractionDigits: { classPropertyName: "minFractionDigits", publicName: "minFractionDigits", isSignal: true, isRequired: false, transformFunction: null }, maxFractionDigits: { classPropertyName: "maxFractionDigits", publicName: "maxFractionDigits", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, showButtons: { classPropertyName: "showButtons", publicName: "showButtons", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, allowEmpty: { classPropertyName: "allowEmpty", publicName: "allowEmpty", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inputed: "inputed", keyDown: "keyDown", blurred: "blurred", focused: "focused" }, host: { classAttribute: "flex min-w-0" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SmzInputNumberComponent), multi: true }], viewQueries: [{ propertyName: "field", first: true, predicate: ["field"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzInputNumberComponent, isStandalone: true, selector: "ui-input-number", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, localeMatcher: { classPropertyName: "localeMatcher", publicName: "localeMatcher", isSignal: true, isRequired: false, transformFunction: null }, currency: { classPropertyName: "currency", publicName: "currency", isSignal: true, isRequired: false, transformFunction: null }, currencyDisplay: { classPropertyName: "currencyDisplay", publicName: "currencyDisplay", isSignal: true, isRequired: false, transformFunction: null }, useGrouping: { classPropertyName: "useGrouping", publicName: "useGrouping", isSignal: true, isRequired: false, transformFunction: null }, minFractionDigits: { classPropertyName: "minFractionDigits", publicName: "minFractionDigits", isSignal: true, isRequired: false, transformFunction: null }, maxFractionDigits: { classPropertyName: "maxFractionDigits", publicName: "maxFractionDigits", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, showButtons: { classPropertyName: "showButtons", publicName: "showButtons", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, allowEmpty: { classPropertyName: "allowEmpty", publicName: "allowEmpty", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inputed: "inputed", keyDown: "keyDown", blurred: "blurred", focused: "focused" }, host: { classAttribute: "flex min-w-0" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SmzInputNumberComponent), multi: true }], viewQueries: [{ propertyName: "field", first: true, predicate: ["field"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
     <div class="relative flex w-full items-stretch">
       <input
         #field
@@ -4594,6 +4742,7 @@ class SmzInputNumberComponent extends SmzValueAccessor {
         class="h-control w-full min-w-0 rounded-control border border-ui-line-strong bg-ui-surface-1 px-input-x font-ui text-ui-md text-ui-fg transition-colors duration-ui placeholder:text-ui-fg-subtle focus:outline-none focus:border-ui-focus focus:ring-1 focus:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-50"
         [class.pr-14]="showButtons()"
         [attr.id]="inputId() || null"
+        [attr.name]="name() || null"
         [attr.placeholder]="placeholder() || null"
         [attr.aria-valuemin]="min()"
         [attr.aria-valuemax]="max()"
@@ -4651,6 +4800,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
         class="h-control w-full min-w-0 rounded-control border border-ui-line-strong bg-ui-surface-1 px-input-x font-ui text-ui-md text-ui-fg transition-colors duration-ui placeholder:text-ui-fg-subtle focus:outline-none focus:border-ui-focus focus:ring-1 focus:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-50"
         [class.pr-14]="showButtons()"
         [attr.id]="inputId() || null"
+        [attr.name]="name() || null"
         [attr.placeholder]="placeholder() || null"
         [attr.aria-valuemin]="min()"
         [attr.aria-valuemax]="max()"
@@ -4691,7 +4841,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
     </div>
   `,
                 }]
-        }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], localeMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "localeMatcher", required: false }] }], currency: [{ type: i0.Input, args: [{ isSignal: true, alias: "currency", required: false }] }], currencyDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencyDisplay", required: false }] }], useGrouping: [{ type: i0.Input, args: [{ isSignal: true, alias: "useGrouping", required: false }] }], minFractionDigits: [{ type: i0.Input, args: [{ isSignal: true, alias: "minFractionDigits", required: false }] }], maxFractionDigits: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFractionDigits", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], showButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showButtons", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], allowEmpty: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowEmpty", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], inputed: [{ type: i0.Output, args: ["inputed"] }], keyDown: [{ type: i0.Output, args: ["keyDown"] }], blurred: [{ type: i0.Output, args: ["blurred"] }], focused: [{ type: i0.Output, args: ["focused"] }], field: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }] } });
+        }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], localeMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "localeMatcher", required: false }] }], currency: [{ type: i0.Input, args: [{ isSignal: true, alias: "currency", required: false }] }], currencyDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencyDisplay", required: false }] }], useGrouping: [{ type: i0.Input, args: [{ isSignal: true, alias: "useGrouping", required: false }] }], minFractionDigits: [{ type: i0.Input, args: [{ isSignal: true, alias: "minFractionDigits", required: false }] }], maxFractionDigits: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFractionDigits", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], showButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showButtons", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], allowEmpty: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowEmpty", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], inputed: [{ type: i0.Output, args: ["inputed"] }], keyDown: [{ type: i0.Output, args: ["keyDown"] }], blurred: [{ type: i0.Output, args: ["blurred"] }], focused: [{ type: i0.Output, args: ["focused"] }], field: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }] } });
 
 const pad = (value, length = 2) => String(value).padStart(length, '0');
 const escapeRegExp = (text) => text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
@@ -5816,6 +5966,7 @@ class SmzInputMaskComponent extends SmzValueAccessor {
     placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
     readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : {}), transform: booleanAttribute });
     inputId = input('', ...(ngDevMode ? [{ debugName: "inputId" }] : []));
+    name = input('', ...(ngDevMode ? [{ debugName: "name" }] : []));
     /** Tipo do `<input>` nativo (`text`, `tel`, `password`...). */
     type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : []));
     inputed = output();
@@ -5865,9 +6016,13 @@ class SmzInputMaskComponent extends SmzValueAccessor {
         }
         return text;
     }, ...(ngDevMode ? [{ debugName: "display" }] : []));
+    /**
+     * Aceita `number` alem de `string` (ex.: `FormControl` com `5`): o valor e convertido para texto antes de distribuir
+     * nos slots, senao `text.length` e `undefined` e o campo abre vazio.
+     */
     writeValue(value) {
-        super.writeValue(value);
-        this.entered.set(this.fitToSlots(value ?? ''));
+        super.writeValue(value === null || value === undefined ? null : String(value));
+        this.entered.set(this.fitToSlots(value === null || value === undefined ? '' : String(value)));
     }
     onFocus() {
         this.focusedState.set(true);
@@ -5970,21 +6125,22 @@ class SmzInputMaskComponent extends SmzValueAccessor {
         this.field().nativeElement.setSelectionRange(position, position);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzInputMaskComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.1", type: SmzInputMaskComponent, isStandalone: true, selector: "ui-input-mask", inputs: { mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, slotChar: { classPropertyName: "slotChar", publicName: "slotChar", isSignal: true, isRequired: false, transformFunction: null }, characterPattern: { classPropertyName: "characterPattern", publicName: "characterPattern", isSignal: true, isRequired: false, transformFunction: null }, unmask: { classPropertyName: "unmask", publicName: "unmask", isSignal: true, isRequired: false, transformFunction: null }, autoClear: { classPropertyName: "autoClear", publicName: "autoClear", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inputed: "inputed", blurred: "blurred", completed: "completed" }, host: { classAttribute: "flex min-w-0" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SmzInputMaskComponent), multi: true }], viewQueries: [{ propertyName: "field", first: true, predicate: ["field"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
-    <input
-      #field
-      [attr.type]="type()"
-      class="h-control w-full min-w-0 rounded-control border border-ui-line-strong bg-ui-surface-1 px-input-x font-ui text-ui-md text-ui-fg transition-colors duration-ui placeholder:text-ui-fg-subtle focus:outline-none focus:border-ui-focus focus:ring-1 focus:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-50 [&.ng-invalid.ng-dirty]:border-ui-danger"
-      [attr.id]="inputId() || null"
-      [attr.placeholder]="placeholder() || null"
-      [disabled]="isDisabled()"
-      [readOnly]="readonly()"
-      [value]="display()"
-      (focus)="onFocus()"
-      (input)="onInput($event)"
-      (keydown)="onKeydown($event)"
-      (blur)="onBlur($event)"
-    />
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.1", type: SmzInputMaskComponent, isStandalone: true, selector: "ui-input-mask", inputs: { mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, slotChar: { classPropertyName: "slotChar", publicName: "slotChar", isSignal: true, isRequired: false, transformFunction: null }, characterPattern: { classPropertyName: "characterPattern", publicName: "characterPattern", isSignal: true, isRequired: false, transformFunction: null }, unmask: { classPropertyName: "unmask", publicName: "unmask", isSignal: true, isRequired: false, transformFunction: null }, autoClear: { classPropertyName: "autoClear", publicName: "autoClear", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inputed: "inputed", blurred: "blurred", completed: "completed" }, host: { classAttribute: "flex min-w-0" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SmzInputMaskComponent), multi: true }], viewQueries: [{ propertyName: "field", first: true, predicate: ["field"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    <input
+      #field
+      [attr.type]="type()"
+      class="h-control w-full min-w-0 rounded-control border border-ui-line-strong bg-ui-surface-1 px-input-x font-ui text-ui-md text-ui-fg transition-colors duration-ui placeholder:text-ui-fg-subtle focus:outline-none focus:border-ui-focus focus:ring-1 focus:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-50 [&.ng-invalid.ng-dirty]:border-ui-danger"
+      [attr.id]="inputId() || null"
+      [attr.name]="name() || null"
+      [attr.placeholder]="placeholder() || null"
+      [disabled]="isDisabled()"
+      [readOnly]="readonly()"
+      [value]="display()"
+      (focus)="onFocus()"
+      (input)="onInput($event)"
+      (keydown)="onKeydown($event)"
+      (blur)="onBlur($event)"
+    />
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzInputMaskComponent, decorators: [{
@@ -5994,24 +6150,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SmzInputMaskComponent), multi: true }],
                     host: { class: 'flex min-w-0' },
-                    template: `
-    <input
-      #field
-      [attr.type]="type()"
-      class="h-control w-full min-w-0 rounded-control border border-ui-line-strong bg-ui-surface-1 px-input-x font-ui text-ui-md text-ui-fg transition-colors duration-ui placeholder:text-ui-fg-subtle focus:outline-none focus:border-ui-focus focus:ring-1 focus:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-50 [&.ng-invalid.ng-dirty]:border-ui-danger"
-      [attr.id]="inputId() || null"
-      [attr.placeholder]="placeholder() || null"
-      [disabled]="isDisabled()"
-      [readOnly]="readonly()"
-      [value]="display()"
-      (focus)="onFocus()"
-      (input)="onInput($event)"
-      (keydown)="onKeydown($event)"
-      (blur)="onBlur($event)"
-    />
+                    template: `
+    <input
+      #field
+      [attr.type]="type()"
+      class="h-control w-full min-w-0 rounded-control border border-ui-line-strong bg-ui-surface-1 px-input-x font-ui text-ui-md text-ui-fg transition-colors duration-ui placeholder:text-ui-fg-subtle focus:outline-none focus:border-ui-focus focus:ring-1 focus:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-50 [&.ng-invalid.ng-dirty]:border-ui-danger"
+      [attr.id]="inputId() || null"
+      [attr.name]="name() || null"
+      [attr.placeholder]="placeholder() || null"
+      [disabled]="isDisabled()"
+      [readOnly]="readonly()"
+      [value]="display()"
+      (focus)="onFocus()"
+      (input)="onInput($event)"
+      (keydown)="onKeydown($event)"
+      (blur)="onBlur($event)"
+    />
   `,
                 }]
-        }], propDecorators: { mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], slotChar: [{ type: i0.Input, args: [{ isSignal: true, alias: "slotChar", required: false }] }], characterPattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "characterPattern", required: false }] }], unmask: [{ type: i0.Input, args: [{ isSignal: true, alias: "unmask", required: false }] }], autoClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoClear", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], inputed: [{ type: i0.Output, args: ["inputed"] }], blurred: [{ type: i0.Output, args: ["blurred"] }], completed: [{ type: i0.Output, args: ["completed"] }], field: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }] } });
+        }], propDecorators: { mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], slotChar: [{ type: i0.Input, args: [{ isSignal: true, alias: "slotChar", required: false }] }], characterPattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "characterPattern", required: false }] }], unmask: [{ type: i0.Input, args: [{ isSignal: true, alias: "unmask", required: false }] }], autoClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoClear", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], inputed: [{ type: i0.Output, args: ["inputed"] }], blurred: [{ type: i0.Output, args: ["blurred"] }], completed: [{ type: i0.Output, args: ["completed"] }], field: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }] } });
 
 /* eslint-disable max-len -- classes Tailwind nos templates */
 const DEFAULT_MEDIUM = '^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})';
@@ -6484,6 +6641,11 @@ class SmzUiTimelineComponent {
     contentTemplate = computed(() => smzFindTemplate(this.templates(), 'content'), ...(ngDevMode ? [{ debugName: "contentTemplate" }] : []));
     oppositeTemplate = computed(() => smzFindTemplate(this.templates(), 'opposite'), ...(ngDevMode ? [{ debugName: "oppositeTemplate" }] : []));
     horizontal = computed(() => this.layout() === 'horizontal' || this.align() === 'top' || this.align() === 'bottom', ...(ngDevMode ? [{ debugName: "horizontal" }] : []));
+    /** No layout horizontal, o conteudo fica acima da linha em `top` e nos itens impares de `alternate`/`right`. */
+    contentOnTop(index) {
+        const align = this.align();
+        return align === 'top' || align === 'right' || (align === 'alternate' && index % 2 === 1);
+    }
     rowReverse(index) {
         const align = this.align();
         return align === 'right' || (align === 'alternate' && index % 2 === 1);
@@ -6500,7 +6662,45 @@ class SmzUiTimelineComponent {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzUiTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzUiTimelineComponent, isStandalone: true, selector: "ui-timeline", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block font-ui text-ui-fg" }, queries: [{ propertyName: "templates", predicate: SmzTemplateDirective, isSignal: true }], ngImport: i0, template: `
-    <div class="flex" [class]="horizontal() ? 'flex-row' : 'flex-col'" [ngClass]="styleClass()">
+    @if (horizontal()) {
+      <!-- Nao usar a classe grid do Tailwind: o CSS legado do core (.grid, PrimeFlex) a sobrescreve com display:flex !important.
+           Grade de 3 linhas (conteudo de cima / marcadores / conteudo de baixo) com subgrade por item: todos os marcadores ficam na mesma linha. -->
+      <div style="display: grid; grid-template-rows: auto auto auto" [style.grid-template-columns]="'repeat(' + (value() ?? []).length + ', minmax(0, 1fr))'" [ngClass]="styleClass()">
+        @for (event of value() ?? []; track $index; let index = $index; let first = $first; let last = $last) {
+          <div class="tl-item min-w-0" style="display: grid; grid-row: span 3; grid-template-rows: subgrid">
+            <div class="flex min-w-0 flex-col justify-end px-2 pb-2 text-center" style="grid-row: 1">
+              @if (contentOnTop(index)) {
+                @if (contentTemplate(); as content) {
+                  <ng-container [ngTemplateOutlet]="content" [ngTemplateOutletContext]="{ $implicit: event, index: index }" />
+                }
+              } @else if (oppositeTemplate(); as opposite) {
+                <ng-container [ngTemplateOutlet]="opposite" [ngTemplateOutletContext]="{ $implicit: event, index: index }" />
+              }
+            </div>
+            <div class="flex items-center" style="grid-row: 2">
+              <span class="h-0.5 flex-1" [class]="first ? 'bg-transparent' : 'bg-ui-line'"></span>
+              @if (markerTemplate(); as marker) {
+                <ng-container [ngTemplateOutlet]="marker" [ngTemplateOutletContext]="{ $implicit: event, index: index }" />
+              }
+              @else {
+                <span class="block h-4 w-4 shrink-0 rounded-full border-2 border-ui-primary bg-ui-surface-1"></span>
+              }
+              <span class="h-0.5 flex-1" [class]="last ? 'bg-transparent' : 'bg-ui-line'"></span>
+            </div>
+            <div class="flex min-w-0 flex-col px-2 pt-2 text-center" style="grid-row: 3">
+              @if (!contentOnTop(index)) {
+                @if (contentTemplate(); as content) {
+                  <ng-container [ngTemplateOutlet]="content" [ngTemplateOutletContext]="{ $implicit: event, index: index }" />
+                }
+              } @else if (oppositeTemplate(); as opposite) {
+                <ng-container [ngTemplateOutlet]="opposite" [ngTemplateOutletContext]="{ $implicit: event, index: index }" />
+              }
+            </div>
+          </div>
+        }
+      </div>
+    } @else {
+    <div class="flex flex-col" [ngClass]="styleClass()">
       @for (event of value() ?? []; track $index; let index = $index; let last = $last) {
         <div class="flex min-w-0 flex-1" [class]="horizontal() ? 'flex-col' : (rowReverse(index) ? 'flex-row-reverse' : 'flex-row')">
           <div class="flex-1" [class]="oppositeClass(index)">
@@ -6527,6 +6727,7 @@ class SmzUiTimelineComponent {
         </div>
       }
     </div>
+    }
   `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzUiTimelineComponent, decorators: [{
@@ -6537,7 +6738,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                     imports: [NgClass, NgTemplateOutlet],
                     host: { class: 'block font-ui text-ui-fg' },
                     template: `
-    <div class="flex" [class]="horizontal() ? 'flex-row' : 'flex-col'" [ngClass]="styleClass()">
+    @if (horizontal()) {
+      <!-- Nao usar a classe grid do Tailwind: o CSS legado do core (.grid, PrimeFlex) a sobrescreve com display:flex !important.
+           Grade de 3 linhas (conteudo de cima / marcadores / conteudo de baixo) com subgrade por item: todos os marcadores ficam na mesma linha. -->
+      <div style="display: grid; grid-template-rows: auto auto auto" [style.grid-template-columns]="'repeat(' + (value() ?? []).length + ', minmax(0, 1fr))'" [ngClass]="styleClass()">
+        @for (event of value() ?? []; track $index; let index = $index; let first = $first; let last = $last) {
+          <div class="tl-item min-w-0" style="display: grid; grid-row: span 3; grid-template-rows: subgrid">
+            <div class="flex min-w-0 flex-col justify-end px-2 pb-2 text-center" style="grid-row: 1">
+              @if (contentOnTop(index)) {
+                @if (contentTemplate(); as content) {
+                  <ng-container [ngTemplateOutlet]="content" [ngTemplateOutletContext]="{ $implicit: event, index: index }" />
+                }
+              } @else if (oppositeTemplate(); as opposite) {
+                <ng-container [ngTemplateOutlet]="opposite" [ngTemplateOutletContext]="{ $implicit: event, index: index }" />
+              }
+            </div>
+            <div class="flex items-center" style="grid-row: 2">
+              <span class="h-0.5 flex-1" [class]="first ? 'bg-transparent' : 'bg-ui-line'"></span>
+              @if (markerTemplate(); as marker) {
+                <ng-container [ngTemplateOutlet]="marker" [ngTemplateOutletContext]="{ $implicit: event, index: index }" />
+              }
+              @else {
+                <span class="block h-4 w-4 shrink-0 rounded-full border-2 border-ui-primary bg-ui-surface-1"></span>
+              }
+              <span class="h-0.5 flex-1" [class]="last ? 'bg-transparent' : 'bg-ui-line'"></span>
+            </div>
+            <div class="flex min-w-0 flex-col px-2 pt-2 text-center" style="grid-row: 3">
+              @if (!contentOnTop(index)) {
+                @if (contentTemplate(); as content) {
+                  <ng-container [ngTemplateOutlet]="content" [ngTemplateOutletContext]="{ $implicit: event, index: index }" />
+                }
+              } @else if (oppositeTemplate(); as opposite) {
+                <ng-container [ngTemplateOutlet]="opposite" [ngTemplateOutletContext]="{ $implicit: event, index: index }" />
+              }
+            </div>
+          </div>
+        }
+      </div>
+    } @else {
+    <div class="flex flex-col" [ngClass]="styleClass()">
       @for (event of value() ?? []; track $index; let index = $index; let last = $last) {
         <div class="flex min-w-0 flex-1" [class]="horizontal() ? 'flex-col' : (rowReverse(index) ? 'flex-row-reverse' : 'flex-row')">
           <div class="flex-1" [class]="oppositeClass(index)">
@@ -6564,6 +6803,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
         </div>
       }
     </div>
+    }
   `,
                 }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SmzTemplateDirective), { isSignal: true }] }] } });
@@ -8228,6 +8468,11 @@ class SmzPanelComponent {
     header = input('', ...(ngDevMode ? [{ debugName: "header" }] : []));
     toggleable = input(false, { ...(ngDevMode ? { debugName: "toggleable" } : {}), transform: booleanAttribute });
     collapsed = model(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
+    /**
+     * O que alterna o painel: `icon` (padrao; so o botao) ou `header` (o cabecalho inteiro, exceto elementos
+     * interativos dentro dele, como botoes do template `icons`). Equivale ao `toggler` do `p-panel`.
+     */
+    toggler = input('icon', ...(ngDevMode ? [{ debugName: "toggler" }] : []));
     /** Antes de alternar (cancelavel nao: apenas notifica). */
     beforeToggle = output();
     afterToggle = output();
@@ -8236,6 +8481,28 @@ class SmzPanelComponent {
     iconsTemplate = computed(() => smzFindTemplate(this.templates(), 'icons'), ...(ngDevMode ? [{ debugName: "iconsTemplate" }] : []));
     footerTemplate = computed(() => smzFindTemplate(this.templates(), 'footer'), ...(ngDevMode ? [{ debugName: "footerTemplate" }] : []));
     hasHeader = computed(() => !!this.header() || !!this.headerTemplate() || this.toggleable(), ...(ngDevMode ? [{ debugName: "hasHeader" }] : []));
+    headerToggles = computed(() => this.toggleable() && this.toggler() === 'header', ...(ngDevMode ? [{ debugName: "headerToggles" }] : []));
+    onIconClick(event) {
+        // No modo `header` o clique no botao sobe ate o cabecalho, que ja alterna.
+        if (!this.headerToggles())
+            this.toggle(event);
+    }
+    onHeaderClick(event) {
+        if (!this.headerToggles())
+            return;
+        const target = event.target;
+        const interactive = target.closest('button, a, input, select, textarea, label, [role="button"], [role="menuitem"]');
+        // Ignora controles do template `icons`; o botao-seta do proprio painel (e o cabecalho) alternam.
+        if (interactive && !interactive.classList.contains('p-panel-header') && !interactive.hasAttribute('data-panel-toggle'))
+            return;
+        this.toggle(event);
+    }
+    onHeaderKey(event) {
+        if (!this.headerToggles() || event.target !== event.currentTarget)
+            return;
+        event.preventDefault();
+        this.toggle(event);
+    }
     toggle(event) {
         const next = !this.collapsed();
         this.beforeToggle.emit({ originalEvent: event, collapsed: next });
@@ -8243,16 +8510,25 @@ class SmzPanelComponent {
         this.afterToggle.emit({ originalEvent: event, collapsed: next });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzPanelComponent, isStandalone: true, selector: "ui-panel", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, toggleable: { classPropertyName: "toggleable", publicName: "toggleable", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", beforeToggle: "beforeToggle", afterToggle: "afterToggle" }, host: { classAttribute: "p-panel block overflow-hidden rounded-card border border-ui-line bg-ui-surface-1 font-ui text-ui-md text-ui-fg" }, queries: [{ propertyName: "templates", predicate: SmzTemplateDirective, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzPanelComponent, isStandalone: true, selector: "ui-panel", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, toggleable: { classPropertyName: "toggleable", publicName: "toggleable", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, toggler: { classPropertyName: "toggler", publicName: "toggler", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", beforeToggle: "beforeToggle", afterToggle: "afterToggle" }, host: { classAttribute: "p-panel block overflow-hidden rounded-card border border-ui-line bg-ui-surface-1 font-ui text-ui-md text-ui-fg" }, queries: [{ propertyName: "templates", predicate: SmzTemplateDirective, isSignal: true }], ngImport: i0, template: `
     @if (hasHeader()) {
-      <div class="p-panel-header flex items-center justify-between gap-2 border-b border-ui-line bg-ui-surface-1 px-4 py-3">
+      <div
+        class="p-panel-header flex items-center justify-between gap-2 border-b border-ui-line bg-ui-surface-1 px-4 py-3"
+        [class]="headerToggles() ? 'cursor-pointer select-none hover:bg-ui-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ui-focus' : ''"
+        [attr.role]="headerToggles() ? 'button' : null"
+        [attr.tabindex]="headerToggles() ? 0 : null"
+        [attr.aria-expanded]="headerToggles() ? !collapsed() : null"
+        (click)="onHeaderClick($event)"
+        (keydown.enter)="onHeaderKey($event)"
+        (keydown.space)="onHeaderKey($event)"
+      >
         <div class="min-w-0 flex-1 font-semibold">
           @if (headerTemplate(); as tpl) { <ng-container [ngTemplateOutlet]="tpl" /> } @else { {{ header() }} }
         </div>
         <div class="flex items-center gap-1">
           @if (iconsTemplate(); as tpl) { <ng-container [ngTemplateOutlet]="tpl" /> }
           @if (toggleable()) {
-            <button type="button" class="inline-flex h-8 w-8 items-center justify-center rounded-full text-ui-fg-muted transition-colors duration-ui hover:bg-ui-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus" [attr.aria-expanded]="!collapsed()" [attr.aria-label]="collapsed() ? 'Expandir' : 'Recolher'" (click)="toggle($event)">
+            <button type="button" class="inline-flex h-8 w-8 items-center justify-center rounded-full text-ui-fg-muted transition-colors duration-ui hover:bg-ui-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus" data-panel-toggle [attr.aria-expanded]="!collapsed()" [attr.aria-label]="collapsed() ? 'Expandir' : 'Recolher'" [attr.tabindex]="headerToggles() ? -1 : null" (click)="onIconClick($event)">
               <svg viewBox="0 0 16 16" class="h-4 w-4 transition-transform duration-ui" [class.rotate-180]="!collapsed()" fill="none" aria-hidden="true"><path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" /></svg>
             </button>
           }
@@ -8276,14 +8552,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                     host: { class: 'p-panel block overflow-hidden rounded-card border border-ui-line bg-ui-surface-1 font-ui text-ui-md text-ui-fg' },
                     template: `
     @if (hasHeader()) {
-      <div class="p-panel-header flex items-center justify-between gap-2 border-b border-ui-line bg-ui-surface-1 px-4 py-3">
+      <div
+        class="p-panel-header flex items-center justify-between gap-2 border-b border-ui-line bg-ui-surface-1 px-4 py-3"
+        [class]="headerToggles() ? 'cursor-pointer select-none hover:bg-ui-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ui-focus' : ''"
+        [attr.role]="headerToggles() ? 'button' : null"
+        [attr.tabindex]="headerToggles() ? 0 : null"
+        [attr.aria-expanded]="headerToggles() ? !collapsed() : null"
+        (click)="onHeaderClick($event)"
+        (keydown.enter)="onHeaderKey($event)"
+        (keydown.space)="onHeaderKey($event)"
+      >
         <div class="min-w-0 flex-1 font-semibold">
           @if (headerTemplate(); as tpl) { <ng-container [ngTemplateOutlet]="tpl" /> } @else { {{ header() }} }
         </div>
         <div class="flex items-center gap-1">
           @if (iconsTemplate(); as tpl) { <ng-container [ngTemplateOutlet]="tpl" /> }
           @if (toggleable()) {
-            <button type="button" class="inline-flex h-8 w-8 items-center justify-center rounded-full text-ui-fg-muted transition-colors duration-ui hover:bg-ui-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus" [attr.aria-expanded]="!collapsed()" [attr.aria-label]="collapsed() ? 'Expandir' : 'Recolher'" (click)="toggle($event)">
+            <button type="button" class="inline-flex h-8 w-8 items-center justify-center rounded-full text-ui-fg-muted transition-colors duration-ui hover:bg-ui-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus" data-panel-toggle [attr.aria-expanded]="!collapsed()" [attr.aria-label]="collapsed() ? 'Expandir' : 'Recolher'" [attr.tabindex]="headerToggles() ? -1 : null" (click)="onIconClick($event)">
               <svg viewBox="0 0 16 16" class="h-4 w-4 transition-transform duration-ui" [class.rotate-180]="!collapsed()" fill="none" aria-hidden="true"><path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" /></svg>
             </button>
           }
@@ -8298,7 +8583,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
     }
   `,
                 }]
-        }], propDecorators: { header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], toggleable: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleable", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], beforeToggle: [{ type: i0.Output, args: ["beforeToggle"] }], afterToggle: [{ type: i0.Output, args: ["afterToggle"] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SmzTemplateDirective), { isSignal: true }] }] } });
+        }], propDecorators: { header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], toggleable: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleable", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], toggler: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggler", required: false }] }], beforeToggle: [{ type: i0.Output, args: ["beforeToggle"] }], afterToggle: [{ type: i0.Output, args: ["afterToggle"] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SmzTemplateDirective), { isSignal: true }] }] } });
 
 /* eslint-disable max-len -- classes Tailwind nos templates */
 /**
@@ -8533,7 +8818,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
 const ROW_BASE = 'border-b border-ui-line transition-colors duration-ui';
 /**
  * Tabela em arvore. Substitui o `p-treeTable` do PrimeNG.
- * Os templates `header`, `body`, `caption`, `footer`, `emptymessage` e `summary` usam `smzTemplate`;
+ * Os templates `colgroup`, `header`, `body`, `caption`, `footer`, `emptymessage` e `summary` usam `smzTemplate`;
  * o `body` recebe `let-rowNode let-rowData="rowData" let-columns="columns"`.
  *
  * <ui-tree-table [value]="nodes" [columns]="cols" selectionMode="checkbox" [(selection)]="sel">
@@ -8577,6 +8862,8 @@ class SmzTreeTableComponent {
     page = output();
     templates = contentChildren(SmzTemplateDirective, ...(ngDevMode ? [{ debugName: "templates" }] : []));
     headerTemplate = computed(() => smzFindTemplate(this.templates(), 'header'), ...(ngDevMode ? [{ debugName: "headerTemplate" }] : []));
+    /** `<colgroup>` com as larguras das colunas (como no `p-treeTable`); quando existe, a tabela usa `table-layout: fixed`. */
+    colgroupTemplate = computed(() => smzFindTemplate(this.templates(), 'colgroup'), ...(ngDevMode ? [{ debugName: "colgroupTemplate" }] : []));
     bodyTemplate = computed(() => smzFindTemplate(this.templates(), 'body'), ...(ngDevMode ? [{ debugName: "bodyTemplate" }] : []));
     captionTemplate = computed(() => smzFindTemplate(this.templates(), 'caption'), ...(ngDevMode ? [{ debugName: "captionTemplate" }] : []));
     footerTemplate = computed(() => smzFindTemplate(this.templates(), 'footer'), ...(ngDevMode ? [{ debugName: "footerTemplate" }] : []));
@@ -8798,7 +9085,10 @@ class SmzTreeTableComponent {
       <div class="border-b border-ui-line px-4 py-3"><ng-container [ngTemplateOutlet]="tpl" /></div>
     }
     <div class="relative overflow-auto" [style.max-height]="scrollable() ? scrollHeight() : null">
-      <table class="w-full border-separate border-spacing-0 text-left [&_td]:border-b [&_td]:border-ui-line [&_td]:px-4 [&_td]:py-3 [&_th]:sticky [&_th]:top-0 [&_th]:border-b [&_th]:border-ui-line [&_th]:bg-ui-surface-1 [&_th]:px-4 [&_th]:py-3 [&_th]:font-semibold" [class]="tableStyleClass() ?? ''">
+      <table class="w-full border-separate border-spacing-0 text-left [&_td]:border-b [&_td]:border-ui-line [&_td]:px-4 [&_td]:py-3 [&_th]:sticky [&_th]:top-0 [&_th]:border-b [&_th]:border-ui-line [&_th]:bg-ui-surface-1 [&_th]:px-4 [&_th]:py-3 [&_th]:font-semibold" [class]="(colgroupTemplate() ? 'table-fixed ' : '') + (tableStyleClass() ?? '')">
+        @if (colgroupTemplate(); as tpl) {
+          <ng-container [ngTemplateOutlet]="tpl" [ngTemplateOutletContext]="{ $implicit: columns() }" />
+        }
         <thead>
           @if (headerTemplate(); as tpl) {
             <ng-container [ngTemplateOutlet]="tpl" [ngTemplateOutletContext]="{ $implicit: columns() }" />
@@ -8847,7 +9137,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
       <div class="border-b border-ui-line px-4 py-3"><ng-container [ngTemplateOutlet]="tpl" /></div>
     }
     <div class="relative overflow-auto" [style.max-height]="scrollable() ? scrollHeight() : null">
-      <table class="w-full border-separate border-spacing-0 text-left [&_td]:border-b [&_td]:border-ui-line [&_td]:px-4 [&_td]:py-3 [&_th]:sticky [&_th]:top-0 [&_th]:border-b [&_th]:border-ui-line [&_th]:bg-ui-surface-1 [&_th]:px-4 [&_th]:py-3 [&_th]:font-semibold" [class]="tableStyleClass() ?? ''">
+      <table class="w-full border-separate border-spacing-0 text-left [&_td]:border-b [&_td]:border-ui-line [&_td]:px-4 [&_td]:py-3 [&_th]:sticky [&_th]:top-0 [&_th]:border-b [&_th]:border-ui-line [&_th]:bg-ui-surface-1 [&_th]:px-4 [&_th]:py-3 [&_th]:font-semibold" [class]="(colgroupTemplate() ? 'table-fixed ' : '') + (tableStyleClass() ?? '')">
+        @if (colgroupTemplate(); as tpl) {
+          <ng-container [ngTemplateOutlet]="tpl" [ngTemplateOutletContext]="{ $implicit: columns() }" />
+        }
         <thead>
           @if (headerTemplate(); as tpl) {
             <ng-container [ngTemplateOutlet]="tpl" [ngTemplateOutletContext]="{ $implicit: columns() }" />
@@ -9007,17 +9300,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
 class SmzTreeTableSortableColumnDirective {
     table = inject(SmzTreeTableComponent);
     field = input.required({ ...(ngDevMode ? { debugName: "field" } : {}), alias: 'smzTtSortableColumn' });
-    ariaSort() {
-        return this.table.sortField() === this.field() ? (this.table.sortOrder() === 1 ? 'ascending' : 'descending') : 'none';
-    }
+    /** Coluna ordenada agora (inclui o `sortField`/`sortOrder` iniciais da tabela, sem precisar de clique). */
+    sorted = computed(() => this.table.sortField() === this.field(), ...(ngDevMode ? [{ debugName: "sorted" }] : []));
+    classes = computed(() => 'cursor-pointer select-none ' + (this.sorted() ? 'bg-ui-primary/10 text-ui-primary' : ''), ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    ariaSort = computed(() => (this.sorted() ? (this.table.sortOrder() === 1 ? 'ascending' : 'descending') : 'none'), ...(ngDevMode ? [{ debugName: "ariaSort" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzTreeTableSortableColumnDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.1", type: SmzTreeTableSortableColumnDirective, isStandalone: true, selector: "th[smzTtSortableColumn]", inputs: { field: { classPropertyName: "field", publicName: "smzTtSortableColumn", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "table.sortBy(field())" }, properties: { "attr.aria-sort": "ariaSort()" }, classAttribute: "cursor-pointer select-none" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.1", type: SmzTreeTableSortableColumnDirective, isStandalone: true, selector: "th[smzTtSortableColumn]", inputs: { field: { classPropertyName: "field", publicName: "smzTtSortableColumn", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "table.sortBy(field())" }, properties: { "class": "classes()", "class.p-highlight": "sorted()", "attr.aria-sort": "ariaSort()" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzTreeTableSortableColumnDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'th[smzTtSortableColumn]',
-                    host: { class: 'cursor-pointer select-none', '(click)': 'table.sortBy(field())', '[attr.aria-sort]': 'ariaSort()' },
+                    host: {
+                        '[class]': 'classes()',
+                        '[class.p-highlight]': 'sorted()',
+                        '(click)': 'table.sortBy(field())',
+                        '[attr.aria-sort]': 'ariaSort()',
+                    },
                 }]
         }], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "smzTtSortableColumn", required: true }] }] } });
 class SmzTreeTableSortIconComponent {
@@ -9027,10 +9326,10 @@ class SmzTreeTableSortIconComponent {
         return this.table.sortField() === this.field() ? this.table.sortOrder() : 0;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzTreeTableSortIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: SmzTreeTableSortIconComponent, isStandalone: true, selector: "ui-tree-table-sort-icon", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "ml-1 inline-flex align-middle text-ui-fg-muted" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: SmzTreeTableSortIconComponent, isStandalone: true, selector: "ui-tree-table-sort-icon", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.data-sort-dir": "dir()" }, classAttribute: "ml-1 inline-flex align-middle text-ui-fg-muted" }, ngImport: i0, template: `
     <svg viewBox="0 0 16 16" class="h-3.5 w-3.5" fill="none" aria-hidden="true">
-      <path d="M5 6l3-3 3 3" [attr.stroke]="dir() === 1 ? 'rgb(var(--smz-color-primary))' : 'currentColor'" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
-      <path d="M5 10l3 3 3-3" [attr.stroke]="dir() === -1 ? 'rgb(var(--smz-color-primary))' : 'currentColor'" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+      <path d="M5 6l3-3 3 3" [attr.stroke]="dir() === 1 ? 'rgb(var(--smz-color-primary))' : 'currentColor'" [attr.stroke-width]="dir() === 1 ? 2.25 : 1.5" [attr.opacity]="dir() === -1 ? 0.3 : 1" stroke-linecap="round" stroke-linejoin="round" />
+      <path d="M5 10l3 3 3-3" [attr.stroke]="dir() === -1 ? 'rgb(var(--smz-color-primary))' : 'currentColor'" [attr.stroke-width]="dir() === -1 ? 2.25 : 1.5" [attr.opacity]="dir() === 1 ? 0.3 : 1" stroke-linecap="round" stroke-linejoin="round" />
     </svg>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -9039,11 +9338,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
             args: [{
                     selector: 'ui-tree-table-sort-icon',
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: { class: 'ml-1 inline-flex align-middle text-ui-fg-muted' },
+                    host: { class: 'ml-1 inline-flex align-middle text-ui-fg-muted', '[attr.data-sort-dir]': 'dir()' },
                     template: `
     <svg viewBox="0 0 16 16" class="h-3.5 w-3.5" fill="none" aria-hidden="true">
-      <path d="M5 6l3-3 3 3" [attr.stroke]="dir() === 1 ? 'rgb(var(--smz-color-primary))' : 'currentColor'" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
-      <path d="M5 10l3 3 3-3" [attr.stroke]="dir() === -1 ? 'rgb(var(--smz-color-primary))' : 'currentColor'" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+      <path d="M5 6l3-3 3 3" [attr.stroke]="dir() === 1 ? 'rgb(var(--smz-color-primary))' : 'currentColor'" [attr.stroke-width]="dir() === 1 ? 2.25 : 1.5" [attr.opacity]="dir() === -1 ? 0.3 : 1" stroke-linecap="round" stroke-linejoin="round" />
+      <path d="M5 10l3 3 3-3" [attr.stroke]="dir() === -1 ? 'rgb(var(--smz-color-primary))' : 'currentColor'" [attr.stroke-width]="dir() === -1 ? 2.25 : 1.5" [attr.opacity]="dir() === 1 ? 0.3 : 1" stroke-linecap="round" stroke-linejoin="round" />
     </svg>
   `,
                 }]