@ngx-smz/ui-kit 21.9.0-next.1 → 21.9.0-next.11

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { signal, input, booleanAttribute, computed, Directive, inject, TemplateRef, HostAttributeToken, ChangeDetectionStrategy, Component, ElementRef, output, forwardRef, Injector, DestroyRef, afterNextRender, Renderer2, effect, InjectionToken, viewChild, ViewContainerRef, Injectable, model, contentChildren, contentChild } from '@angular/core';
+import { signal, input, booleanAttribute, computed, Directive, inject, TemplateRef, HostAttributeToken, ChangeDetectionStrategy, Component, ElementRef, afterEveryRender, output, forwardRef, Injector, DestroyRef, afterNextRender, Renderer2, effect, InjectionToken, viewChild, ViewContainerRef, Injectable, model, contentChildren, contentChild } from '@angular/core';
 import { Overlay } from '@angular/cdk/overlay';
 import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
 import * as i1 from '@angular/forms';
@@ -295,6 +295,9 @@ const buttonClasses = smzVariants({
     },
     defaults: { size: 'md', variant: 'solid', severity: 'primary', rounded: 'false', loading: 'false', iconOnly: 'false' },
     compound: [
+        { when: { iconOnly: 'true', size: 'sm' }, class: 'w-[var(--smz-control-h-sm)]' },
+        { when: { iconOnly: 'true', size: 'md' }, class: 'w-[var(--smz-control-h)]' },
+        { when: { iconOnly: 'true', size: 'lg' }, class: 'w-[var(--smz-control-h-lg)]' },
         { when: { variant: 'solid', severity: 'primary' }, class: 'bg-ui-primary text-ui-on-primary hover:bg-ui-primary-hover active:bg-ui-primary-active' },
         { when: { variant: 'solid', severity: 'secondary' }, class: 'bg-ui-surface-3 text-ui-fg hover:bg-ui-line active:bg-ui-line-strong' },
         { when: { variant: 'solid', severity: 'danger' }, class: 'bg-ui-danger text-ui-on-danger hover:bg-ui-danger-hover active:bg-ui-danger-active' },
@@ -606,22 +609,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
         }] });
 
 const base = 'w-full border bg-ui-surface-1 font-ui text-ui-fg placeholder:text-ui-fg-subtle transition-colors duration-ui ' +
-    'focus:outline-none focus:ring-2 focus:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-50 [&.ng-invalid.ng-dirty]:border-ui-danger';
+    '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';
 const invalidVariant = { true: 'border-ui-danger', false: 'border-ui-line-strong' };
 const inputClasses = smzVariants({
     base: `${base} rounded-control`,
     variants: {
         size: {
-            sm: 'h-control-sm px-control-x-sm text-ui-sm',
-            md: 'h-control px-control-x text-ui-md',
-            lg: 'h-control-lg px-control-x-lg text-ui-lg',
+            sm: 'h-control-sm px-input-x-sm text-ui-sm',
+            md: 'h-control px-input-x text-ui-md',
+            lg: 'h-control-lg px-input-x-lg text-ui-lg',
         },
         invalid: invalidVariant,
     },
     defaults: { size: 'md', invalid: 'false' },
 });
 const textareaClasses = smzVariants({
-    base: `${base} min-h-control rounded-control px-control-x py-2 text-ui-md`,
+    base: `${base} min-h-control rounded-control px-input-x py-2 text-ui-md`,
     variants: { invalid: invalidVariant },
     defaults: { invalid: 'false' },
 });
@@ -644,18 +647,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
 /** Area de texto. Substitui o `pTextarea` / `pInputTextarea` do PrimeNG. */
 class SmzTextareaDirective {
     invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : {}), transform: booleanAttribute });
