structra-ui 0.1.98 → 0.2.0

package/fesm2022/structra-ui.mjs

@@ -5626,7 +5626,7 @@ class ToastHostComponent {
         this.toastService.runAction(id);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ToastHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ToastHostComponent, isStandalone: true, selector: "app-toast-host", ngImport: i0, template: "@if (topToasts().length > 0) {\r\n  <div\r\n    class=\"toast-host toast-host--top app-library-theme\"\r\n    [ngClass]=\"theme.getTheme()\"\r\n    aria-live=\"polite\"\r\n    aria-relevant=\"additions text\"\r\n  >\r\n    @for (t of topToasts(); track t.id) {\r\n      <div\r\n        [ngClass]=\"['toast-host__item', 'toast-host__item--' + t.type]\"\r\n        @toastAnimTop\r\n        role=\"status\"\r\n      >\r\n        <div class=\"toast-host__body\">\r\n          @if (t.title) {\r\n            <p class=\"toast-host__title\">{{ t.title }}</p>\r\n          }\r\n          <p class=\"toast-host__message\">{{ t.message }}</p>\r\n          @if (t.actionLabel) {\r\n            <button type=\"button\" class=\"toast-host__action\" (click)=\"action(t.id)\">\r\n              {{ t.actionLabel }}\r\n            </button>\r\n          }\r\n        </div>\r\n        <button\r\n          type=\"button\"\r\n          class=\"toast-host__close\"\r\n          [attr.aria-label]=\"'Fechar notifica\u00E7\u00E3o'\"\r\n          (click)=\"dismiss(t.id)\"\r\n        >\r\n          <span aria-hidden=\"true\">&times;</span>\r\n        </button>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n@if (bottomToasts().length > 0) {\r\n  <div\r\n    class=\"toast-host toast-host--bottom app-library-theme\"\r\n    [ngClass]=\"theme.getTheme()\"\r\n    aria-live=\"polite\"\r\n    aria-relevant=\"additions text\"\r\n  >\r\n    @for (t of bottomToasts(); track t.id) {\r\n      <div\r\n        [ngClass]=\"['toast-host__item', 'toast-host__item--' + t.type]\"\r\n        @toastAnimBottom\r\n        role=\"status\"\r\n      >\r\n        <div class=\"toast-host__body\">\r\n          @if (t.title) {\r\n            <p class=\"toast-host__title\">{{ t.title }}</p>\r\n          }\r\n          <p class=\"toast-host__message\">{{ t.message }}</p>\r\n          @if (t.actionLabel) {\r\n            <button type=\"button\" class=\"toast-host__action\" (click)=\"action(t.id)\">\r\n              {{ t.actionLabel }}\r\n            </button>\r\n          }\r\n        </div>\r\n        <button\r\n          type=\"button\"\r\n          class=\"toast-host__close\"\r\n          [attr.aria-label]=\"'Fechar notifica\u00E7\u00E3o'\"\r\n          (click)=\"dismiss(t.id)\"\r\n        >\r\n          <span aria-hidden=\"true\">&times;</span>\r\n        </button>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: [":host{display:contents}.toast-host{position:fixed;right:0;z-index:var(--app-z-toast, 1300);display:flex;align-items:flex-end;gap:.6rem;box-sizing:border-box;pointer-events:none;max-width:100vw}.toast-host--top{top:0;flex-direction:column;padding:max(.85rem,env(safe-area-inset-top)) max(.85rem,env(safe-area-inset-right)) max(.85rem,env(safe-area-inset-bottom)) max(.85rem,env(safe-area-inset-left))}.toast-host--bottom{bottom:0;top:auto;flex-direction:column-reverse;padding:max(.85rem,env(safe-area-inset-top)) max(.85rem,env(safe-area-inset-right)) max(.85rem,env(safe-area-inset-bottom)) max(.85rem,env(safe-area-inset-left))}.toast-host__item{pointer-events:auto;display:flex;align-items:flex-start;gap:.6rem;width:min(25rem,100vw - 1.7rem);max-width:100%;box-sizing:border-box;border-radius:12px;border:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .1));background:var(--app-color-surface, #fff);box-shadow:0 4px 8px -2px #0000000f,0 14px 32px -8px #1a2f4524;padding:.85rem .65rem .85rem .95rem;border-left-width:5px;border-left-style:solid}.toast-host__item--success{border-left-color:var(--app-color-success, #15803d)}.toast-host__item--error{border-left-color:var(--app-color-error-border, #dc2626)}.toast-host__item--warning{border-left-color:var(--app-color-warning, #c2410c)}.toast-host__item--info{border-left-color:var(--app-color-info, #1d4ed8)}.toast-host__body{flex:1 1 auto;min-width:0}.toast-host__title{margin:0 0 .3rem;font-size:.9rem;font-weight:600;line-height:1.35;color:var(--app-color-text-primary, #1a2f45);letter-spacing:.01em}.toast-host__message{margin:0;font-size:.92rem;line-height:1.5;color:var(--app-color-text-secondary, #5a7fa3);word-break:break-word}.toast-host__action{margin:.5rem 0 0;padding:0;border:none;background:none;font:inherit;font-size:.86rem;font-weight:600;color:var(--app-color-primary, #2b7fd9);cursor:pointer;text-decoration:underline;text-underline-offset:2px}.toast-host__action:focus-visible{outline:2px solid var(--app-color-focus-ring-strong, rgba(43, 127, 217, .45));outline-offset:2px;border-radius:4px}.toast-host__close{flex:0 0 auto;width:1.85rem;height:1.85rem;margin:-.05rem 0 0;padding:0;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--app-color-text-muted, #6b8299);font-size:1.25rem;line-height:1;cursor:pointer}.toast-host__close:hover{background:var(--app-color-hover-bg, rgba(43, 127, 217, .08));color:var(--app-color-text-primary, #1a2f45)}.toast-host__close:focus-visible{outline:2px solid var(--app-color-focus-ring-strong, rgba(43, 127, 217, .45));outline-offset:2px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ToastHostComponent, isStandalone: true, selector: "app-toast-host", ngImport: i0, template: "@if (topToasts().length > 0) {\r\n  <div\r\n    class=\"toast-host toast-host--top app-library-theme\"\r\n    [ngClass]=\"theme.getTheme()\"\r\n    aria-live=\"polite\"\r\n    aria-relevant=\"additions text\"\r\n  >\r\n    @for (t of topToasts(); track t.id) {\r\n      <div\r\n        [ngClass]=\"['toast-host__item', 'toast-host__item--' + t.type]\"\r\n        @toastAnimTop\r\n        role=\"status\"\r\n      >\r\n        <div class=\"toast-host__body\">\r\n          @if (t.title) {\r\n            <p class=\"toast-host__title\">{{ t.title }}</p>\r\n          }\r\n          <p class=\"toast-host__message\">{{ t.message }}</p>\r\n          @if (t.actionLabel) {\r\n            <button type=\"button\" class=\"toast-host__action\" (click)=\"action(t.id)\">\r\n              {{ t.actionLabel }}\r\n            </button>\r\n          }\r\n        </div>\r\n        <button\r\n          type=\"button\"\r\n          class=\"toast-host__close\"\r\n          [attr.aria-label]=\"'Fechar notifica\u00E7\u00E3o'\"\r\n          (click)=\"dismiss(t.id)\"\r\n        >\r\n          <span aria-hidden=\"true\">&times;</span>\r\n        </button>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n@if (bottomToasts().length > 0) {\r\n  <div\r\n    class=\"toast-host toast-host--bottom app-library-theme\"\r\n    [ngClass]=\"theme.getTheme()\"\r\n    aria-live=\"polite\"\r\n    aria-relevant=\"additions text\"\r\n  >\r\n    @for (t of bottomToasts(); track t.id) {\r\n      <div\r\n        [ngClass]=\"['toast-host__item', 'toast-host__item--' + t.type]\"\r\n        @toastAnimBottom\r\n        role=\"status\"\r\n      >\r\n        <div class=\"toast-host__body\">\r\n          @if (t.title) {\r\n            <p class=\"toast-host__title\">{{ t.title }}</p>\r\n          }\r\n          <p class=\"toast-host__message\">{{ t.message }}</p>\r\n          @if (t.actionLabel) {\r\n            <button type=\"button\" class=\"toast-host__action\" (click)=\"action(t.id)\">\r\n              {{ t.actionLabel }}\r\n            </button>\r\n          }\r\n        </div>\r\n        <button\r\n          type=\"button\"\r\n          class=\"toast-host__close\"\r\n          [attr.aria-label]=\"'Fechar notifica\u00E7\u00E3o'\"\r\n          (click)=\"dismiss(t.id)\"\r\n        >\r\n          <span aria-hidden=\"true\">&times;</span>\r\n        </button>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: [":host{display:contents}.toast-host{position:fixed;right:0;z-index:var(--app-z-toast, 1300);display:flex;align-items:flex-end;gap:.6rem;box-sizing:border-box;pointer-events:none;max-width:100vw}.toast-host--top{top:0;flex-direction:column;padding:max(.85rem,env(safe-area-inset-top)) max(.85rem,env(safe-area-inset-right)) max(.85rem,env(safe-area-inset-bottom)) max(.85rem,env(safe-area-inset-left))}.toast-host--bottom{bottom:0;top:auto;flex-direction:column-reverse;padding:max(.85rem,env(safe-area-inset-top)) max(.85rem,env(safe-area-inset-right)) max(.85rem,env(safe-area-inset-bottom)) max(.85rem,env(safe-area-inset-left))}.toast-host__item{pointer-events:auto;display:flex;align-items:flex-start;gap:.6rem;width:min(25rem,100vw - 1.7rem);max-width:100%;box-sizing:border-box;border-radius:12px;border:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .1));background:#fff;box-shadow:0 4px 8px -2px #0000000f,0 14px 32px -8px #1a2f4524;padding:.85rem .65rem .85rem .95rem;border-left-width:5px;border-left-style:solid}.toast-host__item--success{border-left-color:var(--app-color-success, #15803d)}.toast-host__item--error{border-left-color:var(--app-color-error-border, #dc2626)}.toast-host__item--warning{border-left-color:var(--app-color-warning, #c2410c)}.toast-host__item--info{border-left-color:var(--app-color-primary, #2b7fd9)}.toast-host__body{flex:1 1 auto;min-width:0}.toast-host__title{margin:0 0 .3rem;font-size:.9rem;font-weight:600;line-height:1.35;color:#111827;letter-spacing:.01em}.toast-host__message{margin:0;font-size:.92rem;line-height:1.5;color:#111827;word-break:break-word}.toast-host__action{margin:.5rem 0 0;padding:0;border:none;background:none;font:inherit;font-size:.86rem;font-weight:600;color:#111827;cursor:pointer;text-decoration:underline;text-underline-offset:2px}.toast-host__action:focus-visible{outline:2px solid var(--app-color-focus-ring-strong, rgba(43, 127, 217, .45));outline-offset:2px;border-radius:4px}.toast-host__close{flex:0 0 auto;width:1.85rem;height:1.85rem;margin:-.05rem 0 0;padding:0;border:1px solid transparent;border-radius:8px;background:transparent;color:#111827;font-size:1.25rem;line-height:1;cursor:pointer}.toast-host__close:hover{background:#11182714;color:#111827}.toast-host__close:focus-visible{outline:2px solid var(--app-color-focus-ring-strong, rgba(43, 127, 217, .45));outline-offset:2px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
             trigger('toastAnimTop', [
                 transition(':enter', [
                     style({ opacity: 0, transform: 'translateX(110%)' }),
@@ -5668,7 +5668,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                                 animate('180ms ease-in', style({ opacity: 0, transform: 'translateY(120%)' })),
                             ]),
                         ]),
-                    ], template: "@if (topToasts().length > 0) {\r\n  <div\r\n    class=\"toast-host toast-host--top app-library-theme\"\r\n    [ngClass]=\"theme.getTheme()\"\r\n    aria-live=\"polite\"\r\n    aria-relevant=\"additions text\"\r\n  >\r\n    @for (t of topToasts(); track t.id) {\r\n      <div\r\n        [ngClass]=\"['toast-host__item', 'toast-host__item--' + t.type]\"\r\n        @toastAnimTop\r\n        role=\"status\"\r\n      >\r\n        <div class=\"toast-host__body\">\r\n          @if (t.title) {\r\n            <p class=\"toast-host__title\">{{ t.title }}</p>\r\n          }\r\n          <p class=\"toast-host__message\">{{ t.message }}</p>\r\n          @if (t.actionLabel) {\r\n            <button type=\"button\" class=\"toast-host__action\" (click)=\"action(t.id)\">\r\n              {{ t.actionLabel }}\r\n            </button>\r\n          }\r\n        </div>\r\n        <button\r\n          type=\"button\"\r\n          class=\"toast-host__close\"\r\n          [attr.aria-label]=\"'Fechar notifica\u00E7\u00E3o'\"\r\n          (click)=\"dismiss(t.id)\"\r\n        >\r\n          <span aria-hidden=\"true\">&times;</span>\r\n        </button>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n@if (bottomToasts().length > 0) {\r\n  <div\r\n    class=\"toast-host toast-host--bottom app-library-theme\"\r\n    [ngClass]=\"theme.getTheme()\"\r\n    aria-live=\"polite\"\r\n    aria-relevant=\"additions text\"\r\n  >\r\n    @for (t of bottomToasts(); track t.id) {\r\n      <div\r\n        [ngClass]=\"['toast-host__item', 'toast-host__item--' + t.type]\"\r\n        @toastAnimBottom\r\n        role=\"status\"\r\n      >\r\n        <div class=\"toast-host__body\">\r\n          @if (t.title) {\r\n            <p class=\"toast-host__title\">{{ t.title }}</p>\r\n          }\r\n          <p class=\"toast-host__message\">{{ t.message }}</p>\r\n          @if (t.actionLabel) {\r\n            <button type=\"button\" class=\"toast-host__action\" (click)=\"action(t.id)\">\r\n              {{ t.actionLabel }}\r\n            </button>\r\n          }\r\n        </div>\r\n        <button\r\n          type=\"button\"\r\n          class=\"toast-host__close\"\r\n          [attr.aria-label]=\"'Fechar notifica\u00E7\u00E3o'\"\r\n          (click)=\"dismiss(t.id)\"\r\n        >\r\n          <span aria-hidden=\"true\">&times;</span>\r\n        </button>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: [":host{display:contents}.toast-host{position:fixed;right:0;z-index:var(--app-z-toast, 1300);display:flex;align-items:flex-end;gap:.6rem;box-sizing:border-box;pointer-events:none;max-width:100vw}.toast-host--top{top:0;flex-direction:column;padding:max(.85rem,env(safe-area-inset-top)) max(.85rem,env(safe-area-inset-right)) max(.85rem,env(safe-area-inset-bottom)) max(.85rem,env(safe-area-inset-left))}.toast-host--bottom{bottom:0;top:auto;flex-direction:column-reverse;padding:max(.85rem,env(safe-area-inset-top)) max(.85rem,env(safe-area-inset-right)) max(.85rem,env(safe-area-inset-bottom)) max(.85rem,env(safe-area-inset-left))}.toast-host__item{pointer-events:auto;display:flex;align-items:flex-start;gap:.6rem;width:min(25rem,100vw - 1.7rem);max-width:100%;box-sizing:border-box;border-radius:12px;border:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .1));background:var(--app-color-surface, #fff);box-shadow:0 4px 8px -2px #0000000f,0 14px 32px -8px #1a2f4524;padding:.85rem .65rem .85rem .95rem;border-left-width:5px;border-left-style:solid}.toast-host__item--success{border-left-color:var(--app-color-success, #15803d)}.toast-host__item--error{border-left-color:var(--app-color-error-border, #dc2626)}.toast-host__item--warning{border-left-color:var(--app-color-warning, #c2410c)}.toast-host__item--info{border-left-color:var(--app-color-info, #1d4ed8)}.toast-host__body{flex:1 1 auto;min-width:0}.toast-host__title{margin:0 0 .3rem;font-size:.9rem;font-weight:600;line-height:1.35;color:var(--app-color-text-primary, #1a2f45);letter-spacing:.01em}.toast-host__message{margin:0;font-size:.92rem;line-height:1.5;color:var(--app-color-text-secondary, #5a7fa3);word-break:break-word}.toast-host__action{margin:.5rem 0 0;padding:0;border:none;background:none;font:inherit;font-size:.86rem;font-weight:600;color:var(--app-color-primary, #2b7fd9);cursor:pointer;text-decoration:underline;text-underline-offset:2px}.toast-host__action:focus-visible{outline:2px solid var(--app-color-focus-ring-strong, rgba(43, 127, 217, .45));outline-offset:2px;border-radius:4px}.toast-host__close{flex:0 0 auto;width:1.85rem;height:1.85rem;margin:-.05rem 0 0;padding:0;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--app-color-text-muted, #6b8299);font-size:1.25rem;line-height:1;cursor:pointer}.toast-host__close:hover{background:var(--app-color-hover-bg, rgba(43, 127, 217, .08));color:var(--app-color-text-primary, #1a2f45)}.toast-host__close:focus-visible{outline:2px solid var(--app-color-focus-ring-strong, rgba(43, 127, 217, .45));outline-offset:2px}\n"] }]
+                    ], template: "@if (topToasts().length > 0) {\r\n  <div\r\n    class=\"toast-host toast-host--top app-library-theme\"\r\n    [ngClass]=\"theme.getTheme()\"\r\n    aria-live=\"polite\"\r\n    aria-relevant=\"additions text\"\r\n  >\r\n    @for (t of topToasts(); track t.id) {\r\n      <div\r\n        [ngClass]=\"['toast-host__item', 'toast-host__item--' + t.type]\"\r\n        @toastAnimTop\r\n        role=\"status\"\r\n      >\r\n        <div class=\"toast-host__body\">\r\n          @if (t.title) {\r\n            <p class=\"toast-host__title\">{{ t.title }}</p>\r\n          }\r\n          <p class=\"toast-host__message\">{{ t.message }}</p>\r\n          @if (t.actionLabel) {\r\n            <button type=\"button\" class=\"toast-host__action\" (click)=\"action(t.id)\">\r\n              {{ t.actionLabel }}\r\n            </button>\r\n          }\r\n        </div>\r\n        <button\r\n          type=\"button\"\r\n          class=\"toast-host__close\"\r\n          [attr.aria-label]=\"'Fechar notifica\u00E7\u00E3o'\"\r\n          (click)=\"dismiss(t.id)\"\r\n        >\r\n          <span aria-hidden=\"true\">&times;</span>\r\n        </button>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n@if (bottomToasts().length > 0) {\r\n  <div\r\n    class=\"toast-host toast-host--bottom app-library-theme\"\r\n    [ngClass]=\"theme.getTheme()\"\r\n    aria-live=\"polite\"\r\n    aria-relevant=\"additions text\"\r\n  >\r\n    @for (t of bottomToasts(); track t.id) {\r\n      <div\r\n        [ngClass]=\"['toast-host__item', 'toast-host__item--' + t.type]\"\r\n        @toastAnimBottom\r\n        role=\"status\"\r\n      >\r\n        <div class=\"toast-host__body\">\r\n          @if (t.title) {\r\n            <p class=\"toast-host__title\">{{ t.title }}</p>\r\n          }\r\n          <p class=\"toast-host__message\">{{ t.message }}</p>\r\n          @if (t.actionLabel) {\r\n            <button type=\"button\" class=\"toast-host__action\" (click)=\"action(t.id)\">\r\n              {{ t.actionLabel }}\r\n            </button>\r\n          }\r\n        </div>\r\n        <button\r\n          type=\"button\"\r\n          class=\"toast-host__close\"\r\n          [attr.aria-label]=\"'Fechar notifica\u00E7\u00E3o'\"\r\n          (click)=\"dismiss(t.id)\"\r\n        >\r\n          <span aria-hidden=\"true\">&times;</span>\r\n        </button>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: [":host{display:contents}.toast-host{position:fixed;right:0;z-index:var(--app-z-toast, 1300);display:flex;align-items:flex-end;gap:.6rem;box-sizing:border-box;pointer-events:none;max-width:100vw}.toast-host--top{top:0;flex-direction:column;padding:max(.85rem,env(safe-area-inset-top)) max(.85rem,env(safe-area-inset-right)) max(.85rem,env(safe-area-inset-bottom)) max(.85rem,env(safe-area-inset-left))}.toast-host--bottom{bottom:0;top:auto;flex-direction:column-reverse;padding:max(.85rem,env(safe-area-inset-top)) max(.85rem,env(safe-area-inset-right)) max(.85rem,env(safe-area-inset-bottom)) max(.85rem,env(safe-area-inset-left))}.toast-host__item{pointer-events:auto;display:flex;align-items:flex-start;gap:.6rem;width:min(25rem,100vw - 1.7rem);max-width:100%;box-sizing:border-box;border-radius:12px;border:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .1));background:#fff;box-shadow:0 4px 8px -2px #0000000f,0 14px 32px -8px #1a2f4524;padding:.85rem .65rem .85rem .95rem;border-left-width:5px;border-left-style:solid}.toast-host__item--success{border-left-color:var(--app-color-success, #15803d)}.toast-host__item--error{border-left-color:var(--app-color-error-border, #dc2626)}.toast-host__item--warning{border-left-color:var(--app-color-warning, #c2410c)}.toast-host__item--info{border-left-color:var(--app-color-primary, #2b7fd9)}.toast-host__body{flex:1 1 auto;min-width:0}.toast-host__title{margin:0 0 .3rem;font-size:.9rem;font-weight:600;line-height:1.35;color:#111827;letter-spacing:.01em}.toast-host__message{margin:0;font-size:.92rem;line-height:1.5;color:#111827;word-break:break-word}.toast-host__action{margin:.5rem 0 0;padding:0;border:none;background:none;font:inherit;font-size:.86rem;font-weight:600;color:#111827;cursor:pointer;text-decoration:underline;text-underline-offset:2px}.toast-host__action:focus-visible{outline:2px solid var(--app-color-focus-ring-strong, rgba(43, 127, 217, .45));outline-offset:2px;border-radius:4px}.toast-host__close{flex:0 0 auto;width:1.85rem;height:1.85rem;margin:-.05rem 0 0;padding:0;border:1px solid transparent;border-radius:8px;background:transparent;color:#111827;font-size:1.25rem;line-height:1;cursor:pointer}.toast-host__close:hover{background:#11182714;color:#111827}.toast-host__close:focus-visible{outline:2px solid var(--app-color-focus-ring-strong, rgba(43, 127, 217, .45));outline-offset:2px}\n"] }]
         }] });
 
 const DEFAULT_MESSAGE = 'A carregar…';
