@ajuarezso/sui-design-system 0.1.0 → 0.2.0

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

@@ -2089,7 +2089,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  *
  * Color mappings (semantic → project token):
  *  - primary → brand accent (orange: --sui-primary-* = #fa7319). NOTA: el Figma
- *    SUI base resuelve primary a #335cff (azul), pero este proyecto lo
+ *    base resuelve primary a #335cff (azul), pero este proyecto lo
  *    sobreescribe a naranja en sui-tokens.scss — decisión de marca (ver CLAUDE.md).
  *  - neutral → faded        (gray:  --sui-state-faded-* / bg-strong-950)
  *  - error   → error        (red:   --sui-state-error-*)
@@ -2167,7 +2167,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:var(--sui-radius-8, 8px)}:host([data-sui-size=xsmall]){height:32px;padding:6px;gap:6px;border-radius:var(--sui-radius-8, 8px)}:host([data-sui-size=small]){height:36px;padding:8px;gap:8px;border-radius:var(--sui-radius-8, 8px)}:host([data-sui-size=medium]){height:40px;padding:10px;gap:8px;border-radius:var(--sui-radius-10, 10px)}: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-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-static-white)}: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: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:var(--sui-radius-8, 8px)}:host([data-sui-size=xsmall]){height:32px;padding:6px;gap:6px;border-radius:var(--sui-radius-8, 8px)}:host([data-sui-size=small]){height:36px;padding:8px;gap:8px;border-radius:var(--sui-radius-8, 8px)}:host([data-sui-size=medium]){height:40px;padding:10px;gap:8px;border-radius:var(--sui-radius-10, 10px)}: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-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,
@@ -2194,7 +2194,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:var(--sui-radius-8, 8px)}:host([data-sui-size=xsmall]){height:32px;padding:6px;gap:6px;border-radius:var(--sui-radius-8, 8px)}:host([data-sui-size=small]){height:36px;padding:8px;gap:8px;border-radius:var(--sui-radius-8, 8px)}:host([data-sui-size=medium]){height:40px;padding:10px;gap:8px;border-radius:var(--sui-radius-10, 10px)}: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-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-static-white)}: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: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:var(--sui-radius-8, 8px)}:host([data-sui-size=xsmall]){height:32px;padding:6px;gap:6px;border-radius:var(--sui-radius-8, 8px)}:host([data-sui-size=small]){height:36px;padding:8px;gap:8px;border-radius:var(--sui-radius-8, 8px)}:host([data-sui-size=medium]){height:40px;padding:10px;gap:8px;border-radius:var(--sui-radius-10, 10px)}: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-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 }] }] } });
 
 /**
@@ -11103,14 +11103,14 @@ class SuiNotification {
         this.moreClicked.emit(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiNotification, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiNotification, isStandalone: true, selector: "sui-notification", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, variantStyle: { classPropertyName: "variantStyle", publicName: "variantStyle", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, timestamp: { classPropertyName: "timestamp", publicName: "timestamp", isSignal: true, isRequired: false, transformFunction: null }, avatarSrc: { classPropertyName: "avatarSrc", publicName: "avatarSrc", isSignal: true, isRequired: false, transformFunction: null }, avatarInitials: { classPropertyName: "avatarInitials", publicName: "avatarInitials", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, unread: { classPropertyName: "unread", publicName: "unread", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, showMore: { classPropertyName: "showMore", publicName: "showMore", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed", moreClicked: "moreClicked" }, host: { properties: { "attr.title": "null" } }, ngImport: i0, template: "<div\n  class=\"sui-notification\"\n  [class.sui-notification--hoverable]=\"showMore()\"\n  [class.sui-notification--active]=\"active()\"\n  [class.sui-notification--has-avatar]=\"hasAvatar()\"\n  [attr.data-sui-variant]=\"variant()\"\n  [attr.data-sui-style]=\"variantStyle()\"\n  [attr.data-sui-type]=\"type()\"\n  [attr.role]=\"role()\"\n  [attr.aria-live]=\"ariaLive()\"\n>\n  <!-- Leading: avatar OR status icon -->\n  @if (hasAvatar()) {\n    <div class=\"sui-notification__avatar\" aria-hidden=\"true\">\n      @if (avatarSrc()) {\n        <img [src]=\"avatarSrc()\" alt=\"\" />\n      } @else {\n        <span class=\"sui-notification__avatar-initials\">{{ avatarInitials() }}</span>\n      }\n    </div>\n  } @else if (showLeadingIcon()) {\n    <div class=\"sui-notification__icon\" aria-hidden=\"true\">\n      <sui-icon [name]=\"iconName()\" [size]=\"20\" />\n    </div>\n  }\n\n  <div class=\"sui-notification__content\">\n    <!-- Header: title + unread dot + timestamp -->\n    <div class=\"sui-notification__header\">\n      @if (title()) {\n        <p class=\"sui-notification__title\">{{ title() }}</p>\n      }\n      @if (unread()) {\n        <span class=\"sui-notification__dot\" aria-label=\"No le\u00EDdo\"></span>\n      }\n      @if (timestamp() && type() === 'basic') {\n        <span class=\"sui-notification__time\">{{ timestamp() }}</span>\n      }\n    </div>\n\n    <!-- Compound description: timestamp \u2219 company-logo \u2219 text.\n         For type=basic the timestamp lives in the header (not here), so the\n         description block must only render on real content \u2014 otherwise an\n         empty <p> occupies a phantom 4px gap below the title. -->\n    @if (description() || (timestamp() && type() !== 'basic') || type() !== 'basic') {\n      <p class=\"sui-notification__description\">\n        @if (timestamp() && type() !== 'basic') {\n          <span class=\"sui-notification__meta-time\">{{ timestamp() }}</span>\n          <span class=\"sui-notification__sep\" aria-hidden=\"true\">\u2219</span>\n        }\n        <span class=\"sui-notification__company-logo\">\n          <ng-content select=\"[slot=company-logo]\" />\n        </span>\n        @if (description()) {\n          <span class=\"sui-notification__desc-text\">{{ description() }}</span>\n        }\n      </p>\n    }\n\n    <!-- Type=file: attachment card -->\n    @if (type() === 'file') {\n      <div class=\"sui-notification__file\">\n        <ng-content select=\"[slot=file]\" />\n      </div>\n    }\n\n    <!-- Type=message: response bubble -->\n    @if (type() === 'message') {\n      <div class=\"sui-notification__bubble\">\n        <ng-content select=\"[slot=message]\" />\n      </div>\n    }\n\n    <!-- Free custom content -->\n    <ng-content />\n\n    <!-- Actions slot (also hosts type=button Deny/Approve pair) -->\n    <div class=\"sui-notification__actions\">\n      <ng-content select=\"[slot=actions]\" />\n    </div>\n  </div>\n\n  <!-- Hover affordance: more-2-line (notification item) = COMPONENTE\n       sui-compact-button (variantStyle ghost: transparent + hover bg-weak-50,\n       radius-6, icon 20 = size large), NO un <button> maqueta. El posicionamiento\n       absoluto y el reveal on-hover (opacity 0\u21921) los aporta `.sui-notification__more`. -->\n  @if (showMore()) {\n    <sui-compact-button\n      class=\"sui-notification__more\"\n      icon=\"more-2-line\"\n      variantStyle=\"ghost\"\n      size=\"large\"\n      ariaLabel=\"M\u00E1s opciones\"\n      (clicked)=\"onMore($event)\"\n    />\n  }\n\n  @if (dismissible()) {\n    <!-- Cierre = COMPONENTE sui-compact-button (variantStyle modifiable \u2192 el icono\n         hereda el currentColor del per-style `.sui-notification__close`), NO un\n         <button> maqueta. icon 16 = size medium (patr\u00F3n canon sui-alert). -->\n    <sui-compact-button\n      class=\"sui-notification__close\"\n      icon=\"close-line\"\n      variantStyle=\"modifiable\"\n      size=\"medium\"\n      ariaLabel=\"Cerrar\"\n      (clicked)=\"onDismiss()\"\n    />\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.sui-notification{position:relative;display:flex;align-items:flex-start;gap:12px;padding:14px;border-radius:var(--sui-radius-12);overflow:hidden;border:1px solid transparent;box-sizing:border-box}.sui-notification.sui-notification--has-avatar{padding:12px;gap:15px}.sui-notification[data-sui-style=filled]{border:none;box-shadow:var(--sui-custom-shadow-small)}.sui-notification[data-sui-style=filled] .sui-notification__title,.sui-notification[data-sui-style=filled] .sui-notification__description,.sui-notification[data-sui-style=filled] .sui-notification__icon{color:var(--sui-static-white)}.sui-notification[data-sui-style=filled] .sui-notification__time,.sui-notification[data-sui-style=filled] .sui-notification__close{color:var(--sui-static-white);opacity:.72}.sui-notification[data-sui-style=filled] .sui-notification__dot{background:var(--sui-static-white)}.sui-notification[data-sui-style=filled][data-sui-variant=info]{background:var(--sui-state-information-base)}.sui-notification[data-sui-style=filled][data-sui-variant=success]{background:var(--sui-state-success-base)}.sui-notification[data-sui-style=filled][data-sui-variant=warning]{background:var(--sui-state-warning-base)}.sui-notification[data-sui-style=filled][data-sui-variant=error]{background:var(--sui-state-error-base)}.sui-notification[data-sui-style=filled][data-sui-variant=feature]{background:var(--sui-state-feature-base)}.sui-notification[data-sui-style=filled][data-sui-variant=default]{background:var(--sui-bg-strong-950)}.sui-notification[data-sui-style=light]{border:none}.sui-notification[data-sui-style=light] .sui-notification__title,.sui-notification[data-sui-style=light] .sui-notification__description{color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=light] .sui-notification__close{opacity:.4;color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=light][data-sui-variant=info]{background:var(--sui-state-information-light)}.sui-notification[data-sui-style=light][data-sui-variant=info] .sui-notification__icon{color:var(--sui-state-information-base)}.sui-notification[data-sui-style=light][data-sui-variant=success]{background:var(--sui-state-success-light)}.sui-notification[data-sui-style=light][data-sui-variant=success] .sui-notification__icon{color:var(--sui-state-success-base)}.sui-notification[data-sui-style=light][data-sui-variant=warning]{background:var(--sui-state-warning-light)}.sui-notification[data-sui-style=light][data-sui-variant=warning] .sui-notification__icon{color:var(--sui-state-warning-base)}.sui-notification[data-sui-style=light][data-sui-variant=error]{background:var(--sui-state-error-light)}.sui-notification[data-sui-style=light][data-sui-variant=error] .sui-notification__icon{color:var(--sui-state-error-base)}.sui-notification[data-sui-style=light][data-sui-variant=feature]{background:var(--sui-state-feature-light)}.sui-notification[data-sui-style=light][data-sui-variant=feature] .sui-notification__icon{color:var(--sui-state-feature-base)}.sui-notification[data-sui-style=light][data-sui-variant=default]{background:var(--sui-bg-weak-50)}.sui-notification[data-sui-style=lighter] .sui-notification__title{color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=lighter] .sui-notification__description{color:var(--sui-text-strong-950);opacity:.72}.sui-notification[data-sui-style=lighter] .sui-notification__close{opacity:.4;color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=lighter][data-sui-variant=info]{background:var(--sui-state-information-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=info] .sui-notification__icon{color:var(--sui-state-information-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=success]{background:var(--sui-state-success-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=success] .sui-notification__icon{color:var(--sui-state-success-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=warning]{background:var(--sui-state-warning-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=warning] .sui-notification__icon{color:var(--sui-state-warning-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=error]{background:var(--sui-state-error-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=error] .sui-notification__icon{color:var(--sui-state-error-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=feature]{background:var(--sui-state-feature-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=feature] .sui-notification__icon{color:var(--sui-state-feature-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=default]{background:var(--sui-bg-weak-50);border-color:var(--sui-stroke-soft-200)}.sui-notification:not([data-sui-style]),.sui-notification[data-sui-style=stroke]{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);box-shadow:var(--sui-custom-shadow-small)}.sui-notification:not([data-sui-style]) .sui-notification__title,.sui-notification[data-sui-style=stroke] .sui-notification__title{color:var(--sui-text-strong-950)}.sui-notification:not([data-sui-style]) .sui-notification__description,.sui-notification[data-sui-style=stroke] .sui-notification__description{color:var(--sui-text-sub-600)}.sui-notification:not([data-sui-style]) .sui-notification__close,.sui-notification[data-sui-style=stroke] .sui-notification__close{opacity:.4;color:var(--sui-text-strong-950)}.sui-notification:not([data-sui-style])[data-sui-variant=info] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=info] .sui-notification__icon{color:var(--sui-state-information-base)}.sui-notification:not([data-sui-style])[data-sui-variant=success] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=success] .sui-notification__icon{color:var(--sui-state-success-base)}.sui-notification:not([data-sui-style])[data-sui-variant=warning] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=warning] .sui-notification__icon{color:var(--sui-state-warning-base)}.sui-notification:not([data-sui-style])[data-sui-variant=error] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=error] .sui-notification__icon{color:var(--sui-state-error-base)}.sui-notification:not([data-sui-style])[data-sui-variant=feature] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=feature] .sui-notification__icon{color:var(--sui-state-feature-base)}.sui-notification__avatar{flex-shrink:0;width:40px;height:40px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--sui-bg-strong-950)}.sui-notification__avatar img{width:100%;height:100%;object-fit:cover;display:block}.sui-notification__avatar-initials{font-family:var(--sui-font-sans);font-size:14px;font-weight:600;line-height:1;color:var(--sui-static-white);text-transform:uppercase;letter-spacing:.02em;-webkit-user-select:none;user-select:none}.sui-notification__icon{flex-shrink:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;margin-top:2px}.sui-notification__content{display:flex;flex:1 0 0;flex-direction:column;gap:4px;min-width:0}.sui-notification__header{display:flex;align-items:center;gap:6px;min-width:0}.sui-notification__title{margin:0;flex:1 0 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;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-notification__dot{flex-shrink:0;width:8px;height:8px;border-radius:50%;background:var(--sui-primary-base)}.sui-notification__time{flex-shrink:0;margin-left:auto;font-family:var(--sui-font-sans);font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-soft-400);white-space:nowrap}.sui-notification__description{margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto}.sui-notification__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}.sui-notification__actions:empty{display:none}.sui-notification__close{flex-shrink:0;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-notification__close:hover{opacity:1!important}.sui-notification--hoverable{cursor:pointer;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-notification--hoverable .sui-notification__more{opacity:0;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-notification--hoverable:hover,.sui-notification--hoverable.sui-notification--active{background:var(--sui-bg-weak-50)}.sui-notification--hoverable:hover .sui-notification__more,.sui-notification--hoverable.sui-notification--active .sui-notification__more{opacity:1}.sui-notification__description{display:flex;align-items:center;flex-wrap:wrap;gap:4px}.sui-notification__meta-time{flex-shrink:0;color:var(--sui-text-soft-400)}.sui-notification__sep{flex-shrink:0;color:var(--sui-text-soft-400);-webkit-user-select:none;user-select:none}.sui-notification__company-logo{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.sui-notification__company-logo:empty{display:none}.sui-notification__company-logo ::ng-deep img,.sui-notification__company-logo ::ng-deep svg{width:16px;height:16px;border-radius:var(--sui-radius-full);object-fit:cover;display:block}.sui-notification__desc-text{min-width:0}.sui-notification__file{margin-top:8px;border-radius:var(--sui-radius-8);border:1px solid var(--sui-stroke-soft-200);background:var(--sui-bg-white-0);box-shadow:var(--sui-custom-shadow-x-small);overflow:hidden;box-sizing:border-box}.sui-notification__file:empty{display:none}.sui-notification__bubble{margin-top:8px;padding:8px 12px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);border-radius:4px 8px 10px;box-sizing:border-box;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-sub-600);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-notification__bubble:empty{display:none}.sui-notification__more{position:absolute;top:12px;right:12px;flex-shrink:0}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiCompactButton, selector: "sui-compact-button", inputs: ["icon", "variantStyle", "size", "fullRadius", "disabled", "href", "target", "rel", "type", "ariaLabel"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiNotification, isStandalone: true, selector: "sui-notification", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, variantStyle: { classPropertyName: "variantStyle", publicName: "variantStyle", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, timestamp: { classPropertyName: "timestamp", publicName: "timestamp", isSignal: true, isRequired: false, transformFunction: null }, avatarSrc: { classPropertyName: "avatarSrc", publicName: "avatarSrc", isSignal: true, isRequired: false, transformFunction: null }, avatarInitials: { classPropertyName: "avatarInitials", publicName: "avatarInitials", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, unread: { classPropertyName: "unread", publicName: "unread", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, showMore: { classPropertyName: "showMore", publicName: "showMore", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed", moreClicked: "moreClicked" }, host: { properties: { "attr.title": "null" } }, ngImport: i0, template: "<div\n  class=\"sui-notification\"\n  [class.sui-notification--hoverable]=\"showMore()\"\n  [class.sui-notification--active]=\"active()\"\n  [class.sui-notification--has-avatar]=\"hasAvatar()\"\n  [attr.data-sui-variant]=\"variant()\"\n  [attr.data-sui-style]=\"variantStyle()\"\n  [attr.data-sui-type]=\"type()\"\n  [attr.role]=\"role()\"\n  [attr.aria-live]=\"ariaLive()\"\n>\n  <!-- Leading: avatar OR status icon -->\n  @if (hasAvatar()) {\n    <div class=\"sui-notification__avatar\" aria-hidden=\"true\">\n      @if (avatarSrc()) {\n        <img [src]=\"avatarSrc()\" alt=\"\" />\n      } @else {\n        <span class=\"sui-notification__avatar-initials\">{{ avatarInitials() }}</span>\n      }\n    </div>\n  } @else if (showLeadingIcon()) {\n    <div class=\"sui-notification__icon\" aria-hidden=\"true\">\n      <sui-icon [name]=\"iconName()\" [size]=\"20\" />\n    </div>\n  }\n\n  <div class=\"sui-notification__content\">\n    <!-- Header: title + unread dot + timestamp -->\n    <div class=\"sui-notification__header\">\n      @if (title()) {\n        <p class=\"sui-notification__title\">{{ title() }}</p>\n      }\n      @if (unread()) {\n        <span class=\"sui-notification__dot\" aria-label=\"No le\u00EDdo\"></span>\n      }\n      @if (timestamp() && type() === 'basic') {\n        <span class=\"sui-notification__time\">{{ timestamp() }}</span>\n      }\n    </div>\n\n    <!-- Compound description: timestamp \u2219 company-logo \u2219 text.\n         For type=basic the timestamp lives in the header (not here), so the\n         description block must only render on real content \u2014 otherwise an\n         empty <p> occupies a phantom 4px gap below the title. -->\n    @if (description() || (timestamp() && type() !== 'basic') || type() !== 'basic') {\n      <p class=\"sui-notification__description\">\n        @if (timestamp() && type() !== 'basic') {\n          <span class=\"sui-notification__meta-time\">{{ timestamp() }}</span>\n          <span class=\"sui-notification__sep\" aria-hidden=\"true\">\u2219</span>\n        }\n        <span class=\"sui-notification__company-logo\">\n          <ng-content select=\"[slot=company-logo]\" />\n        </span>\n        @if (description()) {\n          <span class=\"sui-notification__desc-text\">{{ description() }}</span>\n        }\n      </p>\n    }\n\n    <!-- Type=file: attachment card -->\n    @if (type() === 'file') {\n      <div class=\"sui-notification__file\">\n        <ng-content select=\"[slot=file]\" />\n      </div>\n    }\n\n    <!-- Type=message: response bubble -->\n    @if (type() === 'message') {\n      <div class=\"sui-notification__bubble\">\n        <ng-content select=\"[slot=message]\" />\n      </div>\n    }\n\n    <!-- Free custom content -->\n    <ng-content />\n\n    <!-- Actions slot (also hosts type=button Deny/Approve pair) -->\n    <div class=\"sui-notification__actions\">\n      <ng-content select=\"[slot=actions]\" />\n    </div>\n  </div>\n\n  <!-- Hover affordance: more-2-line (notification item) = COMPONENTE\n       sui-compact-button (variantStyle ghost: transparent + hover bg-weak-50,\n       radius-6, icon 20 = size large), NO un <button> maqueta. El posicionamiento\n       absoluto y el reveal on-hover (opacity 0\u21921) los aporta `.sui-notification__more`. -->\n  @if (showMore()) {\n    <sui-compact-button\n      class=\"sui-notification__more\"\n      icon=\"more-2-line\"\n      variantStyle=\"ghost\"\n      size=\"large\"\n      ariaLabel=\"M\u00E1s opciones\"\n      (clicked)=\"onMore($event)\"\n    />\n  }\n\n  @if (dismissible()) {\n    <!-- Cierre = COMPONENTE sui-compact-button (variantStyle modifiable \u2192 el icono\n         hereda el currentColor del per-style `.sui-notification__close`), NO un\n         <button> maqueta. icon 16 = size medium (patr\u00F3n canon sui-alert). -->\n    <sui-compact-button\n      class=\"sui-notification__close\"\n      icon=\"close-line\"\n      variantStyle=\"modifiable\"\n      size=\"medium\"\n      ariaLabel=\"Cerrar\"\n      (clicked)=\"onDismiss()\"\n    />\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.sui-notification{position:relative;display:flex;align-items:flex-start;gap:12px;padding:14px;border-radius:var(--sui-radius-12);overflow:hidden;border:1px solid transparent;box-sizing:border-box}.sui-notification.sui-notification--has-avatar{padding:12px;gap:15px}.sui-notification[data-sui-style=filled]{border:none;box-shadow:var(--sui-custom-shadow-small)}.sui-notification[data-sui-style=filled] .sui-notification__title,.sui-notification[data-sui-style=filled] .sui-notification__description,.sui-notification[data-sui-style=filled] .sui-notification__icon{color:var(--sui-static-white)}.sui-notification[data-sui-style=filled] .sui-notification__time,.sui-notification[data-sui-style=filled] .sui-notification__close{color:var(--sui-static-white);opacity:.72}.sui-notification[data-sui-style=filled] .sui-notification__dot{background:var(--sui-static-white)}.sui-notification[data-sui-style=filled][data-sui-variant=info]{background:var(--sui-state-information-base)}.sui-notification[data-sui-style=filled][data-sui-variant=success]{background:var(--sui-state-success-base)}.sui-notification[data-sui-style=filled][data-sui-variant=warning]{background:var(--sui-state-warning-base)}.sui-notification[data-sui-style=filled][data-sui-variant=error]{background:var(--sui-state-error-base)}.sui-notification[data-sui-style=filled][data-sui-variant=feature]{background:var(--sui-state-feature-base)}.sui-notification[data-sui-style=filled][data-sui-variant=default]{background:var(--sui-bg-strong-950)}.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__title,.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__description,.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__time,.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__close{color:var(--sui-text-white-0)}.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__icon{color:var(--sui-icon-white-0)}.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__dot{background:var(--sui-text-white-0)}.sui-notification[data-sui-style=light]{border:none}.sui-notification[data-sui-style=light] .sui-notification__title,.sui-notification[data-sui-style=light] .sui-notification__description{color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=light] .sui-notification__close{opacity:.4;color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=light][data-sui-variant=info]{background:var(--sui-state-information-light)}.sui-notification[data-sui-style=light][data-sui-variant=info] .sui-notification__icon{color:var(--sui-state-information-base)}.sui-notification[data-sui-style=light][data-sui-variant=success]{background:var(--sui-state-success-light)}.sui-notification[data-sui-style=light][data-sui-variant=success] .sui-notification__icon{color:var(--sui-state-success-base)}.sui-notification[data-sui-style=light][data-sui-variant=warning]{background:var(--sui-state-warning-light)}.sui-notification[data-sui-style=light][data-sui-variant=warning] .sui-notification__icon{color:var(--sui-state-warning-base)}.sui-notification[data-sui-style=light][data-sui-variant=error]{background:var(--sui-state-error-light)}.sui-notification[data-sui-style=light][data-sui-variant=error] .sui-notification__icon{color:var(--sui-state-error-base)}.sui-notification[data-sui-style=light][data-sui-variant=feature]{background:var(--sui-state-feature-light)}.sui-notification[data-sui-style=light][data-sui-variant=feature] .sui-notification__icon{color:var(--sui-state-feature-base)}.sui-notification[data-sui-style=light][data-sui-variant=default]{background:var(--sui-bg-weak-50)}.sui-notification[data-sui-style=lighter] .sui-notification__title{color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=lighter] .sui-notification__description{color:var(--sui-text-strong-950);opacity:.72}.sui-notification[data-sui-style=lighter] .sui-notification__close{opacity:.4;color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=lighter][data-sui-variant=info]{background:var(--sui-state-information-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=info] .sui-notification__icon{color:var(--sui-state-information-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=success]{background:var(--sui-state-success-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=success] .sui-notification__icon{color:var(--sui-state-success-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=warning]{background:var(--sui-state-warning-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=warning] .sui-notification__icon{color:var(--sui-state-warning-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=error]{background:var(--sui-state-error-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=error] .sui-notification__icon{color:var(--sui-state-error-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=feature]{background:var(--sui-state-feature-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=feature] .sui-notification__icon{color:var(--sui-state-feature-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=default]{background:var(--sui-bg-weak-50);border-color:var(--sui-stroke-soft-200)}.sui-notification:not([data-sui-style]),.sui-notification[data-sui-style=stroke]{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);box-shadow:var(--sui-custom-shadow-small)}.sui-notification:not([data-sui-style]) .sui-notification__title,.sui-notification[data-sui-style=stroke] .sui-notification__title{color:var(--sui-text-strong-950)}.sui-notification:not([data-sui-style]) .sui-notification__description,.sui-notification[data-sui-style=stroke] .sui-notification__description{color:var(--sui-text-sub-600)}.sui-notification:not([data-sui-style]) .sui-notification__close,.sui-notification[data-sui-style=stroke] .sui-notification__close{opacity:.4;color:var(--sui-text-strong-950)}.sui-notification:not([data-sui-style])[data-sui-variant=info] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=info] .sui-notification__icon{color:var(--sui-state-information-base)}.sui-notification:not([data-sui-style])[data-sui-variant=success] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=success] .sui-notification__icon{color:var(--sui-state-success-base)}.sui-notification:not([data-sui-style])[data-sui-variant=warning] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=warning] .sui-notification__icon{color:var(--sui-state-warning-base)}.sui-notification:not([data-sui-style])[data-sui-variant=error] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=error] .sui-notification__icon{color:var(--sui-state-error-base)}.sui-notification:not([data-sui-style])[data-sui-variant=feature] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=feature] .sui-notification__icon{color:var(--sui-state-feature-base)}.sui-notification__avatar{flex-shrink:0;width:40px;height:40px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--sui-bg-strong-950)}.sui-notification__avatar img{width:100%;height:100%;object-fit:cover;display:block}.sui-notification__avatar-initials{font-family:var(--sui-font-sans);font-size:14px;font-weight:600;line-height:1;color:var(--sui-text-white-0);text-transform:uppercase;letter-spacing:.02em;-webkit-user-select:none;user-select:none}.sui-notification__icon{flex-shrink:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;margin-top:2px}.sui-notification__content{display:flex;flex:1 0 0;flex-direction:column;gap:4px;min-width:0}.sui-notification__header{display:flex;align-items:center;gap:6px;min-width:0}.sui-notification__title{margin:0;flex:1 0 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;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-notification__dot{flex-shrink:0;width:8px;height:8px;border-radius:50%;background:var(--sui-primary-base)}.sui-notification__time{flex-shrink:0;margin-left:auto;font-family:var(--sui-font-sans);font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-soft-400);white-space:nowrap}.sui-notification__description{margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto}.sui-notification__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}.sui-notification__actions:empty{display:none}.sui-notification__close{flex-shrink:0;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-notification__close:hover{opacity:1!important}.sui-notification--hoverable{cursor:pointer;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-notification--hoverable .sui-notification__more{opacity:0;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-notification--hoverable:hover,.sui-notification--hoverable.sui-notification--active{background:var(--sui-bg-weak-50)}.sui-notification--hoverable:hover .sui-notification__more,.sui-notification--hoverable.sui-notification--active .sui-notification__more{opacity:1}.sui-notification__description{display:flex;align-items:center;flex-wrap:wrap;gap:4px}.sui-notification__meta-time{flex-shrink:0;color:var(--sui-text-soft-400)}.sui-notification__sep{flex-shrink:0;color:var(--sui-text-soft-400);-webkit-user-select:none;user-select:none}.sui-notification__company-logo{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.sui-notification__company-logo:empty{display:none}.sui-notification__company-logo ::ng-deep img,.sui-notification__company-logo ::ng-deep svg{width:16px;height:16px;border-radius:var(--sui-radius-full);object-fit:cover;display:block}.sui-notification__desc-text{min-width:0}.sui-notification__file{margin-top:8px;border-radius:var(--sui-radius-8);border:1px solid var(--sui-stroke-soft-200);background:var(--sui-bg-white-0);box-shadow:var(--sui-custom-shadow-x-small);overflow:hidden;box-sizing:border-box}.sui-notification__file:empty{display:none}.sui-notification__bubble{margin-top:8px;padding:8px 12px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);border-radius:4px 8px 10px;box-sizing:border-box;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-sub-600);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-notification__bubble:empty{display:none}.sui-notification__more{position:absolute;top:12px;right:12px;flex-shrink:0}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiCompactButton, selector: "sui-compact-button", inputs: ["icon", "variantStyle", "size", "fullRadius", "disabled", "href", "target", "rel", "type", "ariaLabel"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiNotification, decorators: [{
             type: Component,
             args: [{ selector: 'sui-notification', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SuiIcon, SuiCompactButton], host: {
                         /* Strip native `title` attr — patrón canon Ontop (ver CLAUDE.md). */
                         '[attr.title]': 'null',
