@ajuarezso/sui-design-system 0.5.3 → 0.5.5

package/fesm2022/ajuarezso-sui-design-system.mjs

@@ -2168,7 +2168,7 @@ class SuiButton {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiButton, isStandalone: true, selector: "sui-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, onlyIcon: { classPropertyName: "onlyIcon", publicName: "onlyIcon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, leftIcon: { classPropertyName: "leftIcon", publicName: "leftIcon", isSignal: true, isRequired: false, transformFunction: null }, rightIcon: { classPropertyName: "rightIcon", publicName: "rightIcon", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "touchstart": "$event.currentTarget", "touchend": "$any($event.currentTarget).blur()", "click": "_onClick($event)", "keydown.enter": "_onClick($event)", "keydown.space": "_onClick($event)" }, properties: { "attr.data-sui-variant": "variant()", "attr.data-sui-color": "color()", "attr.data-sui-size": "size()", "attr.data-sui-only-icon": "onlyIcon() ? \"\" : null", "attr.data-sui-disabled": "disabled() ? \"\" : null", "attr.role": "\"button\"", "attr.tabindex": "disabled() ? \"-1\" : \"0\"", "attr.aria-disabled": "disabled() ? \"true\" : null" } }, ngImport: i0, template: "@if (leftIcon()) {\n  <sui-icon class=\"sui-button__icon\" [name]=\"leftIcon()!\" [size]=\"20\" data-slot=\"start\" />\n}\n<ng-content select=\"[data-slot=start]\"></ng-content>\n@if (!onlyIcon()) {\n  <span class=\"sui-button__label\"><ng-content></ng-content></span>\n}\n<ng-content select=\"[data-slot=end]\"></ng-content>\n@if (rightIcon()) {\n  <sui-icon class=\"sui-button__icon\" [name]=\"rightIcon()!\" [size]=\"20\" data-slot=\"end\" />\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border:1px solid transparent;cursor:pointer;white-space:nowrap;vertical-align:middle;-webkit-user-select:none;user-select:none;text-decoration:none;outline:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),transform var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host:active:not([data-sui-disabled]){transform:scale(.96)}:host{font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto}.sui-button__label{display:inline-flex;align-items:center}:host ::ng-deep [data-slot=start],:host ::ng-deep [data-slot=end]{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md)}:host([data-sui-size=\"2xsmall\"]){height:28px;padding:4px 6px;gap:6px;border-radius:999px}:host([data-sui-size=xsmall]){height:32px;padding:6px;gap:6px;border-radius:999px}:host([data-sui-size=small]){height:36px;padding:8px;gap:8px;border-radius:999px}:host([data-sui-size=medium]){height:40px;padding:10px;gap:8px;border-radius:999px}:host([data-sui-size=large]){height:48px;padding:12px 18px;gap:8px;border-radius:999px;font-size:var(--sui-type-label-md-size, 16px)}:host([data-sui-size=xlarge]){height:52px;padding:14px 20px;gap:8px;border-radius:999px;font-size:var(--sui-type-label-md-size, 16px)}:host([data-sui-only-icon]){gap:0}:host([data-sui-only-icon][data-sui-size=\"2xsmall\"]){width:28px;padding:4px}:host([data-sui-only-icon][data-sui-size=xsmall]){width:32px;padding:6px}:host([data-sui-only-icon][data-sui-size=small]){width:36px;padding:8px}:host([data-sui-only-icon][data-sui-size=medium]){width:40px;padding:10px}:host([data-sui-only-icon][data-sui-size=large]){width:48px;padding:12px}:host([data-sui-only-icon][data-sui-size=xlarge]){width:52px;padding:14px}:host([data-sui-color=primary][data-sui-variant=filled]){background:var(--sui-primary-base);border-color:transparent;color:var(--sui-static-white)}:host([data-sui-color=primary][data-sui-variant=filled]):hover{background:var(--sui-primary-dark)}:host([data-sui-color=primary][data-sui-variant=filled]):active,:host([data-sui-color=primary][data-sui-variant=filled]):focus-visible{background:var(--sui-primary-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}:host([data-sui-color=error][data-sui-variant=filled]){background:var(--sui-state-error-base);border-color:transparent;color:var(--sui-static-white)}:host([data-sui-color=error][data-sui-variant=filled]):hover{background:var(--sui-red-700)}:host([data-sui-color=error][data-sui-variant=filled]):active,:host([data-sui-color=error][data-sui-variant=filled]):focus-visible{background:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-red-alpha-10)}:host([data-sui-color=neutral][data-sui-variant=filled]){background:var(--sui-bg-strong-950);border-color:transparent;color:var(--sui-text-white-0)}:host([data-sui-color=neutral][data-sui-variant=filled]):hover{background:var(--sui-bg-surface-800)}:host([data-sui-color=neutral][data-sui-variant=filled]):active,:host([data-sui-color=neutral][data-sui-variant=filled]):focus-visible{background:var(--sui-bg-surface-800);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}:host([data-sui-variant=stroke]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-text-sub-600);box-shadow:var(--sui-regular-shadow-x-small)}:host([data-sui-variant=stroke]):hover{background:var(--sui-bg-weak-50);border-color:transparent;color:var(--sui-text-strong-950)}:host([data-sui-variant=stroke]):active,:host([data-sui-variant=stroke]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-strong-950);color:var(--sui-text-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}:host([data-sui-color=primary][data-sui-variant=stroke]){border-color:var(--sui-primary-base);color:var(--sui-primary-base);box-shadow:none}:host([data-sui-color=primary][data-sui-variant=stroke]):hover{background:var(--sui-primary-alpha-10);border-color:transparent;color:var(--sui-primary-base)}:host([data-sui-color=primary][data-sui-variant=stroke]):active,:host([data-sui-color=primary][data-sui-variant=stroke]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-primary-base);color:var(--sui-primary-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}:host([data-sui-color=error][data-sui-variant=stroke]){border-color:var(--sui-state-error-base);color:var(--sui-state-error-base);box-shadow:none}:host([data-sui-color=error][data-sui-variant=stroke]):hover{background:var(--sui-red-alpha-10);border-color:transparent;color:var(--sui-state-error-base)}:host([data-sui-color=error][data-sui-variant=stroke]):active,:host([data-sui-color=error][data-sui-variant=stroke]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-state-error-base);color:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-red-alpha-10)}:host([data-sui-color=primary][data-sui-variant=lighter]){background:var(--sui-primary-alpha-10);border-color:transparent;color:var(--sui-primary-base)}:host([data-sui-color=primary][data-sui-variant=lighter]):hover{background:var(--sui-bg-white-0);border-color:var(--sui-primary-base)}:host([data-sui-color=primary][data-sui-variant=lighter]):active,:host([data-sui-color=primary][data-sui-variant=lighter]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-primary-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}:host([data-sui-color=neutral][data-sui-variant=lighter]){background:var(--sui-bg-weak-50);border-color:transparent;color:var(--sui-text-sub-600)}:host([data-sui-color=neutral][data-sui-variant=lighter]):hover{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-text-strong-950);box-shadow:var(--sui-regular-shadow-x-small)}:host([data-sui-color=neutral][data-sui-variant=lighter]):active,:host([data-sui-color=neutral][data-sui-variant=lighter]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-strong-950);color:var(--sui-text-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}:host([data-sui-color=error][data-sui-variant=lighter]){background:var(--sui-state-error-lighter);border-color:transparent;color:var(--sui-state-error-base)}:host([data-sui-color=error][data-sui-variant=lighter]):hover{background:var(--sui-bg-white-0);border-color:var(--sui-state-error-base)}:host([data-sui-color=error][data-sui-variant=lighter]):active,:host([data-sui-color=error][data-sui-variant=lighter]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-red-alpha-10)}:host([data-sui-color=primary][data-sui-variant=ghost]){background:transparent;border-color:transparent;color:var(--sui-primary-base)}:host([data-sui-color=primary][data-sui-variant=ghost]):hover{background:var(--sui-primary-alpha-10)}:host([data-sui-color=primary][data-sui-variant=ghost]):active,:host([data-sui-color=primary][data-sui-variant=ghost]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-primary-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}:host([data-sui-color=neutral][data-sui-variant=ghost]){background:transparent;border-color:transparent;color:var(--sui-text-sub-600)}:host([data-sui-color=neutral][data-sui-variant=ghost]):hover{background:var(--sui-bg-weak-50);color:var(--sui-text-strong-950)}:host([data-sui-color=neutral][data-sui-variant=ghost]):active,:host([data-sui-color=neutral][data-sui-variant=ghost]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-strong-950);color:var(--sui-text-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}:host([data-sui-color=error][data-sui-variant=ghost]){background:transparent;border-color:transparent;color:var(--sui-state-error-base)}:host([data-sui-color=error][data-sui-variant=ghost]):hover{background:var(--sui-state-error-lighter)}:host([data-sui-color=error][data-sui-variant=ghost]):active,:host([data-sui-color=error][data-sui-variant=ghost]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-red-alpha-10)}:host([data-sui-disabled]){background:var(--sui-bg-weak-50)!important;border-color:transparent!important;color:var(--sui-text-disabled-300)!important;cursor:not-allowed;pointer-events:none;box-shadow:none!important}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiButton, isStandalone: true, selector: "sui-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, onlyIcon: { classPropertyName: "onlyIcon", publicName: "onlyIcon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, leftIcon: { classPropertyName: "leftIcon", publicName: "leftIcon", isSignal: true, isRequired: false, transformFunction: null }, rightIcon: { classPropertyName: "rightIcon", publicName: "rightIcon", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "touchstart": "$event.currentTarget", "touchend": "$any($event.currentTarget).blur()", "click": "_onClick($event)", "keydown.enter": "_onClick($event)", "keydown.space": "_onClick($event)" }, properties: { "attr.data-sui-variant": "variant()", "attr.data-sui-color": "color()", "attr.data-sui-size": "size()", "attr.data-sui-only-icon": "onlyIcon() ? \"\" : null", "attr.data-sui-disabled": "disabled() ? \"\" : null", "attr.role": "\"button\"", "attr.tabindex": "disabled() ? \"-1\" : \"0\"", "attr.aria-disabled": "disabled() ? \"true\" : null" } }, ngImport: i0, template: "@if (leftIcon()) {\n  <sui-icon class=\"sui-button__icon\" [name]=\"leftIcon()!\" [size]=\"20\" data-slot=\"start\" />\n}\n<ng-content select=\"[data-slot=start]\"></ng-content>\n@if (!onlyIcon()) {\n  <span class=\"sui-button__label\"><ng-content></ng-content></span>\n}\n<ng-content select=\"[data-slot=end]\"></ng-content>\n@if (rightIcon()) {\n  <sui-icon class=\"sui-button__icon\" [name]=\"rightIcon()!\" [size]=\"20\" data-slot=\"end\" />\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border:1px solid transparent;cursor:pointer;white-space:nowrap;vertical-align:middle;-webkit-user-select:none;user-select:none;text-decoration:none;outline:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),transform var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host:active:not([data-sui-disabled]){transform:scale(.96)}:host{font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto}.sui-button__label{display:block;text-box:trim-both cap alphabetic}:host ::ng-deep [data-slot=start],:host ::ng-deep [data-slot=end]{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md)}:host([data-sui-size=\"2xsmall\"]){height:28px;padding:4px 6px;gap:6px;border-radius:999px}:host([data-sui-size=xsmall]){height:32px;padding:6px;gap:6px;border-radius:999px}:host([data-sui-size=small]){height:36px;padding:8px;gap:8px;border-radius:999px}:host([data-sui-size=medium]){height:40px;padding:10px;gap:8px;border-radius:999px}:host([data-sui-size=large]){height:48px;padding:12px 18px;gap:8px;border-radius:999px;font-size:var(--sui-type-label-md-size, 16px);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em)}:host([data-sui-size=xlarge]){height:52px;padding:14px 20px;gap:8px;border-radius:999px;font-size:var(--sui-type-label-md-size, 16px);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em)}:host([data-sui-only-icon]){gap:0}:host([data-sui-only-icon][data-sui-size=\"2xsmall\"]){width:28px;padding:4px}:host([data-sui-only-icon][data-sui-size=xsmall]){width:32px;padding:6px}:host([data-sui-only-icon][data-sui-size=small]){width:36px;padding:8px}:host([data-sui-only-icon][data-sui-size=medium]){width:40px;padding:10px}:host([data-sui-only-icon][data-sui-size=large]){width:48px;padding:12px}:host([data-sui-only-icon][data-sui-size=xlarge]){width:52px;padding:14px}:host([data-sui-color=primary][data-sui-variant=filled]){background:var(--sui-primary-base);border-color:transparent;color:var(--sui-static-white)}:host([data-sui-color=primary][data-sui-variant=filled]):hover{background:var(--sui-primary-dark)}:host([data-sui-color=primary][data-sui-variant=filled]):active,:host([data-sui-color=primary][data-sui-variant=filled]):focus-visible{background:var(--sui-primary-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}:host([data-sui-color=error][data-sui-variant=filled]){background:var(--sui-state-error-base);border-color:transparent;color:var(--sui-static-white)}:host([data-sui-color=error][data-sui-variant=filled]):hover{background:var(--sui-red-700)}:host([data-sui-color=error][data-sui-variant=filled]):active,:host([data-sui-color=error][data-sui-variant=filled]):focus-visible{background:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-red-alpha-10)}:host([data-sui-color=neutral][data-sui-variant=filled]){background:var(--sui-bg-strong-950);border-color:transparent;color:var(--sui-text-white-0)}:host([data-sui-color=neutral][data-sui-variant=filled]):hover{background:var(--sui-bg-surface-800)}:host([data-sui-color=neutral][data-sui-variant=filled]):active,:host([data-sui-color=neutral][data-sui-variant=filled]):focus-visible{background:var(--sui-bg-surface-800);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}:host([data-sui-variant=stroke]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-text-sub-600);box-shadow:var(--sui-regular-shadow-x-small)}:host([data-sui-variant=stroke]):hover{background:var(--sui-bg-weak-50);border-color:transparent;color:var(--sui-text-strong-950)}:host([data-sui-variant=stroke]):active,:host([data-sui-variant=stroke]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-strong-950);color:var(--sui-text-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}:host([data-sui-color=primary][data-sui-variant=stroke]){border-color:var(--sui-primary-base);color:var(--sui-primary-base);box-shadow:none}:host([data-sui-color=primary][data-sui-variant=stroke]):hover{background:var(--sui-primary-alpha-10);border-color:transparent;color:var(--sui-primary-base)}:host([data-sui-color=primary][data-sui-variant=stroke]):active,:host([data-sui-color=primary][data-sui-variant=stroke]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-primary-base);color:var(--sui-primary-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}:host([data-sui-color=error][data-sui-variant=stroke]){border-color:var(--sui-state-error-base);color:var(--sui-state-error-base);box-shadow:none}:host([data-sui-color=error][data-sui-variant=stroke]):hover{background:var(--sui-red-alpha-10);border-color:transparent;color:var(--sui-state-error-base)}:host([data-sui-color=error][data-sui-variant=stroke]):active,:host([data-sui-color=error][data-sui-variant=stroke]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-state-error-base);color:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-red-alpha-10)}:host([data-sui-color=primary][data-sui-variant=lighter]){background:var(--sui-primary-alpha-10);border-color:transparent;color:var(--sui-primary-base)}:host([data-sui-color=primary][data-sui-variant=lighter]):hover{background:var(--sui-bg-white-0);border-color:var(--sui-primary-base)}:host([data-sui-color=primary][data-sui-variant=lighter]):active,:host([data-sui-color=primary][data-sui-variant=lighter]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-primary-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}:host([data-sui-color=neutral][data-sui-variant=lighter]){background:var(--sui-bg-weak-50);border-color:transparent;color:var(--sui-text-sub-600)}:host([data-sui-color=neutral][data-sui-variant=lighter]):hover{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-text-strong-950);box-shadow:var(--sui-regular-shadow-x-small)}:host([data-sui-color=neutral][data-sui-variant=lighter]):active,:host([data-sui-color=neutral][data-sui-variant=lighter]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-strong-950);color:var(--sui-text-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}:host([data-sui-color=error][data-sui-variant=lighter]){background:var(--sui-state-error-lighter);border-color:transparent;color:var(--sui-state-error-base)}:host([data-sui-color=error][data-sui-variant=lighter]):hover{background:var(--sui-bg-white-0);border-color:var(--sui-state-error-base)}:host([data-sui-color=error][data-sui-variant=lighter]):active,:host([data-sui-color=error][data-sui-variant=lighter]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-red-alpha-10)}:host([data-sui-color=primary][data-sui-variant=ghost]){background:transparent;border-color:transparent;color:var(--sui-primary-base)}:host([data-sui-color=primary][data-sui-variant=ghost]):hover{background:var(--sui-primary-alpha-10)}:host([data-sui-color=primary][data-sui-variant=ghost]):active,:host([data-sui-color=primary][data-sui-variant=ghost]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-primary-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}:host([data-sui-color=neutral][data-sui-variant=ghost]){background:transparent;border-color:transparent;color:var(--sui-text-sub-600)}:host([data-sui-color=neutral][data-sui-variant=ghost]):hover{background:var(--sui-bg-weak-50);color:var(--sui-text-strong-950)}:host([data-sui-color=neutral][data-sui-variant=ghost]):active,:host([data-sui-color=neutral][data-sui-variant=ghost]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-strong-950);color:var(--sui-text-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}:host([data-sui-color=error][data-sui-variant=ghost]){background:transparent;border-color:transparent;color:var(--sui-state-error-base)}:host([data-sui-color=error][data-sui-variant=ghost]):hover{background:var(--sui-state-error-lighter)}:host([data-sui-color=error][data-sui-variant=ghost]):active,:host([data-sui-color=error][data-sui-variant=ghost]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-red-alpha-10)}:host([data-sui-disabled]){background:var(--sui-bg-weak-50)!important;border-color:transparent!important;color:var(--sui-text-disabled-300)!important;cursor:not-allowed;pointer-events:none;box-shadow:none!important}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiButton, decorators: [{
             type: Component,