@@ -7409,7 +7409,7 @@ class FormRowComponent {
     constructor() {
         this.gap = 'md';
         this.align = 'stretch';
-        this.justify = 'start';
+        this.justify = 'between';
         /**
          * Quando `true`, cada filho que **não** é `app-form-col` ocupa uma linha inteira da grelha
          * (`grid-column: 1 / -1`). Sem `grow`, campos soltos já dividem a linha em partes iguais.
@@ -7462,31 +7462,74 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 args: ['class']
             }] } });
 
+const FormSectionVariant = {
+    Plain: 'plain',
+    Card: 'card',
+    Panel: 'panel',
+};
+const FormSectionAlign = {
+    Start: 'start',
+    Center: 'center',
+};
+const FormSectionRadius = {
+    None: 'none',
+    Sm: 'sm',
+    Md: 'md',
+    Lg: 'lg',
+    Xl: 'xl',
+};
 class FormSectionComponent {
     constructor() {
         this.subtitulo = '';
         this.dense = false;
         this.divider = false;
+        this.variant = 'plain';
+        this.align = 'start';
+        this.maxWidth = null;
+        this.fullWidth = true;
+        this.radius = 'md';
+        this.elevated = false;
     }
     get hostClass() {
         const parts = ['form-section'];
+        parts.push(`form-section--${this.variant}`);
+        parts.push(`form-section--align-${this.align}`);
+        if (this.usesSurfaceVariant) {
+            parts.push(`form-section--radius-${this.radius}`);
+        }
         if (this.dense) {
             parts.push('form-section--dense');
         }
         if (this.divider) {
             parts.push('form-section--divider');
         }
+        if (!this.fullWidth) {
+            parts.push('form-section--inline');
+        }
+        if (this.usesSurfaceVariant && this.elevated && this.variant === 'card') {
+            parts.push('form-section--elevated');
+        }
         return parts.join(' ');
     }
+    get hostMaxWidth() {
+        const value = this.maxWidth?.trim();
+        return value ? value : null;
+    }
+    get hostMarginInline() {
+        return this.hostMaxWidth ? 'auto' : null;
+    }
+    get usesSurfaceVariant() {
+        return this.variant === 'card' || this.variant === 'panel';
+    }
     get showHeader() {
         return this.titulo.trim().length > 0 || this.subtitulo.trim().length > 0;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FormSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: FormSectionComponent, isStandalone: true, selector: "app-form-section", inputs: { titulo: "titulo", subtitulo: "subtitulo", dense: ["dense", "dense", booleanAttribute], divider: ["divider", "divider", booleanAttribute] }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "@if (showHeader) {\r\n<header class=\"form-section__header\">\r\n  @if (titulo.trim()) {\r\n  <h2 class=\"form-section__title\">{{ titulo }}</h2>\r\n  }\r\n  @if (subtitulo.trim()) {\r\n  <p class=\"form-section__subtitle\">{{ subtitulo }}</p>\r\n  }\r\n</header>\r\n}\r\n<div class=\"form-section__body\">\r\n  <ng-content />\r\n</div>", styles: [":host{display:block;width:100%;min-width:0;box-sizing:border-box}.form-section__header{margin:0 0 1.25rem;padding:0}.form-section__title{margin:0 0 .35rem;font-size:1.25rem;font-weight:600;line-height:1.3;color:var(--ui-field-label-color, #1a1a1a)}.form-section__subtitle{margin:0;font-size:.9rem;line-height:1.45;color:#525252}.form-section__body{display:flex;flex-direction:column;gap:1rem;min-width:0}:host.form-section--dense .form-section__header{margin-bottom:.75rem}:host.form-section--dense .form-section__title{font-size:1.1rem}:host.form-section--dense .form-section__body{gap:.65rem}:host.form-section--divider{padding-bottom:1.75rem;margin-bottom:1.75rem;border-bottom:1px solid #e5e5e5}:host.form-section--dense.form-section--divider{padding-bottom:1.25rem;margin-bottom:1.25rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: FormSectionComponent, isStandalone: true, selector: "app-form-section", inputs: { titulo: "titulo", subtitulo: "subtitulo", dense: ["dense", "dense", booleanAttribute], divider: ["divider", "divider", booleanAttribute], variant: "variant", align: "align", maxWidth: "maxWidth", fullWidth: ["fullWidth", "fullWidth", booleanAttribute], radius: "radius", elevated: ["elevated", "elevated", booleanAttribute] }, host: { properties: { "class": "this.hostClass", "style.max-width": "this.hostMaxWidth", "style.margin-inline": "this.hostMarginInline" } }, ngImport: i0, template: "@if (showHeader) {\r\n<header class=\"form-section__header\">\r\n  @if (titulo.trim()) {\r\n  <h2 class=\"form-section__title\">{{ titulo }}</h2>\r\n  }\r\n  @if (subtitulo.trim()) {\r\n  <p class=\"form-section__subtitle\">{{ subtitulo }}</p>\r\n  }\r\n</header>\r\n}\r\n<div class=\"form-section__content form-section__body\">\r\n  <ng-content />\r\n</div>", styles: [":host{display:block;width:100%;min-width:0;box-sizing:border-box}.form-section{width:100%;min-width:0;box-sizing:border-box}.form-section__header{margin:0 0 1.25rem;padding:0}.form-section__title{margin:0 0 .35rem;font-size:1.25rem;font-weight:600;line-height:1.3;color:var(--ui-field-label-color, #1a1a1a)}.form-section__subtitle{margin:0;font-size:.9rem;line-height:1.45;color:#525252}.form-section__content,.form-section__body{display:flex;flex-direction:column;gap:1rem;min-width:0}:host.form-section--align-center .form-section__header{text-align:center}:host.form-section--inline{width:fit-content;max-width:100%}:host.form-section--panel,:host.form-section--card{--form-section-surface-border: var(--app-color-border-subtle, rgba(26, 47, 69, .12));--form-section-surface-bg: var(--app-color-surface, #ffffff);--form-section-surface-shadow: 0 .4rem 1.25rem rgba(15, 23, 42, .08);--form-section-surface-padding-x: 1rem;--form-section-surface-padding-y: 1rem;padding:var(--form-section-surface-padding-y) var(--form-section-surface-padding-x);border:1px solid var(--form-section-surface-border);background:var(--form-section-surface-bg);box-shadow:var(--form-section-surface-shadow)}:host.form-section--panel{--form-section-surface-bg: color-mix( in srgb, var(--app-color-surface, #ffffff) 90%, var(--app-color-background, #f6f7f9) 10% );--form-section-surface-shadow: 0 .15rem .45rem rgba(15, 23, 42, .04)}:host.form-section--card{--form-section-surface-padding-x: 1.25rem;--form-section-surface-padding-y: 1.25rem;--form-section-surface-shadow: 0 .35rem 1rem rgba(15, 23, 42, .06)}:host.form-section--card.form-section--elevated{--form-section-surface-shadow: 0 .8rem 2rem -1.1rem rgba(15, 23, 42, .28)}:host.form-section--radius-none{border-radius:0}:host.form-section--radius-sm{border-radius:var(--radius-sm, 8px)}:host.form-section--radius-md{border-radius:var(--radius-md, 12px)}:host.form-section--radius-lg{border-radius:var(--radius-lg, 16px)}:host.form-section--radius-xl{border-radius:var(--radius-xl, 22px)}:host.form-section--dense .form-section__header{margin-bottom:.75rem}:host.form-section--dense .form-section__title{font-size:1.1rem}:host.form-section--dense .form-section__body{gap:.65rem}:host.form-section--dense.form-section--panel,:host.form-section--dense.form-section--card{--form-section-surface-padding-x: .85rem;--form-section-surface-padding-y: .85rem}:host.form-section--divider{padding-bottom:1.75rem;margin-bottom:1.75rem;border-bottom:1px solid #e5e5e5}:host.form-section--dense.form-section--divider{padding-bottom:1.25rem;margin-bottom:1.25rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FormSectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-form-section', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (showHeader) {\r\n<header class=\"form-section__header\">\r\n  @if (titulo.trim()) {\r\n  <h2 class=\"form-section__title\">{{ titulo }}</h2>\r\n  }\r\n  @if (subtitulo.trim()) {\r\n  <p class=\"form-section__subtitle\">{{ subtitulo }}</p>\r\n  }\r\n</header>\r\n}\r\n<div class=\"form-section__body\">\r\n  <ng-content />\r\n</div>", styles: [":host{display:block;width:100%;min-width:0;box-sizing:border-box}.form-section__header{margin:0 0 1.25rem;padding:0}.form-section__title{margin:0 0 .35rem;font-size:1.25rem;font-weight:600;line-height:1.3;color:var(--ui-field-label-color, #1a1a1a)}.form-section__subtitle{margin:0;font-size:.9rem;line-height:1.45;color:#525252}.form-section__body{display:flex;flex-direction:column;gap:1rem;min-width:0}:host.form-section--dense .form-section__header{margin-bottom:.75rem}:host.form-section--dense .form-section__title{font-size:1.1rem}:host.form-section--dense .form-section__body{gap:.65rem}:host.form-section--divider{padding-bottom:1.75rem;margin-bottom:1.75rem;border-bottom:1px solid #e5e5e5}:host.form-section--dense.form-section--divider{padding-bottom:1.25rem;margin-bottom:1.25rem}\n"] }]
+            args: [{ selector: 'app-form-section', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (showHeader) {\r\n<header class=\"form-section__header\">\r\n  @if (titulo.trim()) {\r\n  <h2 class=\"form-section__title\">{{ titulo }}</h2>\r\n  }\r\n  @if (subtitulo.trim()) {\r\n  <p class=\"form-section__subtitle\">{{ subtitulo }}</p>\r\n  }\r\n</header>\r\n}\r\n<div class=\"form-section__content form-section__body\">\r\n  <ng-content />\r\n</div>", styles: [":host{display:block;width:100%;min-width:0;box-sizing:border-box}.form-section{width:100%;min-width:0;box-sizing:border-box}.form-section__header{margin:0 0 1.25rem;padding:0}.form-section__title{margin:0 0 .35rem;font-size:1.25rem;font-weight:600;line-height:1.3;color:var(--ui-field-label-color, #1a1a1a)}.form-section__subtitle{margin:0;font-size:.9rem;line-height:1.45;color:#525252}.form-section__content,.form-section__body{display:flex;flex-direction:column;gap:1rem;min-width:0}:host.form-section--align-center .form-section__header{text-align:center}:host.form-section--inline{width:fit-content;max-width:100%}:host.form-section--panel,:host.form-section--card{--form-section-surface-border: var(--app-color-border-subtle, rgba(26, 47, 69, .12));--form-section-surface-bg: var(--app-color-surface, #ffffff);--form-section-surface-shadow: 0 .4rem 1.25rem rgba(15, 23, 42, .08);--form-section-surface-padding-x: 1rem;--form-section-surface-padding-y: 1rem;padding:var(--form-section-surface-padding-y) var(--form-section-surface-padding-x);border:1px solid var(--form-section-surface-border);background:var(--form-section-surface-bg);box-shadow:var(--form-section-surface-shadow)}:host.form-section--panel{--form-section-surface-bg: color-mix( in srgb, var(--app-color-surface, #ffffff) 90%, var(--app-color-background, #f6f7f9) 10% );--form-section-surface-shadow: 0 .15rem .45rem rgba(15, 23, 42, .04)}:host.form-section--card{--form-section-surface-padding-x: 1.25rem;--form-section-surface-padding-y: 1.25rem;--form-section-surface-shadow: 0 .35rem 1rem rgba(15, 23, 42, .06)}:host.form-section--card.form-section--elevated{--form-section-surface-shadow: 0 .8rem 2rem -1.1rem rgba(15, 23, 42, .28)}:host.form-section--radius-none{border-radius:0}:host.form-section--radius-sm{border-radius:var(--radius-sm, 8px)}:host.form-section--radius-md{border-radius:var(--radius-md, 12px)}:host.form-section--radius-lg{border-radius:var(--radius-lg, 16px)}:host.form-section--radius-xl{border-radius:var(--radius-xl, 22px)}:host.form-section--dense .form-section__header{margin-bottom:.75rem}:host.form-section--dense .form-section__title{font-size:1.1rem}:host.form-section--dense .form-section__body{gap:.65rem}:host.form-section--dense.form-section--panel,:host.form-section--dense.form-section--card{--form-section-surface-padding-x: .85rem;--form-section-surface-padding-y: .85rem}:host.form-section--divider{padding-bottom:1.75rem;margin-bottom:1.75rem;border-bottom:1px solid #e5e5e5}:host.form-section--dense.form-section--divider{padding-bottom:1.25rem;margin-bottom:1.25rem}\n"] }]
         }], propDecorators: { titulo: [{
                 type: Input,
                 args: [{ required: true }]
@@ -7498,9 +7541,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             }], divider: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
+            }], variant: [{
+                type: Input
+            }], align: [{
+                type: Input
+            }], maxWidth: [{
+                type: Input
+            }], fullWidth: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], radius: [{
+                type: Input
+            }], elevated: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], hostClass: [{
                 type: HostBinding,
                 args: ['class']
+            }], hostMaxWidth: [{
+                type: HostBinding,
+                args: ['style.max-width']
+            }], hostMarginInline: [{
+                type: HostBinding,
+                args: ['style.margin-inline']
             }] } });
 
 /** Evento no host `app-form-group`: expandir grupo sem scroll próprio (navegação a partir do resumo). */
@@ -10343,5 +10406,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ADAPTIVE_DATA_VIEW_MOBILE_QUERY, APP_SIDEBAR_LABEL_REVEAL_LAG_MS, APP_SIDEBAR_LAYOUT_DURATION_MS, APP_SIDEBAR_NAV_REVEAL_TOTAL_MS, APP_THEME_BASE_CLASS, APP_THEME_IDS, ActionMenuComponent, AdaptiveDataViewComponent, AnchoredOverlayComponent, AppBreadcrumbComponent, AppDialogComponent, AppLibLightBlockScrollStrategy, AppShellComponent, AppShellSidebarTemplateDirective, AppShellSidebarToggleComponent, AppSidebarComponent, AppSidebarToolbarDirective, AppTheme, AppThemeService, AppTopbarComponent, AppUserMenuComponent, BR_ESTADOS_NOME_SIGLA, BaseFieldComponent, BaseFieldDirective, BooleanFieldDirective, ButtonComponent, ButtonRadius, ButtonSize, ButtonType, ButtonVariant, CardListComponent, CepFieldComponent, CheckboxFieldComponent, ConfirmDialogComponent, ConfirmDialogService, ContextMenuComponent, CpfCnpjFieldComponent, DashboardSectionComponent, DataCardComponent, DataGridComponent, DataListComponent, DataToolbarComponent, DateFieldComponent, DecimalFieldComponent, DetailsFieldComponent, DetailsViewComponent, DialogFooterDirective, DividerComponent, DrawerComponent, DrawerSide, DrawerSize, DropdownBaseComponent, DropdownMenuComponent, DropdownMultiOptionFieldBase, DropdownOptionFieldBase, DropdownSearchFieldComponent, EmptyStateComponent, FILE_PREVIEW_UNAVAILABLE_MESSAGE, FileUploadFieldComponent, FormActionsAlign, FormActionsComponent, FormColComponent, FormGroupComponent, FormGroupVariant, FormLayoutGap, FormRowAlign, FormRowComponent, FormRowJustify, FormSectionComponent, FormTabComponent, FormTabsComponent, ImagePreviewPanelComponent, InputMaskFieldComponent, IntegerFieldComponent, LAYOUT_STACK_SIDE_BY_SIDE, LAYOUT_STACK_STACKED, LayoutStackAlign, LayoutStackComponent, LayoutStackDirection, LayoutStackItemAlign, LibDialogSize, ListItemComponent, LoadingDialogComponent, LoadingDialogService, MaskedTextFieldBase, MenuDividerComponent, MenuDropdownPlacement, MenuGroupComponent, MenuListComponent, MultiselectFieldComponent, NgControlFieldDirective, OverlayPlacement, PDF_IFRAME_VIEWER_HASH, PasswordFieldComponent, PhoneFieldComponent, PopoverBodyTemplateDirective, PopoverComponent, PopoverFooterTemplateDirective, PopoverTriggerDirective, STRUCTRA_THEME_IDS, STRUCTRA_UI, SelectFieldComponent, SkeletonBlockComponent, SkeletonCardComponent, SkeletonFieldShellComponent, SkeletonListComponent, SkeletonTableComponent, SkeletonTextComponent, StatCardComponent, StatusBadgeComponent, SwitchFieldComponent, TableEmptyStateComponent, TableToolbarComponent, TextFieldComponent, TextareaFieldComponent, ThemeDirective, ToastHostComponent, ToastService, TooltipComponent, TooltipPanelTemplateDirective, ValidationSummaryComponent, anchoredOverlayPositions, appendPdfIframeViewerParams, applyPickedCalendarDate, buildDecimalBrDisplay, buildDecimalBrParseString, buildEmptyStateOverlayHtml, caretIndexFromIntegerDigitCount, caretIndexFromSemantic, cepMaskCompleteValidator, cpfCnpjMaskCompleteValidator, escapeHtml, extractDecimalBrParts, fileIsLikelyImage, fileMatchesAccept, fixedDigitsMaskCompleteValidator, formatAcceptForDisplay, formatDateTimePtBr, formatDecimalBr, formatFileSizeBytes, formatIntegerThousandsBr, formatMaskDigits, formatUiFieldDateValue, getFilePreviewKind, getThemeClass, getThemeClassList, getThemeTokenClass, libDialogPanelClasses, mapEstadosToOptions, maskDigitCount, normalizeFormDateValue, normalizeStructraTheme, parseDecimalBr, parseIntegerString, parseUiFieldDateValue, phoneBrMaskCompleteValidator, resolveControlAtPath, sanitizeDecimalBrInput, sanitizeIntegerDigits, sectionHasVisibleInvalid, semanticCaretAt, semanticIntegerDigitCountLeft, stripToDigits, subscribeMarkForCheckOnInvalidUiRefresh, subtreeHasVisibleInvalid };
+export { ADAPTIVE_DATA_VIEW_MOBILE_QUERY, APP_SIDEBAR_LABEL_REVEAL_LAG_MS, APP_SIDEBAR_LAYOUT_DURATION_MS, APP_SIDEBAR_NAV_REVEAL_TOTAL_MS, APP_THEME_BASE_CLASS, APP_THEME_IDS, ActionMenuComponent, AdaptiveDataViewComponent, AnchoredOverlayComponent, AppBreadcrumbComponent, AppDialogComponent, AppLibLightBlockScrollStrategy, AppShellComponent, AppShellSidebarTemplateDirective, AppShellSidebarToggleComponent, AppSidebarComponent, AppSidebarToolbarDirective, AppTheme, AppThemeService, AppTopbarComponent, AppUserMenuComponent, BR_ESTADOS_NOME_SIGLA, BaseFieldComponent, BaseFieldDirective, BooleanFieldDirective, ButtonComponent, ButtonRadius, ButtonSize, ButtonType, ButtonVariant, CardListComponent, CepFieldComponent, CheckboxFieldComponent, ConfirmDialogComponent, ConfirmDialogService, ContextMenuComponent, CpfCnpjFieldComponent, DashboardSectionComponent, DataCardComponent, DataGridComponent, DataListComponent, DataToolbarComponent, DateFieldComponent, DecimalFieldComponent, DetailsFieldComponent, DetailsViewComponent, DialogFooterDirective, DividerComponent, DrawerComponent, DrawerSide, DrawerSize, DropdownBaseComponent, DropdownMenuComponent, DropdownMultiOptionFieldBase, DropdownOptionFieldBase, DropdownSearchFieldComponent, EmptyStateComponent, FILE_PREVIEW_UNAVAILABLE_MESSAGE, FileUploadFieldComponent, FormActionsAlign, FormActionsComponent, FormColComponent, FormGroupComponent, FormGroupVariant, FormLayoutGap, FormRowAlign, FormRowComponent, FormRowJustify, FormSectionAlign, FormSectionComponent, FormSectionRadius, FormSectionVariant, FormTabComponent, FormTabsComponent, ImagePreviewPanelComponent, InputMaskFieldComponent, IntegerFieldComponent, LAYOUT_STACK_SIDE_BY_SIDE, LAYOUT_STACK_STACKED, LayoutStackAlign, LayoutStackComponent, LayoutStackDirection, LayoutStackItemAlign, LibDialogSize, ListItemComponent, LoadingDialogComponent, LoadingDialogService, MaskedTextFieldBase, MenuDividerComponent, MenuDropdownPlacement, MenuGroupComponent, MenuListComponent, MultiselectFieldComponent, NgControlFieldDirective, OverlayPlacement, PDF_IFRAME_VIEWER_HASH, PasswordFieldComponent, PhoneFieldComponent, PopoverBodyTemplateDirective, PopoverComponent, PopoverFooterTemplateDirective, PopoverTriggerDirective, STRUCTRA_THEME_IDS, STRUCTRA_UI, SelectFieldComponent, SkeletonBlockComponent, SkeletonCardComponent, SkeletonFieldShellComponent, SkeletonListComponent, SkeletonTableComponent, SkeletonTextComponent, StatCardComponent, StatusBadgeComponent, SwitchFieldComponent, TableEmptyStateComponent, TableToolbarComponent, TextFieldComponent, TextareaFieldComponent, ThemeDirective, ToastHostComponent, ToastService, TooltipComponent, TooltipPanelTemplateDirective, ValidationSummaryComponent, anchoredOverlayPositions, appendPdfIframeViewerParams, applyPickedCalendarDate, buildDecimalBrDisplay, buildDecimalBrParseString, buildEmptyStateOverlayHtml, caretIndexFromIntegerDigitCount, caretIndexFromSemantic, cepMaskCompleteValidator, cpfCnpjMaskCompleteValidator, escapeHtml, extractDecimalBrParts, fileIsLikelyImage, fileMatchesAccept, fixedDigitsMaskCompleteValidator, formatAcceptForDisplay, formatDateTimePtBr, formatDecimalBr, formatFileSizeBytes, formatIntegerThousandsBr, formatMaskDigits, formatUiFieldDateValue, getFilePreviewKind, getThemeClass, getThemeClassList, getThemeTokenClass, libDialogPanelClasses, mapEstadosToOptions, maskDigitCount, normalizeFormDateValue, normalizeStructraTheme, parseDecimalBr, parseIntegerString, parseUiFieldDateValue, phoneBrMaskCompleteValidator, resolveControlAtPath, sanitizeDecimalBrInput, sanitizeIntegerDigits, sectionHasVisibleInvalid, semanticCaretAt, semanticIntegerDigitCountLeft, stripToDigits, subscribeMarkForCheckOnInvalidUiRefresh, subtreeHasVisibleInvalid };
 //# sourceMappingURL=structra-ui.mjs.map