-                    }, template: "<div\n  class=\"sui-notification\"\n  [class.sui-notification--hoverable]=\"showMore()\"\n  [class.sui-notification--active]=\"active()\"\n  [class.sui-notification--has-avatar]=\"hasAvatar()\"\n  [attr.data-sui-variant]=\"variant()\"\n  [attr.data-sui-style]=\"variantStyle()\"\n  [attr.data-sui-type]=\"type()\"\n  [attr.role]=\"role()\"\n  [attr.aria-live]=\"ariaLive()\"\n>\n  <!-- Leading: avatar OR status icon -->\n  @if (hasAvatar()) {\n    <div class=\"sui-notification__avatar\" aria-hidden=\"true\">\n      @if (avatarSrc()) {\n        <img [src]=\"avatarSrc()\" alt=\"\" />\n      } @else {\n        <span class=\"sui-notification__avatar-initials\">{{ avatarInitials() }}</span>\n      }\n    </div>\n  } @else if (showLeadingIcon()) {\n    <div class=\"sui-notification__icon\" aria-hidden=\"true\">\n      <sui-icon [name]=\"iconName()\" [size]=\"20\" />\n    </div>\n  }\n\n  <div class=\"sui-notification__content\">\n    <!-- Header: title + unread dot + timestamp -->\n    <div class=\"sui-notification__header\">\n      @if (title()) {\n        <p class=\"sui-notification__title\">{{ title() }}</p>\n      }\n      @if (unread()) {\n        <span class=\"sui-notification__dot\" aria-label=\"No le\u00EDdo\"></span>\n      }\n      @if (timestamp() && type() === 'basic') {\n        <span class=\"sui-notification__time\">{{ timestamp() }}</span>\n      }\n    </div>\n\n    <!-- Compound description: timestamp \u2219 company-logo \u2219 text.\n         For type=basic the timestamp lives in the header (not here), so the\n         description block must only render on real content \u2014 otherwise an\n         empty <p> occupies a phantom 4px gap below the title. -->\n    @if (description() || (timestamp() && type() !== 'basic') || type() !== 'basic') {\n      <p class=\"sui-notification__description\">\n        @if (timestamp() && type() !== 'basic') {\n          <span class=\"sui-notification__meta-time\">{{ timestamp() }}</span>\n          <span class=\"sui-notification__sep\" aria-hidden=\"true\">\u2219</span>\n        }\n        <span class=\"sui-notification__company-logo\">\n          <ng-content select=\"[slot=company-logo]\" />\n        </span>\n        @if (description()) {\n          <span class=\"sui-notification__desc-text\">{{ description() }}</span>\n        }\n      </p>\n    }\n\n    <!-- Type=file: attachment card -->\n    @if (type() === 'file') {\n      <div class=\"sui-notification__file\">\n        <ng-content select=\"[slot=file]\" />\n      </div>\n    }\n\n    <!-- Type=message: response bubble -->\n    @if (type() === 'message') {\n      <div class=\"sui-notification__bubble\">\n        <ng-content select=\"[slot=message]\" />\n      </div>\n    }\n\n    <!-- Free custom content -->\n    <ng-content />\n\n    <!-- Actions slot (also hosts type=button Deny/Approve pair) -->\n    <div class=\"sui-notification__actions\">\n      <ng-content select=\"[slot=actions]\" />\n    </div>\n  </div>\n\n  <!-- Hover affordance: more-2-line (notification item) = COMPONENTE\n       sui-compact-button (variantStyle ghost: transparent + hover bg-weak-50,\n       radius-6, icon 20 = size large), NO un <button> maqueta. El posicionamiento\n       absoluto y el reveal on-hover (opacity 0\u21921) los aporta `.sui-notification__more`. -->\n  @if (showMore()) {\n    <sui-compact-button\n      class=\"sui-notification__more\"\n      icon=\"more-2-line\"\n      variantStyle=\"ghost\"\n      size=\"large\"\n      ariaLabel=\"M\u00E1s opciones\"\n      (clicked)=\"onMore($event)\"\n    />\n  }\n\n  @if (dismissible()) {\n    <!-- Cierre = COMPONENTE sui-compact-button (variantStyle modifiable \u2192 el icono\n         hereda el currentColor del per-style `.sui-notification__close`), NO un\n         <button> maqueta. icon 16 = size medium (patr\u00F3n canon sui-alert). -->\n    <sui-compact-button\n      class=\"sui-notification__close\"\n      icon=\"close-line\"\n      variantStyle=\"modifiable\"\n      size=\"medium\"\n      ariaLabel=\"Cerrar\"\n      (clicked)=\"onDismiss()\"\n    />\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.sui-notification{position:relative;display:flex;align-items:flex-start;gap:12px;padding:14px;border-radius:var(--sui-radius-12);overflow:hidden;border:1px solid transparent;box-sizing:border-box}.sui-notification.sui-notification--has-avatar{padding:12px;gap:15px}.sui-notification[data-sui-style=filled]{border:none;box-shadow:var(--sui-custom-shadow-small)}.sui-notification[data-sui-style=filled] .sui-notification__title,.sui-notification[data-sui-style=filled] .sui-notification__description,.sui-notification[data-sui-style=filled] .sui-notification__icon{color:var(--sui-static-white)}.sui-notification[data-sui-style=filled] .sui-notification__time,.sui-notification[data-sui-style=filled] .sui-notification__close{color:var(--sui-static-white);opacity:.72}.sui-notification[data-sui-style=filled] .sui-notification__dot{background:var(--sui-static-white)}.sui-notification[data-sui-style=filled][data-sui-variant=info]{background:var(--sui-state-information-base)}.sui-notification[data-sui-style=filled][data-sui-variant=success]{background:var(--sui-state-success-base)}.sui-notification[data-sui-style=filled][data-sui-variant=warning]{background:var(--sui-state-warning-base)}.sui-notification[data-sui-style=filled][data-sui-variant=error]{background:var(--sui-state-error-base)}.sui-notification[data-sui-style=filled][data-sui-variant=feature]{background:var(--sui-state-feature-base)}.sui-notification[data-sui-style=filled][data-sui-variant=default]{background:var(--sui-bg-strong-950)}.sui-notification[data-sui-style=light]{border:none}.sui-notification[data-sui-style=light] .sui-notification__title,.sui-notification[data-sui-style=light] .sui-notification__description{color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=light] .sui-notification__close{opacity:.4;color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=light][data-sui-variant=info]{background:var(--sui-state-information-light)}.sui-notification[data-sui-style=light][data-sui-variant=info] .sui-notification__icon{color:var(--sui-state-information-base)}.sui-notification[data-sui-style=light][data-sui-variant=success]{background:var(--sui-state-success-light)}.sui-notification[data-sui-style=light][data-sui-variant=success] .sui-notification__icon{color:var(--sui-state-success-base)}.sui-notification[data-sui-style=light][data-sui-variant=warning]{background:var(--sui-state-warning-light)}.sui-notification[data-sui-style=light][data-sui-variant=warning] .sui-notification__icon{color:var(--sui-state-warning-base)}.sui-notification[data-sui-style=light][data-sui-variant=error]{background:var(--sui-state-error-light)}.sui-notification[data-sui-style=light][data-sui-variant=error] .sui-notification__icon{color:var(--sui-state-error-base)}.sui-notification[data-sui-style=light][data-sui-variant=feature]{background:var(--sui-state-feature-light)}.sui-notification[data-sui-style=light][data-sui-variant=feature] .sui-notification__icon{color:var(--sui-state-feature-base)}.sui-notification[data-sui-style=light][data-sui-variant=default]{background:var(--sui-bg-weak-50)}.sui-notification[data-sui-style=lighter] .sui-notification__title{color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=lighter] .sui-notification__description{color:var(--sui-text-strong-950);opacity:.72}.sui-notification[data-sui-style=lighter] .sui-notification__close{opacity:.4;color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=lighter][data-sui-variant=info]{background:var(--sui-state-information-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=info] .sui-notification__icon{color:var(--sui-state-information-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=success]{background:var(--sui-state-success-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=success] .sui-notification__icon{color:var(--sui-state-success-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=warning]{background:var(--sui-state-warning-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=warning] .sui-notification__icon{color:var(--sui-state-warning-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=error]{background:var(--sui-state-error-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=error] .sui-notification__icon{color:var(--sui-state-error-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=feature]{background:var(--sui-state-feature-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=feature] .sui-notification__icon{color:var(--sui-state-feature-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=default]{background:var(--sui-bg-weak-50);border-color:var(--sui-stroke-soft-200)}.sui-notification:not([data-sui-style]),.sui-notification[data-sui-style=stroke]{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);box-shadow:var(--sui-custom-shadow-small)}.sui-notification:not([data-sui-style]) .sui-notification__title,.sui-notification[data-sui-style=stroke] .sui-notification__title{color:var(--sui-text-strong-950)}.sui-notification:not([data-sui-style]) .sui-notification__description,.sui-notification[data-sui-style=stroke] .sui-notification__description{color:var(--sui-text-sub-600)}.sui-notification:not([data-sui-style]) .sui-notification__close,.sui-notification[data-sui-style=stroke] .sui-notification__close{opacity:.4;color:var(--sui-text-strong-950)}.sui-notification:not([data-sui-style])[data-sui-variant=info] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=info] .sui-notification__icon{color:var(--sui-state-information-base)}.sui-notification:not([data-sui-style])[data-sui-variant=success] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=success] .sui-notification__icon{color:var(--sui-state-success-base)}.sui-notification:not([data-sui-style])[data-sui-variant=warning] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=warning] .sui-notification__icon{color:var(--sui-state-warning-base)}.sui-notification:not([data-sui-style])[data-sui-variant=error] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=error] .sui-notification__icon{color:var(--sui-state-error-base)}.sui-notification:not([data-sui-style])[data-sui-variant=feature] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=feature] .sui-notification__icon{color:var(--sui-state-feature-base)}.sui-notification__avatar{flex-shrink:0;width:40px;height:40px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--sui-bg-strong-950)}.sui-notification__avatar img{width:100%;height:100%;object-fit:cover;display:block}.sui-notification__avatar-initials{font-family:var(--sui-font-sans);font-size:14px;font-weight:600;line-height:1;color:var(--sui-static-white);text-transform:uppercase;letter-spacing:.02em;-webkit-user-select:none;user-select:none}.sui-notification__icon{flex-shrink:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;margin-top:2px}.sui-notification__content{display:flex;flex:1 0 0;flex-direction:column;gap:4px;min-width:0}.sui-notification__header{display:flex;align-items:center;gap:6px;min-width:0}.sui-notification__title{margin:0;flex:1 0 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;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-notification__dot{flex-shrink:0;width:8px;height:8px;border-radius:50%;background:var(--sui-primary-base)}.sui-notification__time{flex-shrink:0;margin-left:auto;font-family:var(--sui-font-sans);font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-soft-400);white-space:nowrap}.sui-notification__description{margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto}.sui-notification__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}.sui-notification__actions:empty{display:none}.sui-notification__close{flex-shrink:0;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-notification__close:hover{opacity:1!important}.sui-notification--hoverable{cursor:pointer;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-notification--hoverable .sui-notification__more{opacity:0;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-notification--hoverable:hover,.sui-notification--hoverable.sui-notification--active{background:var(--sui-bg-weak-50)}.sui-notification--hoverable:hover .sui-notification__more,.sui-notification--hoverable.sui-notification--active .sui-notification__more{opacity:1}.sui-notification__description{display:flex;align-items:center;flex-wrap:wrap;gap:4px}.sui-notification__meta-time{flex-shrink:0;color:var(--sui-text-soft-400)}.sui-notification__sep{flex-shrink:0;color:var(--sui-text-soft-400);-webkit-user-select:none;user-select:none}.sui-notification__company-logo{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.sui-notification__company-logo:empty{display:none}.sui-notification__company-logo ::ng-deep img,.sui-notification__company-logo ::ng-deep svg{width:16px;height:16px;border-radius:var(--sui-radius-full);object-fit:cover;display:block}.sui-notification__desc-text{min-width:0}.sui-notification__file{margin-top:8px;border-radius:var(--sui-radius-8);border:1px solid var(--sui-stroke-soft-200);background:var(--sui-bg-white-0);box-shadow:var(--sui-custom-shadow-x-small);overflow:hidden;box-sizing:border-box}.sui-notification__file:empty{display:none}.sui-notification__bubble{margin-top:8px;padding:8px 12px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);border-radius:4px 8px 10px;box-sizing:border-box;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-sub-600);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-notification__bubble:empty{display:none}.sui-notification__more{position:absolute;top:12px;right:12px;flex-shrink:0}\n"] }]
+                    }, template: "<div\n  class=\"sui-notification\"\n  [class.sui-notification--hoverable]=\"showMore()\"\n  [class.sui-notification--active]=\"active()\"\n  [class.sui-notification--has-avatar]=\"hasAvatar()\"\n  [attr.data-sui-variant]=\"variant()\"\n  [attr.data-sui-style]=\"variantStyle()\"\n  [attr.data-sui-type]=\"type()\"\n  [attr.role]=\"role()\"\n  [attr.aria-live]=\"ariaLive()\"\n>\n  <!-- Leading: avatar OR status icon -->\n  @if (hasAvatar()) {\n    <div class=\"sui-notification__avatar\" aria-hidden=\"true\">\n      @if (avatarSrc()) {\n        <img [src]=\"avatarSrc()\" alt=\"\" />\n      } @else {\n        <span class=\"sui-notification__avatar-initials\">{{ avatarInitials() }}</span>\n      }\n    </div>\n  } @else if (showLeadingIcon()) {\n    <div class=\"sui-notification__icon\" aria-hidden=\"true\">\n      <sui-icon [name]=\"iconName()\" [size]=\"20\" />\n    </div>\n  }\n\n  <div class=\"sui-notification__content\">\n    <!-- Header: title + unread dot + timestamp -->\n    <div class=\"sui-notification__header\">\n      @if (title()) {\n        <p class=\"sui-notification__title\">{{ title() }}</p>\n      }\n      @if (unread()) {\n        <span class=\"sui-notification__dot\" aria-label=\"No le\u00EDdo\"></span>\n      }\n      @if (timestamp() && type() === 'basic') {\n        <span class=\"sui-notification__time\">{{ timestamp() }}</span>\n      }\n    </div>\n\n    <!-- Compound description: timestamp \u2219 company-logo \u2219 text.\n         For type=basic the timestamp lives in the header (not here), so the\n         description block must only render on real content \u2014 otherwise an\n         empty <p> occupies a phantom 4px gap below the title. -->\n    @if (description() || (timestamp() && type() !== 'basic') || type() !== 'basic') {\n      <p class=\"sui-notification__description\">\n        @if (timestamp() && type() !== 'basic') {\n          <span class=\"sui-notification__meta-time\">{{ timestamp() }}</span>\n          <span class=\"sui-notification__sep\" aria-hidden=\"true\">\u2219</span>\n        }\n        <span class=\"sui-notification__company-logo\">\n          <ng-content select=\"[slot=company-logo]\" />\n        </span>\n        @if (description()) {\n          <span class=\"sui-notification__desc-text\">{{ description() }}</span>\n        }\n      </p>\n    }\n\n    <!-- Type=file: attachment card -->\n    @if (type() === 'file') {\n      <div class=\"sui-notification__file\">\n        <ng-content select=\"[slot=file]\" />\n      </div>\n    }\n\n    <!-- Type=message: response bubble -->\n    @if (type() === 'message') {\n      <div class=\"sui-notification__bubble\">\n        <ng-content select=\"[slot=message]\" />\n      </div>\n    }\n\n    <!-- Free custom content -->\n    <ng-content />\n\n    <!-- Actions slot (also hosts type=button Deny/Approve pair) -->\n    <div class=\"sui-notification__actions\">\n      <ng-content select=\"[slot=actions]\" />\n    </div>\n  </div>\n\n  <!-- Hover affordance: more-2-line (notification item) = COMPONENTE\n       sui-compact-button (variantStyle ghost: transparent + hover bg-weak-50,\n       radius-6, icon 20 = size large), NO un <button> maqueta. El posicionamiento\n       absoluto y el reveal on-hover (opacity 0\u21921) los aporta `.sui-notification__more`. -->\n  @if (showMore()) {\n    <sui-compact-button\n      class=\"sui-notification__more\"\n      icon=\"more-2-line\"\n      variantStyle=\"ghost\"\n      size=\"large\"\n      ariaLabel=\"M\u00E1s opciones\"\n      (clicked)=\"onMore($event)\"\n    />\n  }\n\n  @if (dismissible()) {\n    <!-- Cierre = COMPONENTE sui-compact-button (variantStyle modifiable \u2192 el icono\n         hereda el currentColor del per-style `.sui-notification__close`), NO un\n         <button> maqueta. icon 16 = size medium (patr\u00F3n canon sui-alert). -->\n    <sui-compact-button\n      class=\"sui-notification__close\"\n      icon=\"close-line\"\n      variantStyle=\"modifiable\"\n      size=\"medium\"\n      ariaLabel=\"Cerrar\"\n      (clicked)=\"onDismiss()\"\n    />\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.sui-notification{position:relative;display:flex;align-items:flex-start;gap:12px;padding:14px;border-radius:var(--sui-radius-12);overflow:hidden;border:1px solid transparent;box-sizing:border-box}.sui-notification.sui-notification--has-avatar{padding:12px;gap:15px}.sui-notification[data-sui-style=filled]{border:none;box-shadow:var(--sui-custom-shadow-small)}.sui-notification[data-sui-style=filled] .sui-notification__title,.sui-notification[data-sui-style=filled] .sui-notification__description,.sui-notification[data-sui-style=filled] .sui-notification__icon{color:var(--sui-static-white)}.sui-notification[data-sui-style=filled] .sui-notification__time,.sui-notification[data-sui-style=filled] .sui-notification__close{color:var(--sui-static-white);opacity:.72}.sui-notification[data-sui-style=filled] .sui-notification__dot{background:var(--sui-static-white)}.sui-notification[data-sui-style=filled][data-sui-variant=info]{background:var(--sui-state-information-base)}.sui-notification[data-sui-style=filled][data-sui-variant=success]{background:var(--sui-state-success-base)}.sui-notification[data-sui-style=filled][data-sui-variant=warning]{background:var(--sui-state-warning-base)}.sui-notification[data-sui-style=filled][data-sui-variant=error]{background:var(--sui-state-error-base)}.sui-notification[data-sui-style=filled][data-sui-variant=feature]{background:var(--sui-state-feature-base)}.sui-notification[data-sui-style=filled][data-sui-variant=default]{background:var(--sui-bg-strong-950)}.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__title,.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__description,.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__time,.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__close{color:var(--sui-text-white-0)}.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__icon{color:var(--sui-icon-white-0)}.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__dot{background:var(--sui-text-white-0)}.sui-notification[data-sui-style=light]{border:none}.sui-notification[data-sui-style=light] .sui-notification__title,.sui-notification[data-sui-style=light] .sui-notification__description{color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=light] .sui-notification__close{opacity:.4;color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=light][data-sui-variant=info]{background:var(--sui-state-information-light)}.sui-notification[data-sui-style=light][data-sui-variant=info] .sui-notification__icon{color:var(--sui-state-information-base)}.sui-notification[data-sui-style=light][data-sui-variant=success]{background:var(--sui-state-success-light)}.sui-notification[data-sui-style=light][data-sui-variant=success] .sui-notification__icon{color:var(--sui-state-success-base)}.sui-notification[data-sui-style=light][data-sui-variant=warning]{background:var(--sui-state-warning-light)}.sui-notification[data-sui-style=light][data-sui-variant=warning] .sui-notification__icon{color:var(--sui-state-warning-base)}.sui-notification[data-sui-style=light][data-sui-variant=error]{background:var(--sui-state-error-light)}.sui-notification[data-sui-style=light][data-sui-variant=error] .sui-notification__icon{color:var(--sui-state-error-base)}.sui-notification[data-sui-style=light][data-sui-variant=feature]{background:var(--sui-state-feature-light)}.sui-notification[data-sui-style=light][data-sui-variant=feature] .sui-notification__icon{color:var(--sui-state-feature-base)}.sui-notification[data-sui-style=light][data-sui-variant=default]{background:var(--sui-bg-weak-50)}.sui-notification[data-sui-style=lighter] .sui-notification__title{color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=lighter] .sui-notification__description{color:var(--sui-text-strong-950);opacity:.72}.sui-notification[data-sui-style=lighter] .sui-notification__close{opacity:.4;color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=lighter][data-sui-variant=info]{background:var(--sui-state-information-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=info] .sui-notification__icon{color:var(--sui-state-information-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=success]{background:var(--sui-state-success-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=success] .sui-notification__icon{color:var(--sui-state-success-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=warning]{background:var(--sui-state-warning-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=warning] .sui-notification__icon{color:var(--sui-state-warning-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=error]{background:var(--sui-state-error-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=error] .sui-notification__icon{color:var(--sui-state-error-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=feature]{background:var(--sui-state-feature-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=feature] .sui-notification__icon{color:var(--sui-state-feature-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=default]{background:var(--sui-bg-weak-50);border-color:var(--sui-stroke-soft-200)}.sui-notification:not([data-sui-style]),.sui-notification[data-sui-style=stroke]{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);box-shadow:var(--sui-custom-shadow-small)}.sui-notification:not([data-sui-style]) .sui-notification__title,.sui-notification[data-sui-style=stroke] .sui-notification__title{color:var(--sui-text-strong-950)}.sui-notification:not([data-sui-style]) .sui-notification__description,.sui-notification[data-sui-style=stroke] .sui-notification__description{color:var(--sui-text-sub-600)}.sui-notification:not([data-sui-style]) .sui-notification__close,.sui-notification[data-sui-style=stroke] .sui-notification__close{opacity:.4;color:var(--sui-text-strong-950)}.sui-notification:not([data-sui-style])[data-sui-variant=info] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=info] .sui-notification__icon{color:var(--sui-state-information-base)}.sui-notification:not([data-sui-style])[data-sui-variant=success] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=success] .sui-notification__icon{color:var(--sui-state-success-base)}.sui-notification:not([data-sui-style])[data-sui-variant=warning] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=warning] .sui-notification__icon{color:var(--sui-state-warning-base)}.sui-notification:not([data-sui-style])[data-sui-variant=error] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=error] .sui-notification__icon{color:var(--sui-state-error-base)}.sui-notification:not([data-sui-style])[data-sui-variant=feature] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=feature] .sui-notification__icon{color:var(--sui-state-feature-base)}.sui-notification__avatar{flex-shrink:0;width:40px;height:40px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--sui-bg-strong-950)}.sui-notification__avatar img{width:100%;height:100%;object-fit:cover;display:block}.sui-notification__avatar-initials{font-family:var(--sui-font-sans);font-size:14px;font-weight:600;line-height:1;color:var(--sui-text-white-0);text-transform:uppercase;letter-spacing:.02em;-webkit-user-select:none;user-select:none}.sui-notification__icon{flex-shrink:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;margin-top:2px}.sui-notification__content{display:flex;flex:1 0 0;flex-direction:column;gap:4px;min-width:0}.sui-notification__header{display:flex;align-items:center;gap:6px;min-width:0}.sui-notification__title{margin:0;flex:1 0 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;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-notification__dot{flex-shrink:0;width:8px;height:8px;border-radius:50%;background:var(--sui-primary-base)}.sui-notification__time{flex-shrink:0;margin-left:auto;font-family:var(--sui-font-sans);font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-soft-400);white-space:nowrap}.sui-notification__description{margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto}.sui-notification__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}.sui-notification__actions:empty{display:none}.sui-notification__close{flex-shrink:0;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-notification__close:hover{opacity:1!important}.sui-notification--hoverable{cursor:pointer;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-notification--hoverable .sui-notification__more{opacity:0;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-notification--hoverable:hover,.sui-notification--hoverable.sui-notification--active{background:var(--sui-bg-weak-50)}.sui-notification--hoverable:hover .sui-notification__more,.sui-notification--hoverable.sui-notification--active .sui-notification__more{opacity:1}.sui-notification__description{display:flex;align-items:center;flex-wrap:wrap;gap:4px}.sui-notification__meta-time{flex-shrink:0;color:var(--sui-text-soft-400)}.sui-notification__sep{flex-shrink:0;color:var(--sui-text-soft-400);-webkit-user-select:none;user-select:none}.sui-notification__company-logo{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.sui-notification__company-logo:empty{display:none}.sui-notification__company-logo ::ng-deep img,.sui-notification__company-logo ::ng-deep svg{width:16px;height:16px;border-radius:var(--sui-radius-full);object-fit:cover;display:block}.sui-notification__desc-text{min-width:0}.sui-notification__file{margin-top:8px;border-radius:var(--sui-radius-8);border:1px solid var(--sui-stroke-soft-200);background:var(--sui-bg-white-0);box-shadow:var(--sui-custom-shadow-x-small);overflow:hidden;box-sizing:border-box}.sui-notification__file:empty{display:none}.sui-notification__bubble{margin-top:8px;padding:8px 12px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);border-radius:4px 8px 10px;box-sizing:border-box;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-sub-600);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-notification__bubble:empty{display:none}.sui-notification__more{position:absolute;top:12px;right:12px;flex-shrink:0}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], variantStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "variantStyle", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], timestamp: [{ type: i0.Input, args: [{ isSignal: true, alias: "timestamp", required: false }] }], avatarSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarSrc", required: false }] }], avatarInitials: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarInitials", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], unread: [{ type: i0.Input, args: [{ isSignal: true, alias: "unread", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], showMore: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMore", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }], moreClicked: [{ type: i0.Output, args: ["moreClicked"] }] } });
 
 /**