+    /** Cresce com o conteudo (equivale ao `autoResize` do `pTextarea`). */
+    autoResize = input(false, { ...(ngDevMode ? { debugName: "autoResize" } : {}), transform: booleanAttribute });
+    el = inject(ElementRef);
+    constructor() {
+        afterEveryRender(() => this.resize());
+    }
+    resize() {
+        if (!this.autoResize())
+            return;
+        const textarea = this.el.nativeElement;
+        textarea.style.overflow = 'hidden';
+        textarea.style.height = 'auto';
+        textarea.style.height = `${textarea.scrollHeight}px`;
+    }
     staticClass = smzStaticHostClass();
     classes = computed(() => smzMergeClasses(textareaClasses({ invalid: String(this.invalid()) }), this.staticClass), ...(ngDevMode ? [{ debugName: "classes" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzTextareaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.1", type: SmzTextareaDirective, isStandalone: true, selector: "textarea[smzTextarea]", inputs: { invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.aria-invalid": "invalid() || null" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.1", type: SmzTextareaDirective, isStandalone: true, selector: "textarea[smzTextarea]", inputs: { invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, autoResize: { classPropertyName: "autoResize", publicName: "autoResize", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "input": "resize()" }, properties: { "class": "classes()", "attr.aria-invalid": "invalid() || null" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzTextareaDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'textarea[smzTextarea]',
-                    host: { '[class]': 'classes()', '[attr.aria-invalid]': 'invalid() || null' },
+                    host: { '[class]': 'classes()', '[attr.aria-invalid]': 'invalid() || null', '(input)': 'resize()' },
                 }]
-        }], propDecorators: { invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], autoResize: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoResize", required: false }] }] } });
 
 /**
  * Checkbox do ui-kit. Substitui o `p-checkbox` do PrimeNG.
@@ -665,6 +682,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
  */
 class SmzCheckboxComponent extends SmzValueAccessor {
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    inputId = input('', ...(ngDevMode ? [{ debugName: "inputId" }] : []));
     /** Valor deste item quando o modelo e um array (modo grupo). */
     value = input(undefined, ...(ngDevMode ? [{ debugName: "value" }] : []));
     /** Forca o modo booleano mesmo com `value` informado. Mantido por compatibilidade com o Prime. */
@@ -691,7 +709,7 @@ class SmzCheckboxComponent extends SmzValueAccessor {
         this.changed.emit({ checked: this.checked(), value: this.current() });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzCheckboxComponent, isStandalone: true, selector: "ui-checkbox", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, binary: { classPropertyName: "binary", publicName: "binary", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, host: { classAttribute: "inline-flex" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SmzCheckboxComponent), multi: true }], usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzCheckboxComponent, isStandalone: true, selector: "ui-checkbox", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, binary: { classPropertyName: "binary", publicName: "binary", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, host: { classAttribute: "inline-flex" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SmzCheckboxComponent), multi: true }], usesInheritance: true, ngImport: i0, template: `
     <label
       class="inline-flex items-center gap-2 font-ui text-ui-md text-ui-fg"
       [class]="isDisabled() ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'"
@@ -699,6 +717,7 @@ class SmzCheckboxComponent extends SmzValueAccessor {
       <input
         type="checkbox"
         class="peer sr-only"
+        [attr.id]="inputId() || null"
         [name]="name()"
         [checked]="checked()"
         [disabled]="isDisabled()"
@@ -737,6 +756,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
       <input
         type="checkbox"
         class="peer sr-only"
+        [attr.id]="inputId() || null"
         [name]="name()"
         [checked]="checked()"
         [disabled]="isDisabled()"
@@ -760,7 +780,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
     </label>
   `,
                 }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], binary: [{ type: i0.Input, args: [{ isSignal: true, alias: "binary", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], binary: [{ type: i0.Input, args: [{ isSignal: true, alias: "binary", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
 
 /**
  * Radio do ui-kit. Substitui o `p-radiobutton` do PrimeNG.
@@ -1687,6 +1707,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');
@@ -1694,6 +1752,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 });
@@ -1703,16 +1763,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">
@@ -1743,7 +1803,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"
@@ -1751,9 +1812,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">
@@ -1794,10 +1855,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);
@@ -1857,6 +1922,15 @@ class SmzDialogComponent {
     style = input(null, ...(ngDevMode ? [{ debugName: "style" }] : []));
     styleClass = input('', ...(ngDevMode ? [{ debugName: "styleClass" }] : []));
     baseZIndex = input(0, ...(ngDevMode ? [{ debugName: "baseZIndex" }] : []));
+    /** Permite arrastar pelo cabecalho. */
+    draggable = input(false, { ...(ngDevMode ? { debugName: "draggable" } : {}), transform: booleanAttribute });
+    /** Mostra a alca nativa de redimensionar no canto inferior direito. */
+    resizable = input(false, { ...(ngDevMode ? { debugName: "resizable" } : {}), transform: booleanAttribute });
+    /** Mostra o botao de maximizar no cabecalho padrao (com `smzTemplate="header"` use `maximize()`). */
+    maximizable = input(false, { ...(ngDevMode ? { debugName: "maximizable" } : {}), transform: booleanAttribute });
+    maximized = model(false, ...(ngDevMode ? [{ debugName: "maximized" }] : []));
+    /** Posicao na tela (como o `position` do `p-dialog`). */
+    position = input('center', ...(ngDevMode ? [{ debugName: "position" }] : []));
     shown = output();
     hidden = output();
     panel = viewChild.required('panel');
@@ -1867,6 +1941,10 @@ 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() {
         effect(() => {
             if (this.visible())
@@ -1874,6 +1952,56 @@ class SmzDialogComponent {
             else
                 this.dispose();
         });
+        effect(() => {
+            const maximized = this.maximized();
+            const pane = this.sizing().pane;
+            this.overlayRef?.updateSize(maximized ? { width: '100vw', height: '100vh', maxWidth: '100vw', maxHeight: '100vh', minWidth: '0', minHeight: '0' } : { ...pane, maxWidth: pane.maxWidth ?? '95vw' });
+        });
+        effect(() => {
+            const position = this.position();
+            this.overlayRef?.updatePositionStrategy(this.strategyFor(position));
+        });
+    }
+    /** Alterna entre maximizado e normal. */
+    maximize() {
+        this.maximized.update((value) => !value);
+        this.dx.set(0);
+        this.dy.set(0);
+    }
+    startDrag(event) {
+        if (!this.draggable() || this.maximized() || event.target.closest('button'))
+            return;
+        event.preventDefault();
+        const startX = event.clientX - this.dx();
+        const startY = event.clientY - this.dy();
+        const move = (e) => {
+            this.dx.set(e.clientX - startX);
+            this.dy.set(e.clientY - startY);
+        };
+        const up = () => {
+            document.removeEventListener('pointermove', move);
+            document.removeEventListener('pointerup', up);
+        };
+        document.addEventListener('pointermove', move);
+        document.addEventListener('pointerup', up);
+    }
+    strategyFor(position) {
+        const strategy = this.overlay.position().global();
+        const horizontal = position.includes('left') ? 'left' : position.includes('right') ? 'right' : 'center';
+        const vertical = position.startsWith('top') ? 'top' : position.startsWith('bottom') ? 'bottom' : position === 'left' || position === 'right' || position === 'center' ? 'center' : 'center';
+        if (horizontal === 'left')
+            strategy.left('0');
+        else if (horizontal === 'right')
+            strategy.right('0');
+        else
+            strategy.centerHorizontally();
+        if (vertical === 'top')
+            strategy.top('0');
+        else if (vertical === 'bottom')
+            strategy.bottom('0');
+        else
+            strategy.centerVertically();
+        return strategy;
     }
     close() {
         this.visible.set(false);
@@ -1887,8 +2015,9 @@ class SmzDialogComponent {
         const modal = this.modal();
         this.overlayRef = this.overlay.create({
             hasBackdrop: modal,
-            positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically(),
+            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) {
@@ -1919,24 +2048,35 @@ 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 } }, outputs: { visible: "visibleChange", 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: `
+    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 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]="styleClass() ?? ''"
-        [ngStyle]="style()"
+        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">
+          <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">
+          <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"
@@ -1949,6 +2089,7 @@ class SmzDialogComponent {
                 </svg>
               </button>
             }
+            </div>
           </div>
         }
         <div class="min-h-0 flex-1 overflow-auto p-4"><ng-content /></div>
@@ -1973,18 +2114,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
         role="dialog"
         aria-modal="true"
         [attr.aria-label]="header() || null"
-        class="pointer-events-auto 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]="styleClass() ?? ''"
-        [ngStyle]="style()"
+        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">
+          <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">
+          <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"
@@ -1997,6 +2149,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                 </svg>
               </button>
             }
+            </div>
           </div>
         }
         <div class="min-h-0 flex-1 overflow-auto p-4"><ng-content /></div>
@@ -2009,7 +2162,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
     </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 }] }], 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 }] }] } });
+        }], 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 }] }] } });
 
 const POSITIONS$2 = [
     { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 8 },
@@ -2973,12 +3126,28 @@ class SmzAnchoredPanel {
 }
 
 /* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-return, @typescript-eslint/explicit-module-boundary-types */
+/**
+ * Texto da opcao. Sem `optionLabel`, opcoes-objeto com `label` usam esse campo (como o `p-select` do PrimeNG);
+ * primitivos sao usados como estao.
+ */
 function optionLabel(option, config) {
-    const value = config.optionLabel ? SmzObjectUtils.resolveFieldData(option, config.optionLabel) : option;
+    let value = option;
+    if (config.optionLabel)
+        value = SmzObjectUtils.resolveFieldData(option, config.optionLabel);
+    else if (option !== null && typeof option === 'object' && option.label !== undefined)
+        value = option.label;
     return value === null || value === undefined ? '' : String(value);
 }
+/**
+ * Valor da opcao. Sem `optionValue` (e sem `optionLabel`), opcoes-objeto com `value` usam esse campo
+ * (como o `p-select` do PrimeNG); caso contrario o proprio objeto e o valor.
+ */
 function optionValue(option, config) {
-    return config.optionValue ? SmzObjectUtils.resolveFieldData(option, config.optionValue) : option;
+    if (config.optionValue)
+        return SmzObjectUtils.resolveFieldData(option, config.optionValue);
+    if (!config.optionLabel && option !== null && typeof option === 'object' && option.value !== undefined)
+        return option.value;
+    return option;
 }
 function optionDisabled(option, config) {
     return config.optionDisabled ? !!SmzObjectUtils.resolveFieldData(option, config.optionDisabled) : false;
@@ -3064,6 +3233,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();
@@ -3234,13 +3407,13 @@ 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"
       role="combobox"
       aria-haspopup="listbox"
-      class="flex h-control w-full cursor-pointer items-center gap-2 rounded-control border border-ui-line-strong bg-ui-surface-1 px-control-x text-left font-ui text-ui-md text-ui-fg transition-colors duration-ui focus:outline-none focus:ring-2 focus:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-50"
+      class="flex h-control w-full cursor-pointer items-center gap-2 rounded-control border border-ui-line-strong bg-ui-surface-1 px-input-x text-left font-ui text-ui-md text-ui-fg transition-colors duration-ui focus:outline-none focus:border-ui-focus focus:ring-1 focus:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-50"
       [ngClass]="styleClass()"
       [id]="inputId() || null"
       [attr.aria-expanded]="open()"
@@ -3252,7 +3425,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"
@@ -3301,7 +3480,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 {
@@ -3310,14 +3493,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: `
@@ -3326,7 +3509,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
       type="button"
       role="combobox"
       aria-haspopup="listbox"
-      class="flex h-control w-full cursor-pointer items-center gap-2 rounded-control border border-ui-line-strong bg-ui-surface-1 px-control-x text-left font-ui text-ui-md text-ui-fg transition-colors duration-ui focus:outline-none focus:ring-2 focus:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-50"
+      class="flex h-control w-full cursor-pointer items-center gap-2 rounded-control border border-ui-line-strong bg-ui-surface-1 px-input-x text-left font-ui text-ui-md text-ui-fg transition-colors duration-ui focus:outline-none focus:border-ui-focus focus:ring-1 focus:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-50"
       [ngClass]="styleClass()"
       [id]="inputId() || null"
       [attr.aria-expanded]="open()"
@@ -3338,7 +3521,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"
@@ -3387,7 +3576,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 {
@@ -3398,7 +3591,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 */
@@ -3447,6 +3640,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(() => {
@@ -3481,7 +3678,9 @@ class SmzMultiSelectComponent extends SmzValueAccessor {
     optionRowClass(option, index) {
         if (optionDisabled(option, this.config()))
             return 'opacity-50 cursor-not-allowed';
-        return this.activeIndex() === index ? 'bg-ui-surface-3' : '';
+        if (this.activeIndex() === index)
+            return 'bg-ui-surface-3';
+        return this.selectedValues().length > 0 && this.isSelected(option) ? 'bg-ui-primary/10' : '';
     }
     toggle() {
         if (this.open())
@@ -3587,13 +3786,13 @@ 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"
       role="combobox"
       aria-haspopup="listbox"
-      class="flex h-control w-full cursor-pointer items-center gap-2 rounded-control border border-ui-line-strong bg-ui-surface-1 px-control-x text-left font-ui text-ui-md text-ui-fg transition-colors duration-ui focus:outline-none focus:ring-2 focus:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-50"
+      class="flex h-control w-full cursor-pointer items-center gap-2 rounded-control border border-ui-line-strong bg-ui-surface-1 px-input-x text-left font-ui text-ui-md text-ui-fg transition-colors duration-ui focus:outline-none focus:border-ui-focus focus:ring-1 focus:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-50"
       [ngClass]="styleClass()"
       [id]="inputId() || null"
       [attr.aria-expanded]="open()"
@@ -3603,7 +3802,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"
@@ -3673,7 +3878,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 {
@@ -3682,14 +3893,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: `
@@ -3698,7 +3909,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
       type="button"
       role="combobox"
       aria-haspopup="listbox"
-      class="flex h-control w-full cursor-pointer items-center gap-2 rounded-control border border-ui-line-strong bg-ui-surface-1 px-control-x text-left font-ui text-ui-md text-ui-fg transition-colors duration-ui focus:outline-none focus:ring-2 focus:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-50"
+      class="flex h-control w-full cursor-pointer items-center gap-2 rounded-control border border-ui-line-strong bg-ui-surface-1 px-input-x text-left font-ui text-ui-md text-ui-fg transition-colors duration-ui focus:outline-none focus:border-ui-focus focus:ring-1 focus:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-50"
       [ngClass]="styleClass()"
       [id]="inputId() || null"
       [attr.aria-expanded]="open()"
@@ -3708,7 +3919,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"
@@ -3778,7 +3995,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 {
@@ -3789,7 +4012,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 */
@@ -3811,9 +4034,11 @@ class SmzSelectButtonComponent extends SmzValueAccessor {
     /** Aceito por compatibilidade com o `p-selectbutton`; sem efeito. */
     appendTo = input(undefined, ...(ngDevMode ? [{ debugName: "appendTo" }] : []));
     changed = output();
+    /** Sem `optionLabel`/`optionValue`, opcoes-objeto com `label`/`value` sao lidas automaticamente (como no PrimeNG). */
+    sample = computed(() => (this.options() ?? [])[0], ...(ngDevMode ? [{ debugName: "sample" }] : []));
     config = computed(() => ({
-        optionLabel: this.optionLabel(),
-        optionValue: this.optionValue(),
+        optionLabel: this.optionLabel() ?? (typeof this.sample() === 'object' && this.sample() !== null && 'label' in this.sample() ? 'label' : null),
+        optionValue: this.optionValue() ?? (typeof this.sample() === 'object' && this.sample() !== null && 'value' in this.sample() ? 'value' : null),
         optionDisabled: this.optionDisabled(),
         dataKey: this.dataKey(),
     }), ...(ngDevMode ? [{ debugName: "config" }] : []));
@@ -3834,8 +4059,8 @@ class SmzSelectButtonComponent extends SmzValueAccessor {
             : sameValue(value, current, this.dataKey());
     }
     buttonClasses(option) {
-        const size = this.size() === 'small' ? 'h-control-sm text-ui-sm' : this.size() === 'large' ? 'h-control-lg text-ui-lg' : 'h-control';
-        const tone = this.isSelected(option) ? 'bg-ui-primary text-ui-on-primary' : 'bg-ui-surface-1 text-ui-fg hover:bg-ui-surface-3';
+        const size = this.size() === 'small' ? 'h-[calc(var(--smz-control-h-sm)-0.5rem)] text-ui-sm' : this.size() === 'large' ? 'h-[calc(var(--smz-control-h-lg)-0.5rem)] text-ui-lg' : 'h-[calc(var(--smz-control-h)-0.5rem)]';
+        const tone = this.isSelected(option) ? 'bg-ui-surface-1 text-ui-fg shadow-card' : 'text-ui-fg-muted hover:text-ui-fg';
         return `${size} ${tone}`;
     }
     toggle(option, event) {
@@ -3858,11 +4083,11 @@ class SmzSelectButtonComponent extends SmzValueAccessor {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzSelectButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzSelectButtonComponent, isStandalone: true, selector: "ui-select-button", 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 }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, allowEmpty: { classPropertyName: "allowEmpty", publicName: "allowEmpty", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, host: { classAttribute: "inline-flex" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SmzSelectButtonComponent), multi: true }], usesInheritance: true, ngImport: i0, template: `
-    <div role="group" class="inline-flex overflow-hidden rounded-control border border-ui-line-strong" [ngClass]="styleClass()">
+    <div role="group" class="inline-flex gap-1 rounded-control bg-ui-surface-3 p-1" [ngClass]="styleClass()">
       @for (option of options(); track $index) {
         <button
           type="button"
-          class="inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap border-l border-ui-line-strong px-control-x font-ui text-ui-md transition-colors duration-ui first:border-l-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-50"
+          class="inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-control px-control-x font-ui text-ui-md font-medium transition-colors duration-ui focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-50"
           [class]="buttonClasses(option)"
           [attr.aria-pressed]="isSelected(option)"
           [disabled]="isDisabled() || isOptionDisabled(option)"
@@ -3887,11 +4112,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                     providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SmzSelectButtonComponent), multi: true }],
                     host: { class: 'inline-flex' },
                     template: `
-    <div role="group" class="inline-flex overflow-hidden rounded-control border border-ui-line-strong" [ngClass]="styleClass()">
+    <div role="group" class="inline-flex gap-1 rounded-control bg-ui-surface-3 p-1" [ngClass]="styleClass()">
       @for (option of options(); track $index) {
         <button
           type="button"
-          class="inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap border-l border-ui-line-strong px-control-x font-ui text-ui-md transition-colors duration-ui first:border-l-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-50"
+          class="inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-control px-control-x font-ui text-ui-md font-medium transition-colors duration-ui focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-50"
           [class]="buttonClasses(option)"
           [attr.aria-pressed]="isSelected(option)"
           [disabled]="isDisabled() || isOptionDisabled(option)"
@@ -4167,14 +4392,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
 /** Complemento de um `ui-input-group`. Substitui o `p-inputgroupaddon` do PrimeNG. */
 class SmzInputGroupAddonComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzInputGroupAddonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: SmzInputGroupAddonComponent, isStandalone: true, selector: "ui-input-group-addon", host: { classAttribute: "inline-flex items-center rounded-control border border-ui-line-strong bg-ui-surface-3 px-control-x-sm font-ui text-ui-md text-ui-fg-muted" }, ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: SmzInputGroupAddonComponent, isStandalone: true, selector: "ui-input-group-addon", host: { classAttribute: "inline-flex items-center rounded-control border border-ui-line-strong bg-ui-surface-3 px-input-x-sm font-ui text-ui-md text-ui-fg-muted" }, ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzInputGroupAddonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ui-input-group-addon',
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: { class: 'inline-flex items-center rounded-control border border-ui-line-strong bg-ui-surface-3 px-control-x-sm font-ui text-ui-md text-ui-fg-muted' },
+                    host: { class: 'inline-flex items-center rounded-control border border-ui-line-strong bg-ui-surface-3 px-input-x-sm font-ui text-ui-md text-ui-fg-muted' },
                     template: '<ng-content />',
                 }]
         }] });
@@ -4475,7 +4700,7 @@ class SmzInputNumberComponent extends SmzValueAccessor {
         type="text"
         inputmode="decimal"
         autocomplete="off"
-        class="h-control w-full min-w-0 rounded-control border border-ui-line-strong bg-ui-surface-1 px-control-x font-ui text-ui-md text-ui-fg transition-colors duration-ui placeholder:text-ui-fg-subtle focus:outline-none focus:ring-2 focus:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-50"
+        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.placeholder]="placeholder() || null"
@@ -4532,7 +4757,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
         type="text"
         inputmode="decimal"
         autocomplete="off"
-        class="h-control w-full min-w-0 rounded-control border border-ui-line-strong bg-ui-surface-1 px-control-x font-ui text-ui-md text-ui-fg transition-colors duration-ui placeholder:text-ui-fg-subtle focus:outline-none focus:ring-2 focus:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-50"
+        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.placeholder]="placeholder() || null"
@@ -4810,10 +5035,15 @@ class SmzDatePickerComponent extends SmzValueAccessor {
     fieldRef = viewChild.required('field');
     panel = viewChild.required('panel');
     anchored = new SmzAnchoredPanel(this.overlay, this.viewContainer);
+    /**
+     * Aceita `Date`, string (ISO ou parseavel) e numero (timestamp), como o `p-datepicker`.
+     * Valores invalidos viram `null` em vez de lancar. O modelo do formulario so muda quando o usuario escolhe uma data.
+     */
     writeValue(value) {
-        super.writeValue(value);
+        const coerced = coerceDateValue(value);
+        super.writeValue(coerced);
         this.typed.set(null);
-        this.syncViewTo(value);
+        this.syncViewTo(coerced);
     }
     ngOnDestroy() {
         this.anchored.close();
@@ -5088,7 +5318,7 @@ class SmzDatePickerComponent extends SmzValueAccessor {
         #field
         type="text"
         autocomplete="off"
-        class="h-control w-full min-w-0 rounded-control border border-ui-line-strong bg-ui-surface-1 px-control-x font-ui text-ui-md text-ui-fg transition-colors duration-ui placeholder:text-ui-fg-subtle focus:outline-none focus:ring-2 focus:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-50 [&.ng-invalid.ng-dirty]:border-ui-danger"
+        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"
         [class.pr-10]="showIcon()"
         [attr.id]="inputId() || null"
         [attr.placeholder]="placeholder() || null"
@@ -5228,7 +5458,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
         #field
         type="text"
         autocomplete="off"
-        class="h-control w-full min-w-0 rounded-control border border-ui-line-strong bg-ui-surface-1 px-control-x font-ui text-ui-md text-ui-fg transition-colors duration-ui placeholder:text-ui-fg-subtle focus:outline-none focus:ring-2 focus:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-50 [&.ng-invalid.ng-dirty]:border-ui-danger"
+        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"
         [class.pr-10]="showIcon()"
         [attr.id]="inputId() || null"
         [attr.placeholder]="placeholder() || null"
@@ -5355,6 +5585,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
   `,
                 }]
         }], propDecorators: { selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], showTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTime", required: false }] }], timeOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeOnly", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], hourFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourFormat", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], showButtonBar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showButtonBar", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], showOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOnFocus", required: false }] }], keepInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepInvalid", required: false }] }], readonlyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlyInput", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], touchUI: [{ type: i0.Input, args: [{ isSignal: true, alias: "touchUI", required: false }] }], focusTrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusTrap", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }], cleared: [{ type: i0.Output, args: ["cleared"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], blurred: [{ type: i0.Output, args: ["blurred"] }], anchorRef: [{ type: i0.ViewChild, args: ['anchor', { isSignal: true }] }], fieldRef: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }] } });
+function toDate(value) {
+    if (value instanceof Date)
+        return Number.isNaN(value.getTime()) ? null : value;
+    if (typeof value === 'string' || typeof value === 'number') {
+        if (value === '')
+            return null;
+        const date = new Date(value);
+        return Number.isNaN(date.getTime()) ? null : date;
+    }
+    return null;
+}
+function coerceDateValue(value) {
+    if (Array.isArray(value)) {
+        const dates = value.map(toDate).filter((date) => date !== null);
+        return dates.length > 0 ? dates : null;
+    }
+    return toDate(value);
+}
 
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-unsafe-return, max-len */
 /* eslint-disable max-len -- classes Tailwind nos templates */
@@ -5532,7 +5780,7 @@ class SmzAutoCompleteComponent extends SmzValueAccessor {
         role="combobox"
         autocomplete="off"
         aria-autocomplete="list"
-        class="h-control w-full min-w-0 rounded-control border border-ui-line-strong bg-ui-surface-1 px-control-x font-ui text-ui-md text-ui-fg transition-colors duration-ui placeholder:text-ui-fg-subtle focus:outline-none focus:ring-2 focus:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-50 [&.ng-invalid.ng-dirty]:border-ui-danger"
+        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"
         [class]="dropdown() ? 'pr-10' : ''"
         [attr.id]="inputId() || null"
         [attr.placeholder]="placeholder() || null"
@@ -5603,7 +5851,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
         role="combobox"
         autocomplete="off"
         aria-autocomplete="list"
-        class="h-control w-full min-w-0 rounded-control border border-ui-line-strong bg-ui-surface-1 px-control-x font-ui text-ui-md text-ui-fg transition-colors duration-ui placeholder:text-ui-fg-subtle focus:outline-none focus:ring-2 focus:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-50 [&.ng-invalid.ng-dirty]:border-ui-danger"
+        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"
         [class]="dropdown() ? 'pr-10' : ''"
         [attr.id]="inputId() || null"
         [attr.placeholder]="placeholder() || null"
@@ -5677,6 +5925,8 @@ class SmzInputMaskComponent extends SmzValueAccessor {
     placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
     readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : {}), transform: booleanAttribute });
     inputId = input('', ...(ngDevMode ? [{ debugName: "inputId" }] : []));