@@ -2195,7 +2195,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         '(click)': '_onClick($event)',
                         '(keydown.enter)': '_onClick($event)',
                         '(keydown.space)': '_onClick($event)',
-                    }, template: "@if (leftIcon()) {\n  <sui-icon class=\"sui-button__icon\" [name]=\"leftIcon()!\" [size]=\"20\" data-slot=\"start\" />\n}\n<ng-content select=\"[data-slot=start]\"></ng-content>\n@if (!onlyIcon()) {\n  <span class=\"sui-button__label\"><ng-content></ng-content></span>\n}\n<ng-content select=\"[data-slot=end]\"></ng-content>\n@if (rightIcon()) {\n  <sui-icon class=\"sui-button__icon\" [name]=\"rightIcon()!\" [size]=\"20\" data-slot=\"end\" />\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border:1px solid transparent;cursor:pointer;white-space:nowrap;vertical-align:middle;-webkit-user-select:none;user-select:none;text-decoration:none;outline:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),transform var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host:active:not([data-sui-disabled]){transform:scale(.96)}:host{font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto}.sui-button__label{display:inline-flex;align-items:center}:host ::ng-deep [data-slot=start],:host ::ng-deep [data-slot=end]{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md)}:host([data-sui-size=\"2xsmall\"]){height:28px;padding:4px 6px;gap:6px;border-radius:999px}:host([data-sui-size=xsmall]){height:32px;padding:6px;gap:6px;border-radius:999px}:host([data-sui-size=small]){height:36px;padding:8px;gap:8px;border-radius:999px}:host([data-sui-size=medium]){height:40px;padding:10px;gap:8px;border-radius:999px}:host([data-sui-size=large]){height:48px;padding:12px 18px;gap:8px;border-radius:999px;font-size:var(--sui-type-label-md-size, 16px)}:host([data-sui-size=xlarge]){height:52px;padding:14px 20px;gap:8px;border-radius:999px;font-size:var(--sui-type-label-md-size, 16px)}:host([data-sui-only-icon]){gap:0}:host([data-sui-only-icon][data-sui-size=\"2xsmall\"]){width:28px;padding:4px}:host([data-sui-only-icon][data-sui-size=xsmall]){width:32px;padding:6px}:host([data-sui-only-icon][data-sui-size=small]){width:36px;padding:8px}:host([data-sui-only-icon][data-sui-size=medium]){width:40px;padding:10px}:host([data-sui-only-icon][data-sui-size=large]){width:48px;padding:12px}:host([data-sui-only-icon][data-sui-size=xlarge]){width:52px;padding:14px}:host([data-sui-color=primary][data-sui-variant=filled]){background:var(--sui-primary-base);border-color:transparent;color:var(--sui-static-white)}:host([data-sui-color=primary][data-sui-variant=filled]):hover{background:var(--sui-primary-dark)}:host([data-sui-color=primary][data-sui-variant=filled]):active,:host([data-sui-color=primary][data-sui-variant=filled]):focus-visible{background:var(--sui-primary-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}:host([data-sui-color=error][data-sui-variant=filled]){background:var(--sui-state-error-base);border-color:transparent;color:var(--sui-static-white)}:host([data-sui-color=error][data-sui-variant=filled]):hover{background:var(--sui-red-700)}:host([data-sui-color=error][data-sui-variant=filled]):active,:host([data-sui-color=error][data-sui-variant=filled]):focus-visible{background:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-red-alpha-10)}:host([data-sui-color=neutral][data-sui-variant=filled]){background:var(--sui-bg-strong-950);border-color:transparent;color:var(--sui-text-white-0)}:host([data-sui-color=neutral][data-sui-variant=filled]):hover{background:var(--sui-bg-surface-800)}:host([data-sui-color=neutral][data-sui-variant=filled]):active,:host([data-sui-color=neutral][data-sui-variant=filled]):focus-visible{background:var(--sui-bg-surface-800);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}:host([data-sui-variant=stroke]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-text-sub-600);box-shadow:var(--sui-regular-shadow-x-small)}:host([data-sui-variant=stroke]):hover{background:var(--sui-bg-weak-50);border-color:transparent;color:var(--sui-text-strong-950)}:host([data-sui-variant=stroke]):active,:host([data-sui-variant=stroke]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-strong-950);color:var(--sui-text-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}:host([data-sui-color=primary][data-sui-variant=stroke]){border-color:var(--sui-primary-base);color:var(--sui-primary-base);box-shadow:none}:host([data-sui-color=primary][data-sui-variant=stroke]):hover{background:var(--sui-primary-alpha-10);border-color:transparent;color:var(--sui-primary-base)}:host([data-sui-color=primary][data-sui-variant=stroke]):active,:host([data-sui-color=primary][data-sui-variant=stroke]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-primary-base);color:var(--sui-primary-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}:host([data-sui-color=error][data-sui-variant=stroke]){border-color:var(--sui-state-error-base);color:var(--sui-state-error-base);box-shadow:none}:host([data-sui-color=error][data-sui-variant=stroke]):hover{background:var(--sui-red-alpha-10);border-color:transparent;color:var(--sui-state-error-base)}:host([data-sui-color=error][data-sui-variant=stroke]):active,:host([data-sui-color=error][data-sui-variant=stroke]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-state-error-base);color:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-red-alpha-10)}:host([data-sui-color=primary][data-sui-variant=lighter]){background:var(--sui-primary-alpha-10);border-color:transparent;color:var(--sui-primary-base)}:host([data-sui-color=primary][data-sui-variant=lighter]):hover{background:var(--sui-bg-white-0);border-color:var(--sui-primary-base)}:host([data-sui-color=primary][data-sui-variant=lighter]):active,:host([data-sui-color=primary][data-sui-variant=lighter]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-primary-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}:host([data-sui-color=neutral][data-sui-variant=lighter]){background:var(--sui-bg-weak-50);border-color:transparent;color:var(--sui-text-sub-600)}:host([data-sui-color=neutral][data-sui-variant=lighter]):hover{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-text-strong-950);box-shadow:var(--sui-regular-shadow-x-small)}:host([data-sui-color=neutral][data-sui-variant=lighter]):active,:host([data-sui-color=neutral][data-sui-variant=lighter]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-strong-950);color:var(--sui-text-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}:host([data-sui-color=error][data-sui-variant=lighter]){background:var(--sui-state-error-lighter);border-color:transparent;color:var(--sui-state-error-base)}:host([data-sui-color=error][data-sui-variant=lighter]):hover{background:var(--sui-bg-white-0);border-color:var(--sui-state-error-base)}:host([data-sui-color=error][data-sui-variant=lighter]):active,:host([data-sui-color=error][data-sui-variant=lighter]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-red-alpha-10)}:host([data-sui-color=primary][data-sui-variant=ghost]){background:transparent;border-color:transparent;color:var(--sui-primary-base)}:host([data-sui-color=primary][data-sui-variant=ghost]):hover{background:var(--sui-primary-alpha-10)}:host([data-sui-color=primary][data-sui-variant=ghost]):active,:host([data-sui-color=primary][data-sui-variant=ghost]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-primary-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}:host([data-sui-color=neutral][data-sui-variant=ghost]){background:transparent;border-color:transparent;color:var(--sui-text-sub-600)}:host([data-sui-color=neutral][data-sui-variant=ghost]):hover{background:var(--sui-bg-weak-50);color:var(--sui-text-strong-950)}:host([data-sui-color=neutral][data-sui-variant=ghost]):active,:host([data-sui-color=neutral][data-sui-variant=ghost]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-strong-950);color:var(--sui-text-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}:host([data-sui-color=error][data-sui-variant=ghost]){background:transparent;border-color:transparent;color:var(--sui-state-error-base)}:host([data-sui-color=error][data-sui-variant=ghost]):hover{background:var(--sui-state-error-lighter)}:host([data-sui-color=error][data-sui-variant=ghost]):active,:host([data-sui-color=error][data-sui-variant=ghost]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-red-alpha-10)}:host([data-sui-disabled]){background:var(--sui-bg-weak-50)!important;border-color:transparent!important;color:var(--sui-text-disabled-300)!important;cursor:not-allowed;pointer-events:none;box-shadow:none!important}\n"] }]
+                    }, template: "@if (leftIcon()) {\n  <sui-icon class=\"sui-button__icon\" [name]=\"leftIcon()!\" [size]=\"20\" data-slot=\"start\" />\n}\n<ng-content select=\"[data-slot=start]\"></ng-content>\n@if (!onlyIcon()) {\n  <span class=\"sui-button__label\"><ng-content></ng-content></span>\n}\n<ng-content select=\"[data-slot=end]\"></ng-content>\n@if (rightIcon()) {\n  <sui-icon class=\"sui-button__icon\" [name]=\"rightIcon()!\" [size]=\"20\" data-slot=\"end\" />\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border:1px solid transparent;cursor:pointer;white-space:nowrap;vertical-align:middle;-webkit-user-select:none;user-select:none;text-decoration:none;outline:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),transform var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host:active:not([data-sui-disabled]){transform:scale(.96)}:host{font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto}.sui-button__label{display:block;text-box:trim-both cap alphabetic}:host ::ng-deep [data-slot=start],:host ::ng-deep [data-slot=end]{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md)}:host([data-sui-size=\"2xsmall\"]){height:28px;padding:4px 6px;gap:6px;border-radius:999px}:host([data-sui-size=xsmall]){height:32px;padding:6px;gap:6px;border-radius:999px}:host([data-sui-size=small]){height:36px;padding:8px;gap:8px;border-radius:999px}:host([data-sui-size=medium]){height:40px;padding:10px;gap:8px;border-radius:999px}:host([data-sui-size=large]){height:48px;padding:12px 18px;gap:8px;border-radius:999px;font-size:var(--sui-type-label-md-size, 16px);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em)}:host([data-sui-size=xlarge]){height:52px;padding:14px 20px;gap:8px;border-radius:999px;font-size:var(--sui-type-label-md-size, 16px);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em)}:host([data-sui-only-icon]){gap:0}:host([data-sui-only-icon][data-sui-size=\"2xsmall\"]){width:28px;padding:4px}:host([data-sui-only-icon][data-sui-size=xsmall]){width:32px;padding:6px}:host([data-sui-only-icon][data-sui-size=small]){width:36px;padding:8px}:host([data-sui-only-icon][data-sui-size=medium]){width:40px;padding:10px}:host([data-sui-only-icon][data-sui-size=large]){width:48px;padding:12px}:host([data-sui-only-icon][data-sui-size=xlarge]){width:52px;padding:14px}:host([data-sui-color=primary][data-sui-variant=filled]){background:var(--sui-primary-base);border-color:transparent;color:var(--sui-static-white)}:host([data-sui-color=primary][data-sui-variant=filled]):hover{background:var(--sui-primary-dark)}:host([data-sui-color=primary][data-sui-variant=filled]):active,:host([data-sui-color=primary][data-sui-variant=filled]):focus-visible{background:var(--sui-primary-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}:host([data-sui-color=error][data-sui-variant=filled]){background:var(--sui-state-error-base);border-color:transparent;color:var(--sui-static-white)}:host([data-sui-color=error][data-sui-variant=filled]):hover{background:var(--sui-red-700)}:host([data-sui-color=error][data-sui-variant=filled]):active,:host([data-sui-color=error][data-sui-variant=filled]):focus-visible{background:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-red-alpha-10)}:host([data-sui-color=neutral][data-sui-variant=filled]){background:var(--sui-bg-strong-950);border-color:transparent;color:var(--sui-text-white-0)}:host([data-sui-color=neutral][data-sui-variant=filled]):hover{background:var(--sui-bg-surface-800)}:host([data-sui-color=neutral][data-sui-variant=filled]):active,:host([data-sui-color=neutral][data-sui-variant=filled]):focus-visible{background:var(--sui-bg-surface-800);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}:host([data-sui-variant=stroke]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-text-sub-600);box-shadow:var(--sui-regular-shadow-x-small)}:host([data-sui-variant=stroke]):hover{background:var(--sui-bg-weak-50);border-color:transparent;color:var(--sui-text-strong-950)}:host([data-sui-variant=stroke]):active,:host([data-sui-variant=stroke]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-strong-950);color:var(--sui-text-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}:host([data-sui-color=primary][data-sui-variant=stroke]){border-color:var(--sui-primary-base);color:var(--sui-primary-base);box-shadow:none}:host([data-sui-color=primary][data-sui-variant=stroke]):hover{background:var(--sui-primary-alpha-10);border-color:transparent;color:var(--sui-primary-base)}:host([data-sui-color=primary][data-sui-variant=stroke]):active,:host([data-sui-color=primary][data-sui-variant=stroke]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-primary-base);color:var(--sui-primary-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}:host([data-sui-color=error][data-sui-variant=stroke]){border-color:var(--sui-state-error-base);color:var(--sui-state-error-base);box-shadow:none}:host([data-sui-color=error][data-sui-variant=stroke]):hover{background:var(--sui-red-alpha-10);border-color:transparent;color:var(--sui-state-error-base)}:host([data-sui-color=error][data-sui-variant=stroke]):active,:host([data-sui-color=error][data-sui-variant=stroke]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-state-error-base);color:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-red-alpha-10)}:host([data-sui-color=primary][data-sui-variant=lighter]){background:var(--sui-primary-alpha-10);border-color:transparent;color:var(--sui-primary-base)}:host([data-sui-color=primary][data-sui-variant=lighter]):hover{background:var(--sui-bg-white-0);border-color:var(--sui-primary-base)}:host([data-sui-color=primary][data-sui-variant=lighter]):active,:host([data-sui-color=primary][data-sui-variant=lighter]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-primary-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}:host([data-sui-color=neutral][data-sui-variant=lighter]){background:var(--sui-bg-weak-50);border-color:transparent;color:var(--sui-text-sub-600)}:host([data-sui-color=neutral][data-sui-variant=lighter]):hover{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-text-strong-950);box-shadow:var(--sui-regular-shadow-x-small)}:host([data-sui-color=neutral][data-sui-variant=lighter]):active,:host([data-sui-color=neutral][data-sui-variant=lighter]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-strong-950);color:var(--sui-text-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}:host([data-sui-color=error][data-sui-variant=lighter]){background:var(--sui-state-error-lighter);border-color:transparent;color:var(--sui-state-error-base)}:host([data-sui-color=error][data-sui-variant=lighter]):hover{background:var(--sui-bg-white-0);border-color:var(--sui-state-error-base)}:host([data-sui-color=error][data-sui-variant=lighter]):active,:host([data-sui-color=error][data-sui-variant=lighter]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-red-alpha-10)}:host([data-sui-color=primary][data-sui-variant=ghost]){background:transparent;border-color:transparent;color:var(--sui-primary-base)}:host([data-sui-color=primary][data-sui-variant=ghost]):hover{background:var(--sui-primary-alpha-10)}:host([data-sui-color=primary][data-sui-variant=ghost]):active,:host([data-sui-color=primary][data-sui-variant=ghost]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-primary-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}:host([data-sui-color=neutral][data-sui-variant=ghost]){background:transparent;border-color:transparent;color:var(--sui-text-sub-600)}:host([data-sui-color=neutral][data-sui-variant=ghost]):hover{background:var(--sui-bg-weak-50);color:var(--sui-text-strong-950)}:host([data-sui-color=neutral][data-sui-variant=ghost]):active,:host([data-sui-color=neutral][data-sui-variant=ghost]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-strong-950);color:var(--sui-text-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}:host([data-sui-color=error][data-sui-variant=ghost]){background:transparent;border-color:transparent;color:var(--sui-state-error-base)}:host([data-sui-color=error][data-sui-variant=ghost]):hover{background:var(--sui-state-error-lighter)}:host([data-sui-color=error][data-sui-variant=ghost]):active,:host([data-sui-color=error][data-sui-variant=ghost]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-red-alpha-10)}:host([data-sui-disabled]){background:var(--sui-bg-weak-50)!important;border-color:transparent!important;color:var(--sui-text-disabled-300)!important;cursor:not-allowed;pointer-events:none;box-shadow:none!important}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], onlyIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "onlyIcon", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], leftIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "leftIcon", required: false }] }], rightIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightIcon", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }] } });
 
 /**