structra-ui 0.1.82 → 0.1.83

package/fesm2022/structra-ui.mjs

@@ -281,6 +281,11 @@ class BaseButtonComponent {
          * Ignorado com `fullWidth="true"`.
          */
         this.widthPx = null;
+        /**
+         * Altura fixa em pixels do envoltório; `null`/≤0 não aplica. Compatível com `fullWidth` true ou false.
+         * O `<button>` interior estica a 100% da altura da host.
+         */
+        this.heightPx = null;
         /** Placeholder de carregamento (skeleton no lugar do rótulo). */
         this.loading = false;
         /** Estilo visual base; pode ser estendido no SCSS do projeto. */
@@ -316,6 +321,11 @@ class BaseButtonComponent {
                 parts.push('base-button--fixed-width');
             }
         }
+        if (typeof this.heightPx === 'number' &&
+            Number.isFinite(this.heightPx) &&
+            this.heightPx > 0) {
+            parts.push('base-button--fixed-height');
+        }
         if (this.loading) {
             parts.push('base-button--loading');
         }
@@ -333,16 +343,24 @@ class BaseButtonComponent {
         }
         return null;
     }
+    get hostHeight() {
+        if (typeof this.heightPx === 'number' &&
+            Number.isFinite(this.heightPx) &&
+            this.heightPx > 0) {
+            return `${this.heightPx}px`;
+        }
+        return null;
+    }
     /** Foca o `<button>` nativo (o host do componente não é focável). */
     focusNative(options) {
         this.nativeBtn?.nativeElement?.focus(options);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BaseButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: BaseButtonComponent, isStandalone: true, selector: "app-base-button", inputs: { type: "type", disabled: ["disabled", "disabled", booleanAttribute], readonly: ["readonly", "readonly", booleanAttribute], fullWidth: ["fullWidth", "fullWidth", booleanAttribute], align: "align", widthPx: "widthPx", loading: ["loading", "loading", booleanAttribute], variant: "variant", appearance: "appearance" }, host: { properties: { "class": "this.hostClasses", "style.width": "this.hostWidth" } }, viewQueries: [{ propertyName: "nativeBtn", first: true, predicate: ["nativeBtn"], descendants: true, read: ElementRef }], ngImport: i0, template: "@if (!loading) {\r\n<button\r\n  #nativeBtn\r\n  class=\"base-button__native\"\r\n  [attr.type]=\"type\"\r\n  [disabled]=\"disabled || readonly\"\r\n  [attr.aria-readonly]=\"readonly ? true : null\"\r\n>\r\n  <ng-content />\r\n</button>\r\n} @else {\r\n<div class=\"base-button__native base-button__native--skeleton\" role=\"status\" aria-live=\"polite\" aria-busy=\"true\"\r\n  aria-label=\"A carregar\">\r\n  <app-skeleton-block width=\"40%\" height=\"0.7rem\" radius=\"8px\" />\r\n</div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;width:fit-content;max-width:100%;box-sizing:border-box;vertical-align:middle}.base-button__native{-webkit-appearance:none;appearance:none;display:flex;width:auto;min-width:5rem;align-items:center;justify-content:center;text-align:center;gap:.5rem;min-height:2.5rem;padding:.5rem 1.25rem;margin:0;border:1px solid transparent;border-radius:var(--ui-field-float-border-radius, 14px);font:inherit;font-size:.9375rem;font-weight:600;line-height:1.25;cursor:pointer;user-select:none;-webkit-user-select:none;transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease}:host(.base-button--full-width){display:block;width:auto;min-width:0;max-width:100%;box-sizing:border-box}:host(.base-button--full-width) .base-button__native{width:100%;min-width:0}:host(.base-button--fixed-width):not(.base-button--full-width) .base-button__native{width:100%;min-width:0}:host(.base-button--align-start):not(.base-button--full-width){display:inline-block;width:fit-content;max-width:100%;margin-inline:0;vertical-align:middle}:host(.base-button--align-center):not(.base-button--full-width){display:block;width:fit-content;max-width:100%;margin-inline:auto}:host(.base-button--align-end):not(.base-button--full-width){display:block;width:fit-content;max-width:100%;margin-inline-start:auto;margin-inline-end:0}.base-button__native:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ui-field-float-focus-ring, rgba(43, 127, 217, .35))}:host(.base-button--primary) .base-button__native{color:var(--app-color-primary-contrast, #ffffff);background:var(--ui-field-float-border-focus, #2b7fd9);border-color:var(--ui-field-float-border-focus, #2b7fd9)}:host(.base-button--primary) .base-button__native:hover:not(:disabled){filter:brightness(.95)}:host(.base-button--secondary) .base-button__native{color:var(--ui-field-float-label-top-color, #4a6d8c);background:var(--ui-field-float-bg, #f3f7fb);border-color:var(--ui-field-float-border, #b6cce5)}:host(.base-button--secondary) .base-button__native:hover:not(:disabled){background:var(--app-color-button-secondary-hover-bg, #e8f0fa)}:host(.base-button--ghost) .base-button__native{color:var(--app-color-text-primary, #1a2f45);background:transparent;border-color:transparent;min-width:0;min-height:2.25rem;padding:.35rem .5rem;border-radius:8px;font-size:.95rem;font-weight:600;justify-content:flex-start;gap:.45rem}:host(.base-button--ghost) .base-button__native:hover:not(:disabled){color:var(--app-color-nav-link);background:color-mix(in srgb,var(--app-color-primary) 6%,transparent)}:host(.base-button--danger) .base-button__native{color:var(--app-color-error-contrast, #fff);background:var(--app-color-error, #b91c1c);border-color:var(--app-color-error-border, #dc2626)}:host(.base-button--danger) .base-button__native:hover:not(:disabled){filter:brightness(.95)}:host(.base-button--danger) .base-button__native:focus-visible{outline:none;box-shadow:0 0 0 3px var(--app-color-error-focus-ring, rgba(220, 38, 38, .35))}:host(.base-button--disabled:not(.base-button--readonly)) .base-button__native,.base-button__native:disabled:not([aria-readonly=true]){cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity, .65)}:host(.base-button--readonly) .base-button__native{cursor:default;opacity:1;color:var(--ui-field-readonly-button-text, #37474f);background:var(--ui-field-readonly-button-bg, #cfd8dc);border-color:var(--ui-field-readonly-button-border, #90a4ae)}:host(.base-button--readonly) .base-button__native:hover:not(:disabled){filter:brightness(.97)}:host(.base-button--readonly) .base-button__native:focus-visible{box-shadow:0 0 0 3px var(--ui-field-readonly-button-focus-ring, rgba(96, 125, 139, .35))}.base-button__native--skeleton{pointer-events:none;cursor:default}:host(.base-button--primary.base-button--loading) .base-button__native--skeleton{color:transparent;background:color-mix(in srgb,var(--ui-field-float-border-focus, #2b7fd9) 82%,#ffffff);border-color:color-mix(in srgb,var(--ui-field-float-border-focus, #2b7fd9) 82%,#ffffff)}:host(.base-button--secondary.base-button--loading) .base-button__native--skeleton{background:var(--ui-field-float-bg, #f3f7fb);border-color:var(--ui-field-float-border, #b6cce5)}:host(.base-button--ghost.base-button--loading) .base-button__native--skeleton{color:transparent;background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 8%,transparent);border-color:transparent}:host(.base-button--danger.base-button--loading) .base-button__native--skeleton{color:transparent;background:color-mix(in srgb,var(--app-color-error, #b91c1c) 82%,#ffffff);border-color:color-mix(in srgb,var(--app-color-error-border, #dc2626) 88%,#ffffff)}\n"], dependencies: [{ kind: "component", type: SkeletonBlockComponent, selector: "app-skeleton-block", inputs: ["width", "height", "radius", "animate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: BaseButtonComponent, isStandalone: true, selector: "app-base-button", inputs: { type: "type", disabled: ["disabled", "disabled", booleanAttribute], readonly: ["readonly", "readonly", booleanAttribute], fullWidth: ["fullWidth", "fullWidth", booleanAttribute], align: "align", widthPx: "widthPx", heightPx: "heightPx", loading: ["loading", "loading", booleanAttribute], variant: "variant", appearance: "appearance" }, host: { properties: { "class": "this.hostClasses", "style.width": "this.hostWidth", "style.height": "this.hostHeight" } }, viewQueries: [{ propertyName: "nativeBtn", first: true, predicate: ["nativeBtn"], descendants: true, read: ElementRef }], ngImport: i0, template: "@if (!loading) {\r\n<button\r\n  #nativeBtn\r\n  class=\"base-button__native\"\r\n  [attr.type]=\"type\"\r\n  [disabled]=\"disabled || readonly\"\r\n  [attr.aria-readonly]=\"readonly ? true : null\"\r\n>\r\n  <ng-content />\r\n</button>\r\n} @else {\r\n<div class=\"base-button__native base-button__native--skeleton\" role=\"status\" aria-live=\"polite\" aria-busy=\"true\"\r\n  aria-label=\"A carregar\">\r\n  <app-skeleton-block width=\"40%\" height=\"0.7rem\" radius=\"8px\" />\r\n</div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;width:fit-content;max-width:100%;box-sizing:border-box;vertical-align:middle}.base-button__native{-webkit-appearance:none;appearance:none;display:flex;width:auto;min-width:5rem;align-items:center;justify-content:center;text-align:center;gap:.5rem;min-height:2.5rem;padding:.5rem 1.25rem;margin:0;border:1px solid transparent;border-radius:var(--ui-field-float-border-radius, 14px);font:inherit;font-size:.9375rem;font-weight:600;line-height:1.25;cursor:pointer;user-select:none;-webkit-user-select:none;transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease}:host(.base-button--full-width){display:block;width:auto;min-width:0;max-width:100%;box-sizing:border-box}:host(.base-button--full-width) .base-button__native{width:100%;min-width:0}:host(.base-button--fixed-width):not(.base-button--full-width) .base-button__native{width:100%;min-width:0}:host(.base-button--align-start):not(.base-button--full-width){display:inline-block;width:fit-content;max-width:100%;margin-inline:0;vertical-align:middle}:host(.base-button--align-center):not(.base-button--full-width){display:block;width:fit-content;max-width:100%;margin-inline:auto}:host(.base-button--align-end):not(.base-button--full-width){display:block;width:fit-content;max-width:100%;margin-inline-start:auto;margin-inline-end:0}.base-button__native:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ui-field-float-focus-ring, rgba(43, 127, 217, .35))}:host(.base-button--primary) .base-button__native{color:var(--app-color-primary-contrast, #ffffff);background:var(--ui-field-float-border-focus, #2b7fd9);border-color:var(--ui-field-float-border-focus, #2b7fd9)}:host(.base-button--primary) .base-button__native:hover:not(:disabled){filter:brightness(.95)}:host(.base-button--secondary) .base-button__native{color:var(--ui-field-float-label-top-color, #4a6d8c);background:var(--ui-field-float-bg, #f3f7fb);border-color:var(--ui-field-float-border, #b6cce5)}:host(.base-button--secondary) .base-button__native:hover:not(:disabled){background:var(--app-color-button-secondary-hover-bg, #e8f0fa)}:host(.base-button--ghost) .base-button__native{color:var(--app-color-text-primary, #1a2f45);background:transparent;border-color:transparent;min-width:0;min-height:2.25rem;padding:.35rem .5rem;border-radius:8px;font-size:.95rem;font-weight:600;justify-content:flex-start;gap:.45rem}:host(.base-button--ghost) .base-button__native:hover:not(:disabled){color:var(--app-color-nav-link);background:color-mix(in srgb,var(--app-color-primary) 6%,transparent)}:host(.base-button--fixed-height) .base-button__native{box-sizing:border-box;height:100%;min-height:0}:host(.base-button--danger) .base-button__native{color:var(--app-color-error-contrast, #fff);background:var(--app-color-error, #b91c1c);border-color:var(--app-color-error-border, #dc2626)}:host(.base-button--danger) .base-button__native:hover:not(:disabled){filter:brightness(.95)}:host(.base-button--danger) .base-button__native:focus-visible{outline:none;box-shadow:0 0 0 3px var(--app-color-error-focus-ring, rgba(220, 38, 38, .35))}:host(.base-button--disabled:not(.base-button--readonly)) .base-button__native,.base-button__native:disabled:not([aria-readonly=true]){cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity, .65)}:host(.base-button--readonly) .base-button__native{cursor:default;opacity:1;color:var(--ui-field-readonly-button-text, #37474f);background:var(--ui-field-readonly-button-bg, #cfd8dc);border-color:var(--ui-field-readonly-button-border, #90a4ae)}:host(.base-button--readonly) .base-button__native:hover:not(:disabled){filter:brightness(.97)}:host(.base-button--readonly) .base-button__native:focus-visible{box-shadow:0 0 0 3px var(--ui-field-readonly-button-focus-ring, rgba(96, 125, 139, .35))}.base-button__native--skeleton{pointer-events:none;cursor:default}:host(.base-button--primary.base-button--loading) .base-button__native--skeleton{color:transparent;background:color-mix(in srgb,var(--ui-field-float-border-focus, #2b7fd9) 82%,#ffffff);border-color:color-mix(in srgb,var(--ui-field-float-border-focus, #2b7fd9) 82%,#ffffff)}:host(.base-button--secondary.base-button--loading) .base-button__native--skeleton{background:var(--ui-field-float-bg, #f3f7fb);border-color:var(--ui-field-float-border, #b6cce5)}:host(.base-button--ghost.base-button--loading) .base-button__native--skeleton{color:transparent;background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 8%,transparent);border-color:transparent}:host(.base-button--danger.base-button--loading) .base-button__native--skeleton{color:transparent;background:color-mix(in srgb,var(--app-color-error, #b91c1c) 82%,#ffffff);border-color:color-mix(in srgb,var(--app-color-error-border, #dc2626) 88%,#ffffff)}\n"], dependencies: [{ kind: "component", type: SkeletonBlockComponent, selector: "app-skeleton-block", inputs: ["width", "height", "radius", "animate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BaseButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-base-button', standalone: true, imports: [SkeletonBlockComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!loading) {\r\n<button\r\n  #nativeBtn\r\n  class=\"base-button__native\"\r\n  [attr.type]=\"type\"\r\n  [disabled]=\"disabled || readonly\"\r\n  [attr.aria-readonly]=\"readonly ? true : null\"\r\n>\r\n  <ng-content />\r\n</button>\r\n} @else {\r\n<div class=\"base-button__native base-button__native--skeleton\" role=\"status\" aria-live=\"polite\" aria-busy=\"true\"\r\n  aria-label=\"A carregar\">\r\n  <app-skeleton-block width=\"40%\" height=\"0.7rem\" radius=\"8px\" />\r\n</div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;width:fit-content;max-width:100%;box-sizing:border-box;vertical-align:middle}.base-button__native{-webkit-appearance:none;appearance:none;display:flex;width:auto;min-width:5rem;align-items:center;justify-content:center;text-align:center;gap:.5rem;min-height:2.5rem;padding:.5rem 1.25rem;margin:0;border:1px solid transparent;border-radius:var(--ui-field-float-border-radius, 14px);font:inherit;font-size:.9375rem;font-weight:600;line-height:1.25;cursor:pointer;user-select:none;-webkit-user-select:none;transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease}:host(.base-button--full-width){display:block;width:auto;min-width:0;max-width:100%;box-sizing:border-box}:host(.base-button--full-width) .base-button__native{width:100%;min-width:0}:host(.base-button--fixed-width):not(.base-button--full-width) .base-button__native{width:100%;min-width:0}:host(.base-button--align-start):not(.base-button--full-width){display:inline-block;width:fit-content;max-width:100%;margin-inline:0;vertical-align:middle}:host(.base-button--align-center):not(.base-button--full-width){display:block;width:fit-content;max-width:100%;margin-inline:auto}:host(.base-button--align-end):not(.base-button--full-width){display:block;width:fit-content;max-width:100%;margin-inline-start:auto;margin-inline-end:0}.base-button__native:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ui-field-float-focus-ring, rgba(43, 127, 217, .35))}:host(.base-button--primary) .base-button__native{color:var(--app-color-primary-contrast, #ffffff);background:var(--ui-field-float-border-focus, #2b7fd9);border-color:var(--ui-field-float-border-focus, #2b7fd9)}:host(.base-button--primary) .base-button__native:hover:not(:disabled){filter:brightness(.95)}:host(.base-button--secondary) .base-button__native{color:var(--ui-field-float-label-top-color, #4a6d8c);background:var(--ui-field-float-bg, #f3f7fb);border-color:var(--ui-field-float-border, #b6cce5)}:host(.base-button--secondary) .base-button__native:hover:not(:disabled){background:var(--app-color-button-secondary-hover-bg, #e8f0fa)}:host(.base-button--ghost) .base-button__native{color:var(--app-color-text-primary, #1a2f45);background:transparent;border-color:transparent;min-width:0;min-height:2.25rem;padding:.35rem .5rem;border-radius:8px;font-size:.95rem;font-weight:600;justify-content:flex-start;gap:.45rem}:host(.base-button--ghost) .base-button__native:hover:not(:disabled){color:var(--app-color-nav-link);background:color-mix(in srgb,var(--app-color-primary) 6%,transparent)}:host(.base-button--danger) .base-button__native{color:var(--app-color-error-contrast, #fff);background:var(--app-color-error, #b91c1c);border-color:var(--app-color-error-border, #dc2626)}:host(.base-button--danger) .base-button__native:hover:not(:disabled){filter:brightness(.95)}:host(.base-button--danger) .base-button__native:focus-visible{outline:none;box-shadow:0 0 0 3px var(--app-color-error-focus-ring, rgba(220, 38, 38, .35))}:host(.base-button--disabled:not(.base-button--readonly)) .base-button__native,.base-button__native:disabled:not([aria-readonly=true]){cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity, .65)}:host(.base-button--readonly) .base-button__native{cursor:default;opacity:1;color:var(--ui-field-readonly-button-text, #37474f);background:var(--ui-field-readonly-button-bg, #cfd8dc);border-color:var(--ui-field-readonly-button-border, #90a4ae)}:host(.base-button--readonly) .base-button__native:hover:not(:disabled){filter:brightness(.97)}:host(.base-button--readonly) .base-button__native:focus-visible{box-shadow:0 0 0 3px var(--ui-field-readonly-button-focus-ring, rgba(96, 125, 139, .35))}.base-button__native--skeleton{pointer-events:none;cursor:default}:host(.base-button--primary.base-button--loading) .base-button__native--skeleton{color:transparent;background:color-mix(in srgb,var(--ui-field-float-border-focus, #2b7fd9) 82%,#ffffff);border-color:color-mix(in srgb,var(--ui-field-float-border-focus, #2b7fd9) 82%,#ffffff)}:host(.base-button--secondary.base-button--loading) .base-button__native--skeleton{background:var(--ui-field-float-bg, #f3f7fb);border-color:var(--ui-field-float-border, #b6cce5)}:host(.base-button--ghost.base-button--loading) .base-button__native--skeleton{color:transparent;background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 8%,transparent);border-color:transparent}:host(.base-button--danger.base-button--loading) .base-button__native--skeleton{color:transparent;background:color-mix(in srgb,var(--app-color-error, #b91c1c) 82%,#ffffff);border-color:color-mix(in srgb,var(--app-color-error-border, #dc2626) 88%,#ffffff)}\n"] }]
+            args: [{ selector: 'app-base-button', standalone: true, imports: [SkeletonBlockComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!loading) {\r\n<button\r\n  #nativeBtn\r\n  class=\"base-button__native\"\r\n  [attr.type]=\"type\"\r\n  [disabled]=\"disabled || readonly\"\r\n  [attr.aria-readonly]=\"readonly ? true : null\"\r\n>\r\n  <ng-content />\r\n</button>\r\n} @else {\r\n<div class=\"base-button__native base-button__native--skeleton\" role=\"status\" aria-live=\"polite\" aria-busy=\"true\"\r\n  aria-label=\"A carregar\">\r\n  <app-skeleton-block width=\"40%\" height=\"0.7rem\" radius=\"8px\" />\r\n</div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;width:fit-content;max-width:100%;box-sizing:border-box;vertical-align:middle}.base-button__native{-webkit-appearance:none;appearance:none;display:flex;width:auto;min-width:5rem;align-items:center;justify-content:center;text-align:center;gap:.5rem;min-height:2.5rem;padding:.5rem 1.25rem;margin:0;border:1px solid transparent;border-radius:var(--ui-field-float-border-radius, 14px);font:inherit;font-size:.9375rem;font-weight:600;line-height:1.25;cursor:pointer;user-select:none;-webkit-user-select:none;transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease}:host(.base-button--full-width){display:block;width:auto;min-width:0;max-width:100%;box-sizing:border-box}:host(.base-button--full-width) .base-button__native{width:100%;min-width:0}:host(.base-button--fixed-width):not(.base-button--full-width) .base-button__native{width:100%;min-width:0}:host(.base-button--align-start):not(.base-button--full-width){display:inline-block;width:fit-content;max-width:100%;margin-inline:0;vertical-align:middle}:host(.base-button--align-center):not(.base-button--full-width){display:block;width:fit-content;max-width:100%;margin-inline:auto}:host(.base-button--align-end):not(.base-button--full-width){display:block;width:fit-content;max-width:100%;margin-inline-start:auto;margin-inline-end:0}.base-button__native:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ui-field-float-focus-ring, rgba(43, 127, 217, .35))}:host(.base-button--primary) .base-button__native{color:var(--app-color-primary-contrast, #ffffff);background:var(--ui-field-float-border-focus, #2b7fd9);border-color:var(--ui-field-float-border-focus, #2b7fd9)}:host(.base-button--primary) .base-button__native:hover:not(:disabled){filter:brightness(.95)}:host(.base-button--secondary) .base-button__native{color:var(--ui-field-float-label-top-color, #4a6d8c);background:var(--ui-field-float-bg, #f3f7fb);border-color:var(--ui-field-float-border, #b6cce5)}:host(.base-button--secondary) .base-button__native:hover:not(:disabled){background:var(--app-color-button-secondary-hover-bg, #e8f0fa)}:host(.base-button--ghost) .base-button__native{color:var(--app-color-text-primary, #1a2f45);background:transparent;border-color:transparent;min-width:0;min-height:2.25rem;padding:.35rem .5rem;border-radius:8px;font-size:.95rem;font-weight:600;justify-content:flex-start;gap:.45rem}:host(.base-button--ghost) .base-button__native:hover:not(:disabled){color:var(--app-color-nav-link);background:color-mix(in srgb,var(--app-color-primary) 6%,transparent)}:host(.base-button--fixed-height) .base-button__native{box-sizing:border-box;height:100%;min-height:0}:host(.base-button--danger) .base-button__native{color:var(--app-color-error-contrast, #fff);background:var(--app-color-error, #b91c1c);border-color:var(--app-color-error-border, #dc2626)}:host(.base-button--danger) .base-button__native:hover:not(:disabled){filter:brightness(.95)}:host(.base-button--danger) .base-button__native:focus-visible{outline:none;box-shadow:0 0 0 3px var(--app-color-error-focus-ring, rgba(220, 38, 38, .35))}:host(.base-button--disabled:not(.base-button--readonly)) .base-button__native,.base-button__native:disabled:not([aria-readonly=true]){cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity, .65)}:host(.base-button--readonly) .base-button__native{cursor:default;opacity:1;color:var(--ui-field-readonly-button-text, #37474f);background:var(--ui-field-readonly-button-bg, #cfd8dc);border-color:var(--ui-field-readonly-button-border, #90a4ae)}:host(.base-button--readonly) .base-button__native:hover:not(:disabled){filter:brightness(.97)}:host(.base-button--readonly) .base-button__native:focus-visible{box-shadow:0 0 0 3px var(--ui-field-readonly-button-focus-ring, rgba(96, 125, 139, .35))}.base-button__native--skeleton{pointer-events:none;cursor:default}:host(.base-button--primary.base-button--loading) .base-button__native--skeleton{color:transparent;background:color-mix(in srgb,var(--ui-field-float-border-focus, #2b7fd9) 82%,#ffffff);border-color:color-mix(in srgb,var(--ui-field-float-border-focus, #2b7fd9) 82%,#ffffff)}:host(.base-button--secondary.base-button--loading) .base-button__native--skeleton{background:var(--ui-field-float-bg, #f3f7fb);border-color:var(--ui-field-float-border, #b6cce5)}:host(.base-button--ghost.base-button--loading) .base-button__native--skeleton{color:transparent;background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 8%,transparent);border-color:transparent}:host(.base-button--danger.base-button--loading) .base-button__native--skeleton{color:transparent;background:color-mix(in srgb,var(--app-color-error, #b91c1c) 82%,#ffffff);border-color:color-mix(in srgb,var(--app-color-error-border, #dc2626) 88%,#ffffff)}\n"] }]
         }], propDecorators: { nativeBtn: [{
                 type: ViewChild,
                 args: ['nativeBtn', { read: ElementRef }]
@@ -361,6 +379,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 type: Input
             }], widthPx: [{
                 type: Input
+            }], heightPx: [{
+                type: Input
             }], loading: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -375,6 +395,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             }], hostWidth: [{
                 type: HostBinding,
                 args: ['style.width']
+            }], hostHeight: [{
+                type: HostBinding,
+                args: ['style.height']
             }] } });
 
 /**
@@ -383,11 +406,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  */
 class ButtonComponent extends BaseButtonComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ButtonComponent, isStandalone: true, selector: "app-button", usesInheritance: true, ngImport: i0, template: "@if (!loading) {\r\n<button\r\n  #nativeBtn\r\n  class=\"base-button__native\"\r\n  [attr.type]=\"type\"\r\n  [disabled]=\"disabled || readonly\"\r\n  [attr.aria-readonly]=\"readonly ? true : null\"\r\n>\r\n  <ng-content />\r\n</button>\r\n} @else {\r\n<div class=\"base-button__native base-button__native--skeleton\" role=\"status\" aria-live=\"polite\" aria-busy=\"true\"\r\n  aria-label=\"A carregar\">\r\n  <app-skeleton-block width=\"40%\" height=\"0.7rem\" radius=\"8px\" />\r\n</div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;width:fit-content;max-width:100%;box-sizing:border-box;vertical-align:middle}.base-button__native{-webkit-appearance:none;appearance:none;display:flex;width:auto;min-width:5rem;align-items:center;justify-content:center;text-align:center;gap:.5rem;min-height:2.5rem;padding:.5rem 1.25rem;margin:0;border:1px solid transparent;border-radius:var(--ui-field-float-border-radius, 14px);font:inherit;font-size:.9375rem;font-weight:600;line-height:1.25;cursor:pointer;user-select:none;-webkit-user-select:none;transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease}:host(.base-button--full-width){display:block;width:auto;min-width:0;max-width:100%;box-sizing:border-box}:host(.base-button--full-width) .base-button__native{width:100%;min-width:0}:host(.base-button--fixed-width):not(.base-button--full-width) .base-button__native{width:100%;min-width:0}:host(.base-button--align-start):not(.base-button--full-width){display:inline-block;width:fit-content;max-width:100%;margin-inline:0;vertical-align:middle}:host(.base-button--align-center):not(.base-button--full-width){display:block;width:fit-content;max-width:100%;margin-inline:auto}:host(.base-button--align-end):not(.base-button--full-width){display:block;width:fit-content;max-width:100%;margin-inline-start:auto;margin-inline-end:0}.base-button__native:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ui-field-float-focus-ring, rgba(43, 127, 217, .35))}:host(.base-button--primary) .base-button__native{color:var(--app-color-primary-contrast, #ffffff);background:var(--ui-field-float-border-focus, #2b7fd9);border-color:var(--ui-field-float-border-focus, #2b7fd9)}:host(.base-button--primary) .base-button__native:hover:not(:disabled){filter:brightness(.95)}:host(.base-button--secondary) .base-button__native{color:var(--ui-field-float-label-top-color, #4a6d8c);background:var(--ui-field-float-bg, #f3f7fb);border-color:var(--ui-field-float-border, #b6cce5)}:host(.base-button--secondary) .base-button__native:hover:not(:disabled){background:var(--app-color-button-secondary-hover-bg, #e8f0fa)}:host(.base-button--ghost) .base-button__native{color:var(--app-color-text-primary, #1a2f45);background:transparent;border-color:transparent;min-width:0;min-height:2.25rem;padding:.35rem .5rem;border-radius:8px;font-size:.95rem;font-weight:600;justify-content:flex-start;gap:.45rem}:host(.base-button--ghost) .base-button__native:hover:not(:disabled){color:var(--app-color-nav-link);background:color-mix(in srgb,var(--app-color-primary) 6%,transparent)}:host(.base-button--danger) .base-button__native{color:var(--app-color-error-contrast, #fff);background:var(--app-color-error, #b91c1c);border-color:var(--app-color-error-border, #dc2626)}:host(.base-button--danger) .base-button__native:hover:not(:disabled){filter:brightness(.95)}:host(.base-button--danger) .base-button__native:focus-visible{outline:none;box-shadow:0 0 0 3px var(--app-color-error-focus-ring, rgba(220, 38, 38, .35))}:host(.base-button--disabled:not(.base-button--readonly)) .base-button__native,.base-button__native:disabled:not([aria-readonly=true]){cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity, .65)}:host(.base-button--readonly) .base-button__native{cursor:default;opacity:1;color:var(--ui-field-readonly-button-text, #37474f);background:var(--ui-field-readonly-button-bg, #cfd8dc);border-color:var(--ui-field-readonly-button-border, #90a4ae)}:host(.base-button--readonly) .base-button__native:hover:not(:disabled){filter:brightness(.97)}:host(.base-button--readonly) .base-button__native:focus-visible{box-shadow:0 0 0 3px var(--ui-field-readonly-button-focus-ring, rgba(96, 125, 139, .35))}.base-button__native--skeleton{pointer-events:none;cursor:default}:host(.base-button--primary.base-button--loading) .base-button__native--skeleton{color:transparent;background:color-mix(in srgb,var(--ui-field-float-border-focus, #2b7fd9) 82%,#ffffff);border-color:color-mix(in srgb,var(--ui-field-float-border-focus, #2b7fd9) 82%,#ffffff)}:host(.base-button--secondary.base-button--loading) .base-button__native--skeleton{background:var(--ui-field-float-bg, #f3f7fb);border-color:var(--ui-field-float-border, #b6cce5)}:host(.base-button--ghost.base-button--loading) .base-button__native--skeleton{color:transparent;background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 8%,transparent);border-color:transparent}:host(.base-button--danger.base-button--loading) .base-button__native--skeleton{color:transparent;background:color-mix(in srgb,var(--app-color-error, #b91c1c) 82%,#ffffff);border-color:color-mix(in srgb,var(--app-color-error-border, #dc2626) 88%,#ffffff)}\n"], dependencies: [{ kind: "component", type: SkeletonBlockComponent, selector: "app-skeleton-block", inputs: ["width", "height", "radius", "animate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ButtonComponent, isStandalone: true, selector: "app-button", usesInheritance: true, ngImport: i0, template: "@if (!loading) {\r\n<button\r\n  #nativeBtn\r\n  class=\"base-button__native\"\r\n  [attr.type]=\"type\"\r\n  [disabled]=\"disabled || readonly\"\r\n  [attr.aria-readonly]=\"readonly ? true : null\"\r\n>\r\n  <ng-content />\r\n</button>\r\n} @else {\r\n<div class=\"base-button__native base-button__native--skeleton\" role=\"status\" aria-live=\"polite\" aria-busy=\"true\"\r\n  aria-label=\"A carregar\">\r\n  <app-skeleton-block width=\"40%\" height=\"0.7rem\" radius=\"8px\" />\r\n</div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;width:fit-content;max-width:100%;box-sizing:border-box;vertical-align:middle}.base-button__native{-webkit-appearance:none;appearance:none;display:flex;width:auto;min-width:5rem;align-items:center;justify-content:center;text-align:center;gap:.5rem;min-height:2.5rem;padding:.5rem 1.25rem;margin:0;border:1px solid transparent;border-radius:var(--ui-field-float-border-radius, 14px);font:inherit;font-size:.9375rem;font-weight:600;line-height:1.25;cursor:pointer;user-select:none;-webkit-user-select:none;transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease}:host(.base-button--full-width){display:block;width:auto;min-width:0;max-width:100%;box-sizing:border-box}:host(.base-button--full-width) .base-button__native{width:100%;min-width:0}:host(.base-button--fixed-width):not(.base-button--full-width) .base-button__native{width:100%;min-width:0}:host(.base-button--align-start):not(.base-button--full-width){display:inline-block;width:fit-content;max-width:100%;margin-inline:0;vertical-align:middle}:host(.base-button--align-center):not(.base-button--full-width){display:block;width:fit-content;max-width:100%;margin-inline:auto}:host(.base-button--align-end):not(.base-button--full-width){display:block;width:fit-content;max-width:100%;margin-inline-start:auto;margin-inline-end:0}.base-button__native:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ui-field-float-focus-ring, rgba(43, 127, 217, .35))}:host(.base-button--primary) .base-button__native{color:var(--app-color-primary-contrast, #ffffff);background:var(--ui-field-float-border-focus, #2b7fd9);border-color:var(--ui-field-float-border-focus, #2b7fd9)}:host(.base-button--primary) .base-button__native:hover:not(:disabled){filter:brightness(.95)}:host(.base-button--secondary) .base-button__native{color:var(--ui-field-float-label-top-color, #4a6d8c);background:var(--ui-field-float-bg, #f3f7fb);border-color:var(--ui-field-float-border, #b6cce5)}:host(.base-button--secondary) .base-button__native:hover:not(:disabled){background:var(--app-color-button-secondary-hover-bg, #e8f0fa)}:host(.base-button--ghost) .base-button__native{color:var(--app-color-text-primary, #1a2f45);background:transparent;border-color:transparent;min-width:0;min-height:2.25rem;padding:.35rem .5rem;border-radius:8px;font-size:.95rem;font-weight:600;justify-content:flex-start;gap:.45rem}:host(.base-button--ghost) .base-button__native:hover:not(:disabled){color:var(--app-color-nav-link);background:color-mix(in srgb,var(--app-color-primary) 6%,transparent)}:host(.base-button--fixed-height) .base-button__native{box-sizing:border-box;height:100%;min-height:0}:host(.base-button--danger) .base-button__native{color:var(--app-color-error-contrast, #fff);background:var(--app-color-error, #b91c1c);border-color:var(--app-color-error-border, #dc2626)}:host(.base-button--danger) .base-button__native:hover:not(:disabled){filter:brightness(.95)}:host(.base-button--danger) .base-button__native:focus-visible{outline:none;box-shadow:0 0 0 3px var(--app-color-error-focus-ring, rgba(220, 38, 38, .35))}:host(.base-button--disabled:not(.base-button--readonly)) .base-button__native,.base-button__native:disabled:not([aria-readonly=true]){cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity, .65)}:host(.base-button--readonly) .base-button__native{cursor:default;opacity:1;color:var(--ui-field-readonly-button-text, #37474f);background:var(--ui-field-readonly-button-bg, #cfd8dc);border-color:var(--ui-field-readonly-button-border, #90a4ae)}:host(.base-button--readonly) .base-button__native:hover:not(:disabled){filter:brightness(.97)}:host(.base-button--readonly) .base-button__native:focus-visible{box-shadow:0 0 0 3px var(--ui-field-readonly-button-focus-ring, rgba(96, 125, 139, .35))}.base-button__native--skeleton{pointer-events:none;cursor:default}:host(.base-button--primary.base-button--loading) .base-button__native--skeleton{color:transparent;background:color-mix(in srgb,var(--ui-field-float-border-focus, #2b7fd9) 82%,#ffffff);border-color:color-mix(in srgb,var(--ui-field-float-border-focus, #2b7fd9) 82%,#ffffff)}:host(.base-button--secondary.base-button--loading) .base-button__native--skeleton{background:var(--ui-field-float-bg, #f3f7fb);border-color:var(--ui-field-float-border, #b6cce5)}:host(.base-button--ghost.base-button--loading) .base-button__native--skeleton{color:transparent;background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 8%,transparent);border-color:transparent}:host(.base-button--danger.base-button--loading) .base-button__native--skeleton{color:transparent;background:color-mix(in srgb,var(--app-color-error, #b91c1c) 82%,#ffffff);border-color:color-mix(in srgb,var(--app-color-error-border, #dc2626) 88%,#ffffff)}\n"], dependencies: [{ kind: "component", type: SkeletonBlockComponent, selector: "app-skeleton-block", inputs: ["width", "height", "radius", "animate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-button', standalone: true, imports: [SkeletonBlockComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!loading) {\r\n<button\r\n  #nativeBtn\r\n  class=\"base-button__native\"\r\n  [attr.type]=\"type\"\r\n  [disabled]=\"disabled || readonly\"\r\n  [attr.aria-readonly]=\"readonly ? true : null\"\r\n>\r\n  <ng-content />\r\n</button>\r\n} @else {\r\n<div class=\"base-button__native base-button__native--skeleton\" role=\"status\" aria-live=\"polite\" aria-busy=\"true\"\r\n  aria-label=\"A carregar\">\r\n  <app-skeleton-block width=\"40%\" height=\"0.7rem\" radius=\"8px\" />\r\n</div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;width:fit-content;max-width:100%;box-sizing:border-box;vertical-align:middle}.base-button__native{-webkit-appearance:none;appearance:none;display:flex;width:auto;min-width:5rem;align-items:center;justify-content:center;text-align:center;gap:.5rem;min-height:2.5rem;padding:.5rem 1.25rem;margin:0;border:1px solid transparent;border-radius:var(--ui-field-float-border-radius, 14px);font:inherit;font-size:.9375rem;font-weight:600;line-height:1.25;cursor:pointer;user-select:none;-webkit-user-select:none;transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease}:host(.base-button--full-width){display:block;width:auto;min-width:0;max-width:100%;box-sizing:border-box}:host(.base-button--full-width) .base-button__native{width:100%;min-width:0}:host(.base-button--fixed-width):not(.base-button--full-width) .base-button__native{width:100%;min-width:0}:host(.base-button--align-start):not(.base-button--full-width){display:inline-block;width:fit-content;max-width:100%;margin-inline:0;vertical-align:middle}:host(.base-button--align-center):not(.base-button--full-width){display:block;width:fit-content;max-width:100%;margin-inline:auto}:host(.base-button--align-end):not(.base-button--full-width){display:block;width:fit-content;max-width:100%;margin-inline-start:auto;margin-inline-end:0}.base-button__native:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ui-field-float-focus-ring, rgba(43, 127, 217, .35))}:host(.base-button--primary) .base-button__native{color:var(--app-color-primary-contrast, #ffffff);background:var(--ui-field-float-border-focus, #2b7fd9);border-color:var(--ui-field-float-border-focus, #2b7fd9)}:host(.base-button--primary) .base-button__native:hover:not(:disabled){filter:brightness(.95)}:host(.base-button--secondary) .base-button__native{color:var(--ui-field-float-label-top-color, #4a6d8c);background:var(--ui-field-float-bg, #f3f7fb);border-color:var(--ui-field-float-border, #b6cce5)}:host(.base-button--secondary) .base-button__native:hover:not(:disabled){background:var(--app-color-button-secondary-hover-bg, #e8f0fa)}:host(.base-button--ghost) .base-button__native{color:var(--app-color-text-primary, #1a2f45);background:transparent;border-color:transparent;min-width:0;min-height:2.25rem;padding:.35rem .5rem;border-radius:8px;font-size:.95rem;font-weight:600;justify-content:flex-start;gap:.45rem}:host(.base-button--ghost) .base-button__native:hover:not(:disabled){color:var(--app-color-nav-link);background:color-mix(in srgb,var(--app-color-primary) 6%,transparent)}:host(.base-button--danger) .base-button__native{color:var(--app-color-error-contrast, #fff);background:var(--app-color-error, #b91c1c);border-color:var(--app-color-error-border, #dc2626)}:host(.base-button--danger) .base-button__native:hover:not(:disabled){filter:brightness(.95)}:host(.base-button--danger) .base-button__native:focus-visible{outline:none;box-shadow:0 0 0 3px var(--app-color-error-focus-ring, rgba(220, 38, 38, .35))}:host(.base-button--disabled:not(.base-button--readonly)) .base-button__native,.base-button__native:disabled:not([aria-readonly=true]){cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity, .65)}:host(.base-button--readonly) .base-button__native{cursor:default;opacity:1;color:var(--ui-field-readonly-button-text, #37474f);background:var(--ui-field-readonly-button-bg, #cfd8dc);border-color:var(--ui-field-readonly-button-border, #90a4ae)}:host(.base-button--readonly) .base-button__native:hover:not(:disabled){filter:brightness(.97)}:host(.base-button--readonly) .base-button__native:focus-visible{box-shadow:0 0 0 3px var(--ui-field-readonly-button-focus-ring, rgba(96, 125, 139, .35))}.base-button__native--skeleton{pointer-events:none;cursor:default}:host(.base-button--primary.base-button--loading) .base-button__native--skeleton{color:transparent;background:color-mix(in srgb,var(--ui-field-float-border-focus, #2b7fd9) 82%,#ffffff);border-color:color-mix(in srgb,var(--ui-field-float-border-focus, #2b7fd9) 82%,#ffffff)}:host(.base-button--secondary.base-button--loading) .base-button__native--skeleton{background:var(--ui-field-float-bg, #f3f7fb);border-color:var(--ui-field-float-border, #b6cce5)}:host(.base-button--ghost.base-button--loading) .base-button__native--skeleton{color:transparent;background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 8%,transparent);border-color:transparent}:host(.base-button--danger.base-button--loading) .base-button__native--skeleton{color:transparent;background:color-mix(in srgb,var(--app-color-error, #b91c1c) 82%,#ffffff);border-color:color-mix(in srgb,var(--app-color-error-border, #dc2626) 88%,#ffffff)}\n"] }]
+            args: [{ selector: 'app-button', standalone: true, imports: [SkeletonBlockComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!loading) {\r\n<button\r\n  #nativeBtn\r\n  class=\"base-button__native\"\r\n  [attr.type]=\"type\"\r\n  [disabled]=\"disabled || readonly\"\r\n  [attr.aria-readonly]=\"readonly ? true : null\"\r\n>\r\n  <ng-content />\r\n</button>\r\n} @else {\r\n<div class=\"base-button__native base-button__native--skeleton\" role=\"status\" aria-live=\"polite\" aria-busy=\"true\"\r\n  aria-label=\"A carregar\">\r\n  <app-skeleton-block width=\"40%\" height=\"0.7rem\" radius=\"8px\" />\r\n</div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;width:fit-content;max-width:100%;box-sizing:border-box;vertical-align:middle}.base-button__native{-webkit-appearance:none;appearance:none;display:flex;width:auto;min-width:5rem;align-items:center;justify-content:center;text-align:center;gap:.5rem;min-height:2.5rem;padding:.5rem 1.25rem;margin:0;border:1px solid transparent;border-radius:var(--ui-field-float-border-radius, 14px);font:inherit;font-size:.9375rem;font-weight:600;line-height:1.25;cursor:pointer;user-select:none;-webkit-user-select:none;transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease}:host(.base-button--full-width){display:block;width:auto;min-width:0;max-width:100%;box-sizing:border-box}:host(.base-button--full-width) .base-button__native{width:100%;min-width:0}:host(.base-button--fixed-width):not(.base-button--full-width) .base-button__native{width:100%;min-width:0}:host(.base-button--align-start):not(.base-button--full-width){display:inline-block;width:fit-content;max-width:100%;margin-inline:0;vertical-align:middle}:host(.base-button--align-center):not(.base-button--full-width){display:block;width:fit-content;max-width:100%;margin-inline:auto}:host(.base-button--align-end):not(.base-button--full-width){display:block;width:fit-content;max-width:100%;margin-inline-start:auto;margin-inline-end:0}.base-button__native:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ui-field-float-focus-ring, rgba(43, 127, 217, .35))}:host(.base-button--primary) .base-button__native{color:var(--app-color-primary-contrast, #ffffff);background:var(--ui-field-float-border-focus, #2b7fd9);border-color:var(--ui-field-float-border-focus, #2b7fd9)}:host(.base-button--primary) .base-button__native:hover:not(:disabled){filter:brightness(.95)}:host(.base-button--secondary) .base-button__native{color:var(--ui-field-float-label-top-color, #4a6d8c);background:var(--ui-field-float-bg, #f3f7fb);border-color:var(--ui-field-float-border, #b6cce5)}:host(.base-button--secondary) .base-button__native:hover:not(:disabled){background:var(--app-color-button-secondary-hover-bg, #e8f0fa)}:host(.base-button--ghost) .base-button__native{color:var(--app-color-text-primary, #1a2f45);background:transparent;border-color:transparent;min-width:0;min-height:2.25rem;padding:.35rem .5rem;border-radius:8px;font-size:.95rem;font-weight:600;justify-content:flex-start;gap:.45rem}:host(.base-button--ghost) .base-button__native:hover:not(:disabled){color:var(--app-color-nav-link);background:color-mix(in srgb,var(--app-color-primary) 6%,transparent)}:host(.base-button--fixed-height) .base-button__native{box-sizing:border-box;height:100%;min-height:0}:host(.base-button--danger) .base-button__native{color:var(--app-color-error-contrast, #fff);background:var(--app-color-error, #b91c1c);border-color:var(--app-color-error-border, #dc2626)}:host(.base-button--danger) .base-button__native:hover:not(:disabled){filter:brightness(.95)}:host(.base-button--danger) .base-button__native:focus-visible{outline:none;box-shadow:0 0 0 3px var(--app-color-error-focus-ring, rgba(220, 38, 38, .35))}:host(.base-button--disabled:not(.base-button--readonly)) .base-button__native,.base-button__native:disabled:not([aria-readonly=true]){cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity, .65)}:host(.base-button--readonly) .base-button__native{cursor:default;opacity:1;color:var(--ui-field-readonly-button-text, #37474f);background:var(--ui-field-readonly-button-bg, #cfd8dc);border-color:var(--ui-field-readonly-button-border, #90a4ae)}:host(.base-button--readonly) .base-button__native:hover:not(:disabled){filter:brightness(.97)}:host(.base-button--readonly) .base-button__native:focus-visible{box-shadow:0 0 0 3px var(--ui-field-readonly-button-focus-ring, rgba(96, 125, 139, .35))}.base-button__native--skeleton{pointer-events:none;cursor:default}:host(.base-button--primary.base-button--loading) .base-button__native--skeleton{color:transparent;background:color-mix(in srgb,var(--ui-field-float-border-focus, #2b7fd9) 82%,#ffffff);border-color:color-mix(in srgb,var(--ui-field-float-border-focus, #2b7fd9) 82%,#ffffff)}:host(.base-button--secondary.base-button--loading) .base-button__native--skeleton{background:var(--ui-field-float-bg, #f3f7fb);border-color:var(--ui-field-float-border, #b6cce5)}:host(.base-button--ghost.base-button--loading) .base-button__native--skeleton{color:transparent;background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 8%,transparent);border-color:transparent}:host(.base-button--danger.base-button--loading) .base-button__native--skeleton{color:transparent;background:color-mix(in srgb,var(--app-color-error, #b91c1c) 82%,#ffffff);border-color:color-mix(in srgb,var(--app-color-error-border, #dc2626) 88%,#ffffff)}\n"] }]
         }] });
 
 let fieldControlAutoId = 0;