+    /** Tipo do `<input>` nativo (`text`, `tel`, `password`...). */
+    type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : []));
     inputed = output();
     blurred = output();
     completed = output();
@@ -5726,7 +5976,7 @@ class SmzInputMaskComponent extends SmzValueAccessor {
     }, ...(ngDevMode ? [{ debugName: "display" }] : []));
     writeValue(value) {
         super.writeValue(value);
-        this.entered.set(this.unmask() ? this.fitToSlots(value ?? '') : this.fitToSlots(value ?? ''));
+        this.entered.set(this.fitToSlots(value ?? ''));
     }
     onFocus() {
         this.focusedState.set(true);
@@ -5771,6 +6021,10 @@ class SmzInputMaskComponent extends SmzValueAccessor {
             setTimeout(() => this.moveCaret(focusSlot));
         }
     }
+    /**
+     * Sem `maxlength` no `<input>`: numa mascara fixa o texto exibido ja tem o tamanho maximo (ex.: "5__.___.___-__"),
+     * e o navegador bloquearia a insercao de qualquer caractere novo. `fitToSlots` descarta o que nao cabe.
+     */
     onInput(event) {
         const element = event.target;
         const entered = this.fitToSlots(element.value);
@@ -5825,14 +6079,13 @@ 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 } }, 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: `
+    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
-      type="text"
-      class="h-control w-full min-w-0 rounded-control border border-ui-line-strong bg-ui-surface-1 px-control-x font-ui text-ui-md text-ui-fg transition-colors duration-ui placeholder:text-ui-fg-subtle focus:outline-none focus:ring-2 focus:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-50 [&.ng-invalid.ng-dirty]:border-ui-danger"
+      [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"
-      [attr.maxlength]="parsed().literals.length"
       [disabled]="isDisabled()"
       [readOnly]="readonly()"
       [value]="display()"
@@ -5853,11 +6106,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                     template: `
     <input
       #field
-      type="text"
-      class="h-control w-full min-w-0 rounded-control border border-ui-line-strong bg-ui-surface-1 px-control-x font-ui text-ui-md text-ui-fg transition-colors duration-ui placeholder:text-ui-fg-subtle focus:outline-none focus:ring-2 focus:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-50 [&.ng-invalid.ng-dirty]:border-ui-danger"
+      [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"
-      [attr.maxlength]="parsed().literals.length"
       [disabled]="isDisabled()"
       [readOnly]="readonly()"
       [value]="display()"
@@ -5868,7 +6120,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
     />
   `,
                 }]
-        }], 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 }] }], 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 }] }], 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,})';
@@ -5922,7 +6174,7 @@ class SmzPasswordComponent extends SmzValueAccessor {
       <input
         [type]="visible() ? 'text' : 'password'"
         autocomplete="off"
-        class="h-control w-full min-w-0 rounded-control border border-ui-line-strong bg-ui-surface-1 px-control-x font-ui text-ui-md text-ui-fg transition-colors duration-ui placeholder:text-ui-fg-subtle focus:outline-none focus:ring-2 focus:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-50 [&.ng-invalid.ng-dirty]:border-ui-danger"
+        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"
         [class.pr-10]="toggleMask()"
         [attr.id]="inputId() || null"
         [attr.placeholder]="placeholder() || null"
@@ -5975,7 +6227,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
       <input
         [type]="visible() ? 'text' : 'password'"
         autocomplete="off"
-        class="h-control w-full min-w-0 rounded-control border border-ui-line-strong bg-ui-surface-1 px-control-x font-ui text-ui-md text-ui-fg transition-colors duration-ui placeholder:text-ui-fg-subtle focus:outline-none focus:ring-2 focus:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-50 [&.ng-invalid.ng-dirty]:border-ui-danger"
+        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"
         [class.pr-10]="toggleMask()"
         [attr.id]="inputId() || null"
         [attr.placeholder]="placeholder() || null"
@@ -6028,15 +6280,19 @@ class SmzColorPickerComponent extends SmzValueAccessor {
     inputId = input('', ...(ngDevMode ? [{ debugName: "inputId" }] : []));
     /** Aceito por compatibilidade com o `p-colorpicker`; sem efeito. */
     appendTo = input(undefined, ...(ngDevMode ? [{ debugName: "appendTo" }] : []));
+    /** Emitido quando o usuario escolhe uma cor (equivale ao `onChange` do `p-colorpicker`). */
+    changed = output();
     hex = computed(() => {
         const raw = (this.current() ?? '').replace('#', '');
         return /^[0-9a-fA-F]{6}$/.test(raw) ? `#${raw.toLowerCase()}` : '#000000';
     }, ...(ngDevMode ? [{ debugName: "hex" }] : []));
     onInput(event) {
-        this.commit(event.target.value.replace('#', ''));
+        const value = event.target.value.replace('#', '');
+        this.commit(value);
+        this.changed.emit({ originalEvent: event, value });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzColorPickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: SmzColorPickerComponent, isStandalone: true, selector: "ui-color-picker", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "inline-flex" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SmzColorPickerComponent), multi: true }], usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: SmzColorPickerComponent, isStandalone: true, selector: "ui-color-picker", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, host: { classAttribute: "inline-flex" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SmzColorPickerComponent), multi: true }], usesInheritance: true, ngImport: i0, template: `
     <input
       type="color"
       class="h-control w-12 cursor-pointer rounded-control border border-ui-line-strong bg-ui-surface-1 p-1 focus:outline-none focus:ring-2 focus:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-50"
@@ -6067,7 +6323,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
     />
   `,
                 }]
-        }], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }] } });
+        }], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
 
 /* eslint-disable max-len -- classes Tailwind nos templates */
 /**
@@ -6218,12 +6474,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
 class SmzAccordionComponent {
     value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
     multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : {}), transform: booleanAttribute });
+    /** Um painel foi aberto (equivale ao `onOpen` do `p-accordion`). */
+    opened = output();
+    /** Um painel foi fechado (equivale ao `onClose`). */
+    closed = output();
+    /** Aceito por compatibilidade com o `p-accordion`; sem efeito. */
+    transitionOptions = input(null, ...(ngDevMode ? [{ debugName: "transitionOptions" }] : []));
     isOpen(value) {
         const current = this.value();
         return Array.isArray(current) ? current.includes(value) : current === value;
     }
     toggle(value) {
         const open = this.isOpen(value);
+        (open ? this.closed : this.opened).emit({ value });
         if (this.multiple()) {
             const current = Array.isArray(this.value()) ? this.value() : this.value() === null ? [] : [this.value()];
             this.value.set(open ? current.filter((entry) => entry !== value) : [...current, value]);
@@ -6233,7 +6496,7 @@ class SmzAccordionComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: SmzAccordionComponent, isStandalone: true, selector: "ui-accordion", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { classAttribute: "block overflow-hidden rounded-control border border-ui-line font-ui text-ui-fg" }, ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: SmzAccordionComponent, isStandalone: true, selector: "ui-accordion", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, transitionOptions: { classPropertyName: "transitionOptions", publicName: "transitionOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", opened: "opened", closed: "closed" }, host: { classAttribute: "block overflow-hidden rounded-control border border-ui-line font-ui text-ui-fg" }, ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzAccordionComponent, decorators: [{
             type: Component,
@@ -6243,7 +6506,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                     host: { class: 'block overflow-hidden rounded-control border border-ui-line font-ui text-ui-fg' },
                     template: '<ng-content />',
                 }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], transitionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "transitionOptions", required: false }] }] } });
 class SmzAccordionPanelComponent {
     value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
     accordion = inject(SmzAccordionComponent);
@@ -6330,6 +6593,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);
@@ -6346,7 +6614,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)">
@@ -6373,6 +6679,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: [{
@@ -6383,7 +6690,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)">
@@ -6410,6 +6755,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 }] }] } });
@@ -6553,6 +6899,8 @@ class SmzPaginatorComponent {
     isLast = computed(() => this.page() >= this.pageCount() - 1, ...(ngDevMode ? [{ debugName: "isLast" }] : []));
     visible = computed(() => this.alwaysShow() || this.pageCount() > 1, ...(ngDevMode ? [{ debugName: "visible" }] : []));
     links = computed(() => {
+        if (this.totalRecords() <= 0)
+            return [];
         const size = Math.min(this.pageLinkSize(), this.pageCount());
         const start = Math.max(0, Math.min(this.page() - Math.floor(size / 2), this.pageCount() - size));
         return Array.from({ length: size }, (_, index) => start + index + 1);
@@ -6591,17 +6939,17 @@ class SmzPaginatorComponent {
         @if (showCurrentPageReport()) {
           <span class="mr-2 text-ui-fg-muted">{{ report() }}</span>
         }
-        <button type="button" class="inline-flex h-8 min-w-8 cursor-pointer items-center justify-center rounded-control px-2 font-ui text-ui-sm text-ui-fg transition-colors duration-ui hover:bg-ui-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent" aria-label="Primeira pagina" [disabled]="isFirst()" (click)="goTo(0)">
+        <button type="button" class="inline-flex h-control-lg min-w-control-lg cursor-pointer items-center justify-center rounded-full px-2 font-ui text-ui-sm text-ui-fg transition-colors duration-ui hover:bg-ui-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent" aria-label="Primeira pagina" [disabled]="isFirst()" (click)="goTo(0)">
           <svg viewBox="0 0 16 16" class="h-4 w-4" fill="none" aria-hidden="true"><path d="M8 4L4 8l4 4M12 4L8 8l4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /></svg>
         </button>
-        <button type="button" class="inline-flex h-8 min-w-8 cursor-pointer items-center justify-center rounded-control px-2 font-ui text-ui-sm text-ui-fg transition-colors duration-ui hover:bg-ui-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent" aria-label="Pagina anterior" [disabled]="isFirst()" (click)="goTo(page() - 1)">
+        <button type="button" class="inline-flex h-control-lg min-w-control-lg cursor-pointer items-center justify-center rounded-full px-2 font-ui text-ui-sm text-ui-fg transition-colors duration-ui hover:bg-ui-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent" aria-label="Pagina anterior" [disabled]="isFirst()" (click)="goTo(page() - 1)">
           <svg viewBox="0 0 16 16" class="h-4 w-4" fill="none" aria-hidden="true"><path d="M10 4L6 8l4 4" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" /></svg>
         </button>
-        @if (showPageLinks()) {
+        @if (showPageLinks() && totalRecords() > 0) {
           @for (link of links(); track link) {
             <button
               type="button"
-              class="inline-flex h-8 min-w-8 cursor-pointer items-center justify-center rounded-control px-2 font-ui text-ui-sm text-ui-fg transition-colors duration-ui hover:bg-ui-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent"
+              class="inline-flex h-control-lg min-w-control-lg cursor-pointer items-center justify-center rounded-full px-2 font-ui text-ui-sm text-ui-fg transition-colors duration-ui hover:bg-ui-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent"
               [class]="link === page() + 1 ? 'smz-paginator-page-selected bg-ui-primary/10 font-medium text-ui-primary' : ''"
               [attr.aria-current]="link === page() + 1 ? 'page' : null"
               (click)="goTo(link - 1)"
@@ -6610,10 +6958,10 @@ class SmzPaginatorComponent {
             </button>
           }
         }
-        <button type="button" class="inline-flex h-8 min-w-8 cursor-pointer items-center justify-center rounded-control px-2 font-ui text-ui-sm text-ui-fg transition-colors duration-ui hover:bg-ui-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent" aria-label="Proxima pagina" [disabled]="isLast()" (click)="goTo(page() + 1)">
+        <button type="button" class="inline-flex h-control-lg min-w-control-lg cursor-pointer items-center justify-center rounded-full px-2 font-ui text-ui-sm text-ui-fg transition-colors duration-ui hover:bg-ui-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent" aria-label="Proxima pagina" [disabled]="isLast()" (click)="goTo(page() + 1)">
           <svg viewBox="0 0 16 16" class="h-4 w-4" fill="none" aria-hidden="true"><path d="M6 4l4 4-4 4" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" /></svg>
         </button>
-        <button type="button" class="inline-flex h-8 min-w-8 cursor-pointer items-center justify-center rounded-control px-2 font-ui text-ui-sm text-ui-fg transition-colors duration-ui hover:bg-ui-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent" aria-label="Ultima pagina" [disabled]="isLast()" (click)="goTo(pageCount() - 1)">
+        <button type="button" class="inline-flex h-control-lg min-w-control-lg cursor-pointer items-center justify-center rounded-full px-2 font-ui text-ui-sm text-ui-fg transition-colors duration-ui hover:bg-ui-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent" aria-label="Ultima pagina" [disabled]="isLast()" (click)="goTo(pageCount() - 1)">
           <svg viewBox="0 0 16 16" class="h-4 w-4" fill="none" aria-hidden="true"><path d="M4 4l4 4-4 4M8 4l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /></svg>
         </button>
         @if (rowsPerPageOptions() && rowsPerPageOptions()!.length > 0) {
@@ -6636,17 +6984,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
         @if (showCurrentPageReport()) {
           <span class="mr-2 text-ui-fg-muted">{{ report() }}</span>
         }
-        <button type="button" class="inline-flex h-8 min-w-8 cursor-pointer items-center justify-center rounded-control px-2 font-ui text-ui-sm text-ui-fg transition-colors duration-ui hover:bg-ui-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent" aria-label="Primeira pagina" [disabled]="isFirst()" (click)="goTo(0)">
+        <button type="button" class="inline-flex h-control-lg min-w-control-lg cursor-pointer items-center justify-center rounded-full px-2 font-ui text-ui-sm text-ui-fg transition-colors duration-ui hover:bg-ui-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent" aria-label="Primeira pagina" [disabled]="isFirst()" (click)="goTo(0)">
           <svg viewBox="0 0 16 16" class="h-4 w-4" fill="none" aria-hidden="true"><path d="M8 4L4 8l4 4M12 4L8 8l4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /></svg>
         </button>
-        <button type="button" class="inline-flex h-8 min-w-8 cursor-pointer items-center justify-center rounded-control px-2 font-ui text-ui-sm text-ui-fg transition-colors duration-ui hover:bg-ui-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent" aria-label="Pagina anterior" [disabled]="isFirst()" (click)="goTo(page() - 1)">
+        <button type="button" class="inline-flex h-control-lg min-w-control-lg cursor-pointer items-center justify-center rounded-full px-2 font-ui text-ui-sm text-ui-fg transition-colors duration-ui hover:bg-ui-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent" aria-label="Pagina anterior" [disabled]="isFirst()" (click)="goTo(page() - 1)">
           <svg viewBox="0 0 16 16" class="h-4 w-4" fill="none" aria-hidden="true"><path d="M10 4L6 8l4 4" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" /></svg>
         </button>
-        @if (showPageLinks()) {
+        @if (showPageLinks() && totalRecords() > 0) {
           @for (link of links(); track link) {
             <button
               type="button"
-              class="inline-flex h-8 min-w-8 cursor-pointer items-center justify-center rounded-control px-2 font-ui text-ui-sm text-ui-fg transition-colors duration-ui hover:bg-ui-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent"
+              class="inline-flex h-control-lg min-w-control-lg cursor-pointer items-center justify-center rounded-full px-2 font-ui text-ui-sm text-ui-fg transition-colors duration-ui hover:bg-ui-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent"
               [class]="link === page() + 1 ? 'smz-paginator-page-selected bg-ui-primary/10 font-medium text-ui-primary' : ''"
               [attr.aria-current]="link === page() + 1 ? 'page' : null"
               (click)="goTo(link - 1)"
@@ -6655,10 +7003,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
             </button>
           }
         }
-        <button type="button" class="inline-flex h-8 min-w-8 cursor-pointer items-center justify-center rounded-control px-2 font-ui text-ui-sm text-ui-fg transition-colors duration-ui hover:bg-ui-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent" aria-label="Proxima pagina" [disabled]="isLast()" (click)="goTo(page() + 1)">
+        <button type="button" class="inline-flex h-control-lg min-w-control-lg cursor-pointer items-center justify-center rounded-full px-2 font-ui text-ui-sm text-ui-fg transition-colors duration-ui hover:bg-ui-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent" aria-label="Proxima pagina" [disabled]="isLast()" (click)="goTo(page() + 1)">
           <svg viewBox="0 0 16 16" class="h-4 w-4" fill="none" aria-hidden="true"><path d="M6 4l4 4-4 4" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" /></svg>
         </button>
-        <button type="button" class="inline-flex h-8 min-w-8 cursor-pointer items-center justify-center rounded-control px-2 font-ui text-ui-sm text-ui-fg transition-colors duration-ui hover:bg-ui-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent" aria-label="Ultima pagina" [disabled]="isLast()" (click)="goTo(pageCount() - 1)">
+        <button type="button" class="inline-flex h-control-lg min-w-control-lg cursor-pointer items-center justify-center rounded-full px-2 font-ui text-ui-sm text-ui-fg transition-colors duration-ui hover:bg-ui-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent" aria-label="Ultima pagina" [disabled]="isLast()" (click)="goTo(pageCount() - 1)">
           <svg viewBox="0 0 16 16" class="h-4 w-4" fill="none" aria-hidden="true"><path d="M4 4l4 4-4 4M8 4l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /></svg>
         </button>
         @if (rowsPerPageOptions() && rowsPerPageOptions()!.length > 0) {
@@ -7848,7 +8196,7 @@ class SmzTreeSelectComponent extends SmzValueAccessor {
       type="button"
       role="combobox"
       aria-haspopup="tree"
-      class="flex h-control w-full cursor-pointer items-center gap-2 rounded-control border border-ui-line-strong bg-ui-surface-1 px-control-x text-left font-ui text-ui-md text-ui-fg transition-colors duration-ui focus:outline-none focus:ring-2 focus:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-50"
+      class="flex h-control w-full cursor-pointer items-center gap-2 rounded-control border border-ui-line-strong bg-ui-surface-1 px-input-x text-left font-ui text-ui-md text-ui-fg transition-colors duration-ui focus:outline-none focus:border-ui-focus focus:ring-1 focus:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-50"
       [ngClass]="[containerStyleClass() ?? '', styleClass() ?? '']"
       [attr.aria-expanded]="open()"
       [disabled]="isDisabled()"
@@ -7869,7 +8217,7 @@ class SmzTreeSelectComponent extends SmzValueAccessor {
       <div class="max-h-80 overflow-auto rounded-overlay border border-ui-line bg-ui-surface-2 p-1 font-ui text-ui-md text-ui-fg shadow-overlay">
         @if (filter()) {
           <div class="p-1">
-            <input type="text" class="h-control-sm w-full rounded-control border border-ui-line-strong bg-ui-surface-1 px-control-x-sm text-ui-sm focus:outline-none focus:ring-2 focus:ring-ui-focus" [placeholder]="filterPlaceholder() ?? ''" (input)="tree._filter($any($event.target).value)" />
+            <input type="text" class="h-control-sm w-full rounded-control border border-ui-line-strong bg-ui-surface-1 px-input-x-sm text-ui-sm focus:outline-none focus:border-ui-focus focus:ring-1 focus:ring-ui-focus" [placeholder]="filterPlaceholder() ?? ''" (input)="tree._filter($any($event.target).value)" />
           </div>
         }
         <ui-tree
@@ -7901,7 +8249,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
       type="button"
       role="combobox"
       aria-haspopup="tree"
-      class="flex h-control w-full cursor-pointer items-center gap-2 rounded-control border border-ui-line-strong bg-ui-surface-1 px-control-x text-left font-ui text-ui-md text-ui-fg transition-colors duration-ui focus:outline-none focus:ring-2 focus:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-50"
+      class="flex h-control w-full cursor-pointer items-center gap-2 rounded-control border border-ui-line-strong bg-ui-surface-1 px-input-x text-left font-ui text-ui-md text-ui-fg transition-colors duration-ui focus:outline-none focus:border-ui-focus focus:ring-1 focus:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-50"
       [ngClass]="[containerStyleClass() ?? '', styleClass() ?? '']"
       [attr.aria-expanded]="open()"
       [disabled]="isDisabled()"
@@ -7922,7 +8270,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
       <div class="max-h-80 overflow-auto rounded-overlay border border-ui-line bg-ui-surface-2 p-1 font-ui text-ui-md text-ui-fg shadow-overlay">
         @if (filter()) {
           <div class="p-1">
-            <input type="text" class="h-control-sm w-full rounded-control border border-ui-line-strong bg-ui-surface-1 px-control-x-sm text-ui-sm focus:outline-none focus:ring-2 focus:ring-ui-focus" [placeholder]="filterPlaceholder() ?? ''" (input)="tree._filter($any($event.target).value)" />
+            <input type="text" class="h-control-sm w-full rounded-control border border-ui-line-strong bg-ui-surface-1 px-input-x-sm text-ui-sm focus:outline-none focus:border-ui-focus focus:ring-1 focus:ring-ui-focus" [placeholder]="filterPlaceholder() ?? ''" (input)="tree._filter($any($event.target).value)" />
           </div>
         }
         <ui-tree
@@ -7991,9 +8339,1197 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
             args: [{ providedIn: 'root' }]
         }] });
 
+/* eslint-disable max-len -- classes Tailwind nos templates */
+/**
+ * Card. Substitui o `p-card` do PrimeNG.
+ * O conteudo padrao vai no corpo; `header`, `title`, `subtitle` e `footer` podem ser strings ou templates.
+ *
+ * <ui-card header="Titulo" subheader="Sub">conteudo<ng-template smzTemplate="footer">...</ng-template></ui-card>
+ */
+class SmzCardComponent {
+    /** Titulo em texto (equivale ao slot `title`). */
+    header = input('', ...(ngDevMode ? [{ debugName: "header" }] : []));
+    /** Subtitulo em texto (equivale ao slot `subtitle`). */
+    subheader = input('', ...(ngDevMode ? [{ debugName: "subheader" }] : []));
+    templates = contentChildren(SmzTemplateDirective, ...(ngDevMode ? [{ debugName: "templates" }] : []));
+    headerTemplate = computed(() => smzFindTemplate(this.templates(), 'header'), ...(ngDevMode ? [{ debugName: "headerTemplate" }] : []));
+    titleTemplate = computed(() => smzFindTemplate(this.templates(), 'title'), ...(ngDevMode ? [{ debugName: "titleTemplate" }] : []));
+    subtitleTemplate = computed(() => smzFindTemplate(this.templates(), 'subtitle'), ...(ngDevMode ? [{ debugName: "subtitleTemplate" }] : []));
+    footerTemplate = computed(() => smzFindTemplate(this.templates(), 'footer'), ...(ngDevMode ? [{ debugName: "footerTemplate" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzCardComponent, isStandalone: true, selector: "ui-card", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, subheader: { classPropertyName: "subheader", publicName: "subheader", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "p-card flex flex-col overflow-hidden rounded-card bg-ui-surface-1 font-ui text-ui-md text-ui-fg shadow-card" }, queries: [{ propertyName: "templates", predicate: SmzTemplateDirective, isSignal: true }], ngImport: i0, template: `
+    @if (headerTemplate(); as tpl) {
+      <div class="p-card-header"><ng-container [ngTemplateOutlet]="tpl" /></div>
+    }
+    <div class="p-card-body flex flex-1 flex-col gap-2 p-5">
+      @if (titleTemplate() || header()) {
+        <div class="p-card-title text-ui-xl font-semibold">
+          @if (titleTemplate(); as tpl) { <ng-container [ngTemplateOutlet]="tpl" /> } @else { {{ header() }} }
+        </div>
+      }
+      @if (subtitleTemplate() || subheader()) {
+        <div class="p-card-subtitle text-ui-fg-muted">
+          @if (subtitleTemplate(); as tpl) { <ng-container [ngTemplateOutlet]="tpl" /> } @else { {{ subheader() }} }
+        </div>
+      }
+      <div class="p-card-content flex-1"><ng-content /></div>
+      @if (footerTemplate(); as tpl) {
+        <div class="p-card-footer"><ng-container [ngTemplateOutlet]="tpl" /></div>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ 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: SmzCardComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-card',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgTemplateOutlet],
+                    host: { class: 'p-card flex flex-col overflow-hidden rounded-card bg-ui-surface-1 font-ui text-ui-md text-ui-fg shadow-card' },
+                    template: `
+    @if (headerTemplate(); as tpl) {
+      <div class="p-card-header"><ng-container [ngTemplateOutlet]="tpl" /></div>
+    }
+    <div class="p-card-body flex flex-1 flex-col gap-2 p-5">
+      @if (titleTemplate() || header()) {
+        <div class="p-card-title text-ui-xl font-semibold">
+          @if (titleTemplate(); as tpl) { <ng-container [ngTemplateOutlet]="tpl" /> } @else { {{ header() }} }
+        </div>
+      }
+      @if (subtitleTemplate() || subheader()) {
+        <div class="p-card-subtitle text-ui-fg-muted">
+          @if (subtitleTemplate(); as tpl) { <ng-container [ngTemplateOutlet]="tpl" /> } @else { {{ subheader() }} }
+        </div>
+      }
+      <div class="p-card-content flex-1"><ng-content /></div>
+      @if (footerTemplate(); as tpl) {
+        <div class="p-card-footer"><ng-container [ngTemplateOutlet]="tpl" /></div>
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], subheader: [{ type: i0.Input, args: [{ isSignal: true, alias: "subheader", required: false }] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SmzTemplateDirective), { isSignal: true }] }] } });
+
+/* eslint-disable max-len -- classes Tailwind nos templates */
+/**
+ * Painel com cabecalho, recolhimento opcional e rodape. Substitui o `p-panel` do PrimeNG.
+ *
+ * <ui-panel header="Filtros" [toggleable]="true" [(collapsed)]="fechado">conteudo</ui-panel>
+ */
+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();
+    templates = contentChildren(SmzTemplateDirective, ...(ngDevMode ? [{ debugName: "templates" }] : []));
+    headerTemplate = computed(() => smzFindTemplate(this.templates(), 'header'), ...(ngDevMode ? [{ debugName: "headerTemplate" }] : []));
+    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 });
+        this.collapsed.set(next);
+        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 }, 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"
+        [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" 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>
+          }
+        </div>
+      </div>
+    }
+    @if (!collapsed()) {
+      <div class="p-panel-content p-4"><ng-content /></div>
+      @if (footerTemplate(); as tpl) {
+        <div class="p-panel-footer border-t border-ui-line px-4 py-3"><ng-container [ngTemplateOutlet]="tpl" /></div>
+      }
+    }
+  `, isInline: true, dependencies: [{ 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: SmzPanelComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-panel',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgTemplateOutlet],
+                    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"
+        [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" 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>
+          }
+        </div>
+      </div>
+    }
+    @if (!collapsed()) {
+      <div class="p-panel-content p-4"><ng-content /></div>
+      @if (footerTemplate(); as tpl) {
+        <div class="p-panel-footer border-t border-ui-line px-4 py-3"><ng-container [ngTemplateOutlet]="tpl" /></div>
+      }
+    }
+  `,
+                }]
+        }], 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 */
+/**
+ * Indicador de carregamento circular. Substitui o `p-progressspinner` do PrimeNG.
+ * O tamanho vem das classes do host (ex.: `class="h-12 w-12"`); a cor, de `text-ui-primary` (herdavel).
+ *
+ * <ui-progress-spinner class="h-12 w-12" strokeWidth="4" />
+ */
+class SmzProgressSpinnerComponent {
+    strokeWidth = input(4, ...(ngDevMode ? [{ debugName: "strokeWidth" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzProgressSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: SmzProgressSpinnerComponent, isStandalone: true, selector: "ui-progress-spinner", inputs: { strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "progressbar", "aria-busy": "true" }, classAttribute: "inline-block h-10 w-10 text-ui-primary" }, ngImport: i0, template: `
+    <svg viewBox="0 0 50 50" class="h-full w-full animate-spin" fill="none" aria-hidden="true">
+      <circle cx="25" cy="25" r="20" stroke="currentColor" [attr.stroke-width]="strokeWidth()" stroke-linecap="round" stroke-dasharray="90 150" />
+    </svg>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzProgressSpinnerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-progress-spinner',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'inline-block h-10 w-10 text-ui-primary', role: 'progressbar', 'aria-busy': 'true' },
+                    template: `
+    <svg viewBox="0 0 50 50" class="h-full w-full animate-spin" fill="none" aria-hidden="true">
+      <circle cx="25" cy="25" r="20" stroke="currentColor" [attr.stroke-width]="strokeWidth()" stroke-linecap="round" stroke-dasharray="90 150" />
+    </svg>
+  `,
+                }]
+        }], propDecorators: { strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }] } });
+
+/* eslint-disable max-len -- classes Tailwind nos templates */
+const BASE = 'relative block [&_label]:pointer-events-none [&_label]:absolute [&_label]:left-3 [&_label]:z-10 [&_label]:text-ui-fg-subtle [&_label]:transition-all [&_label]:duration-ui';
+const RESTING = '[&_label]:top-1/2 [&_label]:-translate-y-1/2 [&_label]:text-ui-md';
+const FLOATED = {
+    over: '[&_label]:-top-5 [&_label]:left-0 [&_label]:translate-y-0 [&_label]:text-ui-xs [&_label]:text-ui-fg-muted',
+    on: '[&_label]:top-0 [&_label]:left-2 [&_label]:-translate-y-1/2 [&_label]:bg-ui-surface-1 [&_label]:px-1 [&_label]:text-ui-xs [&_label]:text-ui-fg-muted',
+    in: '[&_label]:top-1.5 [&_label]:translate-y-0 [&_label]:text-ui-xs [&_label]:text-ui-fg-muted',
+};
+const IN_PADDING = '[&_input]:pt-4 [&_textarea]:pt-5 [&_[role=combobox]]:pt-4';
+/**
+ * Rotulo flutuante. Substitui o `p-floatlabel` do PrimeNG.
+ * O `<label>` projetado flutua quando o controle recebe foco ou tem valor
+ * (detectado em `input`/`textarea` e em selects do kit; use `[filled]` para forcar).
+ *
+ * <ui-float-label variant="on"><input smzInputText id="n" /><label for="n">Nome</label></ui-float-label>
+ */
+class SmzFloatLabelComponent {
+    variant = input('over', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    /** Forca o estado "preenchido" quando a deteccao automatica nao se aplica. */
+    filled = input(null, ...(ngDevMode ? [{ debugName: "filled" }] : []));
+    focused = signal(false, ...(ngDevMode ? [{ debugName: "focused" }] : []));
+    detected = signal(false, ...(ngDevMode ? [{ debugName: "detected" }] : []));
+    host = inject(ElementRef);
+    floated = computed(() => this.focused() || (this.filled() ?? this.detected()), ...(ngDevMode ? [{ debugName: "floated" }] : []));
+    classes = computed(() => {
+        const variant = this.variant();
+        return [BASE, this.floated() ? FLOATED[variant] : RESTING, variant === 'in' ? IN_PADDING : ''].join(' ');
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    constructor() {
+        afterEveryRender(() => this.check());
+    }
+    check() {
+        {
+            const root = this.host.nativeElement;
+            const field = root.querySelector('input:not([type=checkbox]):not([type=radio]), textarea');
+            const combo = root.querySelector('[role=combobox]');
+            let filled = false;
+            if (field && field.value !== '')
+                filled = true;
+            else if (combo && !field)
+                filled = !combo.querySelector('.text-ui-fg-subtle') && (combo.textContent ?? '').trim() !== '';
+            if (filled !== this.detected())
+                this.detected.set(filled);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzFloatLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: SmzFloatLabelComponent, isStandalone: true, selector: "ui-float-label", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, filled: { classPropertyName: "filled", publicName: "filled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focusin": "focused.set(true)", "focusout": "focused.set(false); check()", "input": "check()", "change": "check()" }, properties: { "class": "classes()" } }, ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzFloatLabelComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-float-label',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        '(focusin)': 'focused.set(true)',
+                        '(focusout)': 'focused.set(false); check()',
+                        '(input)': 'check()',
+                        '(change)': 'check()',
+                    },
+                    template: '<ng-content />',
+                }]
+        }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], filled: [{ type: i0.Input, args: [{ isSignal: true, alias: "filled", required: false }] }] } });
+
+/* eslint-disable max-len -- classes Tailwind nos templates */
+/** Painel de um `ui-splitter`. O conteudo e projetado dentro da area do painel. */
+class SmzSplitterPanelComponent {
+    content = viewChild.required(TemplateRef);
+    /** Tamanho inicial em % (sobrescreve `panelSizes` do splitter). */
+    size = input(null, ...(ngDevMode ? [{ debugName: "size" }] : []));
+    minSize = input(null, ...(ngDevMode ? [{ debugName: "minSize" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzSplitterPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.1", type: SmzSplitterPanelComponent, isStandalone: true, selector: "ui-splitter-panel", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, minSize: { classPropertyName: "minSize", publicName: "minSize", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "content", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: '<ng-template><ng-content /></ng-template>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzSplitterPanelComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-splitter-panel',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: '<ng-template><ng-content /></ng-template>',
+                }]
+        }], propDecorators: { content: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], minSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSize", required: false }] }] } });
+/**
+ * Divisor redimensionavel. Substitui o `p-splitter` / `p-splitterPanel` do PrimeNG.
+ *
+ * <ui-splitter layout="horizontal" [panelSizes]="[30, 70]" [minSizes]="[10, 20]">
+ *   <ui-splitter-panel>A</ui-splitter-panel><ui-splitter-panel>B</ui-splitter-panel>
+ * </ui-splitter>
+ */
+class SmzSplitterComponent {
+    layout = input('horizontal', ...(ngDevMode ? [{ debugName: "layout" }] : []));
+    panelSizes = input(null, ...(ngDevMode ? [{ debugName: "panelSizes" }] : []));
+    minSizes = input(null, ...(ngDevMode ? [{ debugName: "minSizes" }] : []));
+    resizeEnd = output();
+    panels = contentChildren(SmzSplitterPanelComponent, ...(ngDevMode ? [{ debugName: "panels" }] : []));
+    root = viewChild.required('root');
+    overrides = signal(null, ...(ngDevMode ? [{ debugName: "overrides" }] : []));
+    sizes = computed(() => {
+        const override = this.overrides();
+        if (override && override.length === this.panels().length)
+            return override;
+        const panels = this.panels();
+        const base = this.panelSizes() ?? [];
+        const explicit = panels.map((panel, i) => panel.size() ?? base[i] ?? null);
+        const known = explicit.reduce((sum, size) => sum + (size ?? 0), 0);
+        const free = explicit.filter((size) => size === null).length;
+        const share = free > 0 ? Math.max(0, 100 - known) / free : 0;
+        return explicit.map((size) => size ?? share);
+    }, ...(ngDevMode ? [{ debugName: "sizes" }] : []));
+    min(index) {
+        return this.panels()[index]?.minSize() ?? this.minSizes()?.[index] ?? 0;
+    }
+    startDrag(event, index) {
+        event.preventDefault();
+        const rect = this.root().nativeElement.getBoundingClientRect();
+        const total = this.layout() === 'horizontal' ? rect.width : rect.height;
+        const start = this.layout() === 'horizontal' ? event.clientX : event.clientY;
+        const initial = [...this.sizes()];
+        const move = (e) => {
+            const delta = (((this.layout() === 'horizontal' ? e.clientX : e.clientY) - start) / total) * 100;
+            this.resize(initial, index, delta);
+        };
+        const up = () => {
+            document.removeEventListener('pointermove', move);
+            document.removeEventListener('pointerup', up);
+            this.resizeEnd.emit({ sizes: this.sizes() });
+        };
+        document.addEventListener('pointermove', move);
+        document.addEventListener('pointerup', up);
+    }
+    onKey(event, index) {
+        const keys = this.layout() === 'horizontal' ? { dec: 'ArrowLeft', inc: 'ArrowRight' } : { dec: 'ArrowUp', inc: 'ArrowDown' };
+        if (event.key !== keys.dec && event.key !== keys.inc)
+            return;
+        event.preventDefault();
+        this.resize([...this.sizes()], index, event.key === keys.inc ? 2 : -2);
+        this.resizeEnd.emit({ sizes: this.sizes() });
+    }
+    resize(initial, index, delta) {
+        const pair = initial[index] + initial[index + 1];
+        const next = Math.min(Math.max(initial[index] + delta, this.min(index)), pair - this.min(index + 1));
+        const sizes = [...initial];
+        sizes[index] = next;
+        sizes[index + 1] = pair - next;
+        this.overrides.set(sizes);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzSplitterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzSplitterComponent, isStandalone: true, selector: "ui-splitter", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, panelSizes: { classPropertyName: "panelSizes", publicName: "panelSizes", isSignal: true, isRequired: false, transformFunction: null }, minSizes: { classPropertyName: "minSizes", publicName: "minSizes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { resizeEnd: "resizeEnd" }, host: { classAttribute: "block h-full w-full overflow-hidden rounded-control border border-ui-line bg-ui-surface-1 font-ui text-ui-md text-ui-fg" }, queries: [{ propertyName: "panels", predicate: SmzSplitterPanelComponent, isSignal: true }], viewQueries: [{ propertyName: "root", first: true, predicate: ["root"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div #root class="flex h-full w-full" [class.flex-col]="layout() === 'vertical'">
+      @for (panel of panels(); track $index; let i = $index) {
+        <div class="min-h-0 min-w-0 overflow-auto" [style.flex]="'0 0 ' + sizes()[i] + '%'" [style.width]="layout() === 'horizontal' ? sizes()[i] + '%' : null" [style.height]="layout() === 'vertical' ? sizes()[i] + '%' : null">
+          <ng-container [ngTemplateOutlet]="panel.content()" />
+        </div>
+        @if (i < panels().length - 1) {
+          <div
+            role="separator"
+            tabindex="0"
+            class="shrink-0 bg-ui-line transition-colors duration-ui hover:bg-ui-primary focus-visible:bg-ui-primary focus-visible:outline-none"
+            [class]="layout() === 'horizontal' ? 'w-1 cursor-col-resize' : 'h-1 cursor-row-resize'"
+            [attr.aria-orientation]="layout() === 'horizontal' ? 'vertical' : 'horizontal'"
+            (pointerdown)="startDrag($event, i)"
+            (keydown)="onKey($event, i)"
+          ></div>
+        }
+      }
+    </div>
+  `, isInline: true, dependencies: [{ 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: SmzSplitterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-splitter',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgTemplateOutlet],
+                    host: { class: 'block h-full w-full overflow-hidden rounded-control border border-ui-line bg-ui-surface-1 font-ui text-ui-md text-ui-fg' },
+                    template: `
+    <div #root class="flex h-full w-full" [class.flex-col]="layout() === 'vertical'">
+      @for (panel of panels(); track $index; let i = $index) {
+        <div class="min-h-0 min-w-0 overflow-auto" [style.flex]="'0 0 ' + sizes()[i] + '%'" [style.width]="layout() === 'horizontal' ? sizes()[i] + '%' : null" [style.height]="layout() === 'vertical' ? sizes()[i] + '%' : null">
+          <ng-container [ngTemplateOutlet]="panel.content()" />
+        </div>
+        @if (i < panels().length - 1) {
+          <div
+            role="separator"
+            tabindex="0"
+            class="shrink-0 bg-ui-line transition-colors duration-ui hover:bg-ui-primary focus-visible:bg-ui-primary focus-visible:outline-none"
+            [class]="layout() === 'horizontal' ? 'w-1 cursor-col-resize' : 'h-1 cursor-row-resize'"
+            [attr.aria-orientation]="layout() === 'horizontal' ? 'vertical' : 'horizontal'"
+            (pointerdown)="startDrag($event, i)"
+            (keydown)="onKey($event, i)"
+          ></div>
+        }
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], panelSizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelSizes", required: false }] }], minSizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSizes", required: false }] }], resizeEnd: [{ type: i0.Output, args: ["resizeEnd"] }], panels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SmzSplitterPanelComponent), { isSignal: true }] }], root: [{ type: i0.ViewChild, args: ['root', { isSignal: true }] }] } });
+
+/* eslint-disable max-len -- classes Tailwind nos templates */
+/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-argument, @typescript-eslint/explicit-module-boundary-types */
+const ROW_BASE = 'border-b border-ui-line transition-colors duration-ui';
+/**
+ * Tabela em arvore. Substitui o `p-treeTable` do PrimeNG.
+ * 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">
+ *   <ng-template smzTemplate="header" let-columns><tr><th *ngFor="let c of columns">{{ c.header }}</th></tr></ng-template>
+ *   <ng-template smzTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
+ *     <tr [smzTtRow]="rowNode"><td><ui-tree-table-toggler [rowNode]="rowNode" />{{ rowData.name }}</td></tr>
+ *   </ng-template>
+ * </ui-tree-table>
+ */
+class SmzTreeTableComponent {
+    value = input([], ...(ngDevMode ? [{ debugName: "value" }] : []));
+    columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
+    selectionMode = input(null, ...(ngDevMode ? [{ debugName: "selectionMode" }] : []));
+    selection = model(null, ...(ngDevMode ? [{ debugName: "selection" }] : []));
+    propagateSelectionUp = input(true, { ...(ngDevMode ? { debugName: "propagateSelectionUp" } : {}), transform: booleanAttribute });
+    propagateSelectionDown = input(true, { ...(ngDevMode ? { debugName: "propagateSelectionDown" } : {}), transform: booleanAttribute });
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : {}), transform: booleanAttribute });
+    scrollable = input(false, { ...(ngDevMode ? { debugName: "scrollable" } : {}), transform: booleanAttribute });
+    scrollHeight = input(null, ...(ngDevMode ? [{ debugName: "scrollHeight" }] : []));
+    emptyMessage = input('', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : []));
+    tableStyleClass = input('', ...(ngDevMode ? [{ debugName: "tableStyleClass" }] : []));
+    paginator = input(false, { ...(ngDevMode ? { debugName: "paginator" } : {}), transform: booleanAttribute });
+    rows = model(10, ...(ngDevMode ? [{ debugName: "rows" }] : []));
+    first = model(0, ...(ngDevMode ? [{ debugName: "first" }] : []));
+    rowsPerPageOptions = input(null, ...(ngDevMode ? [{ debugName: "rowsPerPageOptions" }] : []));
+    sortField = model(null, ...(ngDevMode ? [{ debugName: "sortField" }] : []));
+    sortOrder = model(1, ...(ngDevMode ? [{ debugName: "sortOrder" }] : []));
+    /** Destaca a linha sob o cursor (padrao: ligado). */
+    rowHover = input(true, { ...(ngDevMode ? { debugName: "rowHover" } : {}), transform: booleanAttribute });
+    showCurrentPageReport = input(false, { ...(ngDevMode ? { debugName: "showCurrentPageReport" } : {}), transform: booleanAttribute });
+    currentPageReportTemplate = input('Mostrando {first} a {last} de {totalRecords}', ...(ngDevMode ? [{ debugName: "currentPageReportTemplate" }] : []));
+    /** Campos (de `node.data`) consultados pelo filtro global. */
+    globalFilterFields = input(null, ...(ngDevMode ? [{ debugName: "globalFilterFields" }] : []));
+    /** `lenient`: um no que casa mantem toda a sua subarvore; `strict`: so os nos que casam (e seus ancestrais). */
+    filterMode = input('lenient', ...(ngDevMode ? [{ debugName: "filterMode" }] : []));
+    nodeSelect = output();
+    nodeUnselect = output();
+    nodeExpand = output();
+    nodeCollapse = output();
+    sorted = output();
+    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" }] : []));
+    emptyTemplate = computed(() => smzFindTemplate(this.templates(), 'emptymessage'), ...(ngDevMode ? [{ debugName: "emptyTemplate" }] : []));
+    summaryTemplate = computed(() => smzFindTemplate(this.templates(), 'summary'), ...(ngDevMode ? [{ debugName: "summaryTemplate" }] : []));
+    /** Os nos sao mutaveis (`expanded`, `partialSelected`); este contador forca o recalculo das linhas. */
+    version = signal(0, ...(ngDevMode ? [{ debugName: "version" }] : []));
+    filterService = inject(SmzFilterService);
+    globalFilter = signal(null, ...(ngDevMode ? [{ debugName: "globalFilter" }] : []));
+    columnFilters = signal({}, ...(ngDevMode ? [{ debugName: "columnFilters" }] : []));
+    /** Nos raiz que passam nos filtros (global e por coluna), ou `null` quando nao ha filtro ativo. */
+    get filteredNodes() {
+        return this.visibility()?.roots ?? null;
+    }
+    /** Visibilidade calculada dos filtros: quais nos aparecem e quais ancestrais expandir. */
+    visibility = computed(() => {
+        this.version();
+        const global = this.globalFilter();
+        const columns = this.columnFilters();
+        const active = Object.entries(columns).filter(([, filter]) => filter.value !== null && filter.value !== undefined && filter.value !== '');
+        if (!global?.value && active.length === 0)
+            return null;
+        const matches = (node) => {
+            for (const [field, filter] of active) {
+                const test = this.filterService.filters[filter.matchMode] ?? this.filterService.filters['contains'];
+                if (!test(SmzObjectUtils.resolveFieldData(node.data, field), filter.value))
+                    return false;
+            }
+            if (global?.value) {
+                const test = this.filterService.filters[global.matchMode] ?? this.filterService.filters['contains'];
+                const fields = this.globalFilterFields() ?? Object.keys(node.data ?? {});
+                if (!fields.some((field) => test(SmzObjectUtils.resolveFieldData(node.data, field), global.value)))
+                    return false;
+            }
+            return true;
+        };
+        const visible = new Set();
+        const expand = new Set();
+        const lenient = this.filterMode() === 'lenient';
+        const mark = (node, forced) => {
+            const self = matches(node);
+            let anyChild = false;
+            for (const child of node.children ?? []) {
+                if (mark(child, forced || (lenient && self)))
+                    anyChild = true;
+            }
+            const show = self || anyChild || forced;
+            if (show)
+                visible.add(node);
+            if (anyChild && !self)
+                expand.add(node);
+            return self || anyChild;
+        };
+        const roots = (this.value() ?? []).filter((node) => mark(node, false));
+        return { roots, visible, expand };
+    }, ...(ngDevMode ? [{ debugName: "visibility" }] : []));
+    rootCount = computed(() => this.visibility()?.roots.length ?? (this.value() ?? []).length, ...(ngDevMode ? [{ debugName: "rootCount" }] : []));
+    flatRows = computed(() => {
+        this.version();
+        const field = this.sortField();
+        const order = this.sortOrder();
+        const filter = this.visibility();
+        const out = [];
+        const sort = (nodes) => field ? [...nodes].sort((a, b) => order * compareValues(SmzObjectUtils.resolveFieldData(a.data, field), SmzObjectUtils.resolveFieldData(b.data, field))) : nodes;
+        const walk = (nodes, parent, level) => {
+            for (const node of sort(nodes)) {
+                if (filter && !filter.visible.has(node))
+                    continue;
+                out.push({ node, parent, level });
+                if ((node.expanded || filter?.expand.has(node)) && node.children?.length)
+                    walk(node.children, node, level + 1);
+            }
+        };
+        walk(this.value() ?? [], null, 0);
+        return out;
+    }, ...(ngDevMode ? [{ debugName: "flatRows" }] : []));
+    /** Linhas visiveis; com paginador, a pagina atual e calculada sobre os nos raiz. */
+    pageRows = computed(() => {
+        const all = this.flatRows();
+        if (!this.paginator())
+            return all;
+        const roots = all.filter((row) => row.level === 0);
+        const pageRoots = new Set(roots.slice(this.first(), this.first() + this.rows()).map((row) => row.node));
+        let include = false;
+        return all.filter((row) => {
+            if (row.level === 0)
+                include = pageRoots.has(row.node);
+            return include;
+        });
+    }, ...(ngDevMode ? [{ debugName: "pageRows" }] : []));
+    /** Filtro global (equivale a `filterGlobal` do `p-treeTable`). */
+    filterGlobal(value, matchMode = 'contains') {
+        this.globalFilter.set(value ? { value, matchMode } : null);
+        this.first.set(0);
+    }
+    /** Filtro de uma coluna (campo de `node.data`). Valor vazio remove o filtro. */
+    filter(value, field, matchMode = 'contains') {
+        this.columnFilters.update((current) => ({ ...current, [field]: { value, matchMode } }));
+        this.first.set(0);
+    }
+    /** Limpa filtros, ordenacao e volta para a primeira pagina (equivale a `clear()` do `p-treeTable`). */
+    clear() {
+        this.globalFilter.set(null);
+        this.columnFilters.set({});
+        this.sortField.set(null);
+        this.sortOrder.set(1);
+        this.first.set(0);
+    }
+    refresh() {
+        this.version.update((v) => v + 1);
+    }
+    toggleNode(rowNode, event) {
+        const node = rowNode.node;
+        node.expanded = !node.expanded;
+        (node.expanded ? this.nodeExpand : this.nodeCollapse).emit({ node, originalEvent: event });
+        this.refresh();
+    }
+    sortBy(field) {
+        const order = this.sortField() === field && this.sortOrder() === 1 ? -1 : 1;
+        this.sortField.set(field);
+        this.sortOrder.set(order);
+        this.sorted.emit({ field, order });
+    }
+    isSelected(node) {
+        const selection = this.selection();
+        return Array.isArray(selection) ? selection.includes(node) : selection === node;
+    }
+    selectionState(node) {
+        if (this.isSelected(node))
+            return 'checked';
+        return node.partialSelected ? 'partial' : 'unchecked';
+    }
+    onRowClick(rowNode, event) {
+        const mode = this.selectionMode();
+        const node = rowNode.node;
+        if (!mode || node.selectable === false)
+            return;
+        if (mode === 'checkbox')
+            return; // selecao so pelo checkbox
+        const selected = this.isSelected(node);
+        if (mode === 'single') {
+            this.selection.set(selected ? null : node);
+        }
+        else {
+            const current = Array.isArray(this.selection()) ? this.selection() : [];
+            this.selection.set(selected ? current.filter((entry) => entry !== node) : [...current, node]);
+        }
+        (selected ? this.nodeUnselect : this.nodeSelect).emit({ node, originalEvent: event });
+    }
+    toggleCheckbox(rowNode, event) {
+        const node = rowNode.node;
+        const selected = this.isSelected(node);
+        const set = new Set(Array.isArray(this.selection()) ? this.selection() : []);
+        const apply = (target, value) => {
+            if (value)
+                set.add(target);
+            else
+                set.delete(target);
+            target.partialSelected = false;
+            if (this.propagateSelectionDown())
+                target.children?.forEach((child) => apply(child, value));
+        };
+        apply(node, !selected);
+        if (this.propagateSelectionUp()) {
+            for (let parent = rowNode.parent; parent; parent = this.findParent(parent)) {
+                const children = parent.children ?? [];
+                const all = children.every((child) => set.has(child));
+                const some = children.some((child) => set.has(child) || child.partialSelected);
+                if (all)
+                    set.add(parent);
+                else
+                    set.delete(parent);
+                parent.partialSelected = !all && some;
+            }
+        }
+        this.selection.set([...set]);
+        (selected ? this.nodeUnselect : this.nodeSelect).emit({ node, originalEvent: event });
+        this.refresh();
+    }
+    /** Marca/desmarca todos os nos (checkbox do cabecalho). */
+    toggleAll(checked) {
+        const set = new Set();
+        const walk = (nodes) => {
+            for (const node of nodes) {
+                node.partialSelected = false;
+                if (checked && node.selectable !== false)
+                    set.add(node);
+                walk(node.children ?? []);
+            }
+        };
+        walk(this.value() ?? []);
+        this.selection.set([...set]);
+        this.refresh();
+    }
+    allSelected() {
+        const total = this.countNodes(this.value() ?? []);
+        const selection = this.selection();
+        return total > 0 && Array.isArray(selection) && selection.length >= total;
+    }
+    countNodes(nodes) {
+        return nodes.reduce((sum, node) => sum + 1 + this.countNodes(node.children ?? []), 0);
+    }
+    findParent(node) {
+        const search = (nodes, parent) => {
+            for (const candidate of nodes) {
+                if (candidate === node)
+                    return parent;
+                const found = search(candidate.children ?? [], candidate);
+                if (found !== undefined)
+                    return found;
+            }
+            return undefined;
+        };
+        return search(this.value() ?? [], null) ?? null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzTreeTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzTreeTableComponent, isStandalone: true, selector: "ui-tree-table", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, propagateSelectionUp: { classPropertyName: "propagateSelectionUp", publicName: "propagateSelectionUp", isSignal: true, isRequired: false, transformFunction: null }, propagateSelectionDown: { classPropertyName: "propagateSelectionDown", publicName: "propagateSelectionDown", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, tableStyleClass: { classPropertyName: "tableStyleClass", publicName: "tableStyleClass", isSignal: true, isRequired: false, transformFunction: null }, paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, first: { classPropertyName: "first", publicName: "first", isSignal: true, isRequired: false, transformFunction: null }, rowsPerPageOptions: { classPropertyName: "rowsPerPageOptions", publicName: "rowsPerPageOptions", isSignal: true, isRequired: false, transformFunction: null }, sortField: { classPropertyName: "sortField", publicName: "sortField", isSignal: true, isRequired: false, transformFunction: null }, sortOrder: { classPropertyName: "sortOrder", publicName: "sortOrder", isSignal: true, isRequired: false, transformFunction: null }, rowHover: { classPropertyName: "rowHover", publicName: "rowHover", isSignal: true, isRequired: false, transformFunction: null }, showCurrentPageReport: { classPropertyName: "showCurrentPageReport", publicName: "showCurrentPageReport", isSignal: true, isRequired: false, transformFunction: null }, currentPageReportTemplate: { classPropertyName: "currentPageReportTemplate", publicName: "currentPageReportTemplate", isSignal: true, isRequired: false, transformFunction: null }, globalFilterFields: { classPropertyName: "globalFilterFields", publicName: "globalFilterFields", isSignal: true, isRequired: false, transformFunction: null }, filterMode: { classPropertyName: "filterMode", publicName: "filterMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange", rows: "rowsChange", first: "firstChange", sortField: "sortFieldChange", sortOrder: "sortOrderChange", nodeSelect: "nodeSelect", nodeUnselect: "nodeUnselect", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", sorted: "sorted", page: "page" }, host: { classAttribute: "block overflow-hidden rounded-control 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 (captionTemplate(); as tpl) {
+      <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]="(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() }" />
+          }
+        </thead>
+        <tbody>
+          @for (row of pageRows(); track row.node.key ?? row.node) {
+            <ng-container [ngTemplateOutlet]="bodyTemplate() ?? null" [ngTemplateOutletContext]="{ $implicit: row, rowNode: row, node: row.node, rowData: row.node.data, columns: columns() }" />
+          } @empty {
+            @if (!loading()) {
+              <tr>
+                <td [attr.colspan]="columns().length || 1" class="px-4 py-6 text-center text-ui-fg-muted">
+                  @if (emptyTemplate(); as tpl) { <ng-container [ngTemplateOutlet]="tpl" [ngTemplateOutletContext]="{ $implicit: columns() }" /> } @else { {{ emptyMessage() }} }
+                </td>
+              </tr>
+            }
+          }
+        </tbody>
+        @if (footerTemplate(); as tpl) {
+          <tfoot><ng-container [ngTemplateOutlet]="tpl" [ngTemplateOutletContext]="{ $implicit: columns() }" /></tfoot>
+        }
+      </table>
+      @if (loading()) {
+        <div class="absolute inset-0 flex items-center justify-center bg-ui-surface-1/60 text-ui-primary" role="status">
+          <svg viewBox="0 0 50 50" class="h-8 w-8 animate-spin" fill="none" aria-hidden="true"><circle cx="25" cy="25" r="20" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-dasharray="90 150" /></svg>
+        </div>
+      }
+    </div>
+    @if (paginator()) {
+      <ui-paginator class="border-t border-ui-line" [first]="first()" [rows]="rows()" [totalRecords]="rootCount()" [rowsPerPageOptions]="rowsPerPageOptions()" [showCurrentPageReport]="showCurrentPageReport()" [currentPageReportTemplate]="currentPageReportTemplate()" (firstChange)="first.set($event)" (rowsChange)="rows.set($event)" (pageChanged)="page.emit($event)" />
+    }
+    @if (summaryTemplate(); as tpl) {
+      <div class="border-t border-ui-line px-4 py-3"><ng-container [ngTemplateOutlet]="tpl" /></div>
+    }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SmzPaginatorComponent, selector: "ui-paginator", inputs: ["first", "rows", "totalRecords", "pageLinkSize", "rowsPerPageOptions", "showCurrentPageReport", "currentPageReportTemplate", "alwaysShow", "showPageLinks", "styleClass", "dropdownAppendTo", "showFirstLastIcon"], outputs: ["firstChange", "rowsChange", "pageChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzTreeTableComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-tree-table',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgTemplateOutlet, SmzPaginatorComponent],
+                    host: { class: 'block overflow-hidden rounded-control border border-ui-line bg-ui-surface-1 font-ui text-ui-md text-ui-fg' },
+                    template: `
+    @if (captionTemplate(); as tpl) {
+      <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]="(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() }" />
+          }
+        </thead>
+        <tbody>
+          @for (row of pageRows(); track row.node.key ?? row.node) {
+            <ng-container [ngTemplateOutlet]="bodyTemplate() ?? null" [ngTemplateOutletContext]="{ $implicit: row, rowNode: row, node: row.node, rowData: row.node.data, columns: columns() }" />
+          } @empty {
+            @if (!loading()) {
+              <tr>
+                <td [attr.colspan]="columns().length || 1" class="px-4 py-6 text-center text-ui-fg-muted">
+                  @if (emptyTemplate(); as tpl) { <ng-container [ngTemplateOutlet]="tpl" [ngTemplateOutletContext]="{ $implicit: columns() }" /> } @else { {{ emptyMessage() }} }
+                </td>
+              </tr>
+            }
+          }
+        </tbody>
+        @if (footerTemplate(); as tpl) {
+          <tfoot><ng-container [ngTemplateOutlet]="tpl" [ngTemplateOutletContext]="{ $implicit: columns() }" /></tfoot>
+        }
+      </table>
+      @if (loading()) {
+        <div class="absolute inset-0 flex items-center justify-center bg-ui-surface-1/60 text-ui-primary" role="status">
+          <svg viewBox="0 0 50 50" class="h-8 w-8 animate-spin" fill="none" aria-hidden="true"><circle cx="25" cy="25" r="20" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-dasharray="90 150" /></svg>
+        </div>
+      }
+    </div>
+    @if (paginator()) {
+      <ui-paginator class="border-t border-ui-line" [first]="first()" [rows]="rows()" [totalRecords]="rootCount()" [rowsPerPageOptions]="rowsPerPageOptions()" [showCurrentPageReport]="showCurrentPageReport()" [currentPageReportTemplate]="currentPageReportTemplate()" (firstChange)="first.set($event)" (rowsChange)="rows.set($event)" (pageChanged)="page.emit($event)" />
+    }
+    @if (summaryTemplate(); as tpl) {
+      <div class="border-t border-ui-line px-4 py-3"><ng-container [ngTemplateOutlet]="tpl" /></div>
+    }
+  `,
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], propagateSelectionUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "propagateSelectionUp", required: false }] }], propagateSelectionDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "propagateSelectionDown", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], scrollable: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollable", required: false }] }], scrollHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollHeight", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], tableStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableStyleClass", required: false }] }], paginator: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginator", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }, { type: i0.Output, args: ["rowsChange"] }], first: [{ type: i0.Input, args: [{ isSignal: true, alias: "first", required: false }] }, { type: i0.Output, args: ["firstChange"] }], rowsPerPageOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowsPerPageOptions", required: false }] }], sortField: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortField", required: false }] }, { type: i0.Output, args: ["sortFieldChange"] }], sortOrder: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortOrder", required: false }] }, { type: i0.Output, args: ["sortOrderChange"] }], rowHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHover", required: false }] }], showCurrentPageReport: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCurrentPageReport", required: false }] }], currentPageReportTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPageReportTemplate", required: false }] }], globalFilterFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "globalFilterFields", required: false }] }], filterMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterMode", required: false }] }], nodeSelect: [{ type: i0.Output, args: ["nodeSelect"] }], nodeUnselect: [{ type: i0.Output, args: ["nodeUnselect"] }], nodeExpand: [{ type: i0.Output, args: ["nodeExpand"] }], nodeCollapse: [{ type: i0.Output, args: ["nodeCollapse"] }], sorted: [{ type: i0.Output, args: ["sorted"] }], page: [{ type: i0.Output, args: ["page"] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SmzTemplateDirective), { isSignal: true }] }] } });
+function compareValues(a, b) {
+    if (a == null && b == null)
+        return 0;
+    if (a == null)
+        return -1;
+    if (b == null)
+        return 1;
+    if (typeof a === 'string' && typeof b === 'string')
+        return a.localeCompare(b);
+    return a < b ? -1 : a > b ? 1 : 0;
+}
+/** Linha do corpo: `<tr [smzTtRow]="rowNode">`. Cuida de estilo, aria e selecao por clique. */
+class SmzTreeTableRowDirective {
+    table = inject(SmzTreeTableComponent);
+    rowNode = input.required({ ...(ngDevMode ? { debugName: "rowNode" } : {}), alias: 'smzTtRow' });
+    classes = computed(() => {
+        const mode = this.table.selectionMode();
+        const selected = this.table.isSelected(this.rowNode().node);
+        const hover = this.table.rowHover() ? 'hover:bg-ui-surface-3' : '';
+        const interactive = mode && mode !== 'checkbox' ? `cursor-pointer ${hover}` : hover;
+        return `${ROW_BASE} ${interactive} ${selected && mode !== 'checkbox' ? 'bg-ui-primary/10' : ''}`;
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzTreeTableRowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.1", type: SmzTreeTableRowDirective, isStandalone: true, selector: "tr[smzTtRow]", inputs: { rowNode: { classPropertyName: "rowNode", publicName: "smzTtRow", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "table.onRowClick(rowNode(), $event)" }, properties: { "class": "classes()", "attr.aria-level": "rowNode().level + 1", "attr.aria-expanded": "rowNode().node.children?.length ? !!rowNode().node.expanded : null", "attr.aria-selected": "table.selectionMode() ? table.isSelected(rowNode().node) : null" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzTreeTableRowDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'tr[smzTtRow]',
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.aria-level]': 'rowNode().level + 1',
+                        '[attr.aria-expanded]': 'rowNode().node.children?.length ? !!rowNode().node.expanded : null',
+                        '[attr.aria-selected]': 'table.selectionMode() ? table.isSelected(rowNode().node) : null',
+                        '(click)': 'table.onRowClick(rowNode(), $event)',
+                    },
+                }]
+        }], propDecorators: { rowNode: [{ type: i0.Input, args: [{ isSignal: true, alias: "smzTtRow", required: true }] }] } });
+/** Seta de expandir/recolher com recuo por nivel: `<ui-tree-table-toggler [rowNode]="rowNode" />`. */
+class SmzTreeTableTogglerComponent {
+    table = inject(SmzTreeTableComponent);
+    rowNode = input.required(...(ngDevMode ? [{ debugName: "rowNode" }] : []));
+    hasChildren() {
+        const node = this.rowNode().node;
+        return !node.leaf && (node.children?.length ?? 0) > 0;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzTreeTableTogglerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: SmzTreeTableTogglerComponent, isStandalone: true, selector: "ui-tree-table-toggler", inputs: { rowNode: { classPropertyName: "rowNode", publicName: "rowNode", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "style.padding-left.rem": "rowNode().level * 1.5" }, classAttribute: "inline-flex items-center align-middle" }, ngImport: i0, template: `
+    <button type="button" class="inline-flex h-6 w-6 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" [class.invisible]="!hasChildren()" [attr.aria-label]="rowNode().node.expanded ? 'Recolher' : 'Expandir'" (click)="$event.stopPropagation(); table.toggleNode(rowNode(), $event)">
+      <svg viewBox="0 0 16 16" class="h-4 w-4 transition-transform duration-ui" [class.rotate-90]="rowNode().node.expanded" fill="none" aria-hidden="true"><path d="M6 4l4 4-4 4" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" /></svg>
+    </button>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzTreeTableTogglerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-tree-table-toggler',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'inline-flex items-center align-middle', '[style.padding-left.rem]': 'rowNode().level * 1.5' },
+                    template: `
+    <button type="button" class="inline-flex h-6 w-6 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" [class.invisible]="!hasChildren()" [attr.aria-label]="rowNode().node.expanded ? 'Recolher' : 'Expandir'" (click)="$event.stopPropagation(); table.toggleNode(rowNode(), $event)">
+      <svg viewBox="0 0 16 16" class="h-4 w-4 transition-transform duration-ui" [class.rotate-90]="rowNode().node.expanded" fill="none" aria-hidden="true"><path d="M6 4l4 4-4 4" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" /></svg>
+    </button>
+  `,
+                }]
+        }], propDecorators: { rowNode: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowNode", required: true }] }] } });
+/** Checkbox de selecao da linha (modo `checkbox`): `<ui-tree-table-checkbox [value]="rowNode" />`. */
+class SmzTreeTableCheckboxComponent {
+    table = inject(SmzTreeTableComponent);
+    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
+    state() {
+        return this.table.selectionState(this.value().node);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzTreeTableCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzTreeTableCheckboxComponent, isStandalone: true, selector: "ui-tree-table-checkbox", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "inline-flex align-middle" }, ngImport: i0, template: `
+    <button type="button" role="checkbox" [attr.aria-checked]="state() === 'partial' ? 'mixed' : state() === 'checked'" class="inline-flex h-5 w-5 items-center justify-center rounded border transition-colors duration-ui focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus" [class]="state() === 'unchecked' ? 'border-ui-line-strong bg-ui-surface-1' : 'border-ui-primary bg-ui-primary text-ui-on-primary'" (click)="$event.stopPropagation(); table.toggleCheckbox(value(), $event)">
+      @if (state() === 'checked') { <svg viewBox="0 0 16 16" class="h-3 w-3" fill="none" aria-hidden="true"><path d="M3.5 8.5l3 3 6-6.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /></svg> }
+      @else if (state() === 'partial') { <svg viewBox="0 0 16 16" class="h-3 w-3" fill="none" aria-hidden="true"><path d="M4 8h8" stroke="currentColor" stroke-width="2" stroke-linecap="round" /></svg> }
+    </button>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzTreeTableCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-tree-table-checkbox',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'inline-flex align-middle' },
+                    template: `
+    <button type="button" role="checkbox" [attr.aria-checked]="state() === 'partial' ? 'mixed' : state() === 'checked'" class="inline-flex h-5 w-5 items-center justify-center rounded border transition-colors duration-ui focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus" [class]="state() === 'unchecked' ? 'border-ui-line-strong bg-ui-surface-1' : 'border-ui-primary bg-ui-primary text-ui-on-primary'" (click)="$event.stopPropagation(); table.toggleCheckbox(value(), $event)">
+      @if (state() === 'checked') { <svg viewBox="0 0 16 16" class="h-3 w-3" fill="none" aria-hidden="true"><path d="M3.5 8.5l3 3 6-6.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /></svg> }
+      @else if (state() === 'partial') { <svg viewBox="0 0 16 16" class="h-3 w-3" fill="none" aria-hidden="true"><path d="M4 8h8" stroke="currentColor" stroke-width="2" stroke-linecap="round" /></svg> }
+    </button>
+  `,
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }] } });
+/** Checkbox do cabecalho: seleciona/limpa todos os nos. */
+class SmzTreeTableHeaderCheckboxComponent {
+    table = inject(SmzTreeTableComponent);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzTreeTableHeaderCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzTreeTableHeaderCheckboxComponent, isStandalone: true, selector: "ui-tree-table-header-checkbox", host: { classAttribute: "inline-flex align-middle" }, ngImport: i0, template: `
+    <button type="button" role="checkbox" [attr.aria-checked]="table.allSelected()" class="inline-flex h-5 w-5 items-center justify-center rounded border transition-colors duration-ui focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus" [class]="table.allSelected() ? 'border-ui-primary bg-ui-primary text-ui-on-primary' : 'border-ui-line-strong bg-ui-surface-1'" (click)="table.toggleAll(!table.allSelected())">
+      @if (table.allSelected()) { <svg viewBox="0 0 16 16" class="h-3 w-3" fill="none" aria-hidden="true"><path d="M3.5 8.5l3 3 6-6.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /></svg> }
+    </button>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzTreeTableHeaderCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-tree-table-header-checkbox',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'inline-flex align-middle' },
+                    template: `
+    <button type="button" role="checkbox" [attr.aria-checked]="table.allSelected()" class="inline-flex h-5 w-5 items-center justify-center rounded border transition-colors duration-ui focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus" [class]="table.allSelected() ? 'border-ui-primary bg-ui-primary text-ui-on-primary' : 'border-ui-line-strong bg-ui-surface-1'" (click)="table.toggleAll(!table.allSelected())">
+      @if (table.allSelected()) { <svg viewBox="0 0 16 16" class="h-3 w-3" fill="none" aria-hidden="true"><path d="M3.5 8.5l3 3 6-6.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /></svg> }
+    </button>
+  `,
+                }]
+        }] });
+/** Cabecalho ordenavel: `<th [smzTtSortableColumn]="'nome'">Nome <ui-tree-table-sort-icon field="nome" /></th>`. */
+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';
+    }
+    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 });
+}
+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()' },
+                }]
+        }], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "smzTtSortableColumn", required: true }] }] } });
+class SmzTreeTableSortIconComponent {
+    table = inject(SmzTreeTableComponent);
+    field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
+    dir() {
+        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: `
+    <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" />
+    </svg>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzTreeTableSortIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-tree-table-sort-icon',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'ml-1 inline-flex align-middle text-ui-fg-muted' },
+                    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" />
+    </svg>
+  `,
+                }]
+        }], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }] } });
+const SMZ_TREE_TABLE = [
+    SmzTreeTableComponent,
+    SmzTreeTableRowDirective,
+    SmzTreeTableTogglerComponent,
+    SmzTreeTableCheckboxComponent,
+    SmzTreeTableHeaderCheckboxComponent,
+    SmzTreeTableSortableColumnDirective,
+    SmzTreeTableSortIconComponent,
+    SmzTemplateDirective,
+];
+
+/* eslint-disable max-len -- classes Tailwind nos templates */
+class SmzConfirmContentComponent {
+    options = inject(SmzDialogConfig).data;
+    ref = inject((SmzDialogRef));
+    close(accepted) {
+        this.ref.close(accepted);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzConfirmContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzConfirmContentComponent, isStandalone: true, selector: "ui-confirm-content", ngImport: i0, template: `
+    <div class="flex items-start gap-3 font-ui text-ui-md text-ui-fg">
+      @if (options.icon) {
+        <i [class]="options.icon + ' mt-0.5 text-ui-xl text-ui-warning'" aria-hidden="true"></i>
+      }
+      <p class="m-0 flex-1">{{ options.message }}</p>
+    </div>
+    <div class="mt-5 flex justify-end gap-2">
+      @if (options.rejectVisible !== false) {
+        <button smzButton type="button" severity="secondary" variant="outlined" [label]="options.rejectLabel ?? 'Não'" (click)="close(false)"></button>
+      }
+      @if (options.acceptVisible !== false) {
+        <button smzButton type="button" [severity]="options.acceptSeverity ?? 'primary'" [label]="options.acceptLabel ?? 'Sim'" (click)="close(true)"></button>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: SmzButtonComponent, selector: "button[smzButton], a[smzButton]", inputs: ["label", "icon", "iconPosition", "severity", "variant", "size", "text", "outlined", "rounded", "loading", "styleClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzConfirmContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-confirm-content',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [SmzButtonComponent],
+                    template: `
+    <div class="flex items-start gap-3 font-ui text-ui-md text-ui-fg">
+      @if (options.icon) {
+        <i [class]="options.icon + ' mt-0.5 text-ui-xl text-ui-warning'" aria-hidden="true"></i>
+      }
+      <p class="m-0 flex-1">{{ options.message }}</p>
+    </div>
+    <div class="mt-5 flex justify-end gap-2">
+      @if (options.rejectVisible !== false) {
+        <button smzButton type="button" severity="secondary" variant="outlined" [label]="options.rejectLabel ?? 'Não'" (click)="close(false)"></button>
+      }
+      @if (options.acceptVisible !== false) {
+        <button smzButton type="button" [severity]="options.acceptSeverity ?? 'primary'" [label]="options.acceptLabel ?? 'Sim'" (click)="close(true)"></button>
+      }
+    </div>
+  `,
+                }]
+        }] });
+/**
+ * Confirmacao modal. Substitui o `ConfirmationService` + `<p-confirmdialog>` do PrimeNG
+ * (nao ha componente a declarar no template).
+ *
+ * confirm.confirm({ message: 'Excluir?', header: 'Confirmacao', icon: 'fa-solid fa-triangle-exclamation', accept: () => ..., reject: () => ... });
+ */
+class SmzConfirmationService {
+    dialogs = inject(SmzDialogService);
+    confirm(confirmation) {
+        const ref = this.dialogs.open(SmzConfirmContentComponent, {
+            header: confirmation.header ?? 'Confirmação',
+            width: confirmation.width ?? '28rem',
+            closeOnEscape: confirmation.closeOnEscape ?? true,
+            data: confirmation,
+        });
+        ref.onClose.subscribe((accepted) => {
+            if (accepted === true)
+                confirmation.accept?.();
+            else
+                confirmation.reject?.();
+        });
+        return ref;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzConfirmationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzConfirmationService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzConfirmationService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/* eslint-disable max-len -- classes Tailwind nos templates */
+/**
+ * Selecao de arquivos com area de arrastar e soltar e lista de escolhidos.
+ * Substitui o `p-fileupload` (modo `basic`/`advanced` sem envio automatico): o envio ao servidor
+ * fica a cargo do app (ex.: `HttpClient` no handler de `(selected)`).
+ *
+ * <ui-file-upload accept="image/*" [multiple]="true" [maxFileSize]="1000000" (selected)="enviar($event.files)" />
+ */
+class SmzFileUploadComponent {
+    accept = input('', ...(ngDevMode ? [{ debugName: "accept" }] : []));
+    multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : {}), transform: booleanAttribute });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
+    /** Tamanho maximo por arquivo, em bytes. */
+    maxFileSize = input(null, ...(ngDevMode ? [{ debugName: "maxFileSize" }] : []));
+    chooseLabel = input('Escolher arquivo', ...(ngDevMode ? [{ debugName: "chooseLabel" }] : []));
+    dropLabel = input('ou arraste aqui', ...(ngDevMode ? [{ debugName: "dropLabel" }] : []));
+    selected = output();
+    removed = output();
+    rejected = output();
+    files = signal([], ...(ngDevMode ? [{ debugName: "files" }] : []));
+    dragging = signal(false, ...(ngDevMode ? [{ debugName: "dragging" }] : []));
+    fileInput = viewChild.required('picker');
+    /** Limpa a lista (equivale a `clear()` do `p-fileupload`). */
+    clear() {
+        this.files.set([]);
+        this.fileInput().nativeElement.value = '';
+    }
+    onPick(event) {
+        const target = event.target;
+        this.add(Array.from(target.files ?? []), event);
+        target.value = '';
+    }
+    onDragOver(event) {
+        if (this.disabled())
+            return;
+        event.preventDefault();
+        this.dragging.set(true);
+    }
+    onDrop(event) {
+        event.preventDefault();
+        this.dragging.set(false);
+        if (this.disabled())
+            return;
+        this.add(Array.from(event.dataTransfer?.files ?? []), event);
+    }
+    remove(file) {
+        this.files.update((list) => list.filter((entry) => entry !== file));
+        this.removed.emit({ file });
+    }
+    size(file) {
+        return file.size < 1024 * 1024 ? `${Math.max(1, Math.round(file.size / 1024))} KB` : `${(file.size / 1024 / 1024).toFixed(1)} MB`;
+    }
+    add(incoming, event) {
+        const accepted = [];
+        for (const file of incoming) {
+            if (!this.matchesAccept(file))
+                this.rejected.emit({ file, reason: 'type' });
+            else if (this.maxFileSize() != null && file.size > this.maxFileSize())
+                this.rejected.emit({ file, reason: 'size' });
+            else
+                accepted.push(file);
+        }
+        if (accepted.length === 0)
+            return;
+        const next = this.multiple() ? [...this.files(), ...accepted] : [accepted[0]];
+        this.files.set(next);
+        this.selected.emit({ files: next, originalEvent: event });
+    }
+    matchesAccept(file) {
+        const accept = (this.accept() ?? '').trim();
+        if (!accept)
+            return true;
+        return accept.split(',').map((rule) => rule.trim().toLowerCase()).some((rule) => {
+            if (rule.startsWith('.'))
+                return file.name.toLowerCase().endsWith(rule);
+            if (rule.endsWith('/*'))
+                return file.type.toLowerCase().startsWith(rule.slice(0, -1));
+            return file.type.toLowerCase() === rule;
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzFileUploadComponent, isStandalone: true, selector: "ui-file-upload", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, chooseLabel: { classPropertyName: "chooseLabel", publicName: "chooseLabel", isSignal: true, isRequired: false, transformFunction: null }, dropLabel: { classPropertyName: "dropLabel", publicName: "dropLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected", removed: "removed", rejected: "rejected" }, host: { classAttribute: "block font-ui text-ui-md text-ui-fg" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["picker"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <input #picker type="file" class="sr-only" [accept]="accept() ?? ''" [multiple]="multiple()" [disabled]="disabled()" (change)="onPick($event)" />
+    <div
+      class="flex flex-col items-center justify-center gap-2 rounded-card border-2 border-dashed p-6 text-center transition-colors duration-ui"
+      [class]="dragging() ? 'border-ui-primary bg-ui-primary/10' : 'border-ui-line-strong bg-ui-surface-1'"
+      [class.opacity-50]="disabled()"
+      (dragover)="onDragOver($event)"
+      (dragleave)="dragging.set(false)"
+      (drop)="onDrop($event)"
+    >
+      <button type="button" class="rounded-control border border-ui-line-strong px-control-x py-2 font-medium transition-colors duration-ui hover:bg-ui-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus disabled:pointer-events-none" [disabled]="disabled()" (click)="picker.click()">{{ chooseLabel() }}</button>
+      <span class="text-ui-sm text-ui-fg-muted">{{ dropLabel() }}</span>
+    </div>
+    @if (files().length > 0) {
+      <ul class="m-0 mt-3 flex list-none flex-col gap-2 p-0">
+        @for (file of files(); track file) {
+          <li class="flex items-center justify-between gap-2 rounded-control border border-ui-line px-3 py-2">
+            <span class="min-w-0 flex-1 truncate">{{ file.name }} <span class="text-ui-sm text-ui-fg-muted">({{ size(file) }})</span></span>
+            <button type="button" class="inline-flex h-6 w-6 items-center justify-center rounded-full text-ui-fg-muted hover:bg-ui-surface-3" aria-label="Remover" (click)="remove(file)">
+              <svg viewBox="0 0 16 16" class="h-3 w-3" fill="none" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" /></svg>
+            </button>
+          </li>
+        }
+      </ul>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzFileUploadComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-file-upload',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'block font-ui text-ui-md text-ui-fg' },
+                    template: `
+    <input #picker type="file" class="sr-only" [accept]="accept() ?? ''" [multiple]="multiple()" [disabled]="disabled()" (change)="onPick($event)" />
+    <div
+      class="flex flex-col items-center justify-center gap-2 rounded-card border-2 border-dashed p-6 text-center transition-colors duration-ui"
+      [class]="dragging() ? 'border-ui-primary bg-ui-primary/10' : 'border-ui-line-strong bg-ui-surface-1'"
+      [class.opacity-50]="disabled()"
+      (dragover)="onDragOver($event)"
+      (dragleave)="dragging.set(false)"
+      (drop)="onDrop($event)"
+    >
+      <button type="button" class="rounded-control border border-ui-line-strong px-control-x py-2 font-medium transition-colors duration-ui hover:bg-ui-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus disabled:pointer-events-none" [disabled]="disabled()" (click)="picker.click()">{{ chooseLabel() }}</button>
+      <span class="text-ui-sm text-ui-fg-muted">{{ dropLabel() }}</span>
+    </div>
+    @if (files().length > 0) {
+      <ul class="m-0 mt-3 flex list-none flex-col gap-2 p-0">
+        @for (file of files(); track file) {
+          <li class="flex items-center justify-between gap-2 rounded-control border border-ui-line px-3 py-2">
+            <span class="min-w-0 flex-1 truncate">{{ file.name }} <span class="text-ui-sm text-ui-fg-muted">({{ size(file) }})</span></span>
+            <button type="button" class="inline-flex h-6 w-6 items-center justify-center rounded-full text-ui-fg-muted hover:bg-ui-surface-3" aria-label="Remover" (click)="remove(file)">
+              <svg viewBox="0 0 16 16" class="h-3 w-3" fill="none" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" /></svg>
+            </button>
+          </li>
+        }
+      </ul>
+    }
+  `,
+                }]
+        }], propDecorators: { accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], chooseLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "chooseLabel", required: false }] }], dropLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropLabel", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }], removed: [{ type: i0.Output, args: ["removed"] }], rejected: [{ type: i0.Output, args: ["rejected"] }], fileInput: [{ type: i0.ViewChild, args: ['picker', { isSignal: true }] }] } });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { SMZ_DIALOG_CONTENT, SMZ_SOFT_TONE, SMZ_SOLID_TONE, SmzAccordionComponent, SmzAccordionContentComponent, SmzAccordionHeaderComponent, SmzAccordionPanelComponent, SmzAnchoredPanel, SmzAutoCompleteComponent, SmzAutoFocusDirective, SmzBadgeComponent, SmzBadgeDirective, SmzBlockUiComponent, SmzButtonComponent, SmzCheckboxComponent, SmzColorPickerComponent, SmzConnectedOverlayScrollHandler, SmzDataViewComponent, SmzDatePickerComponent, SmzDialogComponent, SmzDialogConfig, SmzDialogFrameComponent, SmzDialogRef, SmzDialogService, SmzDividerComponent, SmzDomHandler, SmzDrawerComponent, SmzFilterMatchMode, SmzFilterOperator, SmzFilterService, SmzIconComponent, SmzIconFieldComponent, SmzInputGroupAddonComponent, SmzInputGroupComponent, SmzInputIconComponent, SmzInputMaskComponent, SmzInputNumberComponent, SmzInputTextDirective, SmzListboxComponent, SmzLocaleService, SmzMenuListComponent, SmzMessageComponent, SmzMessageService, SmzMultiSelectComponent, SmzObjectUtils, SmzPaginatorComponent, SmzPasswordComponent, SmzPickListComponent, SmzPopoverComponent, SmzProgressBarComponent, SmzRadioButtonComponent, SmzRippleDirective, SmzSelectButtonComponent, SmzSelectComponent, SmzSkeletonComponent, SmzStyleClassDirective, SmzTabComponent, SmzTabListComponent, SmzTabPanelComponent, SmzTabPanelsComponent, SmzTabsComponent, SmzTagComponent, SmzTemplateDirective, SmzTextareaDirective, SmzThemeService, SmzToastContainerComponent, SmzToggleSwitchComponent, SmzToolbarComponent, SmzTooltipComponent, SmzTooltipDirective, SmzTranslationKeys, SmzTreeSelectComponent, SmzUiTimelineComponent, SmzUiTreeComponent, SmzValueAccessor, SmzZIndex, filterOptions, optionDisabled, optionLabel, optionValue, sameValue, smzCalendarStart, smzCx, smzFindTemplate, smzFormatDate, smzMergeClasses, smzNormalizeSeverity, smzNormalizeStyleClass, smzParseButtonStyleClass, smzParseDate, smzSameDay, smzStartOfDay, smzStaticHostClass, smzTwoDigits, smzUniqueId, smzVariants };
+export { SMZ_DIALOG_CONTENT, SMZ_SOFT_TONE, SMZ_SOLID_TONE, SMZ_TREE_TABLE, SmzAccordionComponent, SmzAccordionContentComponent, SmzAccordionHeaderComponent, SmzAccordionPanelComponent, SmzAnchoredPanel, SmzAutoCompleteComponent, SmzAutoFocusDirective, SmzBadgeComponent, SmzBadgeDirective, SmzBlockUiComponent, SmzButtonComponent, SmzCardComponent, SmzCheckboxComponent, SmzColorPickerComponent, SmzConfirmContentComponent, SmzConfirmationService, SmzConnectedOverlayScrollHandler, SmzDataViewComponent, SmzDatePickerComponent, SmzDialogComponent, SmzDialogConfig, SmzDialogFrameComponent, SmzDialogRef, SmzDialogService, SmzDividerComponent, SmzDomHandler, SmzDrawerComponent, SmzFileUploadComponent, SmzFilterMatchMode, SmzFilterOperator, SmzFilterService, SmzFloatLabelComponent, SmzIconComponent, SmzIconFieldComponent, SmzInputGroupAddonComponent, SmzInputGroupComponent, SmzInputIconComponent, SmzInputMaskComponent, SmzInputNumberComponent, SmzInputTextDirective, SmzListboxComponent, SmzLocaleService, SmzMenuListComponent, SmzMessageComponent, SmzMessageService, SmzMultiSelectComponent, SmzObjectUtils, SmzPaginatorComponent, SmzPanelComponent, SmzPasswordComponent, SmzPickListComponent, SmzPopoverComponent, SmzProgressBarComponent, SmzProgressSpinnerComponent, SmzRadioButtonComponent, SmzRippleDirective, SmzSelectButtonComponent, SmzSelectComponent, SmzSkeletonComponent, SmzSplitterComponent, SmzSplitterPanelComponent, SmzStyleClassDirective, SmzTabComponent, SmzTabListComponent, SmzTabPanelComponent, SmzTabPanelsComponent, SmzTabsComponent, SmzTagComponent, SmzTemplateDirective, SmzTextareaDirective, SmzThemeService, SmzToastContainerComponent, SmzToggleSwitchComponent, SmzToolbarComponent, SmzTooltipComponent, SmzTooltipDirective, SmzTranslationKeys, SmzTreeSelectComponent, SmzTreeTableCheckboxComponent, SmzTreeTableComponent, SmzTreeTableHeaderCheckboxComponent, SmzTreeTableRowDirective, SmzTreeTableSortIconComponent, SmzTreeTableSortableColumnDirective, SmzTreeTableTogglerComponent, SmzUiTimelineComponent, SmzUiTreeComponent, SmzValueAccessor, SmzZIndex, filterOptions, optionDisabled, optionLabel, optionValue, sameValue, smzCalendarStart, smzCx, smzFindTemplate, smzFormatDate, smzMergeClasses, smzNormalizeSeverity, smzNormalizeStyleClass, smzParseButtonStyleClass, smzParseDate, smzSameDay, smzStartOfDay, smzStaticHostClass, smzTwoDigits, smzUniqueId, smzVariants };
 //# sourceMappingURL=ngx-smz-ui-kit.mjs.map