@ajuarezso/sui-design-system 0.10.2 → 0.11.0

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

@@ -1,6 +1,7 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, input, computed, ChangeDetectionStrategy, Component, inject, TemplateRef, Directive, model, signal, contentChild, viewChild, effect, untracked, output, ElementRef, forwardRef, ViewContainerRef, DestroyRef, ContentChild, ViewChild, ViewEncapsulation, Renderer2, DOCUMENT, HostListener, viewChildren, afterNextRender, ContentChildren, ViewChildren, Injector, Injectable } from '@angular/core';
 import { NgTemplateOutlet, DOCUMENT as DOCUMENT$1, NgOptimizedImage } from '@angular/common';
+import { Router, RouterLink, RouterLinkActive } from '@angular/router';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Subscription } from 'rxjs';
 import { Overlay, OverlayPositionBuilder } from '@angular/cdk/overlay';
@@ -9,7 +10,6 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { startOfDay, subDays, subMonths, subYears, startOfMonth, startOfYear, endOfMonth, startOfWeek, endOfWeek, isSameMonth, isSameDay, isBefore, isAfter, isWithinInterval, format, addMonths } from 'date-fns';
 export { addMonths, isSameDay, subMonths } from 'date-fns';
 import { es } from 'date-fns/locale';
-import { RouterLink, RouterLinkActive } from '@angular/router';
 
 const SUI_NAVBAR_VISIBILITY = new InjectionToken('SUI_NAVBAR_VISIBILITY');
 const SUI_TAB_BAR = new InjectionToken('SUI_TAB_BAR');
@@ -936,6 +936,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                     }, template: "@if (icon(); as i) {\n  <sui-icon [name]=\"i\" [size]=\"18\" class=\"sui-activity-filter__icon\" />\n}\n<span class=\"sui-activity-filter__label\"><ng-content /></span>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:4px 10px;border-radius:8px;cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;-webkit-tap-highlight-color:transparent;font-family:var(--sui-font-sans, \"Inter\", system-ui, sans-serif);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;border:1px solid transparent;background:transparent;color:var(--sui-text-sub-600);transition:background-color .15s ease,color .15s ease,border-color .15s ease,transform .12s ease}:host:focus-visible{outline:2px solid var(--sui-primary-base);outline-offset:2px}:host:active:not([data-sui-disabled]){transform:scale(.97)}:host([data-sui-state=default]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200)}:host([data-sui-state=default]):hover{background:var(--sui-bg-weak-50);border-color:transparent}:host([data-sui-state=default]) .sui-activity-filter__icon{color:var(--sui-icon-soft-400)}:host([data-sui-state=active]){background:var(--sui-primary-alpha-10, rgba(250, 115, 25, .1));border-color:transparent;color:var(--sui-primary-base)}:host([data-sui-state=active]) .sui-activity-filter__icon{color:var(--sui-primary-base)}:host([data-sui-state=active]):hover{background:var(--sui-primary-alpha-16, rgba(250, 115, 25, .16))}:host([data-sui-disabled]){opacity:.4;pointer-events:none;cursor:not-allowed}.sui-activity-filter__icon{display:inline-flex;flex-shrink:0}.sui-activity-filter__label{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.084px;white-space:nowrap;word-break:break-word}\n"] }]
         }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
 
+/**
+ * SUI Href — SUI Design System 2.0
+ *
+ * Directiva canon para TODO anchor del DS que reciba un `href` configurable.
+ * Reemplaza `[attr.href]` / `[href]` crudos por `[suiHref]`:
+ *
+ *   <a [suiHref]="cfg.href" [attr.target]="cfg.target">...</a>
+ *
+ * Comportamiento:
+ *  - Setea el atributo `href` real (a11y, middle-click, "copiar link" y
+ *    open-in-new-tab del browser siguen funcionando).
+ *  - Si la URL es INTERNA (empieza con `/`, no `//`), el click primario sin
+ *    modificadores navega vía Angular Router (`navigateByUrl`) → SPA nav sin
+ *    full reload del WebView (crítico en Capacitor: un reload pierde estado,
+ *    OTA bundle context y tarda segundos).
+ *  - URLs externas (`https://`, `mailto:`, `tel:`, `#`), `target` distinto de
+ *    `_self`, clicks con cmd/ctrl/shift/alt o botón no-primario, y eventos ya
+ *    prevenidos → default del browser, sin tocar nada.
+ *  - Router inyectado OPCIONAL: en contextos sin Router (Storybook, apps
+ *    no-Angular-router) la directiva es un passthrough del href.
+ */
+class SuiHref {
+    router = inject(Router, { optional: true });
+    /** URL del anchor. null/'' → sin atributo href (anchor no navegable). */
+    suiHref = input(null, ...(ngDevMode ? [{ debugName: "suiHref" }] : /* istanbul ignore next */ []));
+    onClick(ev) {
+        const href = this.suiHref();
+        if (!this.router || !href)
+            return;
+        if (!href.startsWith('/') || href.startsWith('//'))
+            return;
+        const a = ev.currentTarget;
+        if (a.target && a.target !== '_self')
+            return;
+        if (ev.defaultPrevented || ev.button !== 0 || ev.metaKey || ev.ctrlKey || ev.shiftKey || ev.altKey)
+            return;
+        ev.preventDefault();
+        void this.router.navigateByUrl(href);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiHref, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.17", type: SuiHref, isStandalone: true, selector: "a[suiHref]", inputs: { suiHref: { classPropertyName: "suiHref", publicName: "suiHref", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)" }, properties: { "attr.href": "suiHref()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiHref, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'a[suiHref]',
+                    standalone: true,
+                    host: {
+                        '[attr.href]': 'suiHref()',
+                        '(click)': 'onClick($event)',
+                    },
+                }]
+        }], propDecorators: { suiHref: [{ type: i0.Input, args: [{ isSignal: true, alias: "suiHref", required: false }] }] } });
+
 /**
  * SUI Link Button — SUI Design System 2.0
  *
@@ -1020,16 +1074,16 @@ class SuiLinkButton {
         this.clicked.emit(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiLinkButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiLinkButton, isStandalone: true, selector: "sui-link-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, underline: { classPropertyName: "underline", publicName: "underline", 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 }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, rel: { classPropertyName: "rel", publicName: "rel", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "attr.data-sui-variant": "variant()", "attr.data-sui-size": "size()", "attr.data-sui-underline": "underline() ? \"\" : null", "attr.data-sui-disabled": "disabled() ? \"\" : null" } }, ngImport: i0, template: "<!-- Contenido compartido por ambas ramas (a/button). Un \u00FAnico <ng-content/> :\n     Angular asigna la proyecci\u00F3n est\u00E1ticamente a UN solo outlet, as\u00ED que con\n     dos <ng-content/> (uno por rama del @if) la rama <a> quedaba SIN texto.\n     ng-template + ngTemplateOutlet re-proyecta en la rama activa. -->\n<ng-template #inner>\n  @if (leftIcon()) {\n    <sui-icon class=\"sui-link-button__icon\" [name]=\"leftIcon()!\" [size]=\"iconSize()\" />\n  }\n  <span class=\"sui-link-button__text\"><ng-content /></span>\n  @if (rightIcon()) {\n    <sui-icon class=\"sui-link-button__icon\" [name]=\"rightIcon()!\" [size]=\"iconSize()\" />\n  }\n</ng-template>\n\n@if (isAnchor()) {\n  <a\n    class=\"sui-link-button__el\"\n    [href]=\"href()\"\n    [attr.target]=\"target()\"\n    [attr.rel]=\"rel()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (click)=\"onClick($event)\"\n    (touchstart)=\"$event.currentTarget\"\n    (touchend)=\"$any($event.currentTarget).blur()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"inner\" />\n  </a>\n} @else {\n  <button\n    class=\"sui-link-button__el\"\n    [type]=\"type()\"\n    [disabled]=\"disabled() || null\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (click)=\"onClick($event)\"\n    (touchstart)=\"$event.currentTarget\"\n    (touchend)=\"$any($event.currentTarget).blur()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"inner\" />\n  </button>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;justify-content:center;vertical-align:baseline}.sui-link-button__el{appearance:none;margin:0;padding:0;border:0;background:transparent;text-decoration:none;cursor:pointer;color:inherit;display:inline-flex;align-items:center;justify-content:center;gap:4px;white-space:nowrap;word-break:break-word;font-family:var(--sui-font-sans);font-style:normal;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;color:var(--sui-link-button-color, currentColor);transition:transform var(--dur-instant, 80ms) var(--ease-ek, cubic-bezier(.22, 1, .36, 1))}.sui-link-button__el:active:not(:disabled){transform:scale(.97)}.sui-link-button__el:hover:not(:disabled){color:var(--sui-link-button-color-hover, var(--sui-link-button-color))}.sui-link-button__el:focus-visible:not(:disabled){outline:none;color:var(--sui-link-button-color-focus, var(--sui-link-button-color))}.sui-link-button__el:disabled{cursor:not-allowed}.sui-link-button__el:hover:not(:disabled) .sui-link-button__text:after,.sui-link-button__el:focus-visible:not(:disabled) .sui-link-button__text:after{opacity:1}.sui-link-button__icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}.sui-link-button__text{position:relative;display:inline-block}.sui-link-button__text:after{content:\"\";position:absolute;left:0;right:0;bottom:-1px;height:1px;background-color:currentColor;opacity:0;pointer-events:none}:host([data-sui-size=medium]) .sui-link-button__el{font-size:var(--sui-type-label-sm-size, 14px);line-height:var(--sui-type-label-sm-line, 20px);letter-spacing:var(--sui-type-label-sm-spacing, -.006em);font-weight:var(--sui-type-label-sm-weight, 500)}:host([data-sui-size=medium]) .sui-link-button__icon{width:20px;height:20px}:host([data-sui-size=small]) .sui-link-button__el{font-size:var(--sui-type-label-xs-size, 12px);line-height:var(--sui-type-label-xs-line, 16px);letter-spacing:var(--sui-type-label-xs-spacing, 0);font-weight:var(--sui-type-label-xs-weight, 500)}:host([data-sui-size=small]) .sui-link-button__icon{width:16px;height:16px}:host([data-sui-variant=gray]){--sui-link-button-color: var(--sui-text-sub-600);--sui-link-button-color-hover: var(--sui-text-sub-600);--sui-link-button-color-focus: var(--sui-text-strong-950)}:host([data-sui-variant=black]){--sui-link-button-color: var(--sui-text-strong-950);--sui-link-button-color-hover: var(--sui-text-strong-950);--sui-link-button-color-focus: var(--sui-text-strong-950)}:host([data-sui-variant=primary]){--sui-link-button-color: var(--sui-primary-base);--sui-link-button-color-hover: var(--sui-primary-dark);--sui-link-button-color-focus: var(--sui-primary-base)}:host([data-sui-variant=error]){--sui-link-button-color: var(--sui-state-error-base);--sui-link-button-color-hover: var(--sui-red-700);--sui-link-button-color-focus: var(--sui-state-error-base)}:host([data-sui-variant=modifiable]){--sui-link-button-color: currentColor;--sui-link-button-color-hover: currentColor;--sui-link-button-color-focus: currentColor}:host([data-sui-underline]) .sui-link-button__text:after{opacity:1}:host([data-sui-disabled]) .sui-link-button__el,.sui-link-button__el:disabled{color:var(--sui-text-disabled-300);cursor:not-allowed}:host([data-sui-disabled]) .sui-link-button__el:hover,:host([data-sui-disabled]) .sui-link-button__el:focus-visible,.sui-link-button__el:disabled:hover,.sui-link-button__el:disabled:focus-visible{color:var(--sui-text-disabled-300)}:host([data-sui-disabled]) .sui-link-button__el .sui-link-button__text:after,.sui-link-button__el:disabled .sui-link-button__text:after{opacity:0}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiLinkButton, isStandalone: true, selector: "sui-link-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, underline: { classPropertyName: "underline", publicName: "underline", 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 }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, rel: { classPropertyName: "rel", publicName: "rel", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "attr.data-sui-variant": "variant()", "attr.data-sui-size": "size()", "attr.data-sui-underline": "underline() ? \"\" : null", "attr.data-sui-disabled": "disabled() ? \"\" : null" } }, ngImport: i0, template: "<!-- Contenido compartido por ambas ramas (a/button). Un \u00FAnico <ng-content/> :\n     Angular asigna la proyecci\u00F3n est\u00E1ticamente a UN solo outlet, as\u00ED que con\n     dos <ng-content/> (uno por rama del @if) la rama <a> quedaba SIN texto.\n     ng-template + ngTemplateOutlet re-proyecta en la rama activa. -->\n<ng-template #inner>\n  @if (leftIcon()) {\n    <sui-icon class=\"sui-link-button__icon\" [name]=\"leftIcon()!\" [size]=\"iconSize()\" />\n  }\n  <span class=\"sui-link-button__text\"><ng-content /></span>\n  @if (rightIcon()) {\n    <sui-icon class=\"sui-link-button__icon\" [name]=\"rightIcon()!\" [size]=\"iconSize()\" />\n  }\n</ng-template>\n\n@if (isAnchor()) {\n  <a\n    class=\"sui-link-button__el\"\n    [suiHref]=\"href()\"\n    [attr.target]=\"target()\"\n    [attr.rel]=\"rel()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (click)=\"onClick($event)\"\n    (touchstart)=\"$event.currentTarget\"\n    (touchend)=\"$any($event.currentTarget).blur()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"inner\" />\n  </a>\n} @else {\n  <button\n    class=\"sui-link-button__el\"\n    [type]=\"type()\"\n    [disabled]=\"disabled() || null\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (click)=\"onClick($event)\"\n    (touchstart)=\"$event.currentTarget\"\n    (touchend)=\"$any($event.currentTarget).blur()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"inner\" />\n  </button>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;justify-content:center;vertical-align:baseline}.sui-link-button__el{appearance:none;margin:0;padding:0;border:0;background:transparent;text-decoration:none;cursor:pointer;color:inherit;display:inline-flex;align-items:center;justify-content:center;gap:4px;white-space:nowrap;word-break:break-word;font-family:var(--sui-font-sans);font-style:normal;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;color:var(--sui-link-button-color, currentColor);transition:transform var(--dur-instant, 80ms) var(--ease-ek, cubic-bezier(.22, 1, .36, 1))}.sui-link-button__el:active:not(:disabled){transform:scale(.97)}.sui-link-button__el:hover:not(:disabled){color:var(--sui-link-button-color-hover, var(--sui-link-button-color))}.sui-link-button__el:focus-visible:not(:disabled){outline:none;color:var(--sui-link-button-color-focus, var(--sui-link-button-color))}.sui-link-button__el:disabled{cursor:not-allowed}.sui-link-button__el:hover:not(:disabled) .sui-link-button__text:after,.sui-link-button__el:focus-visible:not(:disabled) .sui-link-button__text:after{opacity:1}.sui-link-button__icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}.sui-link-button__text{position:relative;display:inline-block}.sui-link-button__text:after{content:\"\";position:absolute;left:0;right:0;bottom:-1px;height:1px;background-color:currentColor;opacity:0;pointer-events:none}:host([data-sui-size=medium]) .sui-link-button__el{font-size:var(--sui-type-label-sm-size, 14px);line-height:var(--sui-type-label-sm-line, 20px);letter-spacing:var(--sui-type-label-sm-spacing, -.006em);font-weight:var(--sui-type-label-sm-weight, 500)}:host([data-sui-size=medium]) .sui-link-button__icon{width:20px;height:20px}:host([data-sui-size=small]) .sui-link-button__el{font-size:var(--sui-type-label-xs-size, 12px);line-height:var(--sui-type-label-xs-line, 16px);letter-spacing:var(--sui-type-label-xs-spacing, 0);font-weight:var(--sui-type-label-xs-weight, 500)}:host([data-sui-size=small]) .sui-link-button__icon{width:16px;height:16px}:host([data-sui-variant=gray]){--sui-link-button-color: var(--sui-text-sub-600);--sui-link-button-color-hover: var(--sui-text-sub-600);--sui-link-button-color-focus: var(--sui-text-strong-950)}:host([data-sui-variant=black]){--sui-link-button-color: var(--sui-text-strong-950);--sui-link-button-color-hover: var(--sui-text-strong-950);--sui-link-button-color-focus: var(--sui-text-strong-950)}:host([data-sui-variant=primary]){--sui-link-button-color: var(--sui-primary-base);--sui-link-button-color-hover: var(--sui-primary-dark);--sui-link-button-color-focus: var(--sui-primary-base)}:host([data-sui-variant=error]){--sui-link-button-color: var(--sui-state-error-base);--sui-link-button-color-hover: var(--sui-red-700);--sui-link-button-color-focus: var(--sui-state-error-base)}:host([data-sui-variant=modifiable]){--sui-link-button-color: currentColor;--sui-link-button-color-hover: currentColor;--sui-link-button-color-focus: currentColor}:host([data-sui-underline]) .sui-link-button__text:after{opacity:1}:host([data-sui-disabled]) .sui-link-button__el,.sui-link-button__el:disabled{color:var(--sui-text-disabled-300);cursor:not-allowed}:host([data-sui-disabled]) .sui-link-button__el:hover,:host([data-sui-disabled]) .sui-link-button__el:focus-visible,.sui-link-button__el:disabled:hover,.sui-link-button__el:disabled:focus-visible{color:var(--sui-text-disabled-300)}:host([data-sui-disabled]) .sui-link-button__el .sui-link-button__text:after,.sui-link-button__el:disabled .sui-link-button__text:after{opacity:0}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: SuiHref, selector: "a[suiHref]", inputs: ["suiHref"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiLinkButton, decorators: [{
             type: Component,
-            args: [{ selector: 'sui-link-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SuiIcon, NgTemplateOutlet], host: {
+            args: [{ selector: 'sui-link-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SuiIcon, NgTemplateOutlet, SuiHref], host: {
                         '[attr.data-sui-variant]': 'variant()',
                         '[attr.data-sui-size]': 'size()',
                         '[attr.data-sui-underline]': 'underline() ? "" : null',
                         '[attr.data-sui-disabled]': 'disabled() ? "" : null',
-                    }, template: "<!-- Contenido compartido por ambas ramas (a/button). Un \u00FAnico <ng-content/> :\n     Angular asigna la proyecci\u00F3n est\u00E1ticamente a UN solo outlet, as\u00ED que con\n     dos <ng-content/> (uno por rama del @if) la rama <a> quedaba SIN texto.\n     ng-template + ngTemplateOutlet re-proyecta en la rama activa. -->\n<ng-template #inner>\n  @if (leftIcon()) {\n    <sui-icon class=\"sui-link-button__icon\" [name]=\"leftIcon()!\" [size]=\"iconSize()\" />\n  }\n  <span class=\"sui-link-button__text\"><ng-content /></span>\n  @if (rightIcon()) {\n    <sui-icon class=\"sui-link-button__icon\" [name]=\"rightIcon()!\" [size]=\"iconSize()\" />\n  }\n</ng-template>\n\n@if (isAnchor()) {\n  <a\n    class=\"sui-link-button__el\"\n    [href]=\"href()\"\n    [attr.target]=\"target()\"\n    [attr.rel]=\"rel()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (click)=\"onClick($event)\"\n    (touchstart)=\"$event.currentTarget\"\n    (touchend)=\"$any($event.currentTarget).blur()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"inner\" />\n  </a>\n} @else {\n  <button\n    class=\"sui-link-button__el\"\n    [type]=\"type()\"\n    [disabled]=\"disabled() || null\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (click)=\"onClick($event)\"\n    (touchstart)=\"$event.currentTarget\"\n    (touchend)=\"$any($event.currentTarget).blur()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"inner\" />\n  </button>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;justify-content:center;vertical-align:baseline}.sui-link-button__el{appearance:none;margin:0;padding:0;border:0;background:transparent;text-decoration:none;cursor:pointer;color:inherit;display:inline-flex;align-items:center;justify-content:center;gap:4px;white-space:nowrap;word-break:break-word;font-family:var(--sui-font-sans);font-style:normal;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;color:var(--sui-link-button-color, currentColor);transition:transform var(--dur-instant, 80ms) var(--ease-ek, cubic-bezier(.22, 1, .36, 1))}.sui-link-button__el:active:not(:disabled){transform:scale(.97)}.sui-link-button__el:hover:not(:disabled){color:var(--sui-link-button-color-hover, var(--sui-link-button-color))}.sui-link-button__el:focus-visible:not(:disabled){outline:none;color:var(--sui-link-button-color-focus, var(--sui-link-button-color))}.sui-link-button__el:disabled{cursor:not-allowed}.sui-link-button__el:hover:not(:disabled) .sui-link-button__text:after,.sui-link-button__el:focus-visible:not(:disabled) .sui-link-button__text:after{opacity:1}.sui-link-button__icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}.sui-link-button__text{position:relative;display:inline-block}.sui-link-button__text:after{content:\"\";position:absolute;left:0;right:0;bottom:-1px;height:1px;background-color:currentColor;opacity:0;pointer-events:none}:host([data-sui-size=medium]) .sui-link-button__el{font-size:var(--sui-type-label-sm-size, 14px);line-height:var(--sui-type-label-sm-line, 20px);letter-spacing:var(--sui-type-label-sm-spacing, -.006em);font-weight:var(--sui-type-label-sm-weight, 500)}:host([data-sui-size=medium]) .sui-link-button__icon{width:20px;height:20px}:host([data-sui-size=small]) .sui-link-button__el{font-size:var(--sui-type-label-xs-size, 12px);line-height:var(--sui-type-label-xs-line, 16px);letter-spacing:var(--sui-type-label-xs-spacing, 0);font-weight:var(--sui-type-label-xs-weight, 500)}:host([data-sui-size=small]) .sui-link-button__icon{width:16px;height:16px}:host([data-sui-variant=gray]){--sui-link-button-color: var(--sui-text-sub-600);--sui-link-button-color-hover: var(--sui-text-sub-600);--sui-link-button-color-focus: var(--sui-text-strong-950)}:host([data-sui-variant=black]){--sui-link-button-color: var(--sui-text-strong-950);--sui-link-button-color-hover: var(--sui-text-strong-950);--sui-link-button-color-focus: var(--sui-text-strong-950)}:host([data-sui-variant=primary]){--sui-link-button-color: var(--sui-primary-base);--sui-link-button-color-hover: var(--sui-primary-dark);--sui-link-button-color-focus: var(--sui-primary-base)}:host([data-sui-variant=error]){--sui-link-button-color: var(--sui-state-error-base);--sui-link-button-color-hover: var(--sui-red-700);--sui-link-button-color-focus: var(--sui-state-error-base)}:host([data-sui-variant=modifiable]){--sui-link-button-color: currentColor;--sui-link-button-color-hover: currentColor;--sui-link-button-color-focus: currentColor}:host([data-sui-underline]) .sui-link-button__text:after{opacity:1}:host([data-sui-disabled]) .sui-link-button__el,.sui-link-button__el:disabled{color:var(--sui-text-disabled-300);cursor:not-allowed}:host([data-sui-disabled]) .sui-link-button__el:hover,:host([data-sui-disabled]) .sui-link-button__el:focus-visible,.sui-link-button__el:disabled:hover,.sui-link-button__el:disabled:focus-visible{color:var(--sui-text-disabled-300)}:host([data-sui-disabled]) .sui-link-button__el .sui-link-button__text:after,.sui-link-button__el:disabled .sui-link-button__text:after{opacity:0}\n"] }]
+                    }, template: "<!-- Contenido compartido por ambas ramas (a/button). Un \u00FAnico <ng-content/> :\n     Angular asigna la proyecci\u00F3n est\u00E1ticamente a UN solo outlet, as\u00ED que con\n     dos <ng-content/> (uno por rama del @if) la rama <a> quedaba SIN texto.\n     ng-template + ngTemplateOutlet re-proyecta en la rama activa. -->\n<ng-template #inner>\n  @if (leftIcon()) {\n    <sui-icon class=\"sui-link-button__icon\" [name]=\"leftIcon()!\" [size]=\"iconSize()\" />\n  }\n  <span class=\"sui-link-button__text\"><ng-content /></span>\n  @if (rightIcon()) {\n    <sui-icon class=\"sui-link-button__icon\" [name]=\"rightIcon()!\" [size]=\"iconSize()\" />\n  }\n</ng-template>\n\n@if (isAnchor()) {\n  <a\n    class=\"sui-link-button__el\"\n    [suiHref]=\"href()\"\n    [attr.target]=\"target()\"\n    [attr.rel]=\"rel()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (click)=\"onClick($event)\"\n    (touchstart)=\"$event.currentTarget\"\n    (touchend)=\"$any($event.currentTarget).blur()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"inner\" />\n  </a>\n} @else {\n  <button\n    class=\"sui-link-button__el\"\n    [type]=\"type()\"\n    [disabled]=\"disabled() || null\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (click)=\"onClick($event)\"\n    (touchstart)=\"$event.currentTarget\"\n    (touchend)=\"$any($event.currentTarget).blur()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"inner\" />\n  </button>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;justify-content:center;vertical-align:baseline}.sui-link-button__el{appearance:none;margin:0;padding:0;border:0;background:transparent;text-decoration:none;cursor:pointer;color:inherit;display:inline-flex;align-items:center;justify-content:center;gap:4px;white-space:nowrap;word-break:break-word;font-family:var(--sui-font-sans);font-style:normal;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;color:var(--sui-link-button-color, currentColor);transition:transform var(--dur-instant, 80ms) var(--ease-ek, cubic-bezier(.22, 1, .36, 1))}.sui-link-button__el:active:not(:disabled){transform:scale(.97)}.sui-link-button__el:hover:not(:disabled){color:var(--sui-link-button-color-hover, var(--sui-link-button-color))}.sui-link-button__el:focus-visible:not(:disabled){outline:none;color:var(--sui-link-button-color-focus, var(--sui-link-button-color))}.sui-link-button__el:disabled{cursor:not-allowed}.sui-link-button__el:hover:not(:disabled) .sui-link-button__text:after,.sui-link-button__el:focus-visible:not(:disabled) .sui-link-button__text:after{opacity:1}.sui-link-button__icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}.sui-link-button__text{position:relative;display:inline-block}.sui-link-button__text:after{content:\"\";position:absolute;left:0;right:0;bottom:-1px;height:1px;background-color:currentColor;opacity:0;pointer-events:none}:host([data-sui-size=medium]) .sui-link-button__el{font-size:var(--sui-type-label-sm-size, 14px);line-height:var(--sui-type-label-sm-line, 20px);letter-spacing:var(--sui-type-label-sm-spacing, -.006em);font-weight:var(--sui-type-label-sm-weight, 500)}:host([data-sui-size=medium]) .sui-link-button__icon{width:20px;height:20px}:host([data-sui-size=small]) .sui-link-button__el{font-size:var(--sui-type-label-xs-size, 12px);line-height:var(--sui-type-label-xs-line, 16px);letter-spacing:var(--sui-type-label-xs-spacing, 0);font-weight:var(--sui-type-label-xs-weight, 500)}:host([data-sui-size=small]) .sui-link-button__icon{width:16px;height:16px}:host([data-sui-variant=gray]){--sui-link-button-color: var(--sui-text-sub-600);--sui-link-button-color-hover: var(--sui-text-sub-600);--sui-link-button-color-focus: var(--sui-text-strong-950)}:host([data-sui-variant=black]){--sui-link-button-color: var(--sui-text-strong-950);--sui-link-button-color-hover: var(--sui-text-strong-950);--sui-link-button-color-focus: var(--sui-text-strong-950)}:host([data-sui-variant=primary]){--sui-link-button-color: var(--sui-primary-base);--sui-link-button-color-hover: var(--sui-primary-dark);--sui-link-button-color-focus: var(--sui-primary-base)}:host([data-sui-variant=error]){--sui-link-button-color: var(--sui-state-error-base);--sui-link-button-color-hover: var(--sui-red-700);--sui-link-button-color-focus: var(--sui-state-error-base)}:host([data-sui-variant=modifiable]){--sui-link-button-color: currentColor;--sui-link-button-color-hover: currentColor;--sui-link-button-color-focus: currentColor}:host([data-sui-underline]) .sui-link-button__text:after{opacity:1}:host([data-sui-disabled]) .sui-link-button__el,.sui-link-button__el:disabled{color:var(--sui-text-disabled-300);cursor:not-allowed}:host([data-sui-disabled]) .sui-link-button__el:hover,:host([data-sui-disabled]) .sui-link-button__el:focus-visible,.sui-link-button__el:disabled:hover,.sui-link-button__el:disabled:focus-visible{color:var(--sui-text-disabled-300)}:host([data-sui-disabled]) .sui-link-button__el .sui-link-button__text:after,.sui-link-button__el:disabled .sui-link-button__text:after{opacity:0}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], underline: [{ type: i0.Input, args: [{ isSignal: true, alias: "underline", 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 }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], rel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rel", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
 
 // xlarge: project extension (no-Figma), sigue el patrón Δ4px de sui-checkbox/radio/switch
@@ -1128,16 +1182,16 @@ class SuiCompactButton {
         this.clicked.emit(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiCompactButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiCompactButton, isStandalone: true, selector: "sui-compact-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, variantStyle: { classPropertyName: "variantStyle", publicName: "variantStyle", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fullRadius: { classPropertyName: "fullRadius", publicName: "fullRadius", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, rel: { classPropertyName: "rel", publicName: "rel", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "attr.data-sui-style": "variantStyle()", "attr.data-sui-size": "size()", "attr.data-sui-full-radius": "fullRadius() ? \"\" : null", "attr.data-sui-disabled": "disabled() ? \"\" : null" } }, ngImport: i0, template: "@if (isAnchor()) {\n  <a\n    class=\"sui-compact-button__el\"\n    [href]=\"href()\"\n    [attr.target]=\"target()\"\n    [attr.rel]=\"rel()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (click)=\"onClick($event)\"\n    (touchstart)=\"$event.currentTarget\"\n    (touchend)=\"$any($event.currentTarget).blur()\"\n  >\n    <sui-icon [name]=\"icon()\" [size]=\"iconSize()\" />\n  </a>\n} @else {\n  <button\n    class=\"sui-compact-button__el\"\n    [type]=\"type()\"\n    [disabled]=\"disabled() || null\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (click)=\"onClick($event)\"\n    (touchstart)=\"$event.currentTarget\"\n    (touchend)=\"$any($event.currentTarget).blur()\"\n  >\n    <sui-icon [name]=\"icon()\" [size]=\"iconSize()\" />\n  </button>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;vertical-align:middle}.sui-compact-button__el{appearance:none;display:inline-flex;align-items:center;justify-content:center;margin:0;padding:2px;border:0;background:transparent;color:inherit;text-decoration:none;cursor:pointer;box-sizing:border-box;border-radius:var(--sui-radius-6, 6px);transition:background .12s,border-color .12s,color .12s,box-shadow .12s,transform var(--dur-instant, 80ms) var(--ease-ek, cubic-bezier(.22, 1, .36, 1))}.sui-compact-button__el:active:not(:disabled){transform:scale(.92)}.sui-compact-button__el:disabled{cursor:not-allowed}:host .sui-compact-button__el:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}:host([data-sui-size=xlarge]) .sui-compact-button__el{width:28px;height:28px}:host([data-sui-size=large]) .sui-compact-button__el{width:24px;height:24px}:host([data-sui-size=medium]) .sui-compact-button__el{width:20px;height:20px}:host([data-sui-full-radius]) .sui-compact-button__el{border-radius:var(--sui-radius-full, 999px)}:host([data-sui-style=stroke]) .sui-compact-button__el{background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);color:var(--sui-icon-sub-600);box-shadow:var(--sui-regular-shadow-x-small)}:host([data-sui-style=stroke]) .sui-compact-button__el:hover:not(:disabled){background:var(--sui-bg-weak-50);border-color:transparent;color:var(--sui-icon-strong-950)}:host([data-sui-style=stroke]) .sui-compact-button__el:active:not(:disabled){background:var(--sui-bg-surface-800);border-color:transparent;color:var(--sui-icon-white-0);box-shadow:none}:host([data-sui-style=ghost]) .sui-compact-button__el{background:transparent;color:var(--sui-icon-sub-600)}:host([data-sui-style=ghost]) .sui-compact-button__el:hover:not(:disabled){background:var(--sui-bg-weak-50);color:var(--sui-icon-strong-950)}:host([data-sui-style=ghost]) .sui-compact-button__el:active:not(:disabled){background:var(--sui-bg-surface-800);color:var(--sui-icon-white-0)}:host([data-sui-style=modifiable]) .sui-compact-button__el{background:transparent;color:currentColor}:host([data-sui-style=modifiable]) .sui-compact-button__el:hover:not(:disabled){background:var(--sui-compact-button-hover-bg, var(--sui-white-alpha-16))}:host([data-sui-style=modifiable]) .sui-compact-button__el:active:not(:disabled){background:var(--sui-compact-button-active-bg, var(--sui-white-alpha-16));border:1px solid var(--sui-static-white)}:host([data-sui-style=white]) .sui-compact-button__el{background:var(--sui-bg-white-0);color:var(--sui-icon-sub-600);box-shadow:var(--sui-regular-shadow-x-small)}:host([data-sui-style=white]) .sui-compact-button__el:hover:not(:disabled){background:var(--sui-bg-weak-50);color:var(--sui-icon-strong-950)}:host([data-sui-style=white]) .sui-compact-button__el:active:not(:disabled){background:var(--sui-bg-surface-800);color:var(--sui-icon-white-0);box-shadow:none}:host([data-sui-disabled]) .sui-compact-button__el,.sui-compact-button__el:disabled{color:var(--sui-icon-disabled-300);cursor:not-allowed;pointer-events:none;opacity:.5}\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: SuiCompactButton, isStandalone: true, selector: "sui-compact-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, variantStyle: { classPropertyName: "variantStyle", publicName: "variantStyle", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fullRadius: { classPropertyName: "fullRadius", publicName: "fullRadius", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, rel: { classPropertyName: "rel", publicName: "rel", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "attr.data-sui-style": "variantStyle()", "attr.data-sui-size": "size()", "attr.data-sui-full-radius": "fullRadius() ? \"\" : null", "attr.data-sui-disabled": "disabled() ? \"\" : null" } }, ngImport: i0, template: "@if (isAnchor()) {\n  <a\n    class=\"sui-compact-button__el\"\n    [suiHref]=\"href()\"\n    [attr.target]=\"target()\"\n    [attr.rel]=\"rel()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (click)=\"onClick($event)\"\n    (touchstart)=\"$event.currentTarget\"\n    (touchend)=\"$any($event.currentTarget).blur()\"\n  >\n    <sui-icon [name]=\"icon()\" [size]=\"iconSize()\" />\n  </a>\n} @else {\n  <button\n    class=\"sui-compact-button__el\"\n    [type]=\"type()\"\n    [disabled]=\"disabled() || null\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (click)=\"onClick($event)\"\n    (touchstart)=\"$event.currentTarget\"\n    (touchend)=\"$any($event.currentTarget).blur()\"\n  >\n    <sui-icon [name]=\"icon()\" [size]=\"iconSize()\" />\n  </button>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;vertical-align:middle}.sui-compact-button__el{appearance:none;display:inline-flex;align-items:center;justify-content:center;margin:0;padding:2px;border:0;background:transparent;color:inherit;text-decoration:none;cursor:pointer;box-sizing:border-box;border-radius:var(--sui-radius-6, 6px);transition:background .12s,border-color .12s,color .12s,box-shadow .12s,transform var(--dur-instant, 80ms) var(--ease-ek, cubic-bezier(.22, 1, .36, 1))}.sui-compact-button__el:active:not(:disabled){transform:scale(.92)}.sui-compact-button__el:disabled{cursor:not-allowed}:host .sui-compact-button__el:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}:host([data-sui-size=xlarge]) .sui-compact-button__el{width:28px;height:28px}:host([data-sui-size=large]) .sui-compact-button__el{width:24px;height:24px}:host([data-sui-size=medium]) .sui-compact-button__el{width:20px;height:20px}:host([data-sui-full-radius]) .sui-compact-button__el{border-radius:var(--sui-radius-full, 999px)}:host([data-sui-style=stroke]) .sui-compact-button__el{background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);color:var(--sui-icon-sub-600);box-shadow:var(--sui-regular-shadow-x-small)}:host([data-sui-style=stroke]) .sui-compact-button__el:hover:not(:disabled){background:var(--sui-bg-weak-50);border-color:transparent;color:var(--sui-icon-strong-950)}:host([data-sui-style=stroke]) .sui-compact-button__el:active:not(:disabled){background:var(--sui-bg-surface-800);border-color:transparent;color:var(--sui-icon-white-0);box-shadow:none}:host([data-sui-style=ghost]) .sui-compact-button__el{background:transparent;color:var(--sui-icon-sub-600)}:host([data-sui-style=ghost]) .sui-compact-button__el:hover:not(:disabled){background:var(--sui-bg-weak-50);color:var(--sui-icon-strong-950)}:host([data-sui-style=ghost]) .sui-compact-button__el:active:not(:disabled){background:var(--sui-bg-surface-800);color:var(--sui-icon-white-0)}:host([data-sui-style=modifiable]) .sui-compact-button__el{background:transparent;color:currentColor}:host([data-sui-style=modifiable]) .sui-compact-button__el:hover:not(:disabled){background:var(--sui-compact-button-hover-bg, var(--sui-white-alpha-16))}:host([data-sui-style=modifiable]) .sui-compact-button__el:active:not(:disabled){background:var(--sui-compact-button-active-bg, var(--sui-white-alpha-16));border:1px solid var(--sui-static-white)}:host([data-sui-style=white]) .sui-compact-button__el{background:var(--sui-bg-white-0);color:var(--sui-icon-sub-600);box-shadow:var(--sui-regular-shadow-x-small)}:host([data-sui-style=white]) .sui-compact-button__el:hover:not(:disabled){background:var(--sui-bg-weak-50);color:var(--sui-icon-strong-950)}:host([data-sui-style=white]) .sui-compact-button__el:active:not(:disabled){background:var(--sui-bg-surface-800);color:var(--sui-icon-white-0);box-shadow:none}:host([data-sui-disabled]) .sui-compact-button__el,.sui-compact-button__el:disabled{color:var(--sui-icon-disabled-300);cursor:not-allowed;pointer-events:none;opacity:.5}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "directive", type: SuiHref, selector: "a[suiHref]", inputs: ["suiHref"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiCompactButton, decorators: [{
             type: Component,
-            args: [{ selector: 'sui-compact-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SuiIcon], host: {
+            args: [{ selector: 'sui-compact-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SuiIcon, SuiHref], host: {
                         '[attr.data-sui-style]': 'variantStyle()',
                         '[attr.data-sui-size]': 'size()',
                         '[attr.data-sui-full-radius]': 'fullRadius() ? "" : null',
                         '[attr.data-sui-disabled]': 'disabled() ? "" : null',
-                    }, template: "@if (isAnchor()) {\n  <a\n    class=\"sui-compact-button__el\"\n    [href]=\"href()\"\n    [attr.target]=\"target()\"\n    [attr.rel]=\"rel()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (click)=\"onClick($event)\"\n    (touchstart)=\"$event.currentTarget\"\n    (touchend)=\"$any($event.currentTarget).blur()\"\n  >\n    <sui-icon [name]=\"icon()\" [size]=\"iconSize()\" />\n  </a>\n} @else {\n  <button\n    class=\"sui-compact-button__el\"\n    [type]=\"type()\"\n    [disabled]=\"disabled() || null\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (click)=\"onClick($event)\"\n    (touchstart)=\"$event.currentTarget\"\n    (touchend)=\"$any($event.currentTarget).blur()\"\n  >\n    <sui-icon [name]=\"icon()\" [size]=\"iconSize()\" />\n  </button>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;vertical-align:middle}.sui-compact-button__el{appearance:none;display:inline-flex;align-items:center;justify-content:center;margin:0;padding:2px;border:0;background:transparent;color:inherit;text-decoration:none;cursor:pointer;box-sizing:border-box;border-radius:var(--sui-radius-6, 6px);transition:background .12s,border-color .12s,color .12s,box-shadow .12s,transform var(--dur-instant, 80ms) var(--ease-ek, cubic-bezier(.22, 1, .36, 1))}.sui-compact-button__el:active:not(:disabled){transform:scale(.92)}.sui-compact-button__el:disabled{cursor:not-allowed}:host .sui-compact-button__el:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}:host([data-sui-size=xlarge]) .sui-compact-button__el{width:28px;height:28px}:host([data-sui-size=large]) .sui-compact-button__el{width:24px;height:24px}:host([data-sui-size=medium]) .sui-compact-button__el{width:20px;height:20px}:host([data-sui-full-radius]) .sui-compact-button__el{border-radius:var(--sui-radius-full, 999px)}:host([data-sui-style=stroke]) .sui-compact-button__el{background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);color:var(--sui-icon-sub-600);box-shadow:var(--sui-regular-shadow-x-small)}:host([data-sui-style=stroke]) .sui-compact-button__el:hover:not(:disabled){background:var(--sui-bg-weak-50);border-color:transparent;color:var(--sui-icon-strong-950)}:host([data-sui-style=stroke]) .sui-compact-button__el:active:not(:disabled){background:var(--sui-bg-surface-800);border-color:transparent;color:var(--sui-icon-white-0);box-shadow:none}:host([data-sui-style=ghost]) .sui-compact-button__el{background:transparent;color:var(--sui-icon-sub-600)}:host([data-sui-style=ghost]) .sui-compact-button__el:hover:not(:disabled){background:var(--sui-bg-weak-50);color:var(--sui-icon-strong-950)}:host([data-sui-style=ghost]) .sui-compact-button__el:active:not(:disabled){background:var(--sui-bg-surface-800);color:var(--sui-icon-white-0)}:host([data-sui-style=modifiable]) .sui-compact-button__el{background:transparent;color:currentColor}:host([data-sui-style=modifiable]) .sui-compact-button__el:hover:not(:disabled){background:var(--sui-compact-button-hover-bg, var(--sui-white-alpha-16))}:host([data-sui-style=modifiable]) .sui-compact-button__el:active:not(:disabled){background:var(--sui-compact-button-active-bg, var(--sui-white-alpha-16));border:1px solid var(--sui-static-white)}:host([data-sui-style=white]) .sui-compact-button__el{background:var(--sui-bg-white-0);color:var(--sui-icon-sub-600);box-shadow:var(--sui-regular-shadow-x-small)}:host([data-sui-style=white]) .sui-compact-button__el:hover:not(:disabled){background:var(--sui-bg-weak-50);color:var(--sui-icon-strong-950)}:host([data-sui-style=white]) .sui-compact-button__el:active:not(:disabled){background:var(--sui-bg-surface-800);color:var(--sui-icon-white-0);box-shadow:none}:host([data-sui-disabled]) .sui-compact-button__el,.sui-compact-button__el:disabled{color:var(--sui-icon-disabled-300);cursor:not-allowed;pointer-events:none;opacity:.5}\n"] }]
+                    }, template: "@if (isAnchor()) {\n  <a\n    class=\"sui-compact-button__el\"\n    [suiHref]=\"href()\"\n    [attr.target]=\"target()\"\n    [attr.rel]=\"rel()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (click)=\"onClick($event)\"\n    (touchstart)=\"$event.currentTarget\"\n    (touchend)=\"$any($event.currentTarget).blur()\"\n  >\n    <sui-icon [name]=\"icon()\" [size]=\"iconSize()\" />\n  </a>\n} @else {\n  <button\n    class=\"sui-compact-button__el\"\n    [type]=\"type()\"\n    [disabled]=\"disabled() || null\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (click)=\"onClick($event)\"\n    (touchstart)=\"$event.currentTarget\"\n    (touchend)=\"$any($event.currentTarget).blur()\"\n  >\n    <sui-icon [name]=\"icon()\" [size]=\"iconSize()\" />\n  </button>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;vertical-align:middle}.sui-compact-button__el{appearance:none;display:inline-flex;align-items:center;justify-content:center;margin:0;padding:2px;border:0;background:transparent;color:inherit;text-decoration:none;cursor:pointer;box-sizing:border-box;border-radius:var(--sui-radius-6, 6px);transition:background .12s,border-color .12s,color .12s,box-shadow .12s,transform var(--dur-instant, 80ms) var(--ease-ek, cubic-bezier(.22, 1, .36, 1))}.sui-compact-button__el:active:not(:disabled){transform:scale(.92)}.sui-compact-button__el:disabled{cursor:not-allowed}:host .sui-compact-button__el:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}:host([data-sui-size=xlarge]) .sui-compact-button__el{width:28px;height:28px}:host([data-sui-size=large]) .sui-compact-button__el{width:24px;height:24px}:host([data-sui-size=medium]) .sui-compact-button__el{width:20px;height:20px}:host([data-sui-full-radius]) .sui-compact-button__el{border-radius:var(--sui-radius-full, 999px)}:host([data-sui-style=stroke]) .sui-compact-button__el{background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);color:var(--sui-icon-sub-600);box-shadow:var(--sui-regular-shadow-x-small)}:host([data-sui-style=stroke]) .sui-compact-button__el:hover:not(:disabled){background:var(--sui-bg-weak-50);border-color:transparent;color:var(--sui-icon-strong-950)}:host([data-sui-style=stroke]) .sui-compact-button__el:active:not(:disabled){background:var(--sui-bg-surface-800);border-color:transparent;color:var(--sui-icon-white-0);box-shadow:none}:host([data-sui-style=ghost]) .sui-compact-button__el{background:transparent;color:var(--sui-icon-sub-600)}:host([data-sui-style=ghost]) .sui-compact-button__el:hover:not(:disabled){background:var(--sui-bg-weak-50);color:var(--sui-icon-strong-950)}:host([data-sui-style=ghost]) .sui-compact-button__el:active:not(:disabled){background:var(--sui-bg-surface-800);color:var(--sui-icon-white-0)}:host([data-sui-style=modifiable]) .sui-compact-button__el{background:transparent;color:currentColor}:host([data-sui-style=modifiable]) .sui-compact-button__el:hover:not(:disabled){background:var(--sui-compact-button-hover-bg, var(--sui-white-alpha-16))}:host([data-sui-style=modifiable]) .sui-compact-button__el:active:not(:disabled){background:var(--sui-compact-button-active-bg, var(--sui-white-alpha-16));border:1px solid var(--sui-static-white)}:host([data-sui-style=white]) .sui-compact-button__el{background:var(--sui-bg-white-0);color:var(--sui-icon-sub-600);box-shadow:var(--sui-regular-shadow-x-small)}:host([data-sui-style=white]) .sui-compact-button__el:hover:not(:disabled){background:var(--sui-bg-weak-50);color:var(--sui-icon-strong-950)}:host([data-sui-style=white]) .sui-compact-button__el:active:not(:disabled){background:var(--sui-bg-surface-800);color:var(--sui-icon-white-0);box-shadow:none}:host([data-sui-disabled]) .sui-compact-button__el,.sui-compact-button__el:disabled{color:var(--sui-icon-disabled-300);cursor:not-allowed;pointer-events:none;opacity:.5}\n"] }]
         }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], variantStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "variantStyle", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fullRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullRadius", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], rel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rel", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: true }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
 
 /**
@@ -1418,16 +1472,16 @@ class SuiAppStoreBadge {
     }, ...(ngDevMode ? [{ debugName: "alt" }] : /* istanbul ignore next */ []));
     isAnchor = computed(() => !!this.href() && !this.disabled(), ...(ngDevMode ? [{ debugName: "isAnchor" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiAppStoreBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiAppStoreBadge, isStandalone: true, selector: "sui-app-store-badge", inputs: { company: { classPropertyName: "company", publicName: "company", isSignal: true, isRequired: true, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, rel: { classPropertyName: "rel", publicName: "rel", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-sui-company": "company()", "attr.data-sui-appearance": "appearance()", "attr.data-sui-disabled": "disabled() ? \"\" : null", "style.--sui-app-store-badge-height": "heightPx()" } }, ngImport: i0, template: "@if (isAnchor()) {\n  <a\n    class=\"sui-app-store-badge__link\"\n    [attr.href]=\"href()\"\n    [attr.target]=\"target()\"\n    [attr.rel]=\"target() === '_blank' ? rel() : null\"\n    [attr.aria-label]=\"alt()\"\n    (touchstart)=\"$event.currentTarget\"\n    (touchend)=\"$any($event.currentTarget).blur()\"\n  >\n    <img class=\"sui-app-store-badge__img\" [src]=\"src()\" [alt]=\"alt()\" />\n  </a>\n} @else {\n  <img class=\"sui-app-store-badge__img\" [src]=\"src()\" [alt]=\"alt()\" />\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;vertical-align:middle;width:fit-content}.sui-app-store-badge__link,.sui-app-store-badge__img{display:block;height:var(--sui-app-store-badge-height, 40px);width:auto}.sui-app-store-badge__link{display:inline-flex;text-decoration:none;color:inherit;border-radius:8px;transition:transform .15s ease,opacity .15s ease;-webkit-tap-highlight-color:transparent}.sui-app-store-badge__link:hover{opacity:.85}.sui-app-store-badge__link:active{transform:scale(.97)}.sui-app-store-badge__link:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}.sui-app-store-badge__img{display:block;pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}:host([data-sui-disabled]) .sui-app-store-badge__img{opacity:.4;cursor:not-allowed}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiAppStoreBadge, isStandalone: true, selector: "sui-app-store-badge", inputs: { company: { classPropertyName: "company", publicName: "company", isSignal: true, isRequired: true, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, rel: { classPropertyName: "rel", publicName: "rel", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-sui-company": "company()", "attr.data-sui-appearance": "appearance()", "attr.data-sui-disabled": "disabled() ? \"\" : null", "style.--sui-app-store-badge-height": "heightPx()" } }, ngImport: i0, template: "@if (isAnchor()) {\n  <a\n    class=\"sui-app-store-badge__link\"\n    [suiHref]=\"href()\"\n    [attr.target]=\"target()\"\n    [attr.rel]=\"target() === '_blank' ? rel() : null\"\n    [attr.aria-label]=\"alt()\"\n    (touchstart)=\"$event.currentTarget\"\n    (touchend)=\"$any($event.currentTarget).blur()\"\n  >\n    <img class=\"sui-app-store-badge__img\" [src]=\"src()\" [alt]=\"alt()\" />\n  </a>\n} @else {\n  <img class=\"sui-app-store-badge__img\" [src]=\"src()\" [alt]=\"alt()\" />\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;vertical-align:middle;width:fit-content}.sui-app-store-badge__link,.sui-app-store-badge__img{display:block;height:var(--sui-app-store-badge-height, 40px);width:auto}.sui-app-store-badge__link{display:inline-flex;text-decoration:none;color:inherit;border-radius:8px;transition:transform .15s ease,opacity .15s ease;-webkit-tap-highlight-color:transparent}.sui-app-store-badge__link:hover{opacity:.85}.sui-app-store-badge__link:active{transform:scale(.97)}.sui-app-store-badge__link:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}.sui-app-store-badge__img{display:block;pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}:host([data-sui-disabled]) .sui-app-store-badge__img{opacity:.4;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: SuiHref, selector: "a[suiHref]", inputs: ["suiHref"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiAppStoreBadge, decorators: [{
             type: Component,
-            args: [{ selector: 'sui-app-store-badge', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'sui-app-store-badge', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SuiHref], host: {
                         '[attr.data-sui-company]': 'company()',
                         '[attr.data-sui-appearance]': 'appearance()',
                         '[attr.data-sui-disabled]': 'disabled() ? "" : null',
                         '[style.--sui-app-store-badge-height]': 'heightPx()',
-                    }, template: "@if (isAnchor()) {\n  <a\n    class=\"sui-app-store-badge__link\"\n    [attr.href]=\"href()\"\n    [attr.target]=\"target()\"\n    [attr.rel]=\"target() === '_blank' ? rel() : null\"\n    [attr.aria-label]=\"alt()\"\n    (touchstart)=\"$event.currentTarget\"\n    (touchend)=\"$any($event.currentTarget).blur()\"\n  >\n    <img class=\"sui-app-store-badge__img\" [src]=\"src()\" [alt]=\"alt()\" />\n  </a>\n} @else {\n  <img class=\"sui-app-store-badge__img\" [src]=\"src()\" [alt]=\"alt()\" />\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;vertical-align:middle;width:fit-content}.sui-app-store-badge__link,.sui-app-store-badge__img{display:block;height:var(--sui-app-store-badge-height, 40px);width:auto}.sui-app-store-badge__link{display:inline-flex;text-decoration:none;color:inherit;border-radius:8px;transition:transform .15s ease,opacity .15s ease;-webkit-tap-highlight-color:transparent}.sui-app-store-badge__link:hover{opacity:.85}.sui-app-store-badge__link:active{transform:scale(.97)}.sui-app-store-badge__link:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}.sui-app-store-badge__img{display:block;pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}:host([data-sui-disabled]) .sui-app-store-badge__img{opacity:.4;cursor:not-allowed}\n"] }]
+                    }, template: "@if (isAnchor()) {\n  <a\n    class=\"sui-app-store-badge__link\"\n    [suiHref]=\"href()\"\n    [attr.target]=\"target()\"\n    [attr.rel]=\"target() === '_blank' ? rel() : null\"\n    [attr.aria-label]=\"alt()\"\n    (touchstart)=\"$event.currentTarget\"\n    (touchend)=\"$any($event.currentTarget).blur()\"\n  >\n    <img class=\"sui-app-store-badge__img\" [src]=\"src()\" [alt]=\"alt()\" />\n  </a>\n} @else {\n  <img class=\"sui-app-store-badge__img\" [src]=\"src()\" [alt]=\"alt()\" />\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;vertical-align:middle;width:fit-content}.sui-app-store-badge__link,.sui-app-store-badge__img{display:block;height:var(--sui-app-store-badge-height, 40px);width:auto}.sui-app-store-badge__link{display:inline-flex;text-decoration:none;color:inherit;border-radius:8px;transition:transform .15s ease,opacity .15s ease;-webkit-tap-highlight-color:transparent}.sui-app-store-badge__link:hover{opacity:.85}.sui-app-store-badge__link:active{transform:scale(.97)}.sui-app-store-badge__link:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}.sui-app-store-badge__img{display:block;pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}:host([data-sui-disabled]) .sui-app-store-badge__img{opacity:.4;cursor:not-allowed}\n"] }]
         }], propDecorators: { company: [{ type: i0.Input, args: [{ isSignal: true, alias: "company", required: true }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], rel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rel", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 
 class SuiAvatarGroup {
@@ -1723,17 +1777,17 @@ class SuiBrandLogo {
     alt = computed(() => this.ariaLabel() ?? `${BRAND_DISPLAY_NAMES[this.company()]} logo`, ...(ngDevMode ? [{ debugName: "alt" }] : /* istanbul ignore next */ []));
     isAnchor = computed(() => !!this.href() && !this.disabled(), ...(ngDevMode ? [{ debugName: "isAnchor" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiBrandLogo, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiBrandLogo, isStandalone: true, selector: "sui-brand-logo", inputs: { company: { classPropertyName: "company", publicName: "company", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, rel: { classPropertyName: "rel", publicName: "rel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-sui-company": "company()", "attr.data-sui-variant": "variant()", "attr.data-sui-size": "size()", "attr.data-sui-disabled": "disabled() ? \"\" : null", "style.--sui-brand-logo-size": "sizePx()" } }, ngImport: i0, template: "@if (isAnchor()) {\n  <a\n    class=\"sui-brand-logo__el\"\n    [href]=\"href()\"\n    [attr.target]=\"target()\"\n    [attr.rel]=\"rel()\"\n    [attr.aria-label]=\"alt()\"\n    (touchstart)=\"$event.currentTarget\"\n    (touchend)=\"$any($event.currentTarget).blur()\"\n  >\n    <img class=\"sui-brand-logo__img\" [src]=\"src()\" [alt]=\"alt()\" />\n  </a>\n} @else {\n  <span class=\"sui-brand-logo__el\" [attr.aria-label]=\"alt()\">\n    <img class=\"sui-brand-logo__img\" [src]=\"src()\" [alt]=\"alt()\" />\n  </span>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;width:var(--sui-brand-logo-size, 24px);height:var(--sui-brand-logo-size, 24px);flex-shrink:0}.sui-brand-logo__el{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:inherit;color:inherit;text-decoration:none;cursor:default}.sui-brand-logo__el[href]{cursor:pointer;transition:opacity .12s,transform var(--dur-instant, 80ms) var(--ease-ek, cubic-bezier(.22, 1, .36, 1))}.sui-brand-logo__el[href]:hover{opacity:.85}.sui-brand-logo__el[href]:active{transform:scale(.97)}.sui-brand-logo__el[href]:active:not(:disabled),.sui-brand-logo__el[href]:focus-visible{outline:none;border-radius:4px;box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}.sui-brand-logo__img{display:block;width:100%;height:100%;object-fit:contain}:host([data-sui-disabled]) .sui-brand-logo__el{cursor:not-allowed;pointer-events:none}:host([data-sui-disabled]) .sui-brand-logo__img{opacity:.4;filter:grayscale(100%)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiBrandLogo, isStandalone: true, selector: "sui-brand-logo", inputs: { company: { classPropertyName: "company", publicName: "company", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, rel: { classPropertyName: "rel", publicName: "rel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-sui-company": "company()", "attr.data-sui-variant": "variant()", "attr.data-sui-size": "size()", "attr.data-sui-disabled": "disabled() ? \"\" : null", "style.--sui-brand-logo-size": "sizePx()" } }, ngImport: i0, template: "@if (isAnchor()) {\n  <a\n    class=\"sui-brand-logo__el\"\n    [suiHref]=\"href()\"\n    [attr.target]=\"target()\"\n    [attr.rel]=\"rel()\"\n    [attr.aria-label]=\"alt()\"\n    (touchstart)=\"$event.currentTarget\"\n    (touchend)=\"$any($event.currentTarget).blur()\"\n  >\n    <img class=\"sui-brand-logo__img\" [src]=\"src()\" [alt]=\"alt()\" />\n  </a>\n} @else {\n  <span class=\"sui-brand-logo__el\" [attr.aria-label]=\"alt()\">\n    <img class=\"sui-brand-logo__img\" [src]=\"src()\" [alt]=\"alt()\" />\n  </span>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;width:var(--sui-brand-logo-size, 24px);height:var(--sui-brand-logo-size, 24px);flex-shrink:0}.sui-brand-logo__el{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:inherit;color:inherit;text-decoration:none;cursor:default}.sui-brand-logo__el[href]{cursor:pointer;transition:opacity .12s,transform var(--dur-instant, 80ms) var(--ease-ek, cubic-bezier(.22, 1, .36, 1))}.sui-brand-logo__el[href]:hover{opacity:.85}.sui-brand-logo__el[href]:active{transform:scale(.97)}.sui-brand-logo__el[href]:active:not(:disabled),.sui-brand-logo__el[href]:focus-visible{outline:none;border-radius:4px;box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}.sui-brand-logo__img{display:block;width:100%;height:100%;object-fit:contain}:host([data-sui-disabled]) .sui-brand-logo__el{cursor:not-allowed;pointer-events:none}:host([data-sui-disabled]) .sui-brand-logo__img{opacity:.4;filter:grayscale(100%)}\n"], dependencies: [{ kind: "directive", type: SuiHref, selector: "a[suiHref]", inputs: ["suiHref"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiBrandLogo, decorators: [{
             type: Component,
-            args: [{ selector: 'sui-brand-logo', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'sui-brand-logo', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SuiHref], host: {
                         '[attr.data-sui-company]': 'company()',
                         '[attr.data-sui-variant]': 'variant()',
                         '[attr.data-sui-size]': 'size()',
                         '[attr.data-sui-disabled]': 'disabled() ? "" : null',
                         '[style.--sui-brand-logo-size]': 'sizePx()',
-                    }, template: "@if (isAnchor()) {\n  <a\n    class=\"sui-brand-logo__el\"\n    [href]=\"href()\"\n    [attr.target]=\"target()\"\n    [attr.rel]=\"rel()\"\n    [attr.aria-label]=\"alt()\"\n    (touchstart)=\"$event.currentTarget\"\n    (touchend)=\"$any($event.currentTarget).blur()\"\n  >\n    <img class=\"sui-brand-logo__img\" [src]=\"src()\" [alt]=\"alt()\" />\n  </a>\n} @else {\n  <span class=\"sui-brand-logo__el\" [attr.aria-label]=\"alt()\">\n    <img class=\"sui-brand-logo__img\" [src]=\"src()\" [alt]=\"alt()\" />\n  </span>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;width:var(--sui-brand-logo-size, 24px);height:var(--sui-brand-logo-size, 24px);flex-shrink:0}.sui-brand-logo__el{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:inherit;color:inherit;text-decoration:none;cursor:default}.sui-brand-logo__el[href]{cursor:pointer;transition:opacity .12s,transform var(--dur-instant, 80ms) var(--ease-ek, cubic-bezier(.22, 1, .36, 1))}.sui-brand-logo__el[href]:hover{opacity:.85}.sui-brand-logo__el[href]:active{transform:scale(.97)}.sui-brand-logo__el[href]:active:not(:disabled),.sui-brand-logo__el[href]:focus-visible{outline:none;border-radius:4px;box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}.sui-brand-logo__img{display:block;width:100%;height:100%;object-fit:contain}:host([data-sui-disabled]) .sui-brand-logo__el{cursor:not-allowed;pointer-events:none}:host([data-sui-disabled]) .sui-brand-logo__img{opacity:.4;filter:grayscale(100%)}\n"] }]
+                    }, template: "@if (isAnchor()) {\n  <a\n    class=\"sui-brand-logo__el\"\n    [suiHref]=\"href()\"\n    [attr.target]=\"target()\"\n    [attr.rel]=\"rel()\"\n    [attr.aria-label]=\"alt()\"\n    (touchstart)=\"$event.currentTarget\"\n    (touchend)=\"$any($event.currentTarget).blur()\"\n  >\n    <img class=\"sui-brand-logo__img\" [src]=\"src()\" [alt]=\"alt()\" />\n  </a>\n} @else {\n  <span class=\"sui-brand-logo__el\" [attr.aria-label]=\"alt()\">\n    <img class=\"sui-brand-logo__img\" [src]=\"src()\" [alt]=\"alt()\" />\n  </span>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;width:var(--sui-brand-logo-size, 24px);height:var(--sui-brand-logo-size, 24px);flex-shrink:0}.sui-brand-logo__el{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:inherit;color:inherit;text-decoration:none;cursor:default}.sui-brand-logo__el[href]{cursor:pointer;transition:opacity .12s,transform var(--dur-instant, 80ms) var(--ease-ek, cubic-bezier(.22, 1, .36, 1))}.sui-brand-logo__el[href]:hover{opacity:.85}.sui-brand-logo__el[href]:active{transform:scale(.97)}.sui-brand-logo__el[href]:active:not(:disabled),.sui-brand-logo__el[href]:focus-visible{outline:none;border-radius:4px;box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}.sui-brand-logo__img{display:block;width:100%;height:100%;object-fit:contain}:host([data-sui-disabled]) .sui-brand-logo__el{cursor:not-allowed;pointer-events:none}:host([data-sui-disabled]) .sui-brand-logo__img{opacity:.4;filter:grayscale(100%)}\n"] }]
         }], propDecorators: { company: [{ type: i0.Input, args: [{ isSignal: true, alias: "company", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], rel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 
 /**
@@ -1816,15 +1870,15 @@ class SuiBreadcrumbItem {
         this.clicked.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiBreadcrumbItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiBreadcrumbItem, isStandalone: true, selector: "sui-breadcrumb-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "attr.data-sui-state": "state()", "attr.data-sui-text": "hasText() ? \"\" : null", "attr.data-sui-icon": "hasIcon() ? \"\" : null" } }, ngImport: i0, template: "@if (active()) {\n  <span class=\"sui-breadcrumb-item__inner\" aria-current=\"page\" [attr.aria-label]=\"ariaLabel() || null\">\n    @if (hasIcon()) {\n      <sui-icon class=\"sui-breadcrumb-item__icon\" [name]=\"icon()\" [size]=\"20\" />\n    }\n    @if (hasText()) {\n      <span class=\"sui-breadcrumb-item__label\">{{ label() }}</span>\n    }\n  </span>\n} @else if (href()) {\n  <a\n    class=\"sui-breadcrumb-item__inner\"\n    [attr.href]=\"href()\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    (click)=\"onClick($event)\"\n    (touchstart)=\"$event.currentTarget\"\n    (touchend)=\"$any($event.currentTarget).blur()\"\n  >\n    @if (hasIcon()) {\n      <sui-icon class=\"sui-breadcrumb-item__icon\" [name]=\"icon()\" [size]=\"20\" />\n    }\n    @if (hasText()) {\n      <span class=\"sui-breadcrumb-item__label\">{{ label() }}</span>\n    }\n  </a>\n} @else {\n  <button\n    type=\"button\"\n    class=\"sui-breadcrumb-item__inner\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    (click)=\"onClick($event)\"\n    (touchstart)=\"$event.currentTarget\"\n    (touchend)=\"$any($event.currentTarget).blur()\"\n  >\n    @if (hasIcon()) {\n      <sui-icon class=\"sui-breadcrumb-item__icon\" [name]=\"icon()\" [size]=\"20\" />\n    }\n    @if (hasText()) {\n      <span class=\"sui-breadcrumb-item__label\">{{ label() }}</span>\n    }\n  </button>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-breadcrumb-item__inner{display:inline-flex;align-items:center;gap:0;padding:0;margin:0;background:transparent;border:none;appearance:none;font:inherit;text-align:left;text-decoration:none;cursor:pointer;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);color:var(--sui-text-sub-600);transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),text-decoration var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-text][data-sui-icon]) .sui-breadcrumb-item__inner{gap:6px}a.sui-breadcrumb-item__inner:hover,button.sui-breadcrumb-item__inner:hover{color:var(--sui-text-strong-950);font-feature-settings:\"cv09\" 1,\"ss11\" 1,\"calt\" 0,\"liga\" 0;text-decoration:underline;text-decoration-style:solid;text-decoration-thickness:from-font;text-decoration-skip-ink:none;text-underline-position:from-font}a.sui-breadcrumb-item__inner:focus-visible,button.sui-breadcrumb-item__inner:focus-visible{outline:2px solid var(--sui-stroke-strong-950);outline-offset:2px;border-radius:2px}button.sui-breadcrumb-item__inner:active{transform:none}:host([data-sui-state=active]) .sui-breadcrumb-item__inner{color:var(--sui-text-strong-950);cursor:default;text-decoration:none}.sui-breadcrumb-item__icon{flex-shrink:0}.sui-breadcrumb-item__label{white-space:nowrap}\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: SuiBreadcrumbItem, isStandalone: true, selector: "sui-breadcrumb-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "attr.data-sui-state": "state()", "attr.data-sui-text": "hasText() ? \"\" : null", "attr.data-sui-icon": "hasIcon() ? \"\" : null" } }, ngImport: i0, template: "@if (active()) {\n  <span class=\"sui-breadcrumb-item__inner\" aria-current=\"page\" [attr.aria-label]=\"ariaLabel() || null\">\n    @if (hasIcon()) {\n      <sui-icon class=\"sui-breadcrumb-item__icon\" [name]=\"icon()\" [size]=\"20\" />\n    }\n    @if (hasText()) {\n      <span class=\"sui-breadcrumb-item__label\">{{ label() }}</span>\n    }\n  </span>\n} @else if (href()) {\n  <a\n    class=\"sui-breadcrumb-item__inner\"\n    [suiHref]=\"href()\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    (click)=\"onClick($event)\"\n    (touchstart)=\"$event.currentTarget\"\n    (touchend)=\"$any($event.currentTarget).blur()\"\n  >\n    @if (hasIcon()) {\n      <sui-icon class=\"sui-breadcrumb-item__icon\" [name]=\"icon()\" [size]=\"20\" />\n    }\n    @if (hasText()) {\n      <span class=\"sui-breadcrumb-item__label\">{{ label() }}</span>\n    }\n  </a>\n} @else {\n  <button\n    type=\"button\"\n    class=\"sui-breadcrumb-item__inner\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    (click)=\"onClick($event)\"\n    (touchstart)=\"$event.currentTarget\"\n    (touchend)=\"$any($event.currentTarget).blur()\"\n  >\n    @if (hasIcon()) {\n      <sui-icon class=\"sui-breadcrumb-item__icon\" [name]=\"icon()\" [size]=\"20\" />\n    }\n    @if (hasText()) {\n      <span class=\"sui-breadcrumb-item__label\">{{ label() }}</span>\n    }\n  </button>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-breadcrumb-item__inner{display:inline-flex;align-items:center;gap:0;padding:0;margin:0;background:transparent;border:none;appearance:none;font:inherit;text-align:left;text-decoration:none;cursor:pointer;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);color:var(--sui-text-sub-600);transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),text-decoration var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-text][data-sui-icon]) .sui-breadcrumb-item__inner{gap:6px}a.sui-breadcrumb-item__inner:hover,button.sui-breadcrumb-item__inner:hover{color:var(--sui-text-strong-950);font-feature-settings:\"cv09\" 1,\"ss11\" 1,\"calt\" 0,\"liga\" 0;text-decoration:underline;text-decoration-style:solid;text-decoration-thickness:from-font;text-decoration-skip-ink:none;text-underline-position:from-font}a.sui-breadcrumb-item__inner:focus-visible,button.sui-breadcrumb-item__inner:focus-visible{outline:2px solid var(--sui-stroke-strong-950);outline-offset:2px;border-radius:2px}button.sui-breadcrumb-item__inner:active{transform:none}:host([data-sui-state=active]) .sui-breadcrumb-item__inner{color:var(--sui-text-strong-950);cursor:default;text-decoration:none}.sui-breadcrumb-item__icon{flex-shrink:0}.sui-breadcrumb-item__label{white-space:nowrap}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "directive", type: SuiHref, selector: "a[suiHref]", inputs: ["suiHref"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiBreadcrumbItem, decorators: [{
             type: Component,
-            args: [{ selector: 'sui-breadcrumb-item', standalone: true, imports: [SuiIcon], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'sui-breadcrumb-item', standalone: true, imports: [SuiIcon, SuiHref], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[attr.data-sui-state]': 'state()',
                         '[attr.data-sui-text]': 'hasText() ? "" : null',
                         '[attr.data-sui-icon]': 'hasIcon() ? "" : null',
-                    }, template: "@if (active()) {\n  <span class=\"sui-breadcrumb-item__inner\" aria-current=\"page\" [attr.aria-label]=\"ariaLabel() || null\">\n    @if (hasIcon()) {\n      <sui-icon class=\"sui-breadcrumb-item__icon\" [name]=\"icon()\" [size]=\"20\" />\n    }\n    @if (hasText()) {\n      <span class=\"sui-breadcrumb-item__label\">{{ label() }}</span>\n    }\n  </span>\n} @else if (href()) {\n  <a\n    class=\"sui-breadcrumb-item__inner\"\n    [attr.href]=\"href()\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    (click)=\"onClick($event)\"\n    (touchstart)=\"$event.currentTarget\"\n    (touchend)=\"$any($event.currentTarget).blur()\"\n  >\n    @if (hasIcon()) {\n      <sui-icon class=\"sui-breadcrumb-item__icon\" [name]=\"icon()\" [size]=\"20\" />\n    }\n    @if (hasText()) {\n      <span class=\"sui-breadcrumb-item__label\">{{ label() }}</span>\n    }\n  </a>\n} @else {\n  <button\n    type=\"button\"\n    class=\"sui-breadcrumb-item__inner\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    (click)=\"onClick($event)\"\n    (touchstart)=\"$event.currentTarget\"\n    (touchend)=\"$any($event.currentTarget).blur()\"\n  >\n    @if (hasIcon()) {\n      <sui-icon class=\"sui-breadcrumb-item__icon\" [name]=\"icon()\" [size]=\"20\" />\n    }\n    @if (hasText()) {\n      <span class=\"sui-breadcrumb-item__label\">{{ label() }}</span>\n    }\n  </button>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-breadcrumb-item__inner{display:inline-flex;align-items:center;gap:0;padding:0;margin:0;background:transparent;border:none;appearance:none;font:inherit;text-align:left;text-decoration:none;cursor:pointer;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);color:var(--sui-text-sub-600);transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),text-decoration var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-text][data-sui-icon]) .sui-breadcrumb-item__inner{gap:6px}a.sui-breadcrumb-item__inner:hover,button.sui-breadcrumb-item__inner:hover{color:var(--sui-text-strong-950);font-feature-settings:\"cv09\" 1,\"ss11\" 1,\"calt\" 0,\"liga\" 0;text-decoration:underline;text-decoration-style:solid;text-decoration-thickness:from-font;text-decoration-skip-ink:none;text-underline-position:from-font}a.sui-breadcrumb-item__inner:focus-visible,button.sui-breadcrumb-item__inner:focus-visible{outline:2px solid var(--sui-stroke-strong-950);outline-offset:2px;border-radius:2px}button.sui-breadcrumb-item__inner:active{transform:none}:host([data-sui-state=active]) .sui-breadcrumb-item__inner{color:var(--sui-text-strong-950);cursor:default;text-decoration:none}.sui-breadcrumb-item__icon{flex-shrink:0}.sui-breadcrumb-item__label{white-space:nowrap}\n"] }]
+                    }, template: "@if (active()) {\n  <span class=\"sui-breadcrumb-item__inner\" aria-current=\"page\" [attr.aria-label]=\"ariaLabel() || null\">\n    @if (hasIcon()) {\n      <sui-icon class=\"sui-breadcrumb-item__icon\" [name]=\"icon()\" [size]=\"20\" />\n    }\n    @if (hasText()) {\n      <span class=\"sui-breadcrumb-item__label\">{{ label() }}</span>\n    }\n  </span>\n} @else if (href()) {\n  <a\n    class=\"sui-breadcrumb-item__inner\"\n    [suiHref]=\"href()\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    (click)=\"onClick($event)\"\n    (touchstart)=\"$event.currentTarget\"\n    (touchend)=\"$any($event.currentTarget).blur()\"\n  >\n    @if (hasIcon()) {\n      <sui-icon class=\"sui-breadcrumb-item__icon\" [name]=\"icon()\" [size]=\"20\" />\n    }\n    @if (hasText()) {\n      <span class=\"sui-breadcrumb-item__label\">{{ label() }}</span>\n    }\n  </a>\n} @else {\n  <button\n    type=\"button\"\n    class=\"sui-breadcrumb-item__inner\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    (click)=\"onClick($event)\"\n    (touchstart)=\"$event.currentTarget\"\n    (touchend)=\"$any($event.currentTarget).blur()\"\n  >\n    @if (hasIcon()) {\n      <sui-icon class=\"sui-breadcrumb-item__icon\" [name]=\"icon()\" [size]=\"20\" />\n    }\n    @if (hasText()) {\n      <span class=\"sui-breadcrumb-item__label\">{{ label() }}</span>\n    }\n  </button>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-breadcrumb-item__inner{display:inline-flex;align-items:center;gap:0;padding:0;margin:0;background:transparent;border:none;appearance:none;font:inherit;text-align:left;text-decoration:none;cursor:pointer;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);color:var(--sui-text-sub-600);transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),text-decoration var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-text][data-sui-icon]) .sui-breadcrumb-item__inner{gap:6px}a.sui-breadcrumb-item__inner:hover,button.sui-breadcrumb-item__inner:hover{color:var(--sui-text-strong-950);font-feature-settings:\"cv09\" 1,\"ss11\" 1,\"calt\" 0,\"liga\" 0;text-decoration:underline;text-decoration-style:solid;text-decoration-thickness:from-font;text-decoration-skip-ink:none;text-underline-position:from-font}a.sui-breadcrumb-item__inner:focus-visible,button.sui-breadcrumb-item__inner:focus-visible{outline:2px solid var(--sui-stroke-strong-950);outline-offset:2px;border-radius:2px}button.sui-breadcrumb-item__inner:active{transform:none}:host([data-sui-state=active]) .sui-breadcrumb-item__inner{color:var(--sui-text-strong-950);cursor:default;text-decoration:none}.sui-breadcrumb-item__icon{flex-shrink:0}.sui-breadcrumb-item__label{white-space:nowrap}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
 
 /**
@@ -7941,15 +7995,15 @@ class SuiFancyButton {
         this.clicked.emit(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiFancyButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiFancyButton, isStandalone: true, selector: "sui-fancy-button", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", 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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, rel: { classPropertyName: "rel", publicName: "rel", isSignal: true, isRequired: false, transformFunction: null }, htmlType: { classPropertyName: "htmlType", publicName: "htmlType", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "attr.data-sui-type": "type()", "attr.data-sui-size": "size()", "attr.data-sui-disabled": "disabled() ? \"\" : null" } }, ngImport: i0, template: "@if (isAnchor()) {\n  <a\n    class=\"sui-fancy-button__el\"\n    [href]=\"href()\"\n    [attr.target]=\"target()\"\n    [attr.rel]=\"rel()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (click)=\"onClick($event)\"\n    (touchstart)=\"$event.currentTarget\"\n    (touchend)=\"$any($event.currentTarget).blur()\"\n  >\n    @if (leftIcon()) {\n      <sui-icon class=\"sui-fancy-button__icon\" [name]=\"leftIcon()!\" [size]=\"iconSize()\" />\n    }\n    <span class=\"sui-fancy-button__text-wrap\"><ng-content /></span>\n    @if (rightIcon()) {\n      <sui-icon class=\"sui-fancy-button__icon\" [name]=\"rightIcon()!\" [size]=\"iconSize()\" />\n    }\n  </a>\n} @else {\n  <button\n    class=\"sui-fancy-button__el\"\n    [type]=\"htmlType()\"\n    [disabled]=\"disabled() || null\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (click)=\"onClick($event)\"\n    (touchstart)=\"$event.currentTarget\"\n    (touchend)=\"$any($event.currentTarget).blur()\"\n  >\n    @if (leftIcon()) {\n      <sui-icon class=\"sui-fancy-button__icon\" [name]=\"leftIcon()!\" [size]=\"iconSize()\" />\n    }\n    <span class=\"sui-fancy-button__text-wrap\"><ng-content /></span>\n    @if (rightIcon()) {\n      <sui-icon class=\"sui-fancy-button__icon\" [name]=\"rightIcon()!\" [size]=\"iconSize()\" />\n    }\n  </button>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;vertical-align:middle}.sui-fancy-button__el{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:4px;margin:0;border:1px solid rgba(255,255,255,.12);border-radius:var(--sui-radius-10, 10px);color:inherit;text-decoration:none;cursor:pointer;box-sizing:border-box;font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-size:var(--sui-type-label-sm-size, 14px);line-height:var(--sui-type-label-sm-line, 20px);letter-spacing:var(--sui-type-label-sm-spacing, -.006em);font-weight:var(--sui-type-label-sm-weight, 500);transition:transform var(--dur-instant, 80ms) var(--ease-ek, cubic-bezier(.22, 1, .36, 1))}.sui-fancy-button__el:active:not(:disabled){transform:scale(.97)}.sui-fancy-button__el:active:not(:disabled),.sui-fancy-button__el:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-fancy-focus-ring, var(--sui-primary-alpha-10))}.sui-fancy-button__el:disabled{cursor:not-allowed}.sui-fancy-button__icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px}.sui-fancy-button__text-wrap{display:inline-flex;align-items:center;justify-content:center;padding:0 4px;white-space:nowrap}:host([data-sui-size=medium]) .sui-fancy-button__el{padding:10px;min-height:40px}:host([data-sui-size=small]) .sui-fancy-button__el{padding:8px;min-height:36px}:host([data-sui-size=xsmall]) .sui-fancy-button__el{padding:6px;min-height:32px}:host([data-sui-type=primary]) .sui-fancy-button__el{color:var(--sui-static-white, #ffffff);background:linear-gradient(180deg,#ffffff29,#fff0),var(--sui-primary-base);box-shadow:0 0 0 1px var(--sui-primary-base),0 1px 2px #0e121b3d}:host([data-sui-type=primary]) .sui-fancy-button__el:hover:not(:disabled){background:linear-gradient(180deg,#ffffff3d,#fff0),var(--sui-primary-base);box-shadow:0 0 0 1px var(--sui-primary-base),0 1px 2px #0e121b3d}:host([data-sui-type=neutral]),:host([data-sui-type=basic]){--sui-fancy-focus-ring: var(--sui-slate-alpha-16)}:host([data-sui-type=neutral]) .sui-fancy-button__el{color:var(--sui-text-white-0, #ffffff);background:linear-gradient(180deg,#ffffff29,#fff0),var(--sui-bg-strong-950, #171717);box-shadow:0 0 0 1px #242628,0 1px 2px #1b1c1d7a}:host([data-sui-type=neutral]) .sui-fancy-button__el:hover:not(:disabled){background:linear-gradient(180deg,#ffffff3d,#fff0),var(--sui-bg-strong-950, #171717);box-shadow:0 0 0 1px #242628,0 1px 2px #1b1c1d7a}:host([data-sui-type=basic]) .sui-fancy-button__el{border-color:transparent;color:var(--sui-text-sub-600);background:var(--sui-bg-white-0);box-shadow:0 0 0 1px var(--sui-stroke-soft-200),0 1px 3px #0e121b1f}:host([data-sui-type=basic]) .sui-fancy-button__el:hover:not(:disabled){background:var(--sui-bg-weak-50);color:var(--sui-text-strong-950);box-shadow:none}:host([data-sui-type=destructive]){--sui-fancy-focus-ring: var(--sui-red-alpha-10)}:host([data-sui-type=destructive]) .sui-fancy-button__el{color:var(--sui-static-white, #ffffff);background:linear-gradient(180deg,#ffffff29,#fff0),var(--sui-state-error-base);box-shadow:0 0 0 1px var(--sui-state-error-base),0 1px 2px #0e121b3d}:host([data-sui-type=destructive]) .sui-fancy-button__el:hover:not(:disabled){background:linear-gradient(180deg,#ffffff3d,#fff0),var(--sui-state-error-base);box-shadow:0 0 0 1px var(--sui-state-error-base),0 1px 2px #0e121b3d}:host([data-sui-disabled]) .sui-fancy-button__el,.sui-fancy-button__el:disabled{background:var(--sui-bg-weak-50);color:var(--sui-text-disabled-300);border-color:transparent;box-shadow:none;cursor:not-allowed}:host([data-sui-disabled]) .sui-fancy-button__el:hover,.sui-fancy-button__el:disabled:hover{background:var(--sui-bg-weak-50);color:var(--sui-text-disabled-300);box-shadow:none}\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: SuiFancyButton, isStandalone: true, selector: "sui-fancy-button", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", 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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, rel: { classPropertyName: "rel", publicName: "rel", isSignal: true, isRequired: false, transformFunction: null }, htmlType: { classPropertyName: "htmlType", publicName: "htmlType", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "attr.data-sui-type": "type()", "attr.data-sui-size": "size()", "attr.data-sui-disabled": "disabled() ? \"\" : null" } }, ngImport: i0, template: "@if (isAnchor()) {\n  <a\n    class=\"sui-fancy-button__el\"\n    [suiHref]=\"href()\"\n    [attr.target]=\"target()\"\n    [attr.rel]=\"rel()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (click)=\"onClick($event)\"\n    (touchstart)=\"$event.currentTarget\"\n    (touchend)=\"$any($event.currentTarget).blur()\"\n  >\n    @if (leftIcon()) {\n      <sui-icon class=\"sui-fancy-button__icon\" [name]=\"leftIcon()!\" [size]=\"iconSize()\" />\n    }\n    <span class=\"sui-fancy-button__text-wrap\"><ng-content /></span>\n    @if (rightIcon()) {\n      <sui-icon class=\"sui-fancy-button__icon\" [name]=\"rightIcon()!\" [size]=\"iconSize()\" />\n    }\n  </a>\n} @else {\n  <button\n    class=\"sui-fancy-button__el\"\n    [type]=\"htmlType()\"\n    [disabled]=\"disabled() || null\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (click)=\"onClick($event)\"\n    (touchstart)=\"$event.currentTarget\"\n    (touchend)=\"$any($event.currentTarget).blur()\"\n  >\n    @if (leftIcon()) {\n      <sui-icon class=\"sui-fancy-button__icon\" [name]=\"leftIcon()!\" [size]=\"iconSize()\" />\n    }\n    <span class=\"sui-fancy-button__text-wrap\"><ng-content /></span>\n    @if (rightIcon()) {\n      <sui-icon class=\"sui-fancy-button__icon\" [name]=\"rightIcon()!\" [size]=\"iconSize()\" />\n    }\n  </button>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;vertical-align:middle}.sui-fancy-button__el{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:4px;margin:0;border:1px solid rgba(255,255,255,.12);border-radius:var(--sui-radius-10, 10px);color:inherit;text-decoration:none;cursor:pointer;box-sizing:border-box;font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-size:var(--sui-type-label-sm-size, 14px);line-height:var(--sui-type-label-sm-line, 20px);letter-spacing:var(--sui-type-label-sm-spacing, -.006em);font-weight:var(--sui-type-label-sm-weight, 500);transition:transform var(--dur-instant, 80ms) var(--ease-ek, cubic-bezier(.22, 1, .36, 1))}.sui-fancy-button__el:active:not(:disabled){transform:scale(.97)}.sui-fancy-button__el:active:not(:disabled),.sui-fancy-button__el:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-fancy-focus-ring, var(--sui-primary-alpha-10))}.sui-fancy-button__el:disabled{cursor:not-allowed}.sui-fancy-button__icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px}.sui-fancy-button__text-wrap{display:inline-flex;align-items:center;justify-content:center;padding:0 4px;white-space:nowrap}:host([data-sui-size=medium]) .sui-fancy-button__el{padding:10px;min-height:40px}:host([data-sui-size=small]) .sui-fancy-button__el{padding:8px;min-height:36px}:host([data-sui-size=xsmall]) .sui-fancy-button__el{padding:6px;min-height:32px}:host([data-sui-type=primary]) .sui-fancy-button__el{color:var(--sui-static-white, #ffffff);background:linear-gradient(180deg,#ffffff29,#fff0),var(--sui-primary-base);box-shadow:0 0 0 1px var(--sui-primary-base),0 1px 2px #0e121b3d}:host([data-sui-type=primary]) .sui-fancy-button__el:hover:not(:disabled){background:linear-gradient(180deg,#ffffff3d,#fff0),var(--sui-primary-base);box-shadow:0 0 0 1px var(--sui-primary-base),0 1px 2px #0e121b3d}:host([data-sui-type=neutral]),:host([data-sui-type=basic]){--sui-fancy-focus-ring: var(--sui-slate-alpha-16)}:host([data-sui-type=neutral]) .sui-fancy-button__el{color:var(--sui-text-white-0, #ffffff);background:linear-gradient(180deg,#ffffff29,#fff0),var(--sui-bg-strong-950, #171717);box-shadow:0 0 0 1px #242628,0 1px 2px #1b1c1d7a}:host([data-sui-type=neutral]) .sui-fancy-button__el:hover:not(:disabled){background:linear-gradient(180deg,#ffffff3d,#fff0),var(--sui-bg-strong-950, #171717);box-shadow:0 0 0 1px #242628,0 1px 2px #1b1c1d7a}:host([data-sui-type=basic]) .sui-fancy-button__el{border-color:transparent;color:var(--sui-text-sub-600);background:var(--sui-bg-white-0);box-shadow:0 0 0 1px var(--sui-stroke-soft-200),0 1px 3px #0e121b1f}:host([data-sui-type=basic]) .sui-fancy-button__el:hover:not(:disabled){background:var(--sui-bg-weak-50);color:var(--sui-text-strong-950);box-shadow:none}:host([data-sui-type=destructive]){--sui-fancy-focus-ring: var(--sui-red-alpha-10)}:host([data-sui-type=destructive]) .sui-fancy-button__el{color:var(--sui-static-white, #ffffff);background:linear-gradient(180deg,#ffffff29,#fff0),var(--sui-state-error-base);box-shadow:0 0 0 1px var(--sui-state-error-base),0 1px 2px #0e121b3d}:host([data-sui-type=destructive]) .sui-fancy-button__el:hover:not(:disabled){background:linear-gradient(180deg,#ffffff3d,#fff0),var(--sui-state-error-base);box-shadow:0 0 0 1px var(--sui-state-error-base),0 1px 2px #0e121b3d}:host([data-sui-disabled]) .sui-fancy-button__el,.sui-fancy-button__el:disabled{background:var(--sui-bg-weak-50);color:var(--sui-text-disabled-300);border-color:transparent;box-shadow:none;cursor:not-allowed}:host([data-sui-disabled]) .sui-fancy-button__el:hover,.sui-fancy-button__el:disabled:hover{background:var(--sui-bg-weak-50);color:var(--sui-text-disabled-300);box-shadow:none}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "directive", type: SuiHref, selector: "a[suiHref]", inputs: ["suiHref"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiFancyButton, decorators: [{
             type: Component,
-            args: [{ selector: 'sui-fancy-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SuiIcon], host: {
+            args: [{ selector: 'sui-fancy-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SuiIcon, SuiHref], host: {
                         '[attr.data-sui-type]': 'type()',
                         '[attr.data-sui-size]': 'size()',
                         '[attr.data-sui-disabled]': 'disabled() ? "" : null',
-                    }, template: "@if (isAnchor()) {\n  <a\n    class=\"sui-fancy-button__el\"\n    [href]=\"href()\"\n    [attr.target]=\"target()\"\n    [attr.rel]=\"rel()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (click)=\"onClick($event)\"\n    (touchstart)=\"$event.currentTarget\"\n    (touchend)=\"$any($event.currentTarget).blur()\"\n  >\n    @if (leftIcon()) {\n      <sui-icon class=\"sui-fancy-button__icon\" [name]=\"leftIcon()!\" [size]=\"iconSize()\" />\n    }\n    <span class=\"sui-fancy-button__text-wrap\"><ng-content /></span>\n    @if (rightIcon()) {\n      <sui-icon class=\"sui-fancy-button__icon\" [name]=\"rightIcon()!\" [size]=\"iconSize()\" />\n    }\n  </a>\n} @else {\n  <button\n    class=\"sui-fancy-button__el\"\n    [type]=\"htmlType()\"\n    [disabled]=\"disabled() || null\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (click)=\"onClick($event)\"\n    (touchstart)=\"$event.currentTarget\"\n    (touchend)=\"$any($event.currentTarget).blur()\"\n  >\n    @if (leftIcon()) {\n      <sui-icon class=\"sui-fancy-button__icon\" [name]=\"leftIcon()!\" [size]=\"iconSize()\" />\n    }\n    <span class=\"sui-fancy-button__text-wrap\"><ng-content /></span>\n    @if (rightIcon()) {\n      <sui-icon class=\"sui-fancy-button__icon\" [name]=\"rightIcon()!\" [size]=\"iconSize()\" />\n    }\n  </button>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;vertical-align:middle}.sui-fancy-button__el{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:4px;margin:0;border:1px solid rgba(255,255,255,.12);border-radius:var(--sui-radius-10, 10px);color:inherit;text-decoration:none;cursor:pointer;box-sizing:border-box;font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-size:var(--sui-type-label-sm-size, 14px);line-height:var(--sui-type-label-sm-line, 20px);letter-spacing:var(--sui-type-label-sm-spacing, -.006em);font-weight:var(--sui-type-label-sm-weight, 500);transition:transform var(--dur-instant, 80ms) var(--ease-ek, cubic-bezier(.22, 1, .36, 1))}.sui-fancy-button__el:active:not(:disabled){transform:scale(.97)}.sui-fancy-button__el:active:not(:disabled),.sui-fancy-button__el:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-fancy-focus-ring, var(--sui-primary-alpha-10))}.sui-fancy-button__el:disabled{cursor:not-allowed}.sui-fancy-button__icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px}.sui-fancy-button__text-wrap{display:inline-flex;align-items:center;justify-content:center;padding:0 4px;white-space:nowrap}:host([data-sui-size=medium]) .sui-fancy-button__el{padding:10px;min-height:40px}:host([data-sui-size=small]) .sui-fancy-button__el{padding:8px;min-height:36px}:host([data-sui-size=xsmall]) .sui-fancy-button__el{padding:6px;min-height:32px}:host([data-sui-type=primary]) .sui-fancy-button__el{color:var(--sui-static-white, #ffffff);background:linear-gradient(180deg,#ffffff29,#fff0),var(--sui-primary-base);box-shadow:0 0 0 1px var(--sui-primary-base),0 1px 2px #0e121b3d}:host([data-sui-type=primary]) .sui-fancy-button__el:hover:not(:disabled){background:linear-gradient(180deg,#ffffff3d,#fff0),var(--sui-primary-base);box-shadow:0 0 0 1px var(--sui-primary-base),0 1px 2px #0e121b3d}:host([data-sui-type=neutral]),:host([data-sui-type=basic]){--sui-fancy-focus-ring: var(--sui-slate-alpha-16)}:host([data-sui-type=neutral]) .sui-fancy-button__el{color:var(--sui-text-white-0, #ffffff);background:linear-gradient(180deg,#ffffff29,#fff0),var(--sui-bg-strong-950, #171717);box-shadow:0 0 0 1px #242628,0 1px 2px #1b1c1d7a}:host([data-sui-type=neutral]) .sui-fancy-button__el:hover:not(:disabled){background:linear-gradient(180deg,#ffffff3d,#fff0),var(--sui-bg-strong-950, #171717);box-shadow:0 0 0 1px #242628,0 1px 2px #1b1c1d7a}:host([data-sui-type=basic]) .sui-fancy-button__el{border-color:transparent;color:var(--sui-text-sub-600);background:var(--sui-bg-white-0);box-shadow:0 0 0 1px var(--sui-stroke-soft-200),0 1px 3px #0e121b1f}:host([data-sui-type=basic]) .sui-fancy-button__el:hover:not(:disabled){background:var(--sui-bg-weak-50);color:var(--sui-text-strong-950);box-shadow:none}:host([data-sui-type=destructive]){--sui-fancy-focus-ring: var(--sui-red-alpha-10)}:host([data-sui-type=destructive]) .sui-fancy-button__el{color:var(--sui-static-white, #ffffff);background:linear-gradient(180deg,#ffffff29,#fff0),var(--sui-state-error-base);box-shadow:0 0 0 1px var(--sui-state-error-base),0 1px 2px #0e121b3d}:host([data-sui-type=destructive]) .sui-fancy-button__el:hover:not(:disabled){background:linear-gradient(180deg,#ffffff3d,#fff0),var(--sui-state-error-base);box-shadow:0 0 0 1px var(--sui-state-error-base),0 1px 2px #0e121b3d}:host([data-sui-disabled]) .sui-fancy-button__el,.sui-fancy-button__el:disabled{background:var(--sui-bg-weak-50);color:var(--sui-text-disabled-300);border-color:transparent;box-shadow:none;cursor:not-allowed}:host([data-sui-disabled]) .sui-fancy-button__el:hover,.sui-fancy-button__el:disabled:hover{background:var(--sui-bg-weak-50);color:var(--sui-text-disabled-300);box-shadow:none}\n"] }]
+                    }, template: "@if (isAnchor()) {\n  <a\n    class=\"sui-fancy-button__el\"\n    [suiHref]=\"href()\"\n    [attr.target]=\"target()\"\n    [attr.rel]=\"rel()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (click)=\"onClick($event)\"\n    (touchstart)=\"$event.currentTarget\"\n    (touchend)=\"$any($event.currentTarget).blur()\"\n  >\n    @if (leftIcon()) {\n      <sui-icon class=\"sui-fancy-button__icon\" [name]=\"leftIcon()!\" [size]=\"iconSize()\" />\n    }\n    <span class=\"sui-fancy-button__text-wrap\"><ng-content /></span>\n    @if (rightIcon()) {\n      <sui-icon class=\"sui-fancy-button__icon\" [name]=\"rightIcon()!\" [size]=\"iconSize()\" />\n    }\n  </a>\n} @else {\n  <button\n    class=\"sui-fancy-button__el\"\n    [type]=\"htmlType()\"\n    [disabled]=\"disabled() || null\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (click)=\"onClick($event)\"\n    (touchstart)=\"$event.currentTarget\"\n    (touchend)=\"$any($event.currentTarget).blur()\"\n  >\n    @if (leftIcon()) {\n      <sui-icon class=\"sui-fancy-button__icon\" [name]=\"leftIcon()!\" [size]=\"iconSize()\" />\n    }\n    <span class=\"sui-fancy-button__text-wrap\"><ng-content /></span>\n    @if (rightIcon()) {\n      <sui-icon class=\"sui-fancy-button__icon\" [name]=\"rightIcon()!\" [size]=\"iconSize()\" />\n    }\n  </button>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;vertical-align:middle}.sui-fancy-button__el{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:4px;margin:0;border:1px solid rgba(255,255,255,.12);border-radius:var(--sui-radius-10, 10px);color:inherit;text-decoration:none;cursor:pointer;box-sizing:border-box;font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-size:var(--sui-type-label-sm-size, 14px);line-height:var(--sui-type-label-sm-line, 20px);letter-spacing:var(--sui-type-label-sm-spacing, -.006em);font-weight:var(--sui-type-label-sm-weight, 500);transition:transform var(--dur-instant, 80ms) var(--ease-ek, cubic-bezier(.22, 1, .36, 1))}.sui-fancy-button__el:active:not(:disabled){transform:scale(.97)}.sui-fancy-button__el:active:not(:disabled),.sui-fancy-button__el:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-fancy-focus-ring, var(--sui-primary-alpha-10))}.sui-fancy-button__el:disabled{cursor:not-allowed}.sui-fancy-button__icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px}.sui-fancy-button__text-wrap{display:inline-flex;align-items:center;justify-content:center;padding:0 4px;white-space:nowrap}:host([data-sui-size=medium]) .sui-fancy-button__el{padding:10px;min-height:40px}:host([data-sui-size=small]) .sui-fancy-button__el{padding:8px;min-height:36px}:host([data-sui-size=xsmall]) .sui-fancy-button__el{padding:6px;min-height:32px}:host([data-sui-type=primary]) .sui-fancy-button__el{color:var(--sui-static-white, #ffffff);background:linear-gradient(180deg,#ffffff29,#fff0),var(--sui-primary-base);box-shadow:0 0 0 1px var(--sui-primary-base),0 1px 2px #0e121b3d}:host([data-sui-type=primary]) .sui-fancy-button__el:hover:not(:disabled){background:linear-gradient(180deg,#ffffff3d,#fff0),var(--sui-primary-base);box-shadow:0 0 0 1px var(--sui-primary-base),0 1px 2px #0e121b3d}:host([data-sui-type=neutral]),:host([data-sui-type=basic]){--sui-fancy-focus-ring: var(--sui-slate-alpha-16)}:host([data-sui-type=neutral]) .sui-fancy-button__el{color:var(--sui-text-white-0, #ffffff);background:linear-gradient(180deg,#ffffff29,#fff0),var(--sui-bg-strong-950, #171717);box-shadow:0 0 0 1px #242628,0 1px 2px #1b1c1d7a}:host([data-sui-type=neutral]) .sui-fancy-button__el:hover:not(:disabled){background:linear-gradient(180deg,#ffffff3d,#fff0),var(--sui-bg-strong-950, #171717);box-shadow:0 0 0 1px #242628,0 1px 2px #1b1c1d7a}:host([data-sui-type=basic]) .sui-fancy-button__el{border-color:transparent;color:var(--sui-text-sub-600);background:var(--sui-bg-white-0);box-shadow:0 0 0 1px var(--sui-stroke-soft-200),0 1px 3px #0e121b1f}:host([data-sui-type=basic]) .sui-fancy-button__el:hover:not(:disabled){background:var(--sui-bg-weak-50);color:var(--sui-text-strong-950);box-shadow:none}:host([data-sui-type=destructive]){--sui-fancy-focus-ring: var(--sui-red-alpha-10)}:host([data-sui-type=destructive]) .sui-fancy-button__el{color:var(--sui-static-white, #ffffff);background:linear-gradient(180deg,#ffffff29,#fff0),var(--sui-state-error-base);box-shadow:0 0 0 1px var(--sui-state-error-base),0 1px 2px #0e121b3d}:host([data-sui-type=destructive]) .sui-fancy-button__el:hover:not(:disabled){background:linear-gradient(180deg,#ffffff3d,#fff0),var(--sui-state-error-base);box-shadow:0 0 0 1px var(--sui-state-error-base),0 1px 2px #0e121b3d}:host([data-sui-disabled]) .sui-fancy-button__el,.sui-fancy-button__el:disabled{background:var(--sui-bg-weak-50);color:var(--sui-text-disabled-300);border-color:transparent;box-shadow:none;cursor:not-allowed}:host([data-sui-disabled]) .sui-fancy-button__el:hover,.sui-fancy-button__el:disabled:hover{background:var(--sui-bg-weak-50);color:var(--sui-text-disabled-300);box-shadow:none}\n"] }]
         }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], leftIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "leftIcon", required: false }] }], rightIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightIcon", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], rel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rel", required: false }] }], htmlType: [{ type: i0.Input, args: [{ isSignal: true, alias: "htmlType", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
 
 /**
@@ -12800,15 +12854,15 @@ class SuiProgressBarLabel {
         this.linkClick.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiProgressBarLabel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiProgressBarLabel, isStandalone: true, selector: "sui-progress-bar-label", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, percentage: { classPropertyName: "percentage", publicName: "percentage", isSignal: true, isRequired: false, transformFunction: null }, showBottom: { classPropertyName: "showBottom", publicName: "showBottom", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", 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 }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { linkClick: "linkClick" }, host: { properties: { "attr.title": "null", "attr.data-type": "type()" } }, ngImport: i0, template: "@if (type() === 'on-right') {\n  <!-- Type=On Right: barra (flex:1) + % a la derecha, gap 8, items-center -->\n  <sui-progress-bar\n    class=\"sui-progress-bar-label__bar\"\n    [value]=\"value()\"\n    [color]=\"color()\"\n    [size]=\"size()\"\n    [ariaLabel]=\"ariaLabel()\"\n  />\n  @if (showPercent()) {\n    <span class=\"sui-progress-bar-label__percent\">{{ percentLabel() }}</span>\n  }\n} @else {\n  <!-- Type=On Top: t\u00EDtulo+% / barra / (link+descripci\u00F3n).\n       La fila head s\u00F3lo se renderiza si hay t\u00EDtulo o % que mostrar \u2014 sin esto un\n       consumer con type='on-top' sin title dejaba una fila vac\u00EDa de 20px+6px. -->\n  @if (title() || showPercent()) {\n    <div class=\"sui-progress-bar-label__head\">\n      @if (title()) {\n        <span class=\"sui-progress-bar-label__title\">{{ title() }}</span>\n      }\n      @if (showPercent()) {\n        <span class=\"sui-progress-bar-label__percent\">{{ percentLabel() }}</span>\n      }\n    </div>\n  }\n\n  <sui-progress-bar\n    class=\"sui-progress-bar-label__bar\"\n    [value]=\"value()\"\n    [color]=\"color()\"\n    [size]=\"size()\"\n    [ariaLabel]=\"ariaLabel()\"\n  />\n\n  @if (showBottom()) {\n    <div class=\"sui-progress-bar-label__bottom\">\n      @if (linkCfg(); as link) {\n        <a\n          class=\"sui-progress-bar-label__link\"\n          [attr.href]=\"link.href ?? '#'\"\n          [attr.target]=\"link.target ?? null\"\n          [attr.rel]=\"link.rel ?? null\"\n          (click)=\"onLinkClick($event)\"\n          (touchstart)=\"$any($event.currentTarget)\"\n          (touchend)=\"$any($event.currentTarget).blur()\"\n          >{{ link.label }}</a\n        >\n      }\n      <span class=\"sui-progress-bar-label__desc\">{{ description() }}</span>\n    </div>\n  }\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:6px;width:100%;box-sizing:border-box}:host([data-type=on-right]){flex-direction:row;align-items:center;gap:8px}:host([data-type=on-right]) .sui-progress-bar-label__bar{flex:1 1 0;min-width:0}.sui-progress-bar-label__head{display:flex;align-items:flex-start;gap:6px;width:100%}.sui-progress-bar-label__title{flex:1 1 0;min-width:0;color:var(--sui-text-strong-950, #171717);font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.084px;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-progress-bar-label__percent{flex:none;white-space:nowrap;color:var(--sui-text-sub-600, #5c5c5c);font-size:12px;font-weight:400;line-height:16px;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-progress-bar-label__bar{display:block;width:100%}.sui-progress-bar-label__bottom{display:flex;align-items:flex-start;gap:4px;width:100%}.sui-progress-bar-label__link{flex:none;white-space:nowrap;color:var(--sui-state-information-base, #335cff);text-decoration:underline;text-underline-position:from-font;font-size:12px;font-weight:500;line-height:16px;cursor:pointer;font-feature-settings:\"cv09\" 1,\"ss11\" 1,\"calt\" 0,\"liga\" 0;transition:opacity var(--sui-motion-duration-fast, .2s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1))}.sui-progress-bar-label__link:hover{opacity:.85}.sui-progress-bar-label__link:focus-visible{outline:2px solid var(--sui-state-information-base, #335cff);outline-offset:2px;border-radius:2px}.sui-progress-bar-label__desc{flex:1 1 0;min-width:0;color:var(--sui-text-sub-600, #5c5c5c);font-size:12px;font-weight:400;line-height:16px;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}@media(prefers-reduced-motion:reduce){.sui-progress-bar-label__link{transition:none}}\n"], dependencies: [{ kind: "component", type: SuiProgressBar, selector: "sui-progress-bar", inputs: ["value", "color", "size", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiProgressBarLabel, isStandalone: true, selector: "sui-progress-bar-label", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, percentage: { classPropertyName: "percentage", publicName: "percentage", isSignal: true, isRequired: false, transformFunction: null }, showBottom: { classPropertyName: "showBottom", publicName: "showBottom", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", 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 }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { linkClick: "linkClick" }, host: { properties: { "attr.title": "null", "attr.data-type": "type()" } }, ngImport: i0, template: "@if (type() === 'on-right') {\n  <!-- Type=On Right: barra (flex:1) + % a la derecha, gap 8, items-center -->\n  <sui-progress-bar\n    class=\"sui-progress-bar-label__bar\"\n    [value]=\"value()\"\n    [color]=\"color()\"\n    [size]=\"size()\"\n    [ariaLabel]=\"ariaLabel()\"\n  />\n  @if (showPercent()) {\n    <span class=\"sui-progress-bar-label__percent\">{{ percentLabel() }}</span>\n  }\n} @else {\n  <!-- Type=On Top: t\u00EDtulo+% / barra / (link+descripci\u00F3n).\n       La fila head s\u00F3lo se renderiza si hay t\u00EDtulo o % que mostrar \u2014 sin esto un\n       consumer con type='on-top' sin title dejaba una fila vac\u00EDa de 20px+6px. -->\n  @if (title() || showPercent()) {\n    <div class=\"sui-progress-bar-label__head\">\n      @if (title()) {\n        <span class=\"sui-progress-bar-label__title\">{{ title() }}</span>\n      }\n      @if (showPercent()) {\n        <span class=\"sui-progress-bar-label__percent\">{{ percentLabel() }}</span>\n      }\n    </div>\n  }\n\n  <sui-progress-bar\n    class=\"sui-progress-bar-label__bar\"\n    [value]=\"value()\"\n    [color]=\"color()\"\n    [size]=\"size()\"\n    [ariaLabel]=\"ariaLabel()\"\n  />\n\n  @if (showBottom()) {\n    <div class=\"sui-progress-bar-label__bottom\">\n      @if (linkCfg(); as link) {\n        <a\n          class=\"sui-progress-bar-label__link\"\n          [suiHref]=\"link.href ?? '#'\"\n          [attr.target]=\"link.target ?? null\"\n          [attr.rel]=\"link.rel ?? null\"\n          (click)=\"onLinkClick($event)\"\n          (touchstart)=\"$any($event.currentTarget)\"\n          (touchend)=\"$any($event.currentTarget).blur()\"\n          >{{ link.label }}</a\n        >\n      }\n      <span class=\"sui-progress-bar-label__desc\">{{ description() }}</span>\n    </div>\n  }\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:6px;width:100%;box-sizing:border-box}:host([data-type=on-right]){flex-direction:row;align-items:center;gap:8px}:host([data-type=on-right]) .sui-progress-bar-label__bar{flex:1 1 0;min-width:0}.sui-progress-bar-label__head{display:flex;align-items:flex-start;gap:6px;width:100%}.sui-progress-bar-label__title{flex:1 1 0;min-width:0;color:var(--sui-text-strong-950, #171717);font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.084px;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-progress-bar-label__percent{flex:none;white-space:nowrap;color:var(--sui-text-sub-600, #5c5c5c);font-size:12px;font-weight:400;line-height:16px;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-progress-bar-label__bar{display:block;width:100%}.sui-progress-bar-label__bottom{display:flex;align-items:flex-start;gap:4px;width:100%}.sui-progress-bar-label__link{flex:none;white-space:nowrap;color:var(--sui-state-information-base, #335cff);text-decoration:underline;text-underline-position:from-font;font-size:12px;font-weight:500;line-height:16px;cursor:pointer;font-feature-settings:\"cv09\" 1,\"ss11\" 1,\"calt\" 0,\"liga\" 0;transition:opacity var(--sui-motion-duration-fast, .2s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1))}.sui-progress-bar-label__link:hover{opacity:.85}.sui-progress-bar-label__link:focus-visible{outline:2px solid var(--sui-state-information-base, #335cff);outline-offset:2px;border-radius:2px}.sui-progress-bar-label__desc{flex:1 1 0;min-width:0;color:var(--sui-text-sub-600, #5c5c5c);font-size:12px;font-weight:400;line-height:16px;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}@media(prefers-reduced-motion:reduce){.sui-progress-bar-label__link{transition:none}}\n"], dependencies: [{ kind: "component", type: SuiProgressBar, selector: "sui-progress-bar", inputs: ["value", "color", "size", "ariaLabel"] }, { kind: "directive", type: SuiHref, selector: "a[suiHref]", inputs: ["suiHref"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiProgressBarLabel, decorators: [{
             type: Component,
-            args: [{ selector: 'sui-progress-bar-label', standalone: true, imports: [SuiProgressBar], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'sui-progress-bar-label', standalone: true, imports: [SuiProgressBar, SuiHref], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         /* Strip native `title` attr — patrón canon Ontop (ver CLAUDE.md). */
                         '[attr.title]': 'null',
                         '[attr.data-type]': 'type()',
-                    }, template: "@if (type() === 'on-right') {\n  <!-- Type=On Right: barra (flex:1) + % a la derecha, gap 8, items-center -->\n  <sui-progress-bar\n    class=\"sui-progress-bar-label__bar\"\n    [value]=\"value()\"\n    [color]=\"color()\"\n    [size]=\"size()\"\n    [ariaLabel]=\"ariaLabel()\"\n  />\n  @if (showPercent()) {\n    <span class=\"sui-progress-bar-label__percent\">{{ percentLabel() }}</span>\n  }\n} @else {\n  <!-- Type=On Top: t\u00EDtulo+% / barra / (link+descripci\u00F3n).\n       La fila head s\u00F3lo se renderiza si hay t\u00EDtulo o % que mostrar \u2014 sin esto un\n       consumer con type='on-top' sin title dejaba una fila vac\u00EDa de 20px+6px. -->\n  @if (title() || showPercent()) {\n    <div class=\"sui-progress-bar-label__head\">\n      @if (title()) {\n        <span class=\"sui-progress-bar-label__title\">{{ title() }}</span>\n      }\n      @if (showPercent()) {\n        <span class=\"sui-progress-bar-label__percent\">{{ percentLabel() }}</span>\n      }\n    </div>\n  }\n\n  <sui-progress-bar\n    class=\"sui-progress-bar-label__bar\"\n    [value]=\"value()\"\n    [color]=\"color()\"\n    [size]=\"size()\"\n    [ariaLabel]=\"ariaLabel()\"\n  />\n\n  @if (showBottom()) {\n    <div class=\"sui-progress-bar-label__bottom\">\n      @if (linkCfg(); as link) {\n        <a\n          class=\"sui-progress-bar-label__link\"\n          [attr.href]=\"link.href ?? '#'\"\n          [attr.target]=\"link.target ?? null\"\n          [attr.rel]=\"link.rel ?? null\"\n          (click)=\"onLinkClick($event)\"\n          (touchstart)=\"$any($event.currentTarget)\"\n          (touchend)=\"$any($event.currentTarget).blur()\"\n          >{{ link.label }}</a\n        >\n      }\n      <span class=\"sui-progress-bar-label__desc\">{{ description() }}</span>\n    </div>\n  }\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:6px;width:100%;box-sizing:border-box}:host([data-type=on-right]){flex-direction:row;align-items:center;gap:8px}:host([data-type=on-right]) .sui-progress-bar-label__bar{flex:1 1 0;min-width:0}.sui-progress-bar-label__head{display:flex;align-items:flex-start;gap:6px;width:100%}.sui-progress-bar-label__title{flex:1 1 0;min-width:0;color:var(--sui-text-strong-950, #171717);font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.084px;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-progress-bar-label__percent{flex:none;white-space:nowrap;color:var(--sui-text-sub-600, #5c5c5c);font-size:12px;font-weight:400;line-height:16px;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-progress-bar-label__bar{display:block;width:100%}.sui-progress-bar-label__bottom{display:flex;align-items:flex-start;gap:4px;width:100%}.sui-progress-bar-label__link{flex:none;white-space:nowrap;color:var(--sui-state-information-base, #335cff);text-decoration:underline;text-underline-position:from-font;font-size:12px;font-weight:500;line-height:16px;cursor:pointer;font-feature-settings:\"cv09\" 1,\"ss11\" 1,\"calt\" 0,\"liga\" 0;transition:opacity var(--sui-motion-duration-fast, .2s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1))}.sui-progress-bar-label__link:hover{opacity:.85}.sui-progress-bar-label__link:focus-visible{outline:2px solid var(--sui-state-information-base, #335cff);outline-offset:2px;border-radius:2px}.sui-progress-bar-label__desc{flex:1 1 0;min-width:0;color:var(--sui-text-sub-600, #5c5c5c);font-size:12px;font-weight:400;line-height:16px;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}@media(prefers-reduced-motion:reduce){.sui-progress-bar-label__link{transition:none}}\n"] }]
+                    }, template: "@if (type() === 'on-right') {\n  <!-- Type=On Right: barra (flex:1) + % a la derecha, gap 8, items-center -->\n  <sui-progress-bar\n    class=\"sui-progress-bar-label__bar\"\n    [value]=\"value()\"\n    [color]=\"color()\"\n    [size]=\"size()\"\n    [ariaLabel]=\"ariaLabel()\"\n  />\n  @if (showPercent()) {\n    <span class=\"sui-progress-bar-label__percent\">{{ percentLabel() }}</span>\n  }\n} @else {\n  <!-- Type=On Top: t\u00EDtulo+% / barra / (link+descripci\u00F3n).\n       La fila head s\u00F3lo se renderiza si hay t\u00EDtulo o % que mostrar \u2014 sin esto un\n       consumer con type='on-top' sin title dejaba una fila vac\u00EDa de 20px+6px. -->\n  @if (title() || showPercent()) {\n    <div class=\"sui-progress-bar-label__head\">\n      @if (title()) {\n        <span class=\"sui-progress-bar-label__title\">{{ title() }}</span>\n      }\n      @if (showPercent()) {\n        <span class=\"sui-progress-bar-label__percent\">{{ percentLabel() }}</span>\n      }\n    </div>\n  }\n\n  <sui-progress-bar\n    class=\"sui-progress-bar-label__bar\"\n    [value]=\"value()\"\n    [color]=\"color()\"\n    [size]=\"size()\"\n    [ariaLabel]=\"ariaLabel()\"\n  />\n\n  @if (showBottom()) {\n    <div class=\"sui-progress-bar-label__bottom\">\n      @if (linkCfg(); as link) {\n        <a\n          class=\"sui-progress-bar-label__link\"\n          [suiHref]=\"link.href ?? '#'\"\n          [attr.target]=\"link.target ?? null\"\n          [attr.rel]=\"link.rel ?? null\"\n          (click)=\"onLinkClick($event)\"\n          (touchstart)=\"$any($event.currentTarget)\"\n          (touchend)=\"$any($event.currentTarget).blur()\"\n          >{{ link.label }}</a\n        >\n      }\n      <span class=\"sui-progress-bar-label__desc\">{{ description() }}</span>\n    </div>\n  }\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:6px;width:100%;box-sizing:border-box}:host([data-type=on-right]){flex-direction:row;align-items:center;gap:8px}:host([data-type=on-right]) .sui-progress-bar-label__bar{flex:1 1 0;min-width:0}.sui-progress-bar-label__head{display:flex;align-items:flex-start;gap:6px;width:100%}.sui-progress-bar-label__title{flex:1 1 0;min-width:0;color:var(--sui-text-strong-950, #171717);font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.084px;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-progress-bar-label__percent{flex:none;white-space:nowrap;color:var(--sui-text-sub-600, #5c5c5c);font-size:12px;font-weight:400;line-height:16px;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-progress-bar-label__bar{display:block;width:100%}.sui-progress-bar-label__bottom{display:flex;align-items:flex-start;gap:4px;width:100%}.sui-progress-bar-label__link{flex:none;white-space:nowrap;color:var(--sui-state-information-base, #335cff);text-decoration:underline;text-underline-position:from-font;font-size:12px;font-weight:500;line-height:16px;cursor:pointer;font-feature-settings:\"cv09\" 1,\"ss11\" 1,\"calt\" 0,\"liga\" 0;transition:opacity var(--sui-motion-duration-fast, .2s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1))}.sui-progress-bar-label__link:hover{opacity:.85}.sui-progress-bar-label__link:focus-visible{outline:2px solid var(--sui-state-information-base, #335cff);outline-offset:2px;border-radius:2px}.sui-progress-bar-label__desc{flex:1 1 0;min-width:0;color:var(--sui-text-sub-600, #5c5c5c);font-size:12px;font-weight:400;line-height:16px;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}@media(prefers-reduced-motion:reduce){.sui-progress-bar-label__link{transition:none}}\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], percentage: [{ type: i0.Input, args: [{ isSignal: true, alias: "percentage", required: false }] }], showBottom: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBottom", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], linkClick: [{ type: i0.Output, args: ["linkClick"] }] } });
 
 class SuiRadioGroup {
@@ -13656,11 +13710,11 @@ class SuiRating {
                 useExisting: forwardRef(() => SuiRating),
                 multi: true,
             },
-        ], ngImport: i0, template: "@switch (appearance()) {\n\n  @case ('inline') {\n    @if (alignment() === 'vertical') {\n      <div class=\"sui-rating__icons\">\n        @for (cell of cells(); track cell.index) {\n          <ng-container *ngTemplateOutlet=\"iconCell; context: { $implicit: cell }\" />\n        }\n      </div>\n      @if (showValue() || reviewCount() !== null || reviewLink()) {\n        <div class=\"sui-rating__meta sui-rating__meta--vertical\">\n          <ng-container *ngTemplateOutlet=\"metaContent\" />\n        </div>\n      }\n    } @else if (alignment() === 'horizontal') {\n      <div class=\"sui-rating__icons\">\n        @for (cell of cells(); track cell.index) {\n          <ng-container *ngTemplateOutlet=\"iconCell; context: { $implicit: cell }\" />\n        }\n      </div>\n      @if (showValue() || reviewCount() !== null || reviewLink()) {\n        <div class=\"sui-rating__meta sui-rating__meta--horizontal\">\n          <ng-container *ngTemplateOutlet=\"metaContent\" />\n        </div>\n      }\n    } @else {\n      @for (cell of cells(); track cell.index) {\n        <ng-container *ngTemplateOutlet=\"iconCell; context: { $implicit: cell }\" />\n      }\n    }\n  }\n\n  @case ('cell') {\n    <div class=\"sui-rating__cells\" (mouseleave)=\"onCellLeave()\">\n      @for (cell of cells(); track cell.index) {\n        <ng-container *ngTemplateOutlet=\"iconCell; context: { $implicit: cell }\" />\n      }\n    </div>\n  }\n\n  @case ('bar') {\n    <ng-container *ngTemplateOutlet=\"barRow\" />\n  }\n\n  @case ('bar-area') {\n    <div class=\"sui-rating__area\">\n      <ng-container *ngTemplateOutlet=\"barRow\" />\n      <div class=\"sui-rating__area-input\">\n        @if (readonly()) {\n          <p class=\"sui-rating__area-text\" [class.sui-rating__area-text--placeholder]=\"!reason()\">\n            {{ reason() || reasonPlaceholder() }}\n          </p>\n        } @else {\n          <textarea\n            class=\"sui-rating__area-textarea\"\n            [rows]=\"reasonRows()\"\n            [value]=\"reason()\"\n            [placeholder]=\"reasonPlaceholder()\"\n            [disabled]=\"disabledByForm()\"\n            [attr.aria-label]=\"reasonPlaceholder()\"\n            (input)=\"onReasonInput($event)\"\n            (blur)=\"onTouched()\"></textarea>\n        }\n      </div>\n    </div>\n  }\n}\n\n<!-- Bar row (5 cells horizontal). Reusada por appearance='bar' y 'bar-area'. -->\n<ng-template #barRow>\n  <div class=\"sui-rating__bar\" (mouseleave)=\"onCellLeave()\">\n    @for (cell of cells(); track cell.index) {\n      @if (readonly()) {\n        <div\n          class=\"sui-rating__bar-cell\"\n          [attr.data-fill]=\"cell.fill\"\n          [attr.data-cell-state]=\"cell.cellState\"\n          role=\"radio\"\n          [attr.aria-checked]=\"value() === cell.index\"\n          [attr.aria-label]=\"cell.index + ' de ' + max()\">\n          <ng-container *ngTemplateOutlet=\"cellContent; context: { $implicit: cell }\" />\n        </div>\n      } @else {\n        <button\n          type=\"button\"\n          class=\"sui-rating__bar-cell\"\n          [attr.data-fill]=\"cell.fill\"\n          [attr.data-cell-state]=\"cell.cellState\"\n          [attr.data-selected]=\"value() === cell.index\"\n          [disabled]=\"disabledByForm()\"\n          role=\"radio\"\n          [attr.aria-checked]=\"value() === cell.index\"\n          [attr.aria-label]=\"cell.index + ' de ' + max()\"\n          (click)=\"onCellClick(cell.index)\"\n          (mouseenter)=\"onCellEnter(cell.index)\"\n          (touchstart)=\"$event.currentTarget\"\n          (touchend)=\"$any($event.currentTarget).blur()\">\n          <ng-container *ngTemplateOutlet=\"cellContent; context: { $implicit: cell }\" />\n        </button>\n      }\n    }\n  </div>\n</ng-template>\n\n<!-- Single icon (inline appearance). -->\n<ng-template #iconCell let-cell>\n  @if (readonly()) {\n    <span\n      class=\"sui-rating__icon\"\n      [attr.data-fill]=\"cell.fill\"\n      [attr.data-cell-state]=\"cell.cellState\"\n      role=\"radio\"\n      [attr.aria-checked]=\"value() === cell.index\"\n      [attr.aria-label]=\"cell.index + ' de ' + max()\">\n      <sui-icon [name]=\"cellIconName(cell.fill)\" [size]=\"iconPx()\" />\n    </span>\n  } @else {\n    <button\n      type=\"button\"\n      class=\"sui-rating__icon\"\n      [attr.data-fill]=\"cell.fill\"\n      [attr.data-cell-state]=\"cell.cellState\"\n      [attr.data-selected]=\"value() === cell.index\"\n      [disabled]=\"disabledByForm()\"\n      role=\"radio\"\n      [attr.aria-checked]=\"value() === cell.index\"\n      [attr.aria-label]=\"cell.index + ' de ' + max()\"\n      (click)=\"onCellClick(cell.index)\"\n      (mouseenter)=\"onCellEnter(cell.index)\"\n      (mouseleave)=\"onCellLeave()\"\n      (touchstart)=\"$event.currentTarget\"\n      (touchend)=\"$any($event.currentTarget).blur()\">\n      <sui-icon [name]=\"cellIconName(cell.fill === 'empty' ? 'empty' : 'full')\" [size]=\"iconPx()\" />\n    </button>\n  }\n</ng-template>\n\n<!-- Cell content (bar / bar-area appearance): seg\u00FAn type.\n     star/heart usan barIconName(cellState) para distinguir:\n       default \u2192 outline | hover \u2192 relleno gris (Empty Filled) | selected \u2192 relleno color. -->\n<ng-template #cellContent let-cell>\n  @switch (type()) {\n    @case ('star') {\n      <sui-icon [name]=\"barIconName('star', cell.cellState)\" [size]=\"20\" />\n    }\n    @case ('heart') {\n      <sui-icon [name]=\"barIconName('heart', cell.cellState)\" [size]=\"20\" />\n    }\n    @case ('emoji') {\n      <sui-emoji class=\"sui-rating__emoji\" [name]=\"cell.emoji\" size=\"sm\" />\n    }\n    @case ('number') {\n      <span class=\"sui-rating__number\">{{ cell.index }}</span>\n    }\n  }\n</ng-template>\n\n<!-- Meta (value + reviewCount + link), inline appearance only -->\n<ng-template #metaContent>\n  @if (showValue()) {\n    <span class=\"sui-rating__value\">{{ valueLabel() }}</span>\n  }\n  @if (showValue() && reviewCount() !== null) {\n    <span class=\"sui-rating__sep\" aria-hidden=\"true\">\u2219</span>\n  }\n  @if (reviewCount() !== null) {\n    <span class=\"sui-rating__count\">{{ reviewCountLabel() }} Ratings</span>\n  }\n  @if (reviewLink(); as link) {\n    @if (link.href) {\n      <a class=\"sui-rating__link\" [href]=\"link.href\">{{ link.label }}</a>\n    } @else {\n      <button type=\"button\" class=\"sui-rating__link\">{{ link.label }}</button>\n    }\n  }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;font-family:var(--sui-font-sans);align-items:center;gap:2px}:host([data-disabled]){opacity:.5;pointer-events:none}:host([data-appearance=inline][data-alignment=inline]){flex-direction:row;flex-wrap:nowrap}:host([data-appearance=inline][data-alignment=vertical]){flex-direction:column;align-items:flex-start;gap:8px}:host([data-appearance=inline][data-alignment=horizontal]){flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px}.sui-rating__icons{display:inline-flex;align-items:center;gap:2px;flex-shrink:0}.sui-rating__icon{appearance:none;border:0;margin:0;padding:0;background:transparent;font:inherit;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--sui-stroke-sub-300, #d1d1d1);transition:color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}:host([data-type=star]) .sui-rating__icon[data-fill=full],:host([data-type=star]) .sui-rating__icon[data-fill=half]{color:var(--sui-yellow-500, #f6b51e)}:host([data-type=heart]) .sui-rating__icon[data-fill=full],:host([data-type=heart]) .sui-rating__icon[data-fill=half]{color:var(--sui-state-error-base, #fb3748)}button.sui-rating__icon{cursor:pointer;border-radius:4px}button.sui-rating__icon:focus-visible{outline:2px solid var(--sui-text-strong-950);outline-offset:2px}.sui-rating__meta{display:inline-flex;align-items:center;gap:4px;flex-shrink:0}.sui-rating__meta--vertical{align-self:flex-start}.sui-rating__value,.sui-rating__count{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-strong-950);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;white-space:nowrap}.sui-rating__sep{color:var(--sui-text-strong-950);margin:0 2px}.sui-rating__link{appearance:none;border:0;background:transparent;font:inherit;padding:0;margin:0;cursor:pointer;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);color:var(--sui-text-sub-600);text-decoration:underline;text-decoration-skip-ink:none;text-underline-offset:2px;white-space:nowrap}.sui-rating__link:hover{color:var(--sui-text-strong-950)}.sui-rating__link:focus-visible{outline:2px solid var(--sui-text-strong-950);outline-offset:2px;border-radius:2px}:host([data-appearance=cell]){display:inline-flex;flex-direction:row;flex-wrap:nowrap;gap:8px}.sui-rating__cells{display:inline-flex;align-items:center;gap:8px;flex-shrink:0}:host([data-appearance=cell]) .sui-rating__icon{padding:12px;border-radius:var(--sui-radius-10, 10px);border:1px solid var(--sui-stroke-soft-200);background:var(--sui-bg-white-0);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));box-sizing:border-box;transition:background-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),border-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),box-shadow var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}:host([data-appearance=cell]) .sui-rating__icon[data-cell-state=hover]{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}:host([data-appearance=bar]){display:inline-block;align-items:stretch}:host([data-appearance=bar-area]){display:block;width:100%}.sui-rating__bar{display:inline-flex;align-items:stretch;border:1px solid var(--sui-stroke-soft-200);border-radius:0;overflow:hidden;background:var(--sui-bg-white-0)}:host([data-appearance=bar-area]) .sui-rating__bar{display:flex;width:100%;border:0;border-bottom:1px solid var(--sui-stroke-soft-200);border-radius:0;background:transparent}.sui-rating__bar-cell{appearance:none;margin:0;font:inherit;flex-shrink:0;width:64px;min-height:36px;display:flex;align-items:center;justify-content:center;padding:8px 4px;background:var(--sui-bg-white-0);border:0;border-left:1px solid var(--sui-stroke-soft-200);cursor:default;color:var(--sui-stroke-sub-300);transition:background-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}.sui-rating__bar-cell:first-child{border-left:0}:host([data-appearance=bar-area]) .sui-rating__bar-cell{flex:1 0 0;width:auto;min-width:0;background:transparent}button.sui-rating__bar-cell{cursor:pointer}button.sui-rating__bar-cell:focus-visible{outline:2px solid var(--sui-text-strong-950);outline-offset:-2px}:host([data-type=star]) .sui-rating__bar-cell[data-cell-state=selected]{color:var(--sui-yellow-500, #f6b51e)}:host([data-type=heart]) .sui-rating__bar-cell[data-cell-state=selected]{color:var(--sui-state-error-base, #fb3748)}:host([data-type=number]) .sui-rating__bar-cell[data-cell-state=hover] .sui-rating__number,:host([data-type=number]) .sui-rating__bar-cell[data-cell-state=selected] .sui-rating__number{color:var(--sui-text-strong-950)}:host([data-type=number]) .sui-rating__bar-cell[data-cell-state=selected],:host([data-type=emoji]) .sui-rating__bar-cell[data-cell-state=selected]{background:var(--sui-bg-weak-50)}.sui-rating__number{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);color:var(--sui-text-sub-600);text-align:center;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-rating__emoji{display:inline-flex;align-items:center;justify-content:center;filter:grayscale(.5);opacity:.55;transition:filter var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),opacity var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}:host([data-type=emoji]) .sui-rating__bar-cell[data-cell-state=selected] .sui-rating__emoji{filter:grayscale(0);opacity:1}.sui-rating__area{display:flex;flex-direction:column;align-items:stretch;width:100%;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-12, 12px);overflow:hidden}.sui-rating__area-input{display:flex;flex:1 0 0;align-items:flex-start;justify-content:flex-start;padding:12px;background:var(--sui-bg-white-0)}.sui-rating__area-textarea{appearance:none;display:block;width:100%;min-height:72px;border:0;margin:0;padding:0;background:transparent;resize:none;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-strong-950);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-rating__area-textarea::placeholder{color:var(--sui-text-soft-400)}.sui-rating__area-textarea:focus-visible{outline:none}.sui-rating__area-text{width:100%;min-height:72px;margin:0;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-strong-950);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-rating__area-text--placeholder{color:var(--sui-text-soft-400)}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiEmoji, selector: "sui-emoji", inputs: ["name", "src", "size", "ariaLabel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "@switch (appearance()) {\n\n  @case ('inline') {\n    @if (alignment() === 'vertical') {\n      <div class=\"sui-rating__icons\">\n        @for (cell of cells(); track cell.index) {\n          <ng-container *ngTemplateOutlet=\"iconCell; context: { $implicit: cell }\" />\n        }\n      </div>\n      @if (showValue() || reviewCount() !== null || reviewLink()) {\n        <div class=\"sui-rating__meta sui-rating__meta--vertical\">\n          <ng-container *ngTemplateOutlet=\"metaContent\" />\n        </div>\n      }\n    } @else if (alignment() === 'horizontal') {\n      <div class=\"sui-rating__icons\">\n        @for (cell of cells(); track cell.index) {\n          <ng-container *ngTemplateOutlet=\"iconCell; context: { $implicit: cell }\" />\n        }\n      </div>\n      @if (showValue() || reviewCount() !== null || reviewLink()) {\n        <div class=\"sui-rating__meta sui-rating__meta--horizontal\">\n          <ng-container *ngTemplateOutlet=\"metaContent\" />\n        </div>\n      }\n    } @else {\n      @for (cell of cells(); track cell.index) {\n        <ng-container *ngTemplateOutlet=\"iconCell; context: { $implicit: cell }\" />\n      }\n    }\n  }\n\n  @case ('cell') {\n    <div class=\"sui-rating__cells\" (mouseleave)=\"onCellLeave()\">\n      @for (cell of cells(); track cell.index) {\n        <ng-container *ngTemplateOutlet=\"iconCell; context: { $implicit: cell }\" />\n      }\n    </div>\n  }\n\n  @case ('bar') {\n    <ng-container *ngTemplateOutlet=\"barRow\" />\n  }\n\n  @case ('bar-area') {\n    <div class=\"sui-rating__area\">\n      <ng-container *ngTemplateOutlet=\"barRow\" />\n      <div class=\"sui-rating__area-input\">\n        @if (readonly()) {\n          <p class=\"sui-rating__area-text\" [class.sui-rating__area-text--placeholder]=\"!reason()\">\n            {{ reason() || reasonPlaceholder() }}\n          </p>\n        } @else {\n          <textarea\n            class=\"sui-rating__area-textarea\"\n            [rows]=\"reasonRows()\"\n            [value]=\"reason()\"\n            [placeholder]=\"reasonPlaceholder()\"\n            [disabled]=\"disabledByForm()\"\n            [attr.aria-label]=\"reasonPlaceholder()\"\n            (input)=\"onReasonInput($event)\"\n            (blur)=\"onTouched()\"></textarea>\n        }\n      </div>\n    </div>\n  }\n}\n\n<!-- Bar row (5 cells horizontal). Reusada por appearance='bar' y 'bar-area'. -->\n<ng-template #barRow>\n  <div class=\"sui-rating__bar\" (mouseleave)=\"onCellLeave()\">\n    @for (cell of cells(); track cell.index) {\n      @if (readonly()) {\n        <div\n          class=\"sui-rating__bar-cell\"\n          [attr.data-fill]=\"cell.fill\"\n          [attr.data-cell-state]=\"cell.cellState\"\n          role=\"radio\"\n          [attr.aria-checked]=\"value() === cell.index\"\n          [attr.aria-label]=\"cell.index + ' de ' + max()\">\n          <ng-container *ngTemplateOutlet=\"cellContent; context: { $implicit: cell }\" />\n        </div>\n      } @else {\n        <button\n          type=\"button\"\n          class=\"sui-rating__bar-cell\"\n          [attr.data-fill]=\"cell.fill\"\n          [attr.data-cell-state]=\"cell.cellState\"\n          [attr.data-selected]=\"value() === cell.index\"\n          [disabled]=\"disabledByForm()\"\n          role=\"radio\"\n          [attr.aria-checked]=\"value() === cell.index\"\n          [attr.aria-label]=\"cell.index + ' de ' + max()\"\n          (click)=\"onCellClick(cell.index)\"\n          (mouseenter)=\"onCellEnter(cell.index)\"\n          (touchstart)=\"$event.currentTarget\"\n          (touchend)=\"$any($event.currentTarget).blur()\">\n          <ng-container *ngTemplateOutlet=\"cellContent; context: { $implicit: cell }\" />\n        </button>\n      }\n    }\n  </div>\n</ng-template>\n\n<!-- Single icon (inline appearance). -->\n<ng-template #iconCell let-cell>\n  @if (readonly()) {\n    <span\n      class=\"sui-rating__icon\"\n      [attr.data-fill]=\"cell.fill\"\n      [attr.data-cell-state]=\"cell.cellState\"\n      role=\"radio\"\n      [attr.aria-checked]=\"value() === cell.index\"\n      [attr.aria-label]=\"cell.index + ' de ' + max()\">\n      <sui-icon [name]=\"cellIconName(cell.fill)\" [size]=\"iconPx()\" />\n    </span>\n  } @else {\n    <button\n      type=\"button\"\n      class=\"sui-rating__icon\"\n      [attr.data-fill]=\"cell.fill\"\n      [attr.data-cell-state]=\"cell.cellState\"\n      [attr.data-selected]=\"value() === cell.index\"\n      [disabled]=\"disabledByForm()\"\n      role=\"radio\"\n      [attr.aria-checked]=\"value() === cell.index\"\n      [attr.aria-label]=\"cell.index + ' de ' + max()\"\n      (click)=\"onCellClick(cell.index)\"\n      (mouseenter)=\"onCellEnter(cell.index)\"\n      (mouseleave)=\"onCellLeave()\"\n      (touchstart)=\"$event.currentTarget\"\n      (touchend)=\"$any($event.currentTarget).blur()\">\n      <sui-icon [name]=\"cellIconName(cell.fill === 'empty' ? 'empty' : 'full')\" [size]=\"iconPx()\" />\n    </button>\n  }\n</ng-template>\n\n<!-- Cell content (bar / bar-area appearance): seg\u00FAn type.\n     star/heart usan barIconName(cellState) para distinguir:\n       default \u2192 outline | hover \u2192 relleno gris (Empty Filled) | selected \u2192 relleno color. -->\n<ng-template #cellContent let-cell>\n  @switch (type()) {\n    @case ('star') {\n      <sui-icon [name]=\"barIconName('star', cell.cellState)\" [size]=\"20\" />\n    }\n    @case ('heart') {\n      <sui-icon [name]=\"barIconName('heart', cell.cellState)\" [size]=\"20\" />\n    }\n    @case ('emoji') {\n      <sui-emoji class=\"sui-rating__emoji\" [name]=\"cell.emoji\" size=\"sm\" />\n    }\n    @case ('number') {\n      <span class=\"sui-rating__number\">{{ cell.index }}</span>\n    }\n  }\n</ng-template>\n\n<!-- Meta (value + reviewCount + link), inline appearance only -->\n<ng-template #metaContent>\n  @if (showValue()) {\n    <span class=\"sui-rating__value\">{{ valueLabel() }}</span>\n  }\n  @if (showValue() && reviewCount() !== null) {\n    <span class=\"sui-rating__sep\" aria-hidden=\"true\">\u2219</span>\n  }\n  @if (reviewCount() !== null) {\n    <span class=\"sui-rating__count\">{{ reviewCountLabel() }} Ratings</span>\n  }\n  @if (reviewLink(); as link) {\n    @if (link.href) {\n      <a class=\"sui-rating__link\" [suiHref]=\"link.href\">{{ link.label }}</a>\n    } @else {\n      <button type=\"button\" class=\"sui-rating__link\">{{ link.label }}</button>\n    }\n  }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;font-family:var(--sui-font-sans);align-items:center;gap:2px}:host([data-disabled]){opacity:.5;pointer-events:none}:host([data-appearance=inline][data-alignment=inline]){flex-direction:row;flex-wrap:nowrap}:host([data-appearance=inline][data-alignment=vertical]){flex-direction:column;align-items:flex-start;gap:8px}:host([data-appearance=inline][data-alignment=horizontal]){flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px}.sui-rating__icons{display:inline-flex;align-items:center;gap:2px;flex-shrink:0}.sui-rating__icon{appearance:none;border:0;margin:0;padding:0;background:transparent;font:inherit;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--sui-stroke-sub-300, #d1d1d1);transition:color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}:host([data-type=star]) .sui-rating__icon[data-fill=full],:host([data-type=star]) .sui-rating__icon[data-fill=half]{color:var(--sui-yellow-500, #f6b51e)}:host([data-type=heart]) .sui-rating__icon[data-fill=full],:host([data-type=heart]) .sui-rating__icon[data-fill=half]{color:var(--sui-state-error-base, #fb3748)}button.sui-rating__icon{cursor:pointer;border-radius:4px}button.sui-rating__icon:focus-visible{outline:2px solid var(--sui-text-strong-950);outline-offset:2px}.sui-rating__meta{display:inline-flex;align-items:center;gap:4px;flex-shrink:0}.sui-rating__meta--vertical{align-self:flex-start}.sui-rating__value,.sui-rating__count{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-strong-950);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;white-space:nowrap}.sui-rating__sep{color:var(--sui-text-strong-950);margin:0 2px}.sui-rating__link{appearance:none;border:0;background:transparent;font:inherit;padding:0;margin:0;cursor:pointer;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);color:var(--sui-text-sub-600);text-decoration:underline;text-decoration-skip-ink:none;text-underline-offset:2px;white-space:nowrap}.sui-rating__link:hover{color:var(--sui-text-strong-950)}.sui-rating__link:focus-visible{outline:2px solid var(--sui-text-strong-950);outline-offset:2px;border-radius:2px}:host([data-appearance=cell]){display:inline-flex;flex-direction:row;flex-wrap:nowrap;gap:8px}.sui-rating__cells{display:inline-flex;align-items:center;gap:8px;flex-shrink:0}:host([data-appearance=cell]) .sui-rating__icon{padding:12px;border-radius:var(--sui-radius-10, 10px);border:1px solid var(--sui-stroke-soft-200);background:var(--sui-bg-white-0);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));box-sizing:border-box;transition:background-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),border-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),box-shadow var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}:host([data-appearance=cell]) .sui-rating__icon[data-cell-state=hover]{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}:host([data-appearance=bar]){display:inline-block;align-items:stretch}:host([data-appearance=bar-area]){display:block;width:100%}.sui-rating__bar{display:inline-flex;align-items:stretch;border:1px solid var(--sui-stroke-soft-200);border-radius:0;overflow:hidden;background:var(--sui-bg-white-0)}:host([data-appearance=bar-area]) .sui-rating__bar{display:flex;width:100%;border:0;border-bottom:1px solid var(--sui-stroke-soft-200);border-radius:0;background:transparent}.sui-rating__bar-cell{appearance:none;margin:0;font:inherit;flex-shrink:0;width:64px;min-height:36px;display:flex;align-items:center;justify-content:center;padding:8px 4px;background:var(--sui-bg-white-0);border:0;border-left:1px solid var(--sui-stroke-soft-200);cursor:default;color:var(--sui-stroke-sub-300);transition:background-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}.sui-rating__bar-cell:first-child{border-left:0}:host([data-appearance=bar-area]) .sui-rating__bar-cell{flex:1 0 0;width:auto;min-width:0;background:transparent}button.sui-rating__bar-cell{cursor:pointer}button.sui-rating__bar-cell:focus-visible{outline:2px solid var(--sui-text-strong-950);outline-offset:-2px}:host([data-type=star]) .sui-rating__bar-cell[data-cell-state=selected]{color:var(--sui-yellow-500, #f6b51e)}:host([data-type=heart]) .sui-rating__bar-cell[data-cell-state=selected]{color:var(--sui-state-error-base, #fb3748)}:host([data-type=number]) .sui-rating__bar-cell[data-cell-state=hover] .sui-rating__number,:host([data-type=number]) .sui-rating__bar-cell[data-cell-state=selected] .sui-rating__number{color:var(--sui-text-strong-950)}:host([data-type=number]) .sui-rating__bar-cell[data-cell-state=selected],:host([data-type=emoji]) .sui-rating__bar-cell[data-cell-state=selected]{background:var(--sui-bg-weak-50)}.sui-rating__number{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);color:var(--sui-text-sub-600);text-align:center;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-rating__emoji{display:inline-flex;align-items:center;justify-content:center;filter:grayscale(.5);opacity:.55;transition:filter var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),opacity var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}:host([data-type=emoji]) .sui-rating__bar-cell[data-cell-state=selected] .sui-rating__emoji{filter:grayscale(0);opacity:1}.sui-rating__area{display:flex;flex-direction:column;align-items:stretch;width:100%;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-12, 12px);overflow:hidden}.sui-rating__area-input{display:flex;flex:1 0 0;align-items:flex-start;justify-content:flex-start;padding:12px;background:var(--sui-bg-white-0)}.sui-rating__area-textarea{appearance:none;display:block;width:100%;min-height:72px;border:0;margin:0;padding:0;background:transparent;resize:none;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-strong-950);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-rating__area-textarea::placeholder{color:var(--sui-text-soft-400)}.sui-rating__area-textarea:focus-visible{outline:none}.sui-rating__area-text{width:100%;min-height:72px;margin:0;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-strong-950);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-rating__area-text--placeholder{color:var(--sui-text-soft-400)}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiEmoji, selector: "sui-emoji", inputs: ["name", "src", "size", "ariaLabel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: SuiHref, selector: "a[suiHref]", inputs: ["suiHref"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiRating, decorators: [{
             type: Component,
-            args: [{ selector: 'sui-rating', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [SuiIcon, SuiEmoji, NgTemplateOutlet], providers: [
+            args: [{ selector: 'sui-rating', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [SuiIcon, SuiEmoji, NgTemplateOutlet, SuiHref], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => SuiRating),
@@ -13675,7 +13729,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         '[attr.aria-label]': 'ariaLabel()',
                         '[attr.aria-readonly]': '!isInteractive() ? "true" : null',
                         '[attr.data-disabled]': 'disabledByForm() ? "" : null',
-                    }, template: "@switch (appearance()) {\n\n  @case ('inline') {\n    @if (alignment() === 'vertical') {\n      <div class=\"sui-rating__icons\">\n        @for (cell of cells(); track cell.index) {\n          <ng-container *ngTemplateOutlet=\"iconCell; context: { $implicit: cell }\" />\n        }\n      </div>\n      @if (showValue() || reviewCount() !== null || reviewLink()) {\n        <div class=\"sui-rating__meta sui-rating__meta--vertical\">\n          <ng-container *ngTemplateOutlet=\"metaContent\" />\n        </div>\n      }\n    } @else if (alignment() === 'horizontal') {\n      <div class=\"sui-rating__icons\">\n        @for (cell of cells(); track cell.index) {\n          <ng-container *ngTemplateOutlet=\"iconCell; context: { $implicit: cell }\" />\n        }\n      </div>\n      @if (showValue() || reviewCount() !== null || reviewLink()) {\n        <div class=\"sui-rating__meta sui-rating__meta--horizontal\">\n          <ng-container *ngTemplateOutlet=\"metaContent\" />\n        </div>\n      }\n    } @else {\n      @for (cell of cells(); track cell.index) {\n        <ng-container *ngTemplateOutlet=\"iconCell; context: { $implicit: cell }\" />\n      }\n    }\n  }\n\n  @case ('cell') {\n    <div class=\"sui-rating__cells\" (mouseleave)=\"onCellLeave()\">\n      @for (cell of cells(); track cell.index) {\n        <ng-container *ngTemplateOutlet=\"iconCell; context: { $implicit: cell }\" />\n      }\n    </div>\n  }\n\n  @case ('bar') {\n    <ng-container *ngTemplateOutlet=\"barRow\" />\n  }\n\n  @case ('bar-area') {\n    <div class=\"sui-rating__area\">\n      <ng-container *ngTemplateOutlet=\"barRow\" />\n      <div class=\"sui-rating__area-input\">\n        @if (readonly()) {\n          <p class=\"sui-rating__area-text\" [class.sui-rating__area-text--placeholder]=\"!reason()\">\n            {{ reason() || reasonPlaceholder() }}\n          </p>\n        } @else {\n          <textarea\n            class=\"sui-rating__area-textarea\"\n            [rows]=\"reasonRows()\"\n            [value]=\"reason()\"\n            [placeholder]=\"reasonPlaceholder()\"\n            [disabled]=\"disabledByForm()\"\n            [attr.aria-label]=\"reasonPlaceholder()\"\n            (input)=\"onReasonInput($event)\"\n            (blur)=\"onTouched()\"></textarea>\n        }\n      </div>\n    </div>\n  }\n}\n\n<!-- Bar row (5 cells horizontal). Reusada por appearance='bar' y 'bar-area'. -->\n<ng-template #barRow>\n  <div class=\"sui-rating__bar\" (mouseleave)=\"onCellLeave()\">\n    @for (cell of cells(); track cell.index) {\n      @if (readonly()) {\n        <div\n          class=\"sui-rating__bar-cell\"\n          [attr.data-fill]=\"cell.fill\"\n          [attr.data-cell-state]=\"cell.cellState\"\n          role=\"radio\"\n          [attr.aria-checked]=\"value() === cell.index\"\n          [attr.aria-label]=\"cell.index + ' de ' + max()\">\n          <ng-container *ngTemplateOutlet=\"cellContent; context: { $implicit: cell }\" />\n        </div>\n      } @else {\n        <button\n          type=\"button\"\n          class=\"sui-rating__bar-cell\"\n          [attr.data-fill]=\"cell.fill\"\n          [attr.data-cell-state]=\"cell.cellState\"\n          [attr.data-selected]=\"value() === cell.index\"\n          [disabled]=\"disabledByForm()\"\n          role=\"radio\"\n          [attr.aria-checked]=\"value() === cell.index\"\n          [attr.aria-label]=\"cell.index + ' de ' + max()\"\n          (click)=\"onCellClick(cell.index)\"\n          (mouseenter)=\"onCellEnter(cell.index)\"\n          (touchstart)=\"$event.currentTarget\"\n          (touchend)=\"$any($event.currentTarget).blur()\">\n          <ng-container *ngTemplateOutlet=\"cellContent; context: { $implicit: cell }\" />\n        </button>\n      }\n    }\n  </div>\n</ng-template>\n\n<!-- Single icon (inline appearance). -->\n<ng-template #iconCell let-cell>\n  @if (readonly()) {\n    <span\n      class=\"sui-rating__icon\"\n      [attr.data-fill]=\"cell.fill\"\n      [attr.data-cell-state]=\"cell.cellState\"\n      role=\"radio\"\n      [attr.aria-checked]=\"value() === cell.index\"\n      [attr.aria-label]=\"cell.index + ' de ' + max()\">\n      <sui-icon [name]=\"cellIconName(cell.fill)\" [size]=\"iconPx()\" />\n    </span>\n  } @else {\n    <button\n      type=\"button\"\n      class=\"sui-rating__icon\"\n      [attr.data-fill]=\"cell.fill\"\n      [attr.data-cell-state]=\"cell.cellState\"\n      [attr.data-selected]=\"value() === cell.index\"\n      [disabled]=\"disabledByForm()\"\n      role=\"radio\"\n      [attr.aria-checked]=\"value() === cell.index\"\n      [attr.aria-label]=\"cell.index + ' de ' + max()\"\n      (click)=\"onCellClick(cell.index)\"\n      (mouseenter)=\"onCellEnter(cell.index)\"\n      (mouseleave)=\"onCellLeave()\"\n      (touchstart)=\"$event.currentTarget\"\n      (touchend)=\"$any($event.currentTarget).blur()\">\n      <sui-icon [name]=\"cellIconName(cell.fill === 'empty' ? 'empty' : 'full')\" [size]=\"iconPx()\" />\n    </button>\n  }\n</ng-template>\n\n<!-- Cell content (bar / bar-area appearance): seg\u00FAn type.\n     star/heart usan barIconName(cellState) para distinguir:\n       default \u2192 outline | hover \u2192 relleno gris (Empty Filled) | selected \u2192 relleno color. -->\n<ng-template #cellContent let-cell>\n  @switch (type()) {\n    @case ('star') {\n      <sui-icon [name]=\"barIconName('star', cell.cellState)\" [size]=\"20\" />\n    }\n    @case ('heart') {\n      <sui-icon [name]=\"barIconName('heart', cell.cellState)\" [size]=\"20\" />\n    }\n    @case ('emoji') {\n      <sui-emoji class=\"sui-rating__emoji\" [name]=\"cell.emoji\" size=\"sm\" />\n    }\n    @case ('number') {\n      <span class=\"sui-rating__number\">{{ cell.index }}</span>\n    }\n  }\n</ng-template>\n\n<!-- Meta (value + reviewCount + link), inline appearance only -->\n<ng-template #metaContent>\n  @if (showValue()) {\n    <span class=\"sui-rating__value\">{{ valueLabel() }}</span>\n  }\n  @if (showValue() && reviewCount() !== null) {\n    <span class=\"sui-rating__sep\" aria-hidden=\"true\">\u2219</span>\n  }\n  @if (reviewCount() !== null) {\n    <span class=\"sui-rating__count\">{{ reviewCountLabel() }} Ratings</span>\n  }\n  @if (reviewLink(); as link) {\n    @if (link.href) {\n      <a class=\"sui-rating__link\" [href]=\"link.href\">{{ link.label }}</a>\n    } @else {\n      <button type=\"button\" class=\"sui-rating__link\">{{ link.label }}</button>\n    }\n  }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;font-family:var(--sui-font-sans);align-items:center;gap:2px}:host([data-disabled]){opacity:.5;pointer-events:none}:host([data-appearance=inline][data-alignment=inline]){flex-direction:row;flex-wrap:nowrap}:host([data-appearance=inline][data-alignment=vertical]){flex-direction:column;align-items:flex-start;gap:8px}:host([data-appearance=inline][data-alignment=horizontal]){flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px}.sui-rating__icons{display:inline-flex;align-items:center;gap:2px;flex-shrink:0}.sui-rating__icon{appearance:none;border:0;margin:0;padding:0;background:transparent;font:inherit;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--sui-stroke-sub-300, #d1d1d1);transition:color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}:host([data-type=star]) .sui-rating__icon[data-fill=full],:host([data-type=star]) .sui-rating__icon[data-fill=half]{color:var(--sui-yellow-500, #f6b51e)}:host([data-type=heart]) .sui-rating__icon[data-fill=full],:host([data-type=heart]) .sui-rating__icon[data-fill=half]{color:var(--sui-state-error-base, #fb3748)}button.sui-rating__icon{cursor:pointer;border-radius:4px}button.sui-rating__icon:focus-visible{outline:2px solid var(--sui-text-strong-950);outline-offset:2px}.sui-rating__meta{display:inline-flex;align-items:center;gap:4px;flex-shrink:0}.sui-rating__meta--vertical{align-self:flex-start}.sui-rating__value,.sui-rating__count{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-strong-950);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;white-space:nowrap}.sui-rating__sep{color:var(--sui-text-strong-950);margin:0 2px}.sui-rating__link{appearance:none;border:0;background:transparent;font:inherit;padding:0;margin:0;cursor:pointer;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);color:var(--sui-text-sub-600);text-decoration:underline;text-decoration-skip-ink:none;text-underline-offset:2px;white-space:nowrap}.sui-rating__link:hover{color:var(--sui-text-strong-950)}.sui-rating__link:focus-visible{outline:2px solid var(--sui-text-strong-950);outline-offset:2px;border-radius:2px}:host([data-appearance=cell]){display:inline-flex;flex-direction:row;flex-wrap:nowrap;gap:8px}.sui-rating__cells{display:inline-flex;align-items:center;gap:8px;flex-shrink:0}:host([data-appearance=cell]) .sui-rating__icon{padding:12px;border-radius:var(--sui-radius-10, 10px);border:1px solid var(--sui-stroke-soft-200);background:var(--sui-bg-white-0);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));box-sizing:border-box;transition:background-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),border-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),box-shadow var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}:host([data-appearance=cell]) .sui-rating__icon[data-cell-state=hover]{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}:host([data-appearance=bar]){display:inline-block;align-items:stretch}:host([data-appearance=bar-area]){display:block;width:100%}.sui-rating__bar{display:inline-flex;align-items:stretch;border:1px solid var(--sui-stroke-soft-200);border-radius:0;overflow:hidden;background:var(--sui-bg-white-0)}:host([data-appearance=bar-area]) .sui-rating__bar{display:flex;width:100%;border:0;border-bottom:1px solid var(--sui-stroke-soft-200);border-radius:0;background:transparent}.sui-rating__bar-cell{appearance:none;margin:0;font:inherit;flex-shrink:0;width:64px;min-height:36px;display:flex;align-items:center;justify-content:center;padding:8px 4px;background:var(--sui-bg-white-0);border:0;border-left:1px solid var(--sui-stroke-soft-200);cursor:default;color:var(--sui-stroke-sub-300);transition:background-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}.sui-rating__bar-cell:first-child{border-left:0}:host([data-appearance=bar-area]) .sui-rating__bar-cell{flex:1 0 0;width:auto;min-width:0;background:transparent}button.sui-rating__bar-cell{cursor:pointer}button.sui-rating__bar-cell:focus-visible{outline:2px solid var(--sui-text-strong-950);outline-offset:-2px}:host([data-type=star]) .sui-rating__bar-cell[data-cell-state=selected]{color:var(--sui-yellow-500, #f6b51e)}:host([data-type=heart]) .sui-rating__bar-cell[data-cell-state=selected]{color:var(--sui-state-error-base, #fb3748)}:host([data-type=number]) .sui-rating__bar-cell[data-cell-state=hover] .sui-rating__number,:host([data-type=number]) .sui-rating__bar-cell[data-cell-state=selected] .sui-rating__number{color:var(--sui-text-strong-950)}:host([data-type=number]) .sui-rating__bar-cell[data-cell-state=selected],:host([data-type=emoji]) .sui-rating__bar-cell[data-cell-state=selected]{background:var(--sui-bg-weak-50)}.sui-rating__number{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);color:var(--sui-text-sub-600);text-align:center;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-rating__emoji{display:inline-flex;align-items:center;justify-content:center;filter:grayscale(.5);opacity:.55;transition:filter var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),opacity var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}:host([data-type=emoji]) .sui-rating__bar-cell[data-cell-state=selected] .sui-rating__emoji{filter:grayscale(0);opacity:1}.sui-rating__area{display:flex;flex-direction:column;align-items:stretch;width:100%;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-12, 12px);overflow:hidden}.sui-rating__area-input{display:flex;flex:1 0 0;align-items:flex-start;justify-content:flex-start;padding:12px;background:var(--sui-bg-white-0)}.sui-rating__area-textarea{appearance:none;display:block;width:100%;min-height:72px;border:0;margin:0;padding:0;background:transparent;resize:none;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-strong-950);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-rating__area-textarea::placeholder{color:var(--sui-text-soft-400)}.sui-rating__area-textarea:focus-visible{outline:none}.sui-rating__area-text{width:100%;min-height:72px;margin:0;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-strong-950);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-rating__area-text--placeholder{color:var(--sui-text-soft-400)}\n"] }]
+                    }, template: "@switch (appearance()) {\n\n  @case ('inline') {\n    @if (alignment() === 'vertical') {\n      <div class=\"sui-rating__icons\">\n        @for (cell of cells(); track cell.index) {\n          <ng-container *ngTemplateOutlet=\"iconCell; context: { $implicit: cell }\" />\n        }\n      </div>\n      @if (showValue() || reviewCount() !== null || reviewLink()) {\n        <div class=\"sui-rating__meta sui-rating__meta--vertical\">\n          <ng-container *ngTemplateOutlet=\"metaContent\" />\n        </div>\n      }\n    } @else if (alignment() === 'horizontal') {\n      <div class=\"sui-rating__icons\">\n        @for (cell of cells(); track cell.index) {\n          <ng-container *ngTemplateOutlet=\"iconCell; context: { $implicit: cell }\" />\n        }\n      </div>\n      @if (showValue() || reviewCount() !== null || reviewLink()) {\n        <div class=\"sui-rating__meta sui-rating__meta--horizontal\">\n          <ng-container *ngTemplateOutlet=\"metaContent\" />\n        </div>\n      }\n    } @else {\n      @for (cell of cells(); track cell.index) {\n        <ng-container *ngTemplateOutlet=\"iconCell; context: { $implicit: cell }\" />\n      }\n    }\n  }\n\n  @case ('cell') {\n    <div class=\"sui-rating__cells\" (mouseleave)=\"onCellLeave()\">\n      @for (cell of cells(); track cell.index) {\n        <ng-container *ngTemplateOutlet=\"iconCell; context: { $implicit: cell }\" />\n      }\n    </div>\n  }\n\n  @case ('bar') {\n    <ng-container *ngTemplateOutlet=\"barRow\" />\n  }\n\n  @case ('bar-area') {\n    <div class=\"sui-rating__area\">\n      <ng-container *ngTemplateOutlet=\"barRow\" />\n      <div class=\"sui-rating__area-input\">\n        @if (readonly()) {\n          <p class=\"sui-rating__area-text\" [class.sui-rating__area-text--placeholder]=\"!reason()\">\n            {{ reason() || reasonPlaceholder() }}\n          </p>\n        } @else {\n          <textarea\n            class=\"sui-rating__area-textarea\"\n            [rows]=\"reasonRows()\"\n            [value]=\"reason()\"\n            [placeholder]=\"reasonPlaceholder()\"\n            [disabled]=\"disabledByForm()\"\n            [attr.aria-label]=\"reasonPlaceholder()\"\n            (input)=\"onReasonInput($event)\"\n            (blur)=\"onTouched()\"></textarea>\n        }\n      </div>\n    </div>\n  }\n}\n\n<!-- Bar row (5 cells horizontal). Reusada por appearance='bar' y 'bar-area'. -->\n<ng-template #barRow>\n  <div class=\"sui-rating__bar\" (mouseleave)=\"onCellLeave()\">\n    @for (cell of cells(); track cell.index) {\n      @if (readonly()) {\n        <div\n          class=\"sui-rating__bar-cell\"\n          [attr.data-fill]=\"cell.fill\"\n          [attr.data-cell-state]=\"cell.cellState\"\n          role=\"radio\"\n          [attr.aria-checked]=\"value() === cell.index\"\n          [attr.aria-label]=\"cell.index + ' de ' + max()\">\n          <ng-container *ngTemplateOutlet=\"cellContent; context: { $implicit: cell }\" />\n        </div>\n      } @else {\n        <button\n          type=\"button\"\n          class=\"sui-rating__bar-cell\"\n          [attr.data-fill]=\"cell.fill\"\n          [attr.data-cell-state]=\"cell.cellState\"\n          [attr.data-selected]=\"value() === cell.index\"\n          [disabled]=\"disabledByForm()\"\n          role=\"radio\"\n          [attr.aria-checked]=\"value() === cell.index\"\n          [attr.aria-label]=\"cell.index + ' de ' + max()\"\n          (click)=\"onCellClick(cell.index)\"\n          (mouseenter)=\"onCellEnter(cell.index)\"\n          (touchstart)=\"$event.currentTarget\"\n          (touchend)=\"$any($event.currentTarget).blur()\">\n          <ng-container *ngTemplateOutlet=\"cellContent; context: { $implicit: cell }\" />\n        </button>\n      }\n    }\n  </div>\n</ng-template>\n\n<!-- Single icon (inline appearance). -->\n<ng-template #iconCell let-cell>\n  @if (readonly()) {\n    <span\n      class=\"sui-rating__icon\"\n      [attr.data-fill]=\"cell.fill\"\n      [attr.data-cell-state]=\"cell.cellState\"\n      role=\"radio\"\n      [attr.aria-checked]=\"value() === cell.index\"\n      [attr.aria-label]=\"cell.index + ' de ' + max()\">\n      <sui-icon [name]=\"cellIconName(cell.fill)\" [size]=\"iconPx()\" />\n    </span>\n  } @else {\n    <button\n      type=\"button\"\n      class=\"sui-rating__icon\"\n      [attr.data-fill]=\"cell.fill\"\n      [attr.data-cell-state]=\"cell.cellState\"\n      [attr.data-selected]=\"value() === cell.index\"\n      [disabled]=\"disabledByForm()\"\n      role=\"radio\"\n      [attr.aria-checked]=\"value() === cell.index\"\n      [attr.aria-label]=\"cell.index + ' de ' + max()\"\n      (click)=\"onCellClick(cell.index)\"\n      (mouseenter)=\"onCellEnter(cell.index)\"\n      (mouseleave)=\"onCellLeave()\"\n      (touchstart)=\"$event.currentTarget\"\n      (touchend)=\"$any($event.currentTarget).blur()\">\n      <sui-icon [name]=\"cellIconName(cell.fill === 'empty' ? 'empty' : 'full')\" [size]=\"iconPx()\" />\n    </button>\n  }\n</ng-template>\n\n<!-- Cell content (bar / bar-area appearance): seg\u00FAn type.\n     star/heart usan barIconName(cellState) para distinguir:\n       default \u2192 outline | hover \u2192 relleno gris (Empty Filled) | selected \u2192 relleno color. -->\n<ng-template #cellContent let-cell>\n  @switch (type()) {\n    @case ('star') {\n      <sui-icon [name]=\"barIconName('star', cell.cellState)\" [size]=\"20\" />\n    }\n    @case ('heart') {\n      <sui-icon [name]=\"barIconName('heart', cell.cellState)\" [size]=\"20\" />\n    }\n    @case ('emoji') {\n      <sui-emoji class=\"sui-rating__emoji\" [name]=\"cell.emoji\" size=\"sm\" />\n    }\n    @case ('number') {\n      <span class=\"sui-rating__number\">{{ cell.index }}</span>\n    }\n  }\n</ng-template>\n\n<!-- Meta (value + reviewCount + link), inline appearance only -->\n<ng-template #metaContent>\n  @if (showValue()) {\n    <span class=\"sui-rating__value\">{{ valueLabel() }}</span>\n  }\n  @if (showValue() && reviewCount() !== null) {\n    <span class=\"sui-rating__sep\" aria-hidden=\"true\">\u2219</span>\n  }\n  @if (reviewCount() !== null) {\n    <span class=\"sui-rating__count\">{{ reviewCountLabel() }} Ratings</span>\n  }\n  @if (reviewLink(); as link) {\n    @if (link.href) {\n      <a class=\"sui-rating__link\" [suiHref]=\"link.href\">{{ link.label }}</a>\n    } @else {\n      <button type=\"button\" class=\"sui-rating__link\">{{ link.label }}</button>\n    }\n  }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;font-family:var(--sui-font-sans);align-items:center;gap:2px}:host([data-disabled]){opacity:.5;pointer-events:none}:host([data-appearance=inline][data-alignment=inline]){flex-direction:row;flex-wrap:nowrap}:host([data-appearance=inline][data-alignment=vertical]){flex-direction:column;align-items:flex-start;gap:8px}:host([data-appearance=inline][data-alignment=horizontal]){flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px}.sui-rating__icons{display:inline-flex;align-items:center;gap:2px;flex-shrink:0}.sui-rating__icon{appearance:none;border:0;margin:0;padding:0;background:transparent;font:inherit;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--sui-stroke-sub-300, #d1d1d1);transition:color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}:host([data-type=star]) .sui-rating__icon[data-fill=full],:host([data-type=star]) .sui-rating__icon[data-fill=half]{color:var(--sui-yellow-500, #f6b51e)}:host([data-type=heart]) .sui-rating__icon[data-fill=full],:host([data-type=heart]) .sui-rating__icon[data-fill=half]{color:var(--sui-state-error-base, #fb3748)}button.sui-rating__icon{cursor:pointer;border-radius:4px}button.sui-rating__icon:focus-visible{outline:2px solid var(--sui-text-strong-950);outline-offset:2px}.sui-rating__meta{display:inline-flex;align-items:center;gap:4px;flex-shrink:0}.sui-rating__meta--vertical{align-self:flex-start}.sui-rating__value,.sui-rating__count{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-strong-950);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;white-space:nowrap}.sui-rating__sep{color:var(--sui-text-strong-950);margin:0 2px}.sui-rating__link{appearance:none;border:0;background:transparent;font:inherit;padding:0;margin:0;cursor:pointer;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);color:var(--sui-text-sub-600);text-decoration:underline;text-decoration-skip-ink:none;text-underline-offset:2px;white-space:nowrap}.sui-rating__link:hover{color:var(--sui-text-strong-950)}.sui-rating__link:focus-visible{outline:2px solid var(--sui-text-strong-950);outline-offset:2px;border-radius:2px}:host([data-appearance=cell]){display:inline-flex;flex-direction:row;flex-wrap:nowrap;gap:8px}.sui-rating__cells{display:inline-flex;align-items:center;gap:8px;flex-shrink:0}:host([data-appearance=cell]) .sui-rating__icon{padding:12px;border-radius:var(--sui-radius-10, 10px);border:1px solid var(--sui-stroke-soft-200);background:var(--sui-bg-white-0);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));box-sizing:border-box;transition:background-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),border-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),box-shadow var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}:host([data-appearance=cell]) .sui-rating__icon[data-cell-state=hover]{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}:host([data-appearance=bar]){display:inline-block;align-items:stretch}:host([data-appearance=bar-area]){display:block;width:100%}.sui-rating__bar{display:inline-flex;align-items:stretch;border:1px solid var(--sui-stroke-soft-200);border-radius:0;overflow:hidden;background:var(--sui-bg-white-0)}:host([data-appearance=bar-area]) .sui-rating__bar{display:flex;width:100%;border:0;border-bottom:1px solid var(--sui-stroke-soft-200);border-radius:0;background:transparent}.sui-rating__bar-cell{appearance:none;margin:0;font:inherit;flex-shrink:0;width:64px;min-height:36px;display:flex;align-items:center;justify-content:center;padding:8px 4px;background:var(--sui-bg-white-0);border:0;border-left:1px solid var(--sui-stroke-soft-200);cursor:default;color:var(--sui-stroke-sub-300);transition:background-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}.sui-rating__bar-cell:first-child{border-left:0}:host([data-appearance=bar-area]) .sui-rating__bar-cell{flex:1 0 0;width:auto;min-width:0;background:transparent}button.sui-rating__bar-cell{cursor:pointer}button.sui-rating__bar-cell:focus-visible{outline:2px solid var(--sui-text-strong-950);outline-offset:-2px}:host([data-type=star]) .sui-rating__bar-cell[data-cell-state=selected]{color:var(--sui-yellow-500, #f6b51e)}:host([data-type=heart]) .sui-rating__bar-cell[data-cell-state=selected]{color:var(--sui-state-error-base, #fb3748)}:host([data-type=number]) .sui-rating__bar-cell[data-cell-state=hover] .sui-rating__number,:host([data-type=number]) .sui-rating__bar-cell[data-cell-state=selected] .sui-rating__number{color:var(--sui-text-strong-950)}:host([data-type=number]) .sui-rating__bar-cell[data-cell-state=selected],:host([data-type=emoji]) .sui-rating__bar-cell[data-cell-state=selected]{background:var(--sui-bg-weak-50)}.sui-rating__number{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);color:var(--sui-text-sub-600);text-align:center;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-rating__emoji{display:inline-flex;align-items:center;justify-content:center;filter:grayscale(.5);opacity:.55;transition:filter var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),opacity var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}:host([data-type=emoji]) .sui-rating__bar-cell[data-cell-state=selected] .sui-rating__emoji{filter:grayscale(0);opacity:1}.sui-rating__area{display:flex;flex-direction:column;align-items:stretch;width:100%;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-12, 12px);overflow:hidden}.sui-rating__area-input{display:flex;flex:1 0 0;align-items:flex-start;justify-content:flex-start;padding:12px;background:var(--sui-bg-white-0)}.sui-rating__area-textarea{appearance:none;display:block;width:100%;min-height:72px;border:0;margin:0;padding:0;background:transparent;resize:none;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-strong-950);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-rating__area-textarea::placeholder{color:var(--sui-text-soft-400)}.sui-rating__area-textarea:focus-visible{outline:none}.sui-rating__area-text{width:100%;min-height:72px;margin:0;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-strong-950);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-rating__area-text--placeholder{color:var(--sui-text-soft-400)}\n"] }]
         }], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], halfStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "halfStep", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], reviewCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "reviewCount", required: false }] }], reviewLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "reviewLink", required: false }] }], alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }], emojis: [{ type: i0.Input, args: [{ isSignal: true, alias: "emojis", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], reason: [{ type: i0.Input, args: [{ isSignal: true, alias: "reason", required: false }] }, { type: i0.Output, args: ["reasonChange"] }], reasonPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "reasonPlaceholder", required: false }] }], reasonRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "reasonRows", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
 
 /* ═══ SUI Rich Editor Item — SUI Design System 2.0 ══════════════════════
@@ -14483,7 +14537,7 @@ class SuiSidebar {
         this.searchSubmitted.emit(this.searchValue());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiSidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiSidebar, isStandalone: true, selector: "sui-sidebar", inputs: { collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, indicatorColor: { classPropertyName: "indicatorColor", publicName: "indicatorColor", isSignal: true, isRequired: false, transformFunction: null }, brand: { classPropertyName: "brand", publicName: "brand", isSignal: true, isRequired: false, transformFunction: null }, showHeaderButton: { classPropertyName: "showHeaderButton", publicName: "showHeaderButton", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, secondaryItems: { classPropertyName: "secondaryItems", publicName: "secondaryItems", isSignal: true, isRequired: false, transformFunction: null }, supportingItems: { classPropertyName: "supportingItems", publicName: "supportingItems", isSignal: true, isRequired: false, transformFunction: null }, supportingAnchorBottom: { classPropertyName: "supportingAnchorBottom", publicName: "supportingAnchorBottom", isSignal: true, isRequired: false, transformFunction: null }, itemsLabel: { classPropertyName: "itemsLabel", publicName: "itemsLabel", isSignal: true, isRequired: false, transformFunction: null }, secondaryItemsLabel: { classPropertyName: "secondaryItemsLabel", publicName: "secondaryItemsLabel", isSignal: true, isRequired: false, transformFunction: null }, supportingItemsLabel: { classPropertyName: "supportingItemsLabel", publicName: "supportingItemsLabel", isSignal: true, isRequired: false, transformFunction: null }, activeRoute: { classPropertyName: "activeRoute", publicName: "activeRoute", isSignal: true, isRequired: false, transformFunction: null }, profile: { classPropertyName: "profile", publicName: "profile", isSignal: true, isRequired: false, transformFunction: null }, profileDropdown: { classPropertyName: "profileDropdown", publicName: "profileDropdown", isSignal: true, isRequired: false, transformFunction: null }, mobileOpen: { classPropertyName: "mobileOpen", publicName: "mobileOpen", isSignal: true, isRequired: false, transformFunction: null }, closeOnItemClick: { classPropertyName: "closeOnItemClick", publicName: "closeOnItemClick", isSignal: true, isRequired: false, transformFunction: null }, showBackdrop: { classPropertyName: "showBackdrop", publicName: "showBackdrop", isSignal: true, isRequired: false, transformFunction: null }, mobileMode: { classPropertyName: "mobileMode", publicName: "mobileMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchValue: "searchValueChange", mobileOpen: "mobileOpenChange", itemClicked: "itemClicked", logoutClicked: "logoutClicked", backdropClicked: "backdropClicked", headerButtonClicked: "headerButtonClicked", profileClicked: "profileClicked", searchSubmitted: "searchSubmitted" }, host: { listeners: { "document:keydown.escape": "onEscapeKey()" }, properties: { "attr.title": "null", "attr.data-sui-open": "mobileOpen() ? \"\" : null", "attr.data-sui-mobile-mode": "mobileMode()", "attr.data-sui-collapsed": "collapsed() ? \"\" : null", "attr.data-sui-indicator": "indicatorColor()" } }, ngImport: i0, template: "<!-- Backdrop solo en m\u00F3vil: en desktop el sidebar es fijo y mobileOpen es inocuo.\n     Color canon = overlay del sui-modal (Figma 480:2474): rgba(51,51,51,0.24). -->\n@if (isMobile() && showBackdrop() && mobileOpen()) {\n  <div class=\"sui-sidebar-backdrop\" (click)=\"onBackdropClick()\" aria-hidden=\"true\"></div>\n}\n\n<!-- Drawer cerrado en m\u00F3vil: aria-hidden + inert \u2192 invisible para lectores de\n     pantalla y el foco no puede entrar al drawer oculto (ni quedar atrapado\n     detr\u00E1s del backdrop al cerrarse). En desktop ambos quedan null. -->\n<aside\n  class=\"sui-sidebar\"\n  [class.sui-sidebar--open]=\"mobileOpen()\"\n  [class.sui-sidebar--collapsed]=\"collapsed()\"\n  role=\"navigation\"\n  [attr.aria-hidden]=\"isMobile() && !mobileOpen() ? 'true' : null\"\n  [attr.inert]=\"isMobile() && !mobileOpen() ? '' : null\"\n>\n  <!-- \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <header class=\"sui-sidebar__header\">\n    <div class=\"sui-sidebar__header-card\">\n      <div class=\"sui-sidebar__brand-logo\">\n        @if (brandCfg().logo) {\n          <img [src]=\"brandCfg().logo\" [alt]=\"brandCfg().name\" referrerpolicy=\"no-referrer\" />\n        } @else if (brandCfg().fallback) {\n          <span class=\"sui-sidebar__brand-fallback\">{{ brandCfg().fallback }}</span>\n        } @else {\n          <sui-icon name=\"building-line\" [size]=\"20\" />\n        }\n      </div>\n      @if (!collapsed()) {\n        <div class=\"sui-sidebar__header-info\">\n          <span class=\"sui-sidebar__header-name\">{{ brandCfg().name }}</span>\n          @if (brandCfg().subtitle) {\n            @if (brandCfg().subtitleAsBadge) {\n              <sui-badge variant=\"filled\" color=\"orange\" size=\"small\">{{ brandCfg().subtitle }}</sui-badge>\n            } @else {\n              <span class=\"sui-sidebar__header-subtitle\">{{ brandCfg().subtitle }}</span>\n            }\n          }\n        </div>\n        @if (showHeaderButton()) {\n          <button\n            type=\"button\"\n            class=\"sui-sidebar__compact-btn\"\n            aria-label=\"Cambiar workspace\"\n            (click)=\"onHeaderButtonClick($event)\"\n            (touchstart)=\"$event.currentTarget\"\n            (touchend)=\"$any($event.currentTarget).blur()\"\n          >\n            <sui-icon name=\"expand-up-down-line\" [size]=\"20\" />\n          </button>\n        }\n      }\n    </div>\n    <div class=\"sui-sidebar__divider\" role=\"separator\"></div>\n  </header>\n\n  <!-- \u2500\u2500 Content \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"sui-sidebar__content\">\n    <!-- Search slot (Figma prop search=true) -->\n    @if (!collapsed() && searchCfg(); as s) {\n      <div class=\"sui-sidebar__search\">\n        <sui-icon class=\"sui-sidebar__search-icon\" name=\"search-2-line\" [size]=\"20\" />\n        <input\n          class=\"sui-sidebar__search-input\"\n          type=\"text\"\n          [placeholder]=\"s.placeholder\"\n          [value]=\"searchValue()\"\n          (input)=\"onSearchInput($any($event.target).value)\"\n          (keydown.enter)=\"onSearchSubmit()\"\n        />\n        @if (s.shortcut) {\n          <span class=\"sui-sidebar__shortcut\">{{ s.shortcut }}</span>\n        }\n      </div>\n    }\n\n    @if (items().length > 0) {\n      <div class=\"sui-sidebar__section\">\n        @if (itemsLabel()) {\n          <div class=\"sui-sidebar__section-label\" [class.sui-sidebar__section-label--collapsed]=\"collapsed()\">{{ itemsLabel() }}</div>\n        }\n        <nav class=\"sui-sidebar__nav\">\n          @for (item of items(); track item.value) {\n            <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: item }\"></ng-container>\n          }\n        </nav>\n      </div>\n    }\n\n    @if (secondaryItems().length > 0) {\n      <div class=\"sui-sidebar__section sui-sidebar__section--secondary\">\n        @if (secondaryItemsLabel()) {\n          <div class=\"sui-sidebar__section-label\" [class.sui-sidebar__section-label--collapsed]=\"collapsed()\">{{ secondaryItemsLabel() }}</div>\n        }\n        <nav class=\"sui-sidebar__nav\">\n          @for (item of secondaryItems(); track item.value) {\n            <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: item }\"></ng-container>\n          }\n        </nav>\n      </div>\n    }\n\n    <!-- Supporting Content (Figma supContent) \u2014 ancla al fondo cuando aplica -->\n    @if (supportingItems().length > 0) {\n      <div\n        class=\"sui-sidebar__section sui-sidebar__section--supporting\"\n        [class.sui-sidebar__section--anchor-bottom]=\"supportingAnchorBottom()\"\n      >\n        @if (supportingItemsLabel()) {\n          <div class=\"sui-sidebar__section-label\" [class.sui-sidebar__section-label--collapsed]=\"collapsed()\">{{ supportingItemsLabel() }}</div>\n        }\n        <nav class=\"sui-sidebar__nav\">\n          @for (item of supportingItems(); track item.value) {\n            <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: item }\"></ng-container>\n          }\n        </nav>\n      </div>\n    }\n\n    <!-- Feature Card slot (Figma FeatureCard=On) \u2014 promo opcional, oculto en collapsed -->\n    @if (!collapsed()) {\n      <div class=\"sui-sidebar__feature-card\">\n        <ng-content select=\"[feature-card]\"></ng-content>\n      </div>\n    }\n  </div>\n\n  <!-- \u2500\u2500 Footer (profile) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (profile(); as p) {\n    <footer class=\"sui-sidebar__footer\">\n      <div class=\"sui-sidebar__divider sui-sidebar__divider--top\" role=\"separator\"></div>\n      <div class=\"sui-sidebar__profile\">\n        <sui-avatar\n          size=\"lg\"\n          [src]=\"p.avatarUrl ?? null\"\n          [alt]=\"p.name\"\n          [initials]=\"p.initials ?? ''\"\n          [status]=\"p.status ?? null\"\n          color=\"slate\"\n        />\n        @if (!collapsed()) {\n          <div class=\"sui-sidebar__profile-info\">\n            <div class=\"sui-sidebar__profile-name-row\">\n              <span class=\"sui-sidebar__profile-name\">{{ p.name }}</span>\n              @if (p.verified) {\n                <!-- Figma usa verified-fill (glyph propio SUI); el match m\u00E1s\n                     cercano en RemixIcon es verified-badge-fill. -->\n                <sui-icon\n                  class=\"sui-sidebar__profile-verified\"\n                  name=\"verified-badge-fill\"\n                  [size]=\"20\"\n                  aria-label=\"Verificado\"\n                />\n              }\n            </div>\n            @if (p.email) {\n              <span class=\"sui-sidebar__profile-email\">{{ p.email }}</span>\n            }\n          </div>\n          @if (profileDropdown()) {\n            <button\n              type=\"button\"\n              class=\"sui-sidebar__compact-btn sui-sidebar__compact-btn--ghost\"\n              aria-label=\"Opciones de perfil\"\n              (click)=\"onProfileButtonClick($event)\"\n              (touchstart)=\"$event.currentTarget\"\n              (touchend)=\"$any($event.currentTarget).blur()\"\n            >\n              <sui-icon name=\"arrow-right-s-line\" [size]=\"20\" />\n            </button>\n          }\n        }\n      </div>\n    </footer>\n  }\n</aside>\n\n<!-- \u2500\u2500 Item template (compartido entre todas las secciones) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n<ng-template #itemTpl let-item>\n  @if (item.route && !item.action) {\n    <a\n      class=\"sui-sidebar__item\"\n      [class.sui-sidebar__item--danger]=\"item.variant === 'danger'\"\n      [routerLink]=\"item.route\"\n      routerLinkActive=\"sui-sidebar__item--active\"\n      [attr.target]=\"item.external ? '_blank' : null\"\n      [attr.rel]=\"item.external ? 'noopener noreferrer' : null\"\n      [attr.title]=\"collapsed() ? (item.tooltip ?? item.label) : null\"\n      [attr.aria-label]=\"collapsed() ? item.label : null\"\n      (click)=\"onItemClick(item, $event)\"\n      (touchstart)=\"$event.currentTarget\"\n      (touchend)=\"$any($event.currentTarget).blur()\"\n    >\n      <ng-container *ngTemplateOutlet=\"itemBody; context: { $implicit: item }\"></ng-container>\n    </a>\n  } @else {\n    <button\n      type=\"button\"\n      class=\"sui-sidebar__item\"\n      [class.sui-sidebar__item--active]=\"isItemActive(item)\"\n      [class.sui-sidebar__item--danger]=\"item.variant === 'danger'\"\n      [attr.title]=\"collapsed() ? (item.tooltip ?? item.label) : null\"\n      [attr.aria-label]=\"collapsed() ? item.label : null\"\n      (click)=\"onItemClick(item, $event)\"\n      (touchstart)=\"$event.currentTarget\"\n      (touchend)=\"$any($event.currentTarget).blur()\"\n    >\n      <ng-container *ngTemplateOutlet=\"itemBody; context: { $implicit: item }\"></ng-container>\n    </button>\n  }\n</ng-template>\n\n<ng-template #itemBody let-item>\n  @if (item.colorDot) {\n    <span\n      class=\"sui-sidebar__item-dot\"\n      [style.background-color]=\"item.colorDot\"\n      aria-hidden=\"true\"\n    ></span>\n  } @else if (item.icon) {\n    <sui-icon class=\"sui-sidebar__item-icon\" [name]=\"item.icon\" [size]=\"20\" />\n  }\n  @if (!collapsed()) {\n    <span class=\"sui-sidebar__item-label\">{{ item.label }}</span>\n    @if (item.badge !== undefined && item.badge !== null && item.badge !== '') {\n      <sui-badge\n        class=\"sui-sidebar__item-badge\"\n        variant=\"filled\"\n        [color]=\"item.variant === 'danger' ? 'red' : 'orange'\"\n        size=\"small\"\n        type=\"number\"\n      >{{ item.badge }}</sui-badge>\n    }\n    @if (item.shortcut) {\n      <span class=\"sui-sidebar__shortcut\">{{ item.shortcut }}</span>\n    }\n    <!-- Chevron del item activo (Figma): visibilidad controlada por CSS via\n         .sui-sidebar__item--active (cubre tanto isItemActive como RouterLinkActive). -->\n    <sui-icon class=\"sui-sidebar__item-chevron\" name=\"arrow-right-s-line\" [size]=\"20\" />\n  }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:contents;font-family:var(--font-sans, \"Satoshi\", system-ui, sans-serif)}.sui-sidebar-backdrop{position:fixed;inset:0;z-index:299;background:#3333333d;animation:sui-sidebar-fade-in .2s ease-out}.sui-sidebar{display:flex;flex-direction:column;flex-shrink:0;width:272px;height:100dvh;background:var(--sui-bg-white-0, #ffffff);border-right:1px solid var(--sui-stroke-soft-200, #ebebeb);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-sidebar__header{position:relative;padding:12px;padding-top:calc(12px + env(safe-area-inset-top,0px))}.sui-sidebar__header-card{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--sui-radius-10, 10px);background:var(--sui-bg-white-0, #ffffff);overflow:hidden}.sui-sidebar__brand-logo{flex-shrink:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:999px;background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-sub-600, #5c5c5c);overflow:hidden}.sui-sidebar__brand-logo img{width:100%;height:100%;object-fit:cover;display:block}.sui-sidebar__brand-fallback{font-size:18px;line-height:1}.sui-sidebar__compact-btn{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;padding:1px;border-radius:var(--sui-radius-6, 6px);border:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #ffffff);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));color:var(--sui-text-sub-600, #5c5c5c);cursor:pointer;transition:background-color .12s ease-out,color .12s ease-out}@media(hover:hover)and (pointer:fine){.sui-sidebar__compact-btn:hover{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-strong-950, #171717)}}.sui-sidebar__compact-btn:focus-visible{outline:2px solid var(--sui-state-information-base, #335cff);outline-offset:-1px}.sui-sidebar__compact-btn:active{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__compact-btn--ghost{border-color:transparent;box-shadow:none;background:transparent}.sui-sidebar__header-info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0;align-items:flex-start}.sui-sidebar__header-name{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950, #171717);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.sui-sidebar__header-subtitle{font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.sui-sidebar__divider{position:absolute;bottom:0;left:20px;right:20px;height:1px;background:var(--sui-stroke-soft-200, #ebebeb)}.sui-sidebar__divider--top{top:0;bottom:auto}.sui-sidebar__content{flex:1;display:flex;flex-direction:column;gap:20px;padding:20px 20px 16px;overflow-y:auto;overflow-x:hidden;min-height:0}.sui-sidebar__section{display:flex;flex-direction:column;gap:8px;flex-shrink:0}.sui-sidebar__section--secondary,.sui-sidebar__section--supporting{gap:6px}.sui-sidebar__section--anchor-bottom{margin-top:auto}.sui-sidebar__section-label{padding:4px;font-size:12px;font-weight:500;line-height:16px;letter-spacing:.04em;text-transform:uppercase;color:var(--sui-text-soft-400, #a3a3a3)}.sui-sidebar__section-label--collapsed{padding:4px 0;text-align:center}.sui-sidebar__search{display:flex;align-items:center;gap:8px;width:100%;padding:8px 8px 8px 10px;border-radius:var(--sui-radius-8, 8px);border:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #ffffff);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));box-sizing:border-box}.sui-sidebar__search-icon{flex-shrink:0;display:inline-flex;color:var(--sui-text-soft-400, #a3a3a3)}.sui-sidebar__search-input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:inherit;font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950, #171717)}.sui-sidebar__search-input::placeholder{color:var(--sui-text-soft-400, #a3a3a3)}.sui-sidebar__shortcut{flex-shrink:0;display:inline-flex;align-items:center;box-sizing:border-box;padding:2px 6px;border-radius:var(--sui-radius-4, 4px);border:1px solid var(--sui-stroke-soft-200, #ebebeb);font-size:12px;font-weight:500;line-height:16px;letter-spacing:.04em;text-transform:uppercase;color:var(--sui-text-soft-400, #a3a3a3);white-space:nowrap}.sui-sidebar__nav{display:flex;flex-direction:column;gap:4px}.sui-sidebar__item{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--sui-radius-8, 8px);width:100%;background:transparent;border:none;font-family:inherit;text-align:left;text-decoration:none;color:inherit;cursor:pointer;position:relative;transition:background-color .12s ease-out,color .12s ease-out}@media(hover:hover)and (pointer:fine){.sui-sidebar__item:hover{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item:hover .sui-sidebar__item-label,.sui-sidebar__item:hover .sui-sidebar__item-icon{color:var(--sui-text-strong-950, #171717)}}.sui-sidebar__item:focus-visible{outline:2px solid var(--_sui-sidebar-indicator, var(--sui-primary-base, #fa7319));outline-offset:-2px}.sui-sidebar__item:active{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item-icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;color:var(--sui-text-sub-600, #5c5c5c);transition:color .12s ease-out}.sui-sidebar__item-label{flex:1;font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .12s ease-out}.sui-sidebar__item-badge{flex-shrink:0}.sui-sidebar__item-dot{flex-shrink:0;width:8px;height:8px;margin:6px;border-radius:999px}.sui-sidebar__item-chevron{flex-shrink:0;display:none;color:var(--sui-text-sub-600, #5c5c5c)}:host{--_sui-sidebar-indicator: var(--sui-primary-base, #fa7319)}:host([data-sui-indicator=information]){--_sui-sidebar-indicator: var(--sui-state-information-base, #335cff)}.sui-sidebar__item--active{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item--active .sui-sidebar__item-label{color:var(--sui-text-strong-950, #171717)}.sui-sidebar__item--active .sui-sidebar__item-icon{color:var(--_sui-sidebar-indicator)}.sui-sidebar__item--active .sui-sidebar__item-chevron{display:inline-flex;color:var(--sui-text-sub-600, #5c5c5c)}.sui-sidebar__item--active:before{content:\"\";position:absolute;left:-20px;top:50%;transform:translateY(-50%);width:4px;height:20px;background:var(--_sui-sidebar-indicator);border-radius:0 4px 4px 0}@media(hover:hover)and (pointer:fine){.sui-sidebar__item--active:hover{background:var(--sui-bg-weak-50, #f7f7f7)}}.sui-sidebar__item--danger .sui-sidebar__item-icon,.sui-sidebar__item--danger .sui-sidebar__item-label{color:var(--sui-state-error-base, #fb3748)}@media(hover:hover)and (pointer:fine){.sui-sidebar__item--danger:hover{background:var(--sui-red-alpha-10, rgba(251, 55, 72, .0980392157))}.sui-sidebar__item--danger:hover .sui-sidebar__item-icon,.sui-sidebar__item--danger:hover .sui-sidebar__item-label{color:var(--sui-state-error-base, #fb3748)}}.sui-sidebar__item--danger:active{background:var(--sui-red-alpha-16, rgba(251, 55, 72, .1607843137))}.sui-sidebar__footer{position:relative;padding:12px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}.sui-sidebar__profile{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--sui-radius-10, 10px);overflow:hidden}.sui-sidebar__profile-info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0;height:40px;justify-content:center}.sui-sidebar__profile-name-row{display:flex;align-items:center;gap:2px;min-width:0}.sui-sidebar__profile-name{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950, #171717);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-sidebar__profile-verified{flex-shrink:0;display:inline-flex;color:var(--sui-state-verified-base, #47c2ff)}.sui-sidebar__profile-email{font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-sidebar__feature-card{width:100%}.sui-sidebar__feature-card:not(:has(*)){display:none}:host([data-sui-collapsed]) .sui-sidebar{width:80px}:host([data-sui-collapsed]) .sui-sidebar__header-card,:host([data-sui-collapsed]) .sui-sidebar__profile{justify-content:center}:host([data-sui-collapsed]) .sui-sidebar__content{padding-inline:12px}:host([data-sui-collapsed]) .sui-sidebar__item{justify-content:center;padding:8px}:host([data-sui-collapsed]) .sui-sidebar__item--active:before{left:-12px}@media(max-width:767px){.sui-sidebar{position:fixed;top:0;left:0;bottom:0;height:100dvh;z-index:300;width:min(86vw,360px);box-sizing:border-box;padding-left:env(safe-area-inset-left,0px);transform:translate(-100%);transition:transform .24s cubic-bezier(.23,1,.32,1);border-right:none;border-radius:0 24px 24px 0;overflow:hidden;box-shadow:4px 0 24px #0e121b00}.sui-sidebar--open{transform:translate(0);box-shadow:4px 0 24px #0e121b1a}:host([data-sui-mobile-mode=sheet]) .sui-sidebar{width:calc(100vw - 40px);max-width:none}.sui-sidebar__item{gap:14px;padding:14px 12px;border-radius:var(--sui-radius-10, 10px);transition:transform .16s cubic-bezier(.23,1,.32,1),background-color .16s cubic-bezier(.23,1,.32,1)}.sui-sidebar__item:active{transform:scale(.98);background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item-icon{width:24px;height:24px}.sui-sidebar__item-label{font-size:17px;line-height:24px;letter-spacing:-.01em}}@keyframes sui-sidebar-fade-in{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiAvatar, selector: "sui-avatar", inputs: ["size", "src", "alt", "initials", "color", "status", "memojiSrc", "illustrationSrc", "icon", "companyLogoSrc", "topBadge", "bgColor"] }, { kind: "component", type: SuiBadge, selector: "sui-badge", inputs: ["color", "variant", "size", "type", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiSidebar, isStandalone: true, selector: "sui-sidebar", inputs: { collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, indicatorColor: { classPropertyName: "indicatorColor", publicName: "indicatorColor", isSignal: true, isRequired: false, transformFunction: null }, brand: { classPropertyName: "brand", publicName: "brand", isSignal: true, isRequired: false, transformFunction: null }, showHeaderButton: { classPropertyName: "showHeaderButton", publicName: "showHeaderButton", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, secondaryItems: { classPropertyName: "secondaryItems", publicName: "secondaryItems", isSignal: true, isRequired: false, transformFunction: null }, supportingItems: { classPropertyName: "supportingItems", publicName: "supportingItems", isSignal: true, isRequired: false, transformFunction: null }, supportingAnchorBottom: { classPropertyName: "supportingAnchorBottom", publicName: "supportingAnchorBottom", isSignal: true, isRequired: false, transformFunction: null }, itemsLabel: { classPropertyName: "itemsLabel", publicName: "itemsLabel", isSignal: true, isRequired: false, transformFunction: null }, secondaryItemsLabel: { classPropertyName: "secondaryItemsLabel", publicName: "secondaryItemsLabel", isSignal: true, isRequired: false, transformFunction: null }, supportingItemsLabel: { classPropertyName: "supportingItemsLabel", publicName: "supportingItemsLabel", isSignal: true, isRequired: false, transformFunction: null }, activeRoute: { classPropertyName: "activeRoute", publicName: "activeRoute", isSignal: true, isRequired: false, transformFunction: null }, profile: { classPropertyName: "profile", publicName: "profile", isSignal: true, isRequired: false, transformFunction: null }, profileDropdown: { classPropertyName: "profileDropdown", publicName: "profileDropdown", isSignal: true, isRequired: false, transformFunction: null }, mobileOpen: { classPropertyName: "mobileOpen", publicName: "mobileOpen", isSignal: true, isRequired: false, transformFunction: null }, closeOnItemClick: { classPropertyName: "closeOnItemClick", publicName: "closeOnItemClick", isSignal: true, isRequired: false, transformFunction: null }, showBackdrop: { classPropertyName: "showBackdrop", publicName: "showBackdrop", isSignal: true, isRequired: false, transformFunction: null }, mobileMode: { classPropertyName: "mobileMode", publicName: "mobileMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchValue: "searchValueChange", mobileOpen: "mobileOpenChange", itemClicked: "itemClicked", logoutClicked: "logoutClicked", backdropClicked: "backdropClicked", headerButtonClicked: "headerButtonClicked", profileClicked: "profileClicked", searchSubmitted: "searchSubmitted" }, host: { listeners: { "document:keydown.escape": "onEscapeKey()" }, properties: { "attr.title": "null", "attr.data-sui-open": "mobileOpen() ? \"\" : null", "attr.data-sui-mobile-mode": "mobileMode()", "attr.data-sui-collapsed": "collapsed() ? \"\" : null", "attr.data-sui-indicator": "indicatorColor()" } }, ngImport: i0, template: "<!-- Backdrop solo en m\u00F3vil: en desktop el sidebar es fijo y mobileOpen es inocuo.\n     Color canon = overlay del sui-modal (Figma 480:2474): rgba(51,51,51,0.24). -->\n@if (isMobile() && showBackdrop() && mobileOpen()) {\n  <div class=\"sui-sidebar-backdrop\" (click)=\"onBackdropClick()\" aria-hidden=\"true\"></div>\n}\n\n<!-- Drawer cerrado en m\u00F3vil: aria-hidden + inert \u2192 invisible para lectores de\n     pantalla y el foco no puede entrar al drawer oculto (ni quedar atrapado\n     detr\u00E1s del backdrop al cerrarse). En desktop ambos quedan null. -->\n<aside\n  class=\"sui-sidebar\"\n  [class.sui-sidebar--open]=\"mobileOpen()\"\n  [class.sui-sidebar--collapsed]=\"collapsed()\"\n  role=\"navigation\"\n  [attr.aria-hidden]=\"isMobile() && !mobileOpen() ? 'true' : null\"\n  [attr.inert]=\"isMobile() && !mobileOpen() ? '' : null\"\n>\n  <!-- \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <header class=\"sui-sidebar__header\">\n    <div class=\"sui-sidebar__header-card\">\n      <div class=\"sui-sidebar__brand-logo\">\n        @if (brandCfg().logo) {\n          <img [src]=\"brandCfg().logo\" [alt]=\"brandCfg().name\" referrerpolicy=\"no-referrer\" />\n        } @else if (brandCfg().fallback) {\n          <span class=\"sui-sidebar__brand-fallback\">{{ brandCfg().fallback }}</span>\n        } @else {\n          <sui-icon name=\"building-line\" [size]=\"20\" />\n        }\n      </div>\n      @if (!collapsed()) {\n        <div class=\"sui-sidebar__header-info\">\n          <span class=\"sui-sidebar__header-name\">{{ brandCfg().name }}</span>\n          @if (brandCfg().subtitle) {\n            @if (brandCfg().subtitleAsBadge) {\n              <sui-badge variant=\"filled\" color=\"orange\" size=\"small\">{{ brandCfg().subtitle }}</sui-badge>\n            } @else {\n              <span class=\"sui-sidebar__header-subtitle\">{{ brandCfg().subtitle }}</span>\n            }\n          }\n        </div>\n        @if (showHeaderButton()) {\n          <button\n            type=\"button\"\n            class=\"sui-sidebar__compact-btn\"\n            aria-label=\"Cambiar workspace\"\n            (click)=\"onHeaderButtonClick($event)\"\n            (touchstart)=\"$event.currentTarget\"\n            (touchend)=\"$any($event.currentTarget).blur()\"\n          >\n            <sui-icon name=\"expand-up-down-line\" [size]=\"20\" />\n          </button>\n        }\n      }\n    </div>\n    <div class=\"sui-sidebar__divider\" role=\"separator\"></div>\n  </header>\n\n  <!-- \u2500\u2500 Content \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"sui-sidebar__content\">\n    <!-- Search slot (Figma prop search=true) -->\n    @if (!collapsed() && searchCfg(); as s) {\n      <div class=\"sui-sidebar__search\">\n        <sui-icon class=\"sui-sidebar__search-icon\" name=\"search-2-line\" [size]=\"20\" />\n        <input\n          class=\"sui-sidebar__search-input\"\n          type=\"text\"\n          [placeholder]=\"s.placeholder\"\n          [value]=\"searchValue()\"\n          (input)=\"onSearchInput($any($event.target).value)\"\n          (keydown.enter)=\"onSearchSubmit()\"\n        />\n        @if (s.shortcut) {\n          <span class=\"sui-sidebar__shortcut\">{{ s.shortcut }}</span>\n        }\n      </div>\n    }\n\n    @if (items().length > 0) {\n      <div class=\"sui-sidebar__section\">\n        @if (itemsLabel()) {\n          <div class=\"sui-sidebar__section-label\" [class.sui-sidebar__section-label--collapsed]=\"collapsed()\">{{ itemsLabel() }}</div>\n        }\n        <nav class=\"sui-sidebar__nav\">\n          @for (item of items(); track item.value) {\n            <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: item }\"></ng-container>\n          }\n        </nav>\n      </div>\n    }\n\n    @if (secondaryItems().length > 0) {\n      <div class=\"sui-sidebar__section sui-sidebar__section--secondary\">\n        @if (secondaryItemsLabel()) {\n          <div class=\"sui-sidebar__section-label\" [class.sui-sidebar__section-label--collapsed]=\"collapsed()\">{{ secondaryItemsLabel() }}</div>\n        }\n        <nav class=\"sui-sidebar__nav\">\n          @for (item of secondaryItems(); track item.value) {\n            <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: item }\"></ng-container>\n          }\n        </nav>\n      </div>\n    }\n\n    <!-- Supporting Content (Figma supContent) \u2014 ancla al fondo cuando aplica -->\n    @if (supportingItems().length > 0) {\n      <div\n        class=\"sui-sidebar__section sui-sidebar__section--supporting\"\n        [class.sui-sidebar__section--anchor-bottom]=\"supportingAnchorBottom()\"\n      >\n        @if (supportingItemsLabel()) {\n          <div class=\"sui-sidebar__section-label\" [class.sui-sidebar__section-label--collapsed]=\"collapsed()\">{{ supportingItemsLabel() }}</div>\n        }\n        <nav class=\"sui-sidebar__nav\">\n          @for (item of supportingItems(); track item.value) {\n            <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: item }\"></ng-container>\n          }\n        </nav>\n      </div>\n    }\n\n    <!-- Feature Card slot (Figma FeatureCard=On) \u2014 promo opcional, oculto en collapsed -->\n    @if (!collapsed()) {\n      <div class=\"sui-sidebar__feature-card\">\n        <ng-content select=\"[feature-card]\"></ng-content>\n      </div>\n    }\n  </div>\n\n  <!-- \u2500\u2500 Footer (profile) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (profile(); as p) {\n    <footer class=\"sui-sidebar__footer\">\n      <div class=\"sui-sidebar__divider sui-sidebar__divider--top\" role=\"separator\"></div>\n      <div class=\"sui-sidebar__profile\">\n        <sui-avatar\n          size=\"lg\"\n          [src]=\"p.avatarUrl ?? null\"\n          [alt]=\"p.name\"\n          [initials]=\"p.initials ?? ''\"\n          [status]=\"p.status ?? null\"\n          color=\"slate\"\n        />\n        @if (!collapsed()) {\n          <div class=\"sui-sidebar__profile-info\">\n            <div class=\"sui-sidebar__profile-name-row\">\n              <span class=\"sui-sidebar__profile-name\">{{ p.name }}</span>\n              @if (p.verified) {\n                <!-- Figma usa verified-fill (glyph propio SUI); el match m\u00E1s\n                     cercano en RemixIcon es verified-badge-fill. -->\n                <sui-icon\n                  class=\"sui-sidebar__profile-verified\"\n                  name=\"verified-badge-fill\"\n                  [size]=\"20\"\n                  aria-label=\"Verificado\"\n                />\n              }\n            </div>\n            @if (p.email) {\n              <span class=\"sui-sidebar__profile-email\">{{ p.email }}</span>\n            }\n          </div>\n          @if (profileDropdown()) {\n            <button\n              type=\"button\"\n              class=\"sui-sidebar__compact-btn sui-sidebar__compact-btn--ghost\"\n              aria-label=\"Opciones de perfil\"\n              (click)=\"onProfileButtonClick($event)\"\n              (touchstart)=\"$event.currentTarget\"\n              (touchend)=\"$any($event.currentTarget).blur()\"\n            >\n              <sui-icon name=\"arrow-right-s-line\" [size]=\"20\" />\n            </button>\n          }\n        }\n      </div>\n    </footer>\n  }\n</aside>\n\n<!-- \u2500\u2500 Item template (compartido entre todas las secciones) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n<ng-template #itemTpl let-item>\n  @if (item.route && !item.action) {\n    <a\n      class=\"sui-sidebar__item\"\n      [class.sui-sidebar__item--danger]=\"item.variant === 'danger'\"\n      [routerLink]=\"item.route\"\n      routerLinkActive=\"sui-sidebar__item--active\"\n      [attr.target]=\"item.external ? '_blank' : null\"\n      [attr.rel]=\"item.external ? 'noopener noreferrer' : null\"\n      [attr.title]=\"collapsed() ? (item.tooltip ?? item.label) : null\"\n      [attr.aria-label]=\"collapsed() ? item.label : null\"\n      (click)=\"onItemClick(item, $event)\"\n      (touchstart)=\"$event.currentTarget\"\n      (touchend)=\"$any($event.currentTarget).blur()\"\n    >\n      <ng-container *ngTemplateOutlet=\"itemBody; context: { $implicit: item }\"></ng-container>\n    </a>\n  } @else {\n    <button\n      type=\"button\"\n      class=\"sui-sidebar__item\"\n      [class.sui-sidebar__item--active]=\"isItemActive(item)\"\n      [class.sui-sidebar__item--danger]=\"item.variant === 'danger'\"\n      [attr.title]=\"collapsed() ? (item.tooltip ?? item.label) : null\"\n      [attr.aria-label]=\"collapsed() ? item.label : null\"\n      (click)=\"onItemClick(item, $event)\"\n      (touchstart)=\"$event.currentTarget\"\n      (touchend)=\"$any($event.currentTarget).blur()\"\n    >\n      <ng-container *ngTemplateOutlet=\"itemBody; context: { $implicit: item }\"></ng-container>\n    </button>\n  }\n</ng-template>\n\n<ng-template #itemBody let-item>\n  @if (item.colorDot) {\n    <span\n      class=\"sui-sidebar__item-dot\"\n      [style.background-color]=\"item.colorDot\"\n      aria-hidden=\"true\"\n    ></span>\n  } @else if (item.icon) {\n    <sui-icon class=\"sui-sidebar__item-icon\" [name]=\"item.icon\" [size]=\"20\" />\n  }\n  @if (!collapsed()) {\n    <span class=\"sui-sidebar__item-label\">{{ item.label }}</span>\n    @if (item.badge !== undefined && item.badge !== null && item.badge !== '') {\n      <sui-badge\n        class=\"sui-sidebar__item-badge\"\n        variant=\"filled\"\n        [color]=\"item.variant === 'danger' ? 'red' : 'orange'\"\n        size=\"small\"\n        type=\"number\"\n      >{{ item.badge }}</sui-badge>\n    }\n    @if (item.shortcut) {\n      <span class=\"sui-sidebar__shortcut\">{{ item.shortcut }}</span>\n    }\n    <!-- Chevron del item activo (Figma): visibilidad controlada por CSS via\n         .sui-sidebar__item--active (cubre tanto isItemActive como RouterLinkActive). -->\n    <sui-icon class=\"sui-sidebar__item-chevron\" name=\"arrow-right-s-line\" [size]=\"20\" />\n  }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:contents;font-family:var(--font-sans, \"Satoshi\", system-ui, sans-serif)}.sui-sidebar-backdrop{position:fixed;inset:0;z-index:299;background:#3333333d;animation:sui-sidebar-fade-in .2s ease-out}.sui-sidebar{display:flex;flex-direction:column;flex-shrink:0;width:272px;height:100dvh;background:var(--sui-bg-white-0, #ffffff);border-right:1px solid var(--sui-stroke-soft-200, #ebebeb);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-sidebar__header{position:relative;padding:12px;padding-top:calc(12px + env(safe-area-inset-top,0px))}.sui-sidebar__header-card{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--sui-radius-10, 10px);background:var(--sui-bg-white-0, #ffffff);overflow:hidden}.sui-sidebar__brand-logo{flex-shrink:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:999px;background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-sub-600, #5c5c5c);overflow:hidden}.sui-sidebar__brand-logo img{width:100%;height:100%;object-fit:cover;display:block}.sui-sidebar__brand-fallback{font-size:18px;line-height:1}.sui-sidebar__compact-btn{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;padding:1px;border-radius:var(--sui-radius-6, 6px);border:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #ffffff);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));color:var(--sui-text-sub-600, #5c5c5c);cursor:pointer;transition:background-color .12s ease-out,color .12s ease-out}@media(hover:hover)and (pointer:fine){.sui-sidebar__compact-btn:hover{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-strong-950, #171717)}}.sui-sidebar__compact-btn:focus-visible{outline:2px solid var(--sui-state-information-base, #335cff);outline-offset:-1px}.sui-sidebar__compact-btn:active{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__compact-btn--ghost{border-color:transparent;box-shadow:none;background:transparent}.sui-sidebar__header-info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0;align-items:flex-start}.sui-sidebar__header-name{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950, #171717);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.sui-sidebar__header-subtitle{font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.sui-sidebar__divider{position:absolute;bottom:0;left:20px;right:20px;height:1px;background:var(--sui-stroke-soft-200, #ebebeb)}.sui-sidebar__divider--top{top:0;bottom:auto}.sui-sidebar__content{flex:1;display:flex;flex-direction:column;gap:20px;padding:20px 20px 16px;overflow-y:auto;overflow-x:hidden;min-height:0;scrollbar-width:none}.sui-sidebar__content::-webkit-scrollbar{display:none}.sui-sidebar__section{display:flex;flex-direction:column;gap:8px;flex-shrink:0}.sui-sidebar__section--secondary,.sui-sidebar__section--supporting{gap:6px}.sui-sidebar__section--anchor-bottom{margin-top:auto}.sui-sidebar__section-label{padding:4px;font-size:12px;font-weight:500;line-height:16px;letter-spacing:.04em;text-transform:uppercase;color:var(--sui-text-soft-400, #a3a3a3)}.sui-sidebar__section-label--collapsed{padding:4px 0;text-align:center}.sui-sidebar__search{display:flex;align-items:center;gap:8px;width:100%;padding:8px 8px 8px 10px;border-radius:var(--sui-radius-8, 8px);border:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #ffffff);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));box-sizing:border-box}.sui-sidebar__search-icon{flex-shrink:0;display:inline-flex;color:var(--sui-text-soft-400, #a3a3a3)}.sui-sidebar__search-input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:inherit;font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950, #171717)}.sui-sidebar__search-input::placeholder{color:var(--sui-text-soft-400, #a3a3a3)}.sui-sidebar__shortcut{flex-shrink:0;display:inline-flex;align-items:center;box-sizing:border-box;padding:2px 6px;border-radius:var(--sui-radius-4, 4px);border:1px solid var(--sui-stroke-soft-200, #ebebeb);font-size:12px;font-weight:500;line-height:16px;letter-spacing:.04em;text-transform:uppercase;color:var(--sui-text-soft-400, #a3a3a3);white-space:nowrap}.sui-sidebar__nav{display:flex;flex-direction:column;gap:4px}.sui-sidebar__item{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--sui-radius-8, 8px);width:100%;box-sizing:border-box;background:transparent;border:none;font-family:inherit;text-align:left;text-decoration:none;color:inherit;cursor:pointer;position:relative;transition:background-color .12s ease-out,color .12s ease-out}@media(hover:hover)and (pointer:fine){.sui-sidebar__item:hover{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item:hover .sui-sidebar__item-label,.sui-sidebar__item:hover .sui-sidebar__item-icon{color:var(--sui-text-strong-950, #171717)}}.sui-sidebar__item:focus-visible{outline:2px solid var(--_sui-sidebar-indicator, var(--sui-primary-base, #fa7319));outline-offset:-2px}.sui-sidebar__item:active{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item-icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;color:var(--sui-text-sub-600, #5c5c5c);transition:color .12s ease-out}.sui-sidebar__item-label{flex:1;font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .12s ease-out}.sui-sidebar__item-badge{flex-shrink:0}.sui-sidebar__item-dot{flex-shrink:0;width:8px;height:8px;margin:6px;border-radius:999px}.sui-sidebar__item-chevron{flex-shrink:0;display:none;color:var(--sui-text-sub-600, #5c5c5c)}:host{--_sui-sidebar-indicator: var(--sui-primary-base, #fa7319)}:host([data-sui-indicator=information]){--_sui-sidebar-indicator: var(--sui-state-information-base, #335cff)}.sui-sidebar__item--active{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item--active .sui-sidebar__item-label{color:var(--sui-text-strong-950, #171717)}.sui-sidebar__item--active .sui-sidebar__item-icon{color:var(--_sui-sidebar-indicator)}.sui-sidebar__item--active .sui-sidebar__item-chevron{display:inline-flex;color:var(--sui-text-sub-600, #5c5c5c)}.sui-sidebar__item--active:before{content:\"\";position:absolute;left:-20px;top:50%;transform:translateY(-50%);width:4px;height:20px;background:var(--_sui-sidebar-indicator);border-radius:0 4px 4px 0}@media(hover:hover)and (pointer:fine){.sui-sidebar__item--active:hover{background:var(--sui-bg-weak-50, #f7f7f7)}}.sui-sidebar__item--danger .sui-sidebar__item-icon,.sui-sidebar__item--danger .sui-sidebar__item-label{color:var(--sui-state-error-base, #fb3748)}@media(hover:hover)and (pointer:fine){.sui-sidebar__item--danger:hover{background:var(--sui-red-alpha-10, rgba(251, 55, 72, .0980392157))}.sui-sidebar__item--danger:hover .sui-sidebar__item-icon,.sui-sidebar__item--danger:hover .sui-sidebar__item-label{color:var(--sui-state-error-base, #fb3748)}}.sui-sidebar__item--danger:active{background:var(--sui-red-alpha-16, rgba(251, 55, 72, .1607843137))}.sui-sidebar__footer{position:relative;padding:12px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}.sui-sidebar__profile{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--sui-radius-10, 10px);overflow:hidden}.sui-sidebar__profile-info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0;height:40px;justify-content:center}.sui-sidebar__profile-name-row{display:flex;align-items:center;gap:2px;min-width:0}.sui-sidebar__profile-name{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950, #171717);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-sidebar__profile-verified{flex-shrink:0;display:inline-flex;color:var(--sui-state-verified-base, #47c2ff)}.sui-sidebar__profile-email{font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-sidebar__feature-card{width:100%}.sui-sidebar__feature-card:not(:has(*)){display:none}:host([data-sui-collapsed]) .sui-sidebar{width:80px}:host([data-sui-collapsed]) .sui-sidebar__header-card,:host([data-sui-collapsed]) .sui-sidebar__profile{justify-content:center}:host([data-sui-collapsed]) .sui-sidebar__content{padding-inline:12px}:host([data-sui-collapsed]) .sui-sidebar__item{justify-content:center;width:36px;height:36px;padding:8px;margin-inline:auto}:host([data-sui-collapsed]) .sui-sidebar__item--active:before{left:-22px}@media(max-width:767px){.sui-sidebar{position:fixed;top:0;left:0;bottom:0;height:100dvh;z-index:300;width:min(86vw,360px);box-sizing:border-box;padding-left:env(safe-area-inset-left,0px);transform:translate(-100%);transition:transform .24s cubic-bezier(.23,1,.32,1);border-right:none;border-radius:0 24px 24px 0;overflow:hidden;box-shadow:4px 0 24px #0e121b00}.sui-sidebar--open{transform:translate(0);box-shadow:4px 0 24px #0e121b1a}:host([data-sui-mobile-mode=sheet]) .sui-sidebar{width:calc(100vw - 40px);max-width:none}.sui-sidebar__item{gap:14px;padding:14px 12px;border-radius:var(--sui-radius-10, 10px);transition:transform .16s cubic-bezier(.23,1,.32,1),background-color .16s cubic-bezier(.23,1,.32,1)}.sui-sidebar__item:active{transform:scale(.98);background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item-icon{width:24px;height:24px}.sui-sidebar__item-label{font-size:17px;line-height:24px;letter-spacing:-.01em}}@keyframes sui-sidebar-fade-in{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiAvatar, selector: "sui-avatar", inputs: ["size", "src", "alt", "initials", "color", "status", "memojiSrc", "illustrationSrc", "icon", "companyLogoSrc", "topBadge", "bgColor"] }, { kind: "component", type: SuiBadge, selector: "sui-badge", inputs: ["color", "variant", "size", "type", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiSidebar, decorators: [{
             type: Component,
@@ -14496,7 +14550,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         '[attr.data-sui-indicator]': 'indicatorColor()',
                         /* A11y drawer: Escape cierra el drawer móvil (no-op en desktop). */
                         '(document:keydown.escape)': 'onEscapeKey()',
-                    }, template: "<!-- Backdrop solo en m\u00F3vil: en desktop el sidebar es fijo y mobileOpen es inocuo.\n     Color canon = overlay del sui-modal (Figma 480:2474): rgba(51,51,51,0.24). -->\n@if (isMobile() && showBackdrop() && mobileOpen()) {\n  <div class=\"sui-sidebar-backdrop\" (click)=\"onBackdropClick()\" aria-hidden=\"true\"></div>\n}\n\n<!-- Drawer cerrado en m\u00F3vil: aria-hidden + inert \u2192 invisible para lectores de\n     pantalla y el foco no puede entrar al drawer oculto (ni quedar atrapado\n     detr\u00E1s del backdrop al cerrarse). En desktop ambos quedan null. -->\n<aside\n  class=\"sui-sidebar\"\n  [class.sui-sidebar--open]=\"mobileOpen()\"\n  [class.sui-sidebar--collapsed]=\"collapsed()\"\n  role=\"navigation\"\n  [attr.aria-hidden]=\"isMobile() && !mobileOpen() ? 'true' : null\"\n  [attr.inert]=\"isMobile() && !mobileOpen() ? '' : null\"\n>\n  <!-- \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <header class=\"sui-sidebar__header\">\n    <div class=\"sui-sidebar__header-card\">\n      <div class=\"sui-sidebar__brand-logo\">\n        @if (brandCfg().logo) {\n          <img [src]=\"brandCfg().logo\" [alt]=\"brandCfg().name\" referrerpolicy=\"no-referrer\" />\n        } @else if (brandCfg().fallback) {\n          <span class=\"sui-sidebar__brand-fallback\">{{ brandCfg().fallback }}</span>\n        } @else {\n          <sui-icon name=\"building-line\" [size]=\"20\" />\n        }\n      </div>\n      @if (!collapsed()) {\n        <div class=\"sui-sidebar__header-info\">\n          <span class=\"sui-sidebar__header-name\">{{ brandCfg().name }}</span>\n          @if (brandCfg().subtitle) {\n            @if (brandCfg().subtitleAsBadge) {\n              <sui-badge variant=\"filled\" color=\"orange\" size=\"small\">{{ brandCfg().subtitle }}</sui-badge>\n            } @else {\n              <span class=\"sui-sidebar__header-subtitle\">{{ brandCfg().subtitle }}</span>\n            }\n          }\n        </div>\n        @if (showHeaderButton()) {\n          <button\n            type=\"button\"\n            class=\"sui-sidebar__compact-btn\"\n            aria-label=\"Cambiar workspace\"\n            (click)=\"onHeaderButtonClick($event)\"\n            (touchstart)=\"$event.currentTarget\"\n            (touchend)=\"$any($event.currentTarget).blur()\"\n          >\n            <sui-icon name=\"expand-up-down-line\" [size]=\"20\" />\n          </button>\n        }\n      }\n    </div>\n    <div class=\"sui-sidebar__divider\" role=\"separator\"></div>\n  </header>\n\n  <!-- \u2500\u2500 Content \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"sui-sidebar__content\">\n    <!-- Search slot (Figma prop search=true) -->\n    @if (!collapsed() && searchCfg(); as s) {\n      <div class=\"sui-sidebar__search\">\n        <sui-icon class=\"sui-sidebar__search-icon\" name=\"search-2-line\" [size]=\"20\" />\n        <input\n          class=\"sui-sidebar__search-input\"\n          type=\"text\"\n          [placeholder]=\"s.placeholder\"\n          [value]=\"searchValue()\"\n          (input)=\"onSearchInput($any($event.target).value)\"\n          (keydown.enter)=\"onSearchSubmit()\"\n        />\n        @if (s.shortcut) {\n          <span class=\"sui-sidebar__shortcut\">{{ s.shortcut }}</span>\n        }\n      </div>\n    }\n\n    @if (items().length > 0) {\n      <div class=\"sui-sidebar__section\">\n        @if (itemsLabel()) {\n          <div class=\"sui-sidebar__section-label\" [class.sui-sidebar__section-label--collapsed]=\"collapsed()\">{{ itemsLabel() }}</div>\n        }\n        <nav class=\"sui-sidebar__nav\">\n          @for (item of items(); track item.value) {\n            <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: item }\"></ng-container>\n          }\n        </nav>\n      </div>\n    }\n\n    @if (secondaryItems().length > 0) {\n      <div class=\"sui-sidebar__section sui-sidebar__section--secondary\">\n        @if (secondaryItemsLabel()) {\n          <div class=\"sui-sidebar__section-label\" [class.sui-sidebar__section-label--collapsed]=\"collapsed()\">{{ secondaryItemsLabel() }}</div>\n        }\n        <nav class=\"sui-sidebar__nav\">\n          @for (item of secondaryItems(); track item.value) {\n            <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: item }\"></ng-container>\n          }\n        </nav>\n      </div>\n    }\n\n    <!-- Supporting Content (Figma supContent) \u2014 ancla al fondo cuando aplica -->\n    @if (supportingItems().length > 0) {\n      <div\n        class=\"sui-sidebar__section sui-sidebar__section--supporting\"\n        [class.sui-sidebar__section--anchor-bottom]=\"supportingAnchorBottom()\"\n      >\n        @if (supportingItemsLabel()) {\n          <div class=\"sui-sidebar__section-label\" [class.sui-sidebar__section-label--collapsed]=\"collapsed()\">{{ supportingItemsLabel() }}</div>\n        }\n        <nav class=\"sui-sidebar__nav\">\n          @for (item of supportingItems(); track item.value) {\n            <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: item }\"></ng-container>\n          }\n        </nav>\n      </div>\n    }\n\n    <!-- Feature Card slot (Figma FeatureCard=On) \u2014 promo opcional, oculto en collapsed -->\n    @if (!collapsed()) {\n      <div class=\"sui-sidebar__feature-card\">\n        <ng-content select=\"[feature-card]\"></ng-content>\n      </div>\n    }\n  </div>\n\n  <!-- \u2500\u2500 Footer (profile) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (profile(); as p) {\n    <footer class=\"sui-sidebar__footer\">\n      <div class=\"sui-sidebar__divider sui-sidebar__divider--top\" role=\"separator\"></div>\n      <div class=\"sui-sidebar__profile\">\n        <sui-avatar\n          size=\"lg\"\n          [src]=\"p.avatarUrl ?? null\"\n          [alt]=\"p.name\"\n          [initials]=\"p.initials ?? ''\"\n          [status]=\"p.status ?? null\"\n          color=\"slate\"\n        />\n        @if (!collapsed()) {\n          <div class=\"sui-sidebar__profile-info\">\n            <div class=\"sui-sidebar__profile-name-row\">\n              <span class=\"sui-sidebar__profile-name\">{{ p.name }}</span>\n              @if (p.verified) {\n                <!-- Figma usa verified-fill (glyph propio SUI); el match m\u00E1s\n                     cercano en RemixIcon es verified-badge-fill. -->\n                <sui-icon\n                  class=\"sui-sidebar__profile-verified\"\n                  name=\"verified-badge-fill\"\n                  [size]=\"20\"\n                  aria-label=\"Verificado\"\n                />\n              }\n            </div>\n            @if (p.email) {\n              <span class=\"sui-sidebar__profile-email\">{{ p.email }}</span>\n            }\n          </div>\n          @if (profileDropdown()) {\n            <button\n              type=\"button\"\n              class=\"sui-sidebar__compact-btn sui-sidebar__compact-btn--ghost\"\n              aria-label=\"Opciones de perfil\"\n              (click)=\"onProfileButtonClick($event)\"\n              (touchstart)=\"$event.currentTarget\"\n              (touchend)=\"$any($event.currentTarget).blur()\"\n            >\n              <sui-icon name=\"arrow-right-s-line\" [size]=\"20\" />\n            </button>\n          }\n        }\n      </div>\n    </footer>\n  }\n</aside>\n\n<!-- \u2500\u2500 Item template (compartido entre todas las secciones) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n<ng-template #itemTpl let-item>\n  @if (item.route && !item.action) {\n    <a\n      class=\"sui-sidebar__item\"\n      [class.sui-sidebar__item--danger]=\"item.variant === 'danger'\"\n      [routerLink]=\"item.route\"\n      routerLinkActive=\"sui-sidebar__item--active\"\n      [attr.target]=\"item.external ? '_blank' : null\"\n      [attr.rel]=\"item.external ? 'noopener noreferrer' : null\"\n      [attr.title]=\"collapsed() ? (item.tooltip ?? item.label) : null\"\n      [attr.aria-label]=\"collapsed() ? item.label : null\"\n      (click)=\"onItemClick(item, $event)\"\n      (touchstart)=\"$event.currentTarget\"\n      (touchend)=\"$any($event.currentTarget).blur()\"\n    >\n      <ng-container *ngTemplateOutlet=\"itemBody; context: { $implicit: item }\"></ng-container>\n    </a>\n  } @else {\n    <button\n      type=\"button\"\n      class=\"sui-sidebar__item\"\n      [class.sui-sidebar__item--active]=\"isItemActive(item)\"\n      [class.sui-sidebar__item--danger]=\"item.variant === 'danger'\"\n      [attr.title]=\"collapsed() ? (item.tooltip ?? item.label) : null\"\n      [attr.aria-label]=\"collapsed() ? item.label : null\"\n      (click)=\"onItemClick(item, $event)\"\n      (touchstart)=\"$event.currentTarget\"\n      (touchend)=\"$any($event.currentTarget).blur()\"\n    >\n      <ng-container *ngTemplateOutlet=\"itemBody; context: { $implicit: item }\"></ng-container>\n    </button>\n  }\n</ng-template>\n\n<ng-template #itemBody let-item>\n  @if (item.colorDot) {\n    <span\n      class=\"sui-sidebar__item-dot\"\n      [style.background-color]=\"item.colorDot\"\n      aria-hidden=\"true\"\n    ></span>\n  } @else if (item.icon) {\n    <sui-icon class=\"sui-sidebar__item-icon\" [name]=\"item.icon\" [size]=\"20\" />\n  }\n  @if (!collapsed()) {\n    <span class=\"sui-sidebar__item-label\">{{ item.label }}</span>\n    @if (item.badge !== undefined && item.badge !== null && item.badge !== '') {\n      <sui-badge\n        class=\"sui-sidebar__item-badge\"\n        variant=\"filled\"\n        [color]=\"item.variant === 'danger' ? 'red' : 'orange'\"\n        size=\"small\"\n        type=\"number\"\n      >{{ item.badge }}</sui-badge>\n    }\n    @if (item.shortcut) {\n      <span class=\"sui-sidebar__shortcut\">{{ item.shortcut }}</span>\n    }\n    <!-- Chevron del item activo (Figma): visibilidad controlada por CSS via\n         .sui-sidebar__item--active (cubre tanto isItemActive como RouterLinkActive). -->\n    <sui-icon class=\"sui-sidebar__item-chevron\" name=\"arrow-right-s-line\" [size]=\"20\" />\n  }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:contents;font-family:var(--font-sans, \"Satoshi\", system-ui, sans-serif)}.sui-sidebar-backdrop{position:fixed;inset:0;z-index:299;background:#3333333d;animation:sui-sidebar-fade-in .2s ease-out}.sui-sidebar{display:flex;flex-direction:column;flex-shrink:0;width:272px;height:100dvh;background:var(--sui-bg-white-0, #ffffff);border-right:1px solid var(--sui-stroke-soft-200, #ebebeb);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-sidebar__header{position:relative;padding:12px;padding-top:calc(12px + env(safe-area-inset-top,0px))}.sui-sidebar__header-card{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--sui-radius-10, 10px);background:var(--sui-bg-white-0, #ffffff);overflow:hidden}.sui-sidebar__brand-logo{flex-shrink:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:999px;background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-sub-600, #5c5c5c);overflow:hidden}.sui-sidebar__brand-logo img{width:100%;height:100%;object-fit:cover;display:block}.sui-sidebar__brand-fallback{font-size:18px;line-height:1}.sui-sidebar__compact-btn{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;padding:1px;border-radius:var(--sui-radius-6, 6px);border:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #ffffff);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));color:var(--sui-text-sub-600, #5c5c5c);cursor:pointer;transition:background-color .12s ease-out,color .12s ease-out}@media(hover:hover)and (pointer:fine){.sui-sidebar__compact-btn:hover{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-strong-950, #171717)}}.sui-sidebar__compact-btn:focus-visible{outline:2px solid var(--sui-state-information-base, #335cff);outline-offset:-1px}.sui-sidebar__compact-btn:active{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__compact-btn--ghost{border-color:transparent;box-shadow:none;background:transparent}.sui-sidebar__header-info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0;align-items:flex-start}.sui-sidebar__header-name{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950, #171717);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.sui-sidebar__header-subtitle{font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.sui-sidebar__divider{position:absolute;bottom:0;left:20px;right:20px;height:1px;background:var(--sui-stroke-soft-200, #ebebeb)}.sui-sidebar__divider--top{top:0;bottom:auto}.sui-sidebar__content{flex:1;display:flex;flex-direction:column;gap:20px;padding:20px 20px 16px;overflow-y:auto;overflow-x:hidden;min-height:0}.sui-sidebar__section{display:flex;flex-direction:column;gap:8px;flex-shrink:0}.sui-sidebar__section--secondary,.sui-sidebar__section--supporting{gap:6px}.sui-sidebar__section--anchor-bottom{margin-top:auto}.sui-sidebar__section-label{padding:4px;font-size:12px;font-weight:500;line-height:16px;letter-spacing:.04em;text-transform:uppercase;color:var(--sui-text-soft-400, #a3a3a3)}.sui-sidebar__section-label--collapsed{padding:4px 0;text-align:center}.sui-sidebar__search{display:flex;align-items:center;gap:8px;width:100%;padding:8px 8px 8px 10px;border-radius:var(--sui-radius-8, 8px);border:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #ffffff);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));box-sizing:border-box}.sui-sidebar__search-icon{flex-shrink:0;display:inline-flex;color:var(--sui-text-soft-400, #a3a3a3)}.sui-sidebar__search-input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:inherit;font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950, #171717)}.sui-sidebar__search-input::placeholder{color:var(--sui-text-soft-400, #a3a3a3)}.sui-sidebar__shortcut{flex-shrink:0;display:inline-flex;align-items:center;box-sizing:border-box;padding:2px 6px;border-radius:var(--sui-radius-4, 4px);border:1px solid var(--sui-stroke-soft-200, #ebebeb);font-size:12px;font-weight:500;line-height:16px;letter-spacing:.04em;text-transform:uppercase;color:var(--sui-text-soft-400, #a3a3a3);white-space:nowrap}.sui-sidebar__nav{display:flex;flex-direction:column;gap:4px}.sui-sidebar__item{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--sui-radius-8, 8px);width:100%;background:transparent;border:none;font-family:inherit;text-align:left;text-decoration:none;color:inherit;cursor:pointer;position:relative;transition:background-color .12s ease-out,color .12s ease-out}@media(hover:hover)and (pointer:fine){.sui-sidebar__item:hover{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item:hover .sui-sidebar__item-label,.sui-sidebar__item:hover .sui-sidebar__item-icon{color:var(--sui-text-strong-950, #171717)}}.sui-sidebar__item:focus-visible{outline:2px solid var(--_sui-sidebar-indicator, var(--sui-primary-base, #fa7319));outline-offset:-2px}.sui-sidebar__item:active{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item-icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;color:var(--sui-text-sub-600, #5c5c5c);transition:color .12s ease-out}.sui-sidebar__item-label{flex:1;font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .12s ease-out}.sui-sidebar__item-badge{flex-shrink:0}.sui-sidebar__item-dot{flex-shrink:0;width:8px;height:8px;margin:6px;border-radius:999px}.sui-sidebar__item-chevron{flex-shrink:0;display:none;color:var(--sui-text-sub-600, #5c5c5c)}:host{--_sui-sidebar-indicator: var(--sui-primary-base, #fa7319)}:host([data-sui-indicator=information]){--_sui-sidebar-indicator: var(--sui-state-information-base, #335cff)}.sui-sidebar__item--active{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item--active .sui-sidebar__item-label{color:var(--sui-text-strong-950, #171717)}.sui-sidebar__item--active .sui-sidebar__item-icon{color:var(--_sui-sidebar-indicator)}.sui-sidebar__item--active .sui-sidebar__item-chevron{display:inline-flex;color:var(--sui-text-sub-600, #5c5c5c)}.sui-sidebar__item--active:before{content:\"\";position:absolute;left:-20px;top:50%;transform:translateY(-50%);width:4px;height:20px;background:var(--_sui-sidebar-indicator);border-radius:0 4px 4px 0}@media(hover:hover)and (pointer:fine){.sui-sidebar__item--active:hover{background:var(--sui-bg-weak-50, #f7f7f7)}}.sui-sidebar__item--danger .sui-sidebar__item-icon,.sui-sidebar__item--danger .sui-sidebar__item-label{color:var(--sui-state-error-base, #fb3748)}@media(hover:hover)and (pointer:fine){.sui-sidebar__item--danger:hover{background:var(--sui-red-alpha-10, rgba(251, 55, 72, .0980392157))}.sui-sidebar__item--danger:hover .sui-sidebar__item-icon,.sui-sidebar__item--danger:hover .sui-sidebar__item-label{color:var(--sui-state-error-base, #fb3748)}}.sui-sidebar__item--danger:active{background:var(--sui-red-alpha-16, rgba(251, 55, 72, .1607843137))}.sui-sidebar__footer{position:relative;padding:12px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}.sui-sidebar__profile{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--sui-radius-10, 10px);overflow:hidden}.sui-sidebar__profile-info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0;height:40px;justify-content:center}.sui-sidebar__profile-name-row{display:flex;align-items:center;gap:2px;min-width:0}.sui-sidebar__profile-name{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950, #171717);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-sidebar__profile-verified{flex-shrink:0;display:inline-flex;color:var(--sui-state-verified-base, #47c2ff)}.sui-sidebar__profile-email{font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-sidebar__feature-card{width:100%}.sui-sidebar__feature-card:not(:has(*)){display:none}:host([data-sui-collapsed]) .sui-sidebar{width:80px}:host([data-sui-collapsed]) .sui-sidebar__header-card,:host([data-sui-collapsed]) .sui-sidebar__profile{justify-content:center}:host([data-sui-collapsed]) .sui-sidebar__content{padding-inline:12px}:host([data-sui-collapsed]) .sui-sidebar__item{justify-content:center;padding:8px}:host([data-sui-collapsed]) .sui-sidebar__item--active:before{left:-12px}@media(max-width:767px){.sui-sidebar{position:fixed;top:0;left:0;bottom:0;height:100dvh;z-index:300;width:min(86vw,360px);box-sizing:border-box;padding-left:env(safe-area-inset-left,0px);transform:translate(-100%);transition:transform .24s cubic-bezier(.23,1,.32,1);border-right:none;border-radius:0 24px 24px 0;overflow:hidden;box-shadow:4px 0 24px #0e121b00}.sui-sidebar--open{transform:translate(0);box-shadow:4px 0 24px #0e121b1a}:host([data-sui-mobile-mode=sheet]) .sui-sidebar{width:calc(100vw - 40px);max-width:none}.sui-sidebar__item{gap:14px;padding:14px 12px;border-radius:var(--sui-radius-10, 10px);transition:transform .16s cubic-bezier(.23,1,.32,1),background-color .16s cubic-bezier(.23,1,.32,1)}.sui-sidebar__item:active{transform:scale(.98);background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item-icon{width:24px;height:24px}.sui-sidebar__item-label{font-size:17px;line-height:24px;letter-spacing:-.01em}}@keyframes sui-sidebar-fade-in{0%{opacity:0}to{opacity:1}}\n"] }]
+                    }, template: "<!-- Backdrop solo en m\u00F3vil: en desktop el sidebar es fijo y mobileOpen es inocuo.\n     Color canon = overlay del sui-modal (Figma 480:2474): rgba(51,51,51,0.24). -->\n@if (isMobile() && showBackdrop() && mobileOpen()) {\n  <div class=\"sui-sidebar-backdrop\" (click)=\"onBackdropClick()\" aria-hidden=\"true\"></div>\n}\n\n<!-- Drawer cerrado en m\u00F3vil: aria-hidden + inert \u2192 invisible para lectores de\n     pantalla y el foco no puede entrar al drawer oculto (ni quedar atrapado\n     detr\u00E1s del backdrop al cerrarse). En desktop ambos quedan null. -->\n<aside\n  class=\"sui-sidebar\"\n  [class.sui-sidebar--open]=\"mobileOpen()\"\n  [class.sui-sidebar--collapsed]=\"collapsed()\"\n  role=\"navigation\"\n  [attr.aria-hidden]=\"isMobile() && !mobileOpen() ? 'true' : null\"\n  [attr.inert]=\"isMobile() && !mobileOpen() ? '' : null\"\n>\n  <!-- \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <header class=\"sui-sidebar__header\">\n    <div class=\"sui-sidebar__header-card\">\n      <div class=\"sui-sidebar__brand-logo\">\n        @if (brandCfg().logo) {\n          <img [src]=\"brandCfg().logo\" [alt]=\"brandCfg().name\" referrerpolicy=\"no-referrer\" />\n        } @else if (brandCfg().fallback) {\n          <span class=\"sui-sidebar__brand-fallback\">{{ brandCfg().fallback }}</span>\n        } @else {\n          <sui-icon name=\"building-line\" [size]=\"20\" />\n        }\n      </div>\n      @if (!collapsed()) {\n        <div class=\"sui-sidebar__header-info\">\n          <span class=\"sui-sidebar__header-name\">{{ brandCfg().name }}</span>\n          @if (brandCfg().subtitle) {\n            @if (brandCfg().subtitleAsBadge) {\n              <sui-badge variant=\"filled\" color=\"orange\" size=\"small\">{{ brandCfg().subtitle }}</sui-badge>\n            } @else {\n              <span class=\"sui-sidebar__header-subtitle\">{{ brandCfg().subtitle }}</span>\n            }\n          }\n        </div>\n        @if (showHeaderButton()) {\n          <button\n            type=\"button\"\n            class=\"sui-sidebar__compact-btn\"\n            aria-label=\"Cambiar workspace\"\n            (click)=\"onHeaderButtonClick($event)\"\n            (touchstart)=\"$event.currentTarget\"\n            (touchend)=\"$any($event.currentTarget).blur()\"\n          >\n            <sui-icon name=\"expand-up-down-line\" [size]=\"20\" />\n          </button>\n        }\n      }\n    </div>\n    <div class=\"sui-sidebar__divider\" role=\"separator\"></div>\n  </header>\n\n  <!-- \u2500\u2500 Content \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"sui-sidebar__content\">\n    <!-- Search slot (Figma prop search=true) -->\n    @if (!collapsed() && searchCfg(); as s) {\n      <div class=\"sui-sidebar__search\">\n        <sui-icon class=\"sui-sidebar__search-icon\" name=\"search-2-line\" [size]=\"20\" />\n        <input\n          class=\"sui-sidebar__search-input\"\n          type=\"text\"\n          [placeholder]=\"s.placeholder\"\n          [value]=\"searchValue()\"\n          (input)=\"onSearchInput($any($event.target).value)\"\n          (keydown.enter)=\"onSearchSubmit()\"\n        />\n        @if (s.shortcut) {\n          <span class=\"sui-sidebar__shortcut\">{{ s.shortcut }}</span>\n        }\n      </div>\n    }\n\n    @if (items().length > 0) {\n      <div class=\"sui-sidebar__section\">\n        @if (itemsLabel()) {\n          <div class=\"sui-sidebar__section-label\" [class.sui-sidebar__section-label--collapsed]=\"collapsed()\">{{ itemsLabel() }}</div>\n        }\n        <nav class=\"sui-sidebar__nav\">\n          @for (item of items(); track item.value) {\n            <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: item }\"></ng-container>\n          }\n        </nav>\n      </div>\n    }\n\n    @if (secondaryItems().length > 0) {\n      <div class=\"sui-sidebar__section sui-sidebar__section--secondary\">\n        @if (secondaryItemsLabel()) {\n          <div class=\"sui-sidebar__section-label\" [class.sui-sidebar__section-label--collapsed]=\"collapsed()\">{{ secondaryItemsLabel() }}</div>\n        }\n        <nav class=\"sui-sidebar__nav\">\n          @for (item of secondaryItems(); track item.value) {\n            <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: item }\"></ng-container>\n          }\n        </nav>\n      </div>\n    }\n\n    <!-- Supporting Content (Figma supContent) \u2014 ancla al fondo cuando aplica -->\n    @if (supportingItems().length > 0) {\n      <div\n        class=\"sui-sidebar__section sui-sidebar__section--supporting\"\n        [class.sui-sidebar__section--anchor-bottom]=\"supportingAnchorBottom()\"\n      >\n        @if (supportingItemsLabel()) {\n          <div class=\"sui-sidebar__section-label\" [class.sui-sidebar__section-label--collapsed]=\"collapsed()\">{{ supportingItemsLabel() }}</div>\n        }\n        <nav class=\"sui-sidebar__nav\">\n          @for (item of supportingItems(); track item.value) {\n            <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: item }\"></ng-container>\n          }\n        </nav>\n      </div>\n    }\n\n    <!-- Feature Card slot (Figma FeatureCard=On) \u2014 promo opcional, oculto en collapsed -->\n    @if (!collapsed()) {\n      <div class=\"sui-sidebar__feature-card\">\n        <ng-content select=\"[feature-card]\"></ng-content>\n      </div>\n    }\n  </div>\n\n  <!-- \u2500\u2500 Footer (profile) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (profile(); as p) {\n    <footer class=\"sui-sidebar__footer\">\n      <div class=\"sui-sidebar__divider sui-sidebar__divider--top\" role=\"separator\"></div>\n      <div class=\"sui-sidebar__profile\">\n        <sui-avatar\n          size=\"lg\"\n          [src]=\"p.avatarUrl ?? null\"\n          [alt]=\"p.name\"\n          [initials]=\"p.initials ?? ''\"\n          [status]=\"p.status ?? null\"\n          color=\"slate\"\n        />\n        @if (!collapsed()) {\n          <div class=\"sui-sidebar__profile-info\">\n            <div class=\"sui-sidebar__profile-name-row\">\n              <span class=\"sui-sidebar__profile-name\">{{ p.name }}</span>\n              @if (p.verified) {\n                <!-- Figma usa verified-fill (glyph propio SUI); el match m\u00E1s\n                     cercano en RemixIcon es verified-badge-fill. -->\n                <sui-icon\n                  class=\"sui-sidebar__profile-verified\"\n                  name=\"verified-badge-fill\"\n                  [size]=\"20\"\n                  aria-label=\"Verificado\"\n                />\n              }\n            </div>\n            @if (p.email) {\n              <span class=\"sui-sidebar__profile-email\">{{ p.email }}</span>\n            }\n          </div>\n          @if (profileDropdown()) {\n            <button\n              type=\"button\"\n              class=\"sui-sidebar__compact-btn sui-sidebar__compact-btn--ghost\"\n              aria-label=\"Opciones de perfil\"\n              (click)=\"onProfileButtonClick($event)\"\n              (touchstart)=\"$event.currentTarget\"\n              (touchend)=\"$any($event.currentTarget).blur()\"\n            >\n              <sui-icon name=\"arrow-right-s-line\" [size]=\"20\" />\n            </button>\n          }\n        }\n      </div>\n    </footer>\n  }\n</aside>\n\n<!-- \u2500\u2500 Item template (compartido entre todas las secciones) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n<ng-template #itemTpl let-item>\n  @if (item.route && !item.action) {\n    <a\n      class=\"sui-sidebar__item\"\n      [class.sui-sidebar__item--danger]=\"item.variant === 'danger'\"\n      [routerLink]=\"item.route\"\n      routerLinkActive=\"sui-sidebar__item--active\"\n      [attr.target]=\"item.external ? '_blank' : null\"\n      [attr.rel]=\"item.external ? 'noopener noreferrer' : null\"\n      [attr.title]=\"collapsed() ? (item.tooltip ?? item.label) : null\"\n      [attr.aria-label]=\"collapsed() ? item.label : null\"\n      (click)=\"onItemClick(item, $event)\"\n      (touchstart)=\"$event.currentTarget\"\n      (touchend)=\"$any($event.currentTarget).blur()\"\n    >\n      <ng-container *ngTemplateOutlet=\"itemBody; context: { $implicit: item }\"></ng-container>\n    </a>\n  } @else {\n    <button\n      type=\"button\"\n      class=\"sui-sidebar__item\"\n      [class.sui-sidebar__item--active]=\"isItemActive(item)\"\n      [class.sui-sidebar__item--danger]=\"item.variant === 'danger'\"\n      [attr.title]=\"collapsed() ? (item.tooltip ?? item.label) : null\"\n      [attr.aria-label]=\"collapsed() ? item.label : null\"\n      (click)=\"onItemClick(item, $event)\"\n      (touchstart)=\"$event.currentTarget\"\n      (touchend)=\"$any($event.currentTarget).blur()\"\n    >\n      <ng-container *ngTemplateOutlet=\"itemBody; context: { $implicit: item }\"></ng-container>\n    </button>\n  }\n</ng-template>\n\n<ng-template #itemBody let-item>\n  @if (item.colorDot) {\n    <span\n      class=\"sui-sidebar__item-dot\"\n      [style.background-color]=\"item.colorDot\"\n      aria-hidden=\"true\"\n    ></span>\n  } @else if (item.icon) {\n    <sui-icon class=\"sui-sidebar__item-icon\" [name]=\"item.icon\" [size]=\"20\" />\n  }\n  @if (!collapsed()) {\n    <span class=\"sui-sidebar__item-label\">{{ item.label }}</span>\n    @if (item.badge !== undefined && item.badge !== null && item.badge !== '') {\n      <sui-badge\n        class=\"sui-sidebar__item-badge\"\n        variant=\"filled\"\n        [color]=\"item.variant === 'danger' ? 'red' : 'orange'\"\n        size=\"small\"\n        type=\"number\"\n      >{{ item.badge }}</sui-badge>\n    }\n    @if (item.shortcut) {\n      <span class=\"sui-sidebar__shortcut\">{{ item.shortcut }}</span>\n    }\n    <!-- Chevron del item activo (Figma): visibilidad controlada por CSS via\n         .sui-sidebar__item--active (cubre tanto isItemActive como RouterLinkActive). -->\n    <sui-icon class=\"sui-sidebar__item-chevron\" name=\"arrow-right-s-line\" [size]=\"20\" />\n  }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:contents;font-family:var(--font-sans, \"Satoshi\", system-ui, sans-serif)}.sui-sidebar-backdrop{position:fixed;inset:0;z-index:299;background:#3333333d;animation:sui-sidebar-fade-in .2s ease-out}.sui-sidebar{display:flex;flex-direction:column;flex-shrink:0;width:272px;height:100dvh;background:var(--sui-bg-white-0, #ffffff);border-right:1px solid var(--sui-stroke-soft-200, #ebebeb);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-sidebar__header{position:relative;padding:12px;padding-top:calc(12px + env(safe-area-inset-top,0px))}.sui-sidebar__header-card{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--sui-radius-10, 10px);background:var(--sui-bg-white-0, #ffffff);overflow:hidden}.sui-sidebar__brand-logo{flex-shrink:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:999px;background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-sub-600, #5c5c5c);overflow:hidden}.sui-sidebar__brand-logo img{width:100%;height:100%;object-fit:cover;display:block}.sui-sidebar__brand-fallback{font-size:18px;line-height:1}.sui-sidebar__compact-btn{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;padding:1px;border-radius:var(--sui-radius-6, 6px);border:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #ffffff);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));color:var(--sui-text-sub-600, #5c5c5c);cursor:pointer;transition:background-color .12s ease-out,color .12s ease-out}@media(hover:hover)and (pointer:fine){.sui-sidebar__compact-btn:hover{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-strong-950, #171717)}}.sui-sidebar__compact-btn:focus-visible{outline:2px solid var(--sui-state-information-base, #335cff);outline-offset:-1px}.sui-sidebar__compact-btn:active{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__compact-btn--ghost{border-color:transparent;box-shadow:none;background:transparent}.sui-sidebar__header-info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0;align-items:flex-start}.sui-sidebar__header-name{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950, #171717);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.sui-sidebar__header-subtitle{font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.sui-sidebar__divider{position:absolute;bottom:0;left:20px;right:20px;height:1px;background:var(--sui-stroke-soft-200, #ebebeb)}.sui-sidebar__divider--top{top:0;bottom:auto}.sui-sidebar__content{flex:1;display:flex;flex-direction:column;gap:20px;padding:20px 20px 16px;overflow-y:auto;overflow-x:hidden;min-height:0;scrollbar-width:none}.sui-sidebar__content::-webkit-scrollbar{display:none}.sui-sidebar__section{display:flex;flex-direction:column;gap:8px;flex-shrink:0}.sui-sidebar__section--secondary,.sui-sidebar__section--supporting{gap:6px}.sui-sidebar__section--anchor-bottom{margin-top:auto}.sui-sidebar__section-label{padding:4px;font-size:12px;font-weight:500;line-height:16px;letter-spacing:.04em;text-transform:uppercase;color:var(--sui-text-soft-400, #a3a3a3)}.sui-sidebar__section-label--collapsed{padding:4px 0;text-align:center}.sui-sidebar__search{display:flex;align-items:center;gap:8px;width:100%;padding:8px 8px 8px 10px;border-radius:var(--sui-radius-8, 8px);border:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #ffffff);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));box-sizing:border-box}.sui-sidebar__search-icon{flex-shrink:0;display:inline-flex;color:var(--sui-text-soft-400, #a3a3a3)}.sui-sidebar__search-input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:inherit;font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950, #171717)}.sui-sidebar__search-input::placeholder{color:var(--sui-text-soft-400, #a3a3a3)}.sui-sidebar__shortcut{flex-shrink:0;display:inline-flex;align-items:center;box-sizing:border-box;padding:2px 6px;border-radius:var(--sui-radius-4, 4px);border:1px solid var(--sui-stroke-soft-200, #ebebeb);font-size:12px;font-weight:500;line-height:16px;letter-spacing:.04em;text-transform:uppercase;color:var(--sui-text-soft-400, #a3a3a3);white-space:nowrap}.sui-sidebar__nav{display:flex;flex-direction:column;gap:4px}.sui-sidebar__item{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--sui-radius-8, 8px);width:100%;box-sizing:border-box;background:transparent;border:none;font-family:inherit;text-align:left;text-decoration:none;color:inherit;cursor:pointer;position:relative;transition:background-color .12s ease-out,color .12s ease-out}@media(hover:hover)and (pointer:fine){.sui-sidebar__item:hover{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item:hover .sui-sidebar__item-label,.sui-sidebar__item:hover .sui-sidebar__item-icon{color:var(--sui-text-strong-950, #171717)}}.sui-sidebar__item:focus-visible{outline:2px solid var(--_sui-sidebar-indicator, var(--sui-primary-base, #fa7319));outline-offset:-2px}.sui-sidebar__item:active{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item-icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;color:var(--sui-text-sub-600, #5c5c5c);transition:color .12s ease-out}.sui-sidebar__item-label{flex:1;font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .12s ease-out}.sui-sidebar__item-badge{flex-shrink:0}.sui-sidebar__item-dot{flex-shrink:0;width:8px;height:8px;margin:6px;border-radius:999px}.sui-sidebar__item-chevron{flex-shrink:0;display:none;color:var(--sui-text-sub-600, #5c5c5c)}:host{--_sui-sidebar-indicator: var(--sui-primary-base, #fa7319)}:host([data-sui-indicator=information]){--_sui-sidebar-indicator: var(--sui-state-information-base, #335cff)}.sui-sidebar__item--active{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item--active .sui-sidebar__item-label{color:var(--sui-text-strong-950, #171717)}.sui-sidebar__item--active .sui-sidebar__item-icon{color:var(--_sui-sidebar-indicator)}.sui-sidebar__item--active .sui-sidebar__item-chevron{display:inline-flex;color:var(--sui-text-sub-600, #5c5c5c)}.sui-sidebar__item--active:before{content:\"\";position:absolute;left:-20px;top:50%;transform:translateY(-50%);width:4px;height:20px;background:var(--_sui-sidebar-indicator);border-radius:0 4px 4px 0}@media(hover:hover)and (pointer:fine){.sui-sidebar__item--active:hover{background:var(--sui-bg-weak-50, #f7f7f7)}}.sui-sidebar__item--danger .sui-sidebar__item-icon,.sui-sidebar__item--danger .sui-sidebar__item-label{color:var(--sui-state-error-base, #fb3748)}@media(hover:hover)and (pointer:fine){.sui-sidebar__item--danger:hover{background:var(--sui-red-alpha-10, rgba(251, 55, 72, .0980392157))}.sui-sidebar__item--danger:hover .sui-sidebar__item-icon,.sui-sidebar__item--danger:hover .sui-sidebar__item-label{color:var(--sui-state-error-base, #fb3748)}}.sui-sidebar__item--danger:active{background:var(--sui-red-alpha-16, rgba(251, 55, 72, .1607843137))}.sui-sidebar__footer{position:relative;padding:12px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}.sui-sidebar__profile{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--sui-radius-10, 10px);overflow:hidden}.sui-sidebar__profile-info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0;height:40px;justify-content:center}.sui-sidebar__profile-name-row{display:flex;align-items:center;gap:2px;min-width:0}.sui-sidebar__profile-name{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950, #171717);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-sidebar__profile-verified{flex-shrink:0;display:inline-flex;color:var(--sui-state-verified-base, #47c2ff)}.sui-sidebar__profile-email{font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-sidebar__feature-card{width:100%}.sui-sidebar__feature-card:not(:has(*)){display:none}:host([data-sui-collapsed]) .sui-sidebar{width:80px}:host([data-sui-collapsed]) .sui-sidebar__header-card,:host([data-sui-collapsed]) .sui-sidebar__profile{justify-content:center}:host([data-sui-collapsed]) .sui-sidebar__content{padding-inline:12px}:host([data-sui-collapsed]) .sui-sidebar__item{justify-content:center;width:36px;height:36px;padding:8px;margin-inline:auto}:host([data-sui-collapsed]) .sui-sidebar__item--active:before{left:-22px}@media(max-width:767px){.sui-sidebar{position:fixed;top:0;left:0;bottom:0;height:100dvh;z-index:300;width:min(86vw,360px);box-sizing:border-box;padding-left:env(safe-area-inset-left,0px);transform:translate(-100%);transition:transform .24s cubic-bezier(.23,1,.32,1);border-right:none;border-radius:0 24px 24px 0;overflow:hidden;box-shadow:4px 0 24px #0e121b00}.sui-sidebar--open{transform:translate(0);box-shadow:4px 0 24px #0e121b1a}:host([data-sui-mobile-mode=sheet]) .sui-sidebar{width:calc(100vw - 40px);max-width:none}.sui-sidebar__item{gap:14px;padding:14px 12px;border-radius:var(--sui-radius-10, 10px);transition:transform .16s cubic-bezier(.23,1,.32,1),background-color .16s cubic-bezier(.23,1,.32,1)}.sui-sidebar__item:active{transform:scale(.98);background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item-icon{width:24px;height:24px}.sui-sidebar__item-label{font-size:17px;line-height:24px;letter-spacing:-.01em}}@keyframes sui-sidebar-fade-in{0%{opacity:0}to{opacity:1}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], indicatorColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicatorColor", required: false }] }], brand: [{ type: i0.Input, args: [{ isSignal: true, alias: "brand", required: false }] }], showHeaderButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeaderButton", required: false }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }], searchValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchValue", required: false }] }, { type: i0.Output, args: ["searchValueChange"] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], secondaryItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryItems", required: false }] }], supportingItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "supportingItems", required: false }] }], supportingAnchorBottom: [{ type: i0.Input, args: [{ isSignal: true, alias: "supportingAnchorBottom", required: false }] }], itemsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsLabel", required: false }] }], secondaryItemsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryItemsLabel", required: false }] }], supportingItemsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "supportingItemsLabel", required: false }] }], activeRoute: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeRoute", required: false }] }], profile: [{ type: i0.Input, args: [{ isSignal: true, alias: "profile", required: false }] }], profileDropdown: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileDropdown", required: false }] }], mobileOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileOpen", required: false }] }, { type: i0.Output, args: ["mobileOpenChange"] }], closeOnItemClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnItemClick", required: false }] }], showBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBackdrop", required: false }] }], mobileMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileMode", required: false }] }], itemClicked: [{ type: i0.Output, args: ["itemClicked"] }], logoutClicked: [{ type: i0.Output, args: ["logoutClicked"] }], backdropClicked: [{ type: i0.Output, args: ["backdropClicked"] }], headerButtonClicked: [{ type: i0.Output, args: ["headerButtonClicked"] }], profileClicked: [{ type: i0.Output, args: ["profileClicked"] }], searchSubmitted: [{ type: i0.Output, args: ["searchSubmitted"] }] } });
 
 class SuiSlider {
@@ -14925,18 +14979,18 @@ class SuiSocialButton {
         this.clicked.emit(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiSocialButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiSocialButton, isStandalone: true, selector: "sui-social-button", inputs: { brand: { classPropertyName: "brand", publicName: "brand", isSignal: true, isRequired: true, transformFunction: null }, variantStyle: { classPropertyName: "variantStyle", publicName: "variantStyle", isSignal: true, isRequired: false, transformFunction: null }, onlyIcon: { classPropertyName: "onlyIcon", publicName: "onlyIcon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, rel: { classPropertyName: "rel", publicName: "rel", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "attr.data-sui-brand": "brand()", "attr.data-sui-style": "variantStyle()", "attr.data-sui-only-icon": "onlyIcon() ? \"\" : null", "attr.data-sui-disabled": "isDisabled() ? \"\" : null", "attr.data-sui-loading": "loading() ? \"\" : null", "style.--sui-social-bg": "filledBg()" } }, ngImport: i0, template: "@if (isAnchor()) {\n  <a\n    class=\"sui-social-button__el\"\n    [href]=\"href()\"\n    [attr.target]=\"target()\"\n    [attr.rel]=\"rel()\"\n    [attr.aria-label]=\"resolvedAriaLabel()\"\n    (click)=\"onClick($event)\"\n    (touchstart)=\"$event.currentTarget\"\n    (touchend)=\"$any($event.currentTarget).blur()\"\n  >\n    @if (loading()) {\n      <sui-icon class=\"sui-social-button__spinner\" name=\"loader-4-line\" [size]=\"20\" />\n    } @else {\n      <sui-brand-logo [company]=\"brand()\" [variant]=\"logoStyle()\" size=\"sm\" />\n    }\n    @if (!onlyIcon()) {\n      <span class=\"sui-social-button__text\">{{ resolvedLabel() }}</span>\n    }\n  </a>\n} @else {\n  <button\n    class=\"sui-social-button__el\"\n    [type]=\"type()\"\n    [disabled]=\"isDisabled() || null\"\n    [attr.aria-label]=\"resolvedAriaLabel()\"\n    (click)=\"onClick($event)\"\n    (touchstart)=\"$event.currentTarget\"\n    (touchend)=\"$any($event.currentTarget).blur()\"\n  >\n    @if (loading()) {\n      <sui-icon class=\"sui-social-button__spinner\" name=\"loader-4-line\" [size]=\"20\" />\n    } @else {\n      <sui-brand-logo [company]=\"brand()\" [variant]=\"logoStyle()\" size=\"sm\" />\n    }\n    @if (!onlyIcon()) {\n      <span class=\"sui-social-button__text\">{{ resolvedLabel() }}</span>\n    }\n  </button>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:stretch;vertical-align:middle}.sui-social-button__el{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;margin:0;padding:10px 16px 10px 10px;border:0;border-radius:var(--sui-radius-10, 10px);background:transparent;color:inherit;text-decoration:none;cursor:pointer;font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;min-height:40px;box-sizing:border-box;transition:background .12s,transform var(--dur-instant, 80ms) var(--ease-ek, cubic-bezier(.22, 1, .36, 1))}.sui-social-button__el:active:not(:disabled){transform:scale(.97)}.sui-social-button__el:disabled{cursor:not-allowed}:host .sui-social-button__el:active:not(:disabled),:host .sui-social-button__el:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}.sui-social-button__text{font-size:var(--sui-type-label-sm-size, 14px);line-height:var(--sui-type-label-sm-line, 20px);letter-spacing:var(--sui-type-label-sm-spacing, -.006em);font-weight:var(--sui-type-label-sm-weight, 500);white-space:nowrap}.sui-social-button__spinner{display:inline-flex;animation:sui-social-button-spin .8s linear infinite}@keyframes sui-social-button-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.sui-social-button__spinner{animation:none}}:host([data-sui-only-icon]) .sui-social-button__el{padding:10px;width:40px;height:40px}:host([data-sui-style=filled]) .sui-social-button__el{background:var(--sui-social-bg);color:var(--sui-static-white, #ffffff)}:host([data-sui-style=filled]) .sui-social-button__el:hover:not(:disabled){background:linear-gradient(#00000029,#00000029) padding-box,var(--sui-social-bg)}:host([data-sui-style=filled]) .sui-social-button__el:active:not(:disabled){background:linear-gradient(#0000003d,#0000003d) padding-box,var(--sui-social-bg)}:host([data-sui-style=stroke]) .sui-social-button__el{background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);color:var(--sui-text-strong-950);box-shadow:var(--sui-regular-shadow-x-small)}:host([data-sui-style=stroke]) .sui-social-button__el:hover:not(:disabled){background:var(--sui-bg-weak-50)}:host([data-sui-style=stroke]) .sui-social-button__el:active:not(:disabled){background:var(--sui-bg-soft-200)}:host([data-sui-disabled]) .sui-social-button__el,.sui-social-button__el:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}\n"], dependencies: [{ kind: "component", type: SuiBrandLogo, selector: "sui-brand-logo", inputs: ["company", "variant", "size", "href", "target", "rel", "disabled", "ariaLabel"] }, { 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: SuiSocialButton, isStandalone: true, selector: "sui-social-button", inputs: { brand: { classPropertyName: "brand", publicName: "brand", isSignal: true, isRequired: true, transformFunction: null }, variantStyle: { classPropertyName: "variantStyle", publicName: "variantStyle", isSignal: true, isRequired: false, transformFunction: null }, onlyIcon: { classPropertyName: "onlyIcon", publicName: "onlyIcon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, rel: { classPropertyName: "rel", publicName: "rel", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "attr.data-sui-brand": "brand()", "attr.data-sui-style": "variantStyle()", "attr.data-sui-only-icon": "onlyIcon() ? \"\" : null", "attr.data-sui-disabled": "isDisabled() ? \"\" : null", "attr.data-sui-loading": "loading() ? \"\" : null", "style.--sui-social-bg": "filledBg()" } }, ngImport: i0, template: "@if (isAnchor()) {\n  <a\n    class=\"sui-social-button__el\"\n    [suiHref]=\"href()\"\n    [attr.target]=\"target()\"\n    [attr.rel]=\"rel()\"\n    [attr.aria-label]=\"resolvedAriaLabel()\"\n    (click)=\"onClick($event)\"\n    (touchstart)=\"$event.currentTarget\"\n    (touchend)=\"$any($event.currentTarget).blur()\"\n  >\n    @if (loading()) {\n      <sui-icon class=\"sui-social-button__spinner\" name=\"loader-4-line\" [size]=\"20\" />\n    } @else {\n      <sui-brand-logo [company]=\"brand()\" [variant]=\"logoStyle()\" size=\"sm\" />\n    }\n    @if (!onlyIcon()) {\n      <span class=\"sui-social-button__text\">{{ resolvedLabel() }}</span>\n    }\n  </a>\n} @else {\n  <button\n    class=\"sui-social-button__el\"\n    [type]=\"type()\"\n    [disabled]=\"isDisabled() || null\"\n    [attr.aria-label]=\"resolvedAriaLabel()\"\n    (click)=\"onClick($event)\"\n    (touchstart)=\"$event.currentTarget\"\n    (touchend)=\"$any($event.currentTarget).blur()\"\n  >\n    @if (loading()) {\n      <sui-icon class=\"sui-social-button__spinner\" name=\"loader-4-line\" [size]=\"20\" />\n    } @else {\n      <sui-brand-logo [company]=\"brand()\" [variant]=\"logoStyle()\" size=\"sm\" />\n    }\n    @if (!onlyIcon()) {\n      <span class=\"sui-social-button__text\">{{ resolvedLabel() }}</span>\n    }\n  </button>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:stretch;vertical-align:middle}.sui-social-button__el{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;margin:0;padding:10px 16px 10px 10px;border:0;border-radius:var(--sui-radius-10, 10px);background:transparent;color:inherit;text-decoration:none;cursor:pointer;font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;min-height:40px;box-sizing:border-box;transition:background .12s,transform var(--dur-instant, 80ms) var(--ease-ek, cubic-bezier(.22, 1, .36, 1))}.sui-social-button__el:active:not(:disabled){transform:scale(.97)}.sui-social-button__el:disabled{cursor:not-allowed}:host .sui-social-button__el:active:not(:disabled),:host .sui-social-button__el:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}.sui-social-button__text{font-size:var(--sui-type-label-sm-size, 14px);line-height:var(--sui-type-label-sm-line, 20px);letter-spacing:var(--sui-type-label-sm-spacing, -.006em);font-weight:var(--sui-type-label-sm-weight, 500);white-space:nowrap}.sui-social-button__spinner{display:inline-flex;animation:sui-social-button-spin .8s linear infinite}@keyframes sui-social-button-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.sui-social-button__spinner{animation:none}}:host([data-sui-only-icon]) .sui-social-button__el{padding:10px;width:40px;height:40px}:host([data-sui-style=filled]) .sui-social-button__el{background:var(--sui-social-bg);color:var(--sui-static-white, #ffffff)}:host([data-sui-style=filled]) .sui-social-button__el:hover:not(:disabled){background:linear-gradient(#00000029,#00000029) padding-box,var(--sui-social-bg)}:host([data-sui-style=filled]) .sui-social-button__el:active:not(:disabled){background:linear-gradient(#0000003d,#0000003d) padding-box,var(--sui-social-bg)}:host([data-sui-style=stroke]) .sui-social-button__el{background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);color:var(--sui-text-strong-950);box-shadow:var(--sui-regular-shadow-x-small)}:host([data-sui-style=stroke]) .sui-social-button__el:hover:not(:disabled){background:var(--sui-bg-weak-50)}:host([data-sui-style=stroke]) .sui-social-button__el:active:not(:disabled){background:var(--sui-bg-soft-200)}:host([data-sui-disabled]) .sui-social-button__el,.sui-social-button__el:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}\n"], dependencies: [{ kind: "component", type: SuiBrandLogo, selector: "sui-brand-logo", inputs: ["company", "variant", "size", "href", "target", "rel", "disabled", "ariaLabel"] }, { kind: "directive", type: SuiHref, selector: "a[suiHref]", inputs: ["suiHref"] }, { 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: SuiSocialButton, decorators: [{
             type: Component,
-            args: [{ selector: 'sui-social-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SuiBrandLogo, SuiIcon], host: {
+            args: [{ selector: 'sui-social-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SuiBrandLogo, SuiHref, SuiIcon], host: {
                         '[attr.data-sui-brand]': 'brand()',
                         '[attr.data-sui-style]': 'variantStyle()',
                         '[attr.data-sui-only-icon]': 'onlyIcon() ? "" : null',
                         '[attr.data-sui-disabled]': 'isDisabled() ? "" : null',
                         '[attr.data-sui-loading]': 'loading() ? "" : null',
                         '[style.--sui-social-bg]': 'filledBg()',
-                    }, template: "@if (isAnchor()) {\n  <a\n    class=\"sui-social-button__el\"\n    [href]=\"href()\"\n    [attr.target]=\"target()\"\n    [attr.rel]=\"rel()\"\n    [attr.aria-label]=\"resolvedAriaLabel()\"\n    (click)=\"onClick($event)\"\n    (touchstart)=\"$event.currentTarget\"\n    (touchend)=\"$any($event.currentTarget).blur()\"\n  >\n    @if (loading()) {\n      <sui-icon class=\"sui-social-button__spinner\" name=\"loader-4-line\" [size]=\"20\" />\n    } @else {\n      <sui-brand-logo [company]=\"brand()\" [variant]=\"logoStyle()\" size=\"sm\" />\n    }\n    @if (!onlyIcon()) {\n      <span class=\"sui-social-button__text\">{{ resolvedLabel() }}</span>\n    }\n  </a>\n} @else {\n  <button\n    class=\"sui-social-button__el\"\n    [type]=\"type()\"\n    [disabled]=\"isDisabled() || null\"\n    [attr.aria-label]=\"resolvedAriaLabel()\"\n    (click)=\"onClick($event)\"\n    (touchstart)=\"$event.currentTarget\"\n    (touchend)=\"$any($event.currentTarget).blur()\"\n  >\n    @if (loading()) {\n      <sui-icon class=\"sui-social-button__spinner\" name=\"loader-4-line\" [size]=\"20\" />\n    } @else {\n      <sui-brand-logo [company]=\"brand()\" [variant]=\"logoStyle()\" size=\"sm\" />\n    }\n    @if (!onlyIcon()) {\n      <span class=\"sui-social-button__text\">{{ resolvedLabel() }}</span>\n    }\n  </button>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:stretch;vertical-align:middle}.sui-social-button__el{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;margin:0;padding:10px 16px 10px 10px;border:0;border-radius:var(--sui-radius-10, 10px);background:transparent;color:inherit;text-decoration:none;cursor:pointer;font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;min-height:40px;box-sizing:border-box;transition:background .12s,transform var(--dur-instant, 80ms) var(--ease-ek, cubic-bezier(.22, 1, .36, 1))}.sui-social-button__el:active:not(:disabled){transform:scale(.97)}.sui-social-button__el:disabled{cursor:not-allowed}:host .sui-social-button__el:active:not(:disabled),:host .sui-social-button__el:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}.sui-social-button__text{font-size:var(--sui-type-label-sm-size, 14px);line-height:var(--sui-type-label-sm-line, 20px);letter-spacing:var(--sui-type-label-sm-spacing, -.006em);font-weight:var(--sui-type-label-sm-weight, 500);white-space:nowrap}.sui-social-button__spinner{display:inline-flex;animation:sui-social-button-spin .8s linear infinite}@keyframes sui-social-button-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.sui-social-button__spinner{animation:none}}:host([data-sui-only-icon]) .sui-social-button__el{padding:10px;width:40px;height:40px}:host([data-sui-style=filled]) .sui-social-button__el{background:var(--sui-social-bg);color:var(--sui-static-white, #ffffff)}:host([data-sui-style=filled]) .sui-social-button__el:hover:not(:disabled){background:linear-gradient(#00000029,#00000029) padding-box,var(--sui-social-bg)}:host([data-sui-style=filled]) .sui-social-button__el:active:not(:disabled){background:linear-gradient(#0000003d,#0000003d) padding-box,var(--sui-social-bg)}:host([data-sui-style=stroke]) .sui-social-button__el{background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);color:var(--sui-text-strong-950);box-shadow:var(--sui-regular-shadow-x-small)}:host([data-sui-style=stroke]) .sui-social-button__el:hover:not(:disabled){background:var(--sui-bg-weak-50)}:host([data-sui-style=stroke]) .sui-social-button__el:active:not(:disabled){background:var(--sui-bg-soft-200)}:host([data-sui-disabled]) .sui-social-button__el,.sui-social-button__el:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}\n"] }]
+                    }, template: "@if (isAnchor()) {\n  <a\n    class=\"sui-social-button__el\"\n    [suiHref]=\"href()\"\n    [attr.target]=\"target()\"\n    [attr.rel]=\"rel()\"\n    [attr.aria-label]=\"resolvedAriaLabel()\"\n    (click)=\"onClick($event)\"\n    (touchstart)=\"$event.currentTarget\"\n    (touchend)=\"$any($event.currentTarget).blur()\"\n  >\n    @if (loading()) {\n      <sui-icon class=\"sui-social-button__spinner\" name=\"loader-4-line\" [size]=\"20\" />\n    } @else {\n      <sui-brand-logo [company]=\"brand()\" [variant]=\"logoStyle()\" size=\"sm\" />\n    }\n    @if (!onlyIcon()) {\n      <span class=\"sui-social-button__text\">{{ resolvedLabel() }}</span>\n    }\n  </a>\n} @else {\n  <button\n    class=\"sui-social-button__el\"\n    [type]=\"type()\"\n    [disabled]=\"isDisabled() || null\"\n    [attr.aria-label]=\"resolvedAriaLabel()\"\n    (click)=\"onClick($event)\"\n    (touchstart)=\"$event.currentTarget\"\n    (touchend)=\"$any($event.currentTarget).blur()\"\n  >\n    @if (loading()) {\n      <sui-icon class=\"sui-social-button__spinner\" name=\"loader-4-line\" [size]=\"20\" />\n    } @else {\n      <sui-brand-logo [company]=\"brand()\" [variant]=\"logoStyle()\" size=\"sm\" />\n    }\n    @if (!onlyIcon()) {\n      <span class=\"sui-social-button__text\">{{ resolvedLabel() }}</span>\n    }\n  </button>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:stretch;vertical-align:middle}.sui-social-button__el{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;margin:0;padding:10px 16px 10px 10px;border:0;border-radius:var(--sui-radius-10, 10px);background:transparent;color:inherit;text-decoration:none;cursor:pointer;font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;min-height:40px;box-sizing:border-box;transition:background .12s,transform var(--dur-instant, 80ms) var(--ease-ek, cubic-bezier(.22, 1, .36, 1))}.sui-social-button__el:active:not(:disabled){transform:scale(.97)}.sui-social-button__el:disabled{cursor:not-allowed}:host .sui-social-button__el:active:not(:disabled),:host .sui-social-button__el:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}.sui-social-button__text{font-size:var(--sui-type-label-sm-size, 14px);line-height:var(--sui-type-label-sm-line, 20px);letter-spacing:var(--sui-type-label-sm-spacing, -.006em);font-weight:var(--sui-type-label-sm-weight, 500);white-space:nowrap}.sui-social-button__spinner{display:inline-flex;animation:sui-social-button-spin .8s linear infinite}@keyframes sui-social-button-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.sui-social-button__spinner{animation:none}}:host([data-sui-only-icon]) .sui-social-button__el{padding:10px;width:40px;height:40px}:host([data-sui-style=filled]) .sui-social-button__el{background:var(--sui-social-bg);color:var(--sui-static-white, #ffffff)}:host([data-sui-style=filled]) .sui-social-button__el:hover:not(:disabled){background:linear-gradient(#00000029,#00000029) padding-box,var(--sui-social-bg)}:host([data-sui-style=filled]) .sui-social-button__el:active:not(:disabled){background:linear-gradient(#0000003d,#0000003d) padding-box,var(--sui-social-bg)}:host([data-sui-style=stroke]) .sui-social-button__el{background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);color:var(--sui-text-strong-950);box-shadow:var(--sui-regular-shadow-x-small)}:host([data-sui-style=stroke]) .sui-social-button__el:hover:not(:disabled){background:var(--sui-bg-weak-50)}:host([data-sui-style=stroke]) .sui-social-button__el:active:not(:disabled){background:var(--sui-bg-soft-200)}:host([data-sui-disabled]) .sui-social-button__el,.sui-social-button__el:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { brand: [{ type: i0.Input, args: [{ isSignal: true, alias: "brand", required: true }] }], variantStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "variantStyle", required: false }] }], onlyIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "onlyIcon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], rel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rel", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
 
 /**
@@ -18503,14 +18557,14 @@ class SuiTopbarItem {
         this.clicked.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTopbarItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiTopbarItem, isStandalone: true, selector: "sui-topbar-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, rightIcon: { classPropertyName: "rightIcon", publicName: "rightIcon", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, accent: { classPropertyName: "accent", publicName: "accent", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "attr.data-sui-active": "active() ? \"\" : null", "attr.data-sui-accent": "accent()" } }, ngImport: i0, template: "@if (href(); as h) {\n  <a\n    class=\"sui-topbar-item\"\n    [class.sui-topbar-item--with-icon]=\"icon()\"\n    [class.sui-topbar-item--with-right]=\"rightIcon()\"\n    [href]=\"h\"\n    [attr.target]=\"target()\"\n    [attr.rel]=\"rel()\"\n    [attr.aria-current]=\"active() ? 'page' : null\"\n    (click)=\"onClick()\"\n    (touchstart)=\"$event.currentTarget\"\n    (touchend)=\"$any($event.currentTarget).blur()\"\n  >\n    <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n  </a>\n} @else {\n  <button\n    type=\"button\"\n    class=\"sui-topbar-item\"\n    [class.sui-topbar-item--with-icon]=\"icon()\"\n    [class.sui-topbar-item--with-right]=\"rightIcon()\"\n    [attr.aria-current]=\"active() ? 'page' : null\"\n    (click)=\"onClick()\"\n    (touchstart)=\"$event.currentTarget\"\n    (touchend)=\"$any($event.currentTarget).blur()\"\n  >\n    <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n  </button>\n}\n\n<ng-template #body>\n  @if (icon(); as ic) {\n    <sui-icon class=\"sui-topbar-item__icon\" [name]=\"ic\" [size]=\"20\" />\n  }\n  <span class=\"sui-topbar-item__text\">\n    <span class=\"sui-topbar-item__label\">{{ label() }}</span>\n    @if (badgeCfg(); as b) {\n      <sui-badge\n        class=\"sui-topbar-item__badge\"\n        [color]=\"b.color!\"\n        [variant]=\"b.variant!\"\n        [size]=\"b.size!\"\n      >{{ b.label }}</sui-badge>\n    }\n  </span>\n  @if (count() !== null) {\n    <sui-badge\n      class=\"sui-topbar-item__count\"\n      type=\"number\"\n      variant=\"filled\"\n      color=\"red\"\n      size=\"small\"\n    >{{ count() }}</sui-badge>\n  }\n  @if (rightIcon(); as ri) {\n    <sui-icon class=\"sui-topbar-item__right-icon\" [name]=\"ri\" [size]=\"20\" />\n  }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;flex-shrink:0}.sui-topbar-item{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:none;border-radius:var(--sui-radius-8, 8px);background:transparent;cursor:pointer;text-decoration:none;box-sizing:border-box;transition:background-color .2s ease;-webkit-tap-highlight-color:transparent}.sui-topbar-item--with-icon{padding-left:8px}.sui-topbar-item--with-right{padding-right:8px}.sui-topbar-item:hover{background:var(--sui-bg-weak-50, #f7f7f7)}:host([data-sui-active]) .sui-topbar-item{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-topbar-item__text{display:inline-flex;align-items:center;gap:4px}.sui-topbar-item__label{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.084px;color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap;transition:color .2s ease}:host([data-sui-active]) .sui-topbar-item__label{color:var(--sui-text-strong-950, #171717)}.sui-topbar-item__icon,.sui-topbar-item__right-icon{display:inline-flex;flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c);transition:color .2s ease}:host([data-sui-active][data-sui-accent=brand]) .sui-topbar-item__icon{color:var(--sui-primary-base, #fa7319)}:host([data-sui-active][data-sui-accent=information]) .sui-topbar-item__icon{color:var(--sui-state-information-base, #335cff)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiBadge, selector: "sui-badge", inputs: ["color", "variant", "size", "type", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiTopbarItem, isStandalone: true, selector: "sui-topbar-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, rightIcon: { classPropertyName: "rightIcon", publicName: "rightIcon", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, accent: { classPropertyName: "accent", publicName: "accent", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "attr.data-sui-active": "active() ? \"\" : null", "attr.data-sui-accent": "accent()" } }, ngImport: i0, template: "@if (href(); as h) {\n  <a\n    class=\"sui-topbar-item\"\n    [class.sui-topbar-item--with-icon]=\"icon()\"\n    [class.sui-topbar-item--with-right]=\"rightIcon()\"\n    [suiHref]=\"h\"\n    [attr.target]=\"target()\"\n    [attr.rel]=\"rel()\"\n    [attr.aria-current]=\"active() ? 'page' : null\"\n    (click)=\"onClick()\"\n    (touchstart)=\"$event.currentTarget\"\n    (touchend)=\"$any($event.currentTarget).blur()\"\n  >\n    <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n  </a>\n} @else {\n  <button\n    type=\"button\"\n    class=\"sui-topbar-item\"\n    [class.sui-topbar-item--with-icon]=\"icon()\"\n    [class.sui-topbar-item--with-right]=\"rightIcon()\"\n    [attr.aria-current]=\"active() ? 'page' : null\"\n    (click)=\"onClick()\"\n    (touchstart)=\"$event.currentTarget\"\n    (touchend)=\"$any($event.currentTarget).blur()\"\n  >\n    <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n  </button>\n}\n\n<ng-template #body>\n  @if (icon(); as ic) {\n    <sui-icon class=\"sui-topbar-item__icon\" [name]=\"ic\" [size]=\"20\" />\n  }\n  <span class=\"sui-topbar-item__text\">\n    <span class=\"sui-topbar-item__label\">{{ label() }}</span>\n    @if (badgeCfg(); as b) {\n      <sui-badge\n        class=\"sui-topbar-item__badge\"\n        [color]=\"b.color!\"\n        [variant]=\"b.variant!\"\n        [size]=\"b.size!\"\n      >{{ b.label }}</sui-badge>\n    }\n  </span>\n  @if (count() !== null) {\n    <sui-badge\n      class=\"sui-topbar-item__count\"\n      type=\"number\"\n      variant=\"filled\"\n      color=\"red\"\n      size=\"small\"\n    >{{ count() }}</sui-badge>\n  }\n  @if (rightIcon(); as ri) {\n    <sui-icon class=\"sui-topbar-item__right-icon\" [name]=\"ri\" [size]=\"20\" />\n  }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;flex-shrink:0}.sui-topbar-item{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:none;border-radius:var(--sui-radius-8, 8px);background:transparent;cursor:pointer;text-decoration:none;box-sizing:border-box;transition:background-color .2s ease;-webkit-tap-highlight-color:transparent}.sui-topbar-item--with-icon{padding-left:8px}.sui-topbar-item--with-right{padding-right:8px}.sui-topbar-item:hover{background:var(--sui-bg-weak-50, #f7f7f7)}:host([data-sui-active]) .sui-topbar-item{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-topbar-item__text{display:inline-flex;align-items:center;gap:4px}.sui-topbar-item__label{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.084px;color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap;transition:color .2s ease}:host([data-sui-active]) .sui-topbar-item__label{color:var(--sui-text-strong-950, #171717)}.sui-topbar-item__icon,.sui-topbar-item__right-icon{display:inline-flex;flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c);transition:color .2s ease}:host([data-sui-active][data-sui-accent=brand]) .sui-topbar-item__icon{color:var(--sui-primary-base, #fa7319)}:host([data-sui-active][data-sui-accent=information]) .sui-topbar-item__icon{color:var(--sui-state-information-base, #335cff)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiBadge, selector: "sui-badge", inputs: ["color", "variant", "size", "type", "disabled"] }, { kind: "directive", type: SuiHref, selector: "a[suiHref]", inputs: ["suiHref"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTopbarItem, decorators: [{
             type: Component,
-            args: [{ selector: 'sui-topbar-item', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, SuiIcon, SuiBadge], host: {
+            args: [{ selector: 'sui-topbar-item', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, SuiIcon, SuiBadge, SuiHref], host: {
                         '[attr.data-sui-active]': 'active() ? "" : null',
                         '[attr.data-sui-accent]': 'accent()',
-                    }, template: "@if (href(); as h) {\n  <a\n    class=\"sui-topbar-item\"\n    [class.sui-topbar-item--with-icon]=\"icon()\"\n    [class.sui-topbar-item--with-right]=\"rightIcon()\"\n    [href]=\"h\"\n    [attr.target]=\"target()\"\n    [attr.rel]=\"rel()\"\n    [attr.aria-current]=\"active() ? 'page' : null\"\n    (click)=\"onClick()\"\n    (touchstart)=\"$event.currentTarget\"\n    (touchend)=\"$any($event.currentTarget).blur()\"\n  >\n    <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n  </a>\n} @else {\n  <button\n    type=\"button\"\n    class=\"sui-topbar-item\"\n    [class.sui-topbar-item--with-icon]=\"icon()\"\n    [class.sui-topbar-item--with-right]=\"rightIcon()\"\n    [attr.aria-current]=\"active() ? 'page' : null\"\n    (click)=\"onClick()\"\n    (touchstart)=\"$event.currentTarget\"\n    (touchend)=\"$any($event.currentTarget).blur()\"\n  >\n    <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n  </button>\n}\n\n<ng-template #body>\n  @if (icon(); as ic) {\n    <sui-icon class=\"sui-topbar-item__icon\" [name]=\"ic\" [size]=\"20\" />\n  }\n  <span class=\"sui-topbar-item__text\">\n    <span class=\"sui-topbar-item__label\">{{ label() }}</span>\n    @if (badgeCfg(); as b) {\n      <sui-badge\n        class=\"sui-topbar-item__badge\"\n        [color]=\"b.color!\"\n        [variant]=\"b.variant!\"\n        [size]=\"b.size!\"\n      >{{ b.label }}</sui-badge>\n    }\n  </span>\n  @if (count() !== null) {\n    <sui-badge\n      class=\"sui-topbar-item__count\"\n      type=\"number\"\n      variant=\"filled\"\n      color=\"red\"\n      size=\"small\"\n    >{{ count() }}</sui-badge>\n  }\n  @if (rightIcon(); as ri) {\n    <sui-icon class=\"sui-topbar-item__right-icon\" [name]=\"ri\" [size]=\"20\" />\n  }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;flex-shrink:0}.sui-topbar-item{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:none;border-radius:var(--sui-radius-8, 8px);background:transparent;cursor:pointer;text-decoration:none;box-sizing:border-box;transition:background-color .2s ease;-webkit-tap-highlight-color:transparent}.sui-topbar-item--with-icon{padding-left:8px}.sui-topbar-item--with-right{padding-right:8px}.sui-topbar-item:hover{background:var(--sui-bg-weak-50, #f7f7f7)}:host([data-sui-active]) .sui-topbar-item{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-topbar-item__text{display:inline-flex;align-items:center;gap:4px}.sui-topbar-item__label{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.084px;color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap;transition:color .2s ease}:host([data-sui-active]) .sui-topbar-item__label{color:var(--sui-text-strong-950, #171717)}.sui-topbar-item__icon,.sui-topbar-item__right-icon{display:inline-flex;flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c);transition:color .2s ease}:host([data-sui-active][data-sui-accent=brand]) .sui-topbar-item__icon{color:var(--sui-primary-base, #fa7319)}:host([data-sui-active][data-sui-accent=information]) .sui-topbar-item__icon{color:var(--sui-state-information-base, #335cff)}\n"] }]
+                    }, template: "@if (href(); as h) {\n  <a\n    class=\"sui-topbar-item\"\n    [class.sui-topbar-item--with-icon]=\"icon()\"\n    [class.sui-topbar-item--with-right]=\"rightIcon()\"\n    [suiHref]=\"h\"\n    [attr.target]=\"target()\"\n    [attr.rel]=\"rel()\"\n    [attr.aria-current]=\"active() ? 'page' : null\"\n    (click)=\"onClick()\"\n    (touchstart)=\"$event.currentTarget\"\n    (touchend)=\"$any($event.currentTarget).blur()\"\n  >\n    <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n  </a>\n} @else {\n  <button\n    type=\"button\"\n    class=\"sui-topbar-item\"\n    [class.sui-topbar-item--with-icon]=\"icon()\"\n    [class.sui-topbar-item--with-right]=\"rightIcon()\"\n    [attr.aria-current]=\"active() ? 'page' : null\"\n    (click)=\"onClick()\"\n    (touchstart)=\"$event.currentTarget\"\n    (touchend)=\"$any($event.currentTarget).blur()\"\n  >\n    <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n  </button>\n}\n\n<ng-template #body>\n  @if (icon(); as ic) {\n    <sui-icon class=\"sui-topbar-item__icon\" [name]=\"ic\" [size]=\"20\" />\n  }\n  <span class=\"sui-topbar-item__text\">\n    <span class=\"sui-topbar-item__label\">{{ label() }}</span>\n    @if (badgeCfg(); as b) {\n      <sui-badge\n        class=\"sui-topbar-item__badge\"\n        [color]=\"b.color!\"\n        [variant]=\"b.variant!\"\n        [size]=\"b.size!\"\n      >{{ b.label }}</sui-badge>\n    }\n  </span>\n  @if (count() !== null) {\n    <sui-badge\n      class=\"sui-topbar-item__count\"\n      type=\"number\"\n      variant=\"filled\"\n      color=\"red\"\n      size=\"small\"\n    >{{ count() }}</sui-badge>\n  }\n  @if (rightIcon(); as ri) {\n    <sui-icon class=\"sui-topbar-item__right-icon\" [name]=\"ri\" [size]=\"20\" />\n  }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;flex-shrink:0}.sui-topbar-item{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:none;border-radius:var(--sui-radius-8, 8px);background:transparent;cursor:pointer;text-decoration:none;box-sizing:border-box;transition:background-color .2s ease;-webkit-tap-highlight-color:transparent}.sui-topbar-item--with-icon{padding-left:8px}.sui-topbar-item--with-right{padding-right:8px}.sui-topbar-item:hover{background:var(--sui-bg-weak-50, #f7f7f7)}:host([data-sui-active]) .sui-topbar-item{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-topbar-item__text{display:inline-flex;align-items:center;gap:4px}.sui-topbar-item__label{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.084px;color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap;transition:color .2s ease}:host([data-sui-active]) .sui-topbar-item__label{color:var(--sui-text-strong-950, #171717)}.sui-topbar-item__icon,.sui-topbar-item__right-icon{display:inline-flex;flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c);transition:color .2s ease}:host([data-sui-active][data-sui-accent=brand]) .sui-topbar-item__icon{color:var(--sui-primary-base, #fa7319)}:host([data-sui-active][data-sui-accent=information]) .sui-topbar-item__icon{color:var(--sui-state-information-base, #335cff)}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], rightIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightIcon", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], accent: [{ type: i0.Input, args: [{ isSignal: true, alias: "accent", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
 
 /**
@@ -18711,5 +18765,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { DAY_LABELS_ES, DEFAULT_DURATION_PRESETS, DEFAULT_PRESETS, EMPTY_STATE_FOX_EMOJI, SUI_BRAND_LOGO_COMPANIES, SUI_CHART_LEGEND_COLORS, SUI_CHART_LEGEND_HEX, SUI_CHART_SERIES_COLORS, SUI_COLOR_DOT_COLORS, SUI_COLOR_DOT_HEX, SUI_CUSTOM_ICONS, SUI_EMOJI_MAP, SUI_FLAG_NAMES, SUI_HEX_TO_COLOR, SUI_KEY_ICON_COLORS, SUI_KEY_ICON_SIZES, SUI_NAVBAR_VISIBILITY, SUI_PASSWORD_STRENGTH_DEFAULT_CONDITIONS, SUI_PASSWORD_STRENGTH_DEFAULT_LEVEL_LABELS, SUI_PAYMENT_ICON_TYPES, SUI_PRODUCT_FALLBACK_COLORS, SUI_TAB_BAR, SuiAccordion, SuiAccordionContent, SuiActivityFeed, SuiActivityFilter, SuiAlert, SuiAppStoreBadge, SuiAvatar, SuiAvatarGroup, SuiBadge, SuiBanner, SuiBrandLogo, SuiBreadcrumbItem, SuiBreadcrumbs, SuiButton, SuiButtonGroup, SuiButtonGroupItem, SuiCard, SuiChartLegend, SuiChartLegendDot, SuiCheckbox, SuiCheckboxCard, SuiCheckboxLabel, SuiCircularProgressBar, SuiColorDot, SuiColorPicker, SuiCommandMenuFooter, SuiCommandMenuItem, SuiCommandMenuSearch, SuiCompactAvatarGroup, SuiCompactButton, SuiCompactSelect, SuiCompactSelectForInput, SuiContentCard, SuiContentDivider, SuiContentLabel, SuiCounterInput, SuiDateSelector, SuiDatepicker, SuiDayCell, SuiDayLabel, SuiDivider, SuiDrawerFooter, SuiDrawerHeader, SuiDropdownCaption, SuiDropdownItem, SuiDropdownMenu, SuiDropdownPanel, SuiDropdownSearch, SuiEmoji, SuiEmptyState, SuiFancyButton, SuiFileIcon, SuiFileUpload, SuiFileUploadCard, SuiFilterBar, SuiFilterItem, SuiFilterPanelFooter, SuiFilterPanelHeader, SuiFlag, SuiFormHint, SuiFormLabel, SuiIcon, SuiImageUpload, SuiImageUploadProfile, SuiImgRetry, SuiInlineInput, SuiInlineSelect, SuiInput, SuiIntegrationSwitch, SuiKbd, SuiKeyIcon, SuiLinkButton, SuiModal, SuiModalFooter, SuiModalHeader, SuiModalSheet, SuiNotification, SuiNotificationFooter, SuiNotificationTabMenu, SuiOtpInput, SuiPageHeader, SuiPagination, SuiPasswordStrength, SuiPaymentIcon, SuiPeriodRange, SuiPopover, SuiProductCard, SuiProgressBar, SuiProgressBarLabel, SuiRadio, SuiRadioCard, SuiRadioGroup, SuiRadioLabel, SuiRating, SuiRichEditor, SuiRichEditorItem, SuiSegmentedControl, SuiSelect, SuiSidebar, SuiSlider, SuiSocialButton, SuiStatusBadge, SuiStepper, SuiStoreCard, SuiSwitch, SuiSwitchCard, SuiSwitchLabel, SuiTabChips, SuiTabMenuHorizontal, SuiTabMenuVertical, SuiTable, SuiTableCellDirective, SuiTag, SuiTagInput, SuiTextarea, SuiTimePicker, SuiTimePickerDuration, SuiTimePickerItem, SuiTimePickerStatus, SuiToastOutlet, SuiToastService, SuiTooltip, SuiTooltipPanel, SuiTopbar, SuiTopbarButton, SuiTopbarItem, SuiTopbarUser, buildCalendarGrid, buildHourList, buildMinuteList, formatDateInput, formatDateShort, formatMonthYear, formatTime, isSameTime, normalizeHex, pad2, parseTime, to12h, to24h };
+export { DAY_LABELS_ES, DEFAULT_DURATION_PRESETS, DEFAULT_PRESETS, EMPTY_STATE_FOX_EMOJI, SUI_BRAND_LOGO_COMPANIES, SUI_CHART_LEGEND_COLORS, SUI_CHART_LEGEND_HEX, SUI_CHART_SERIES_COLORS, SUI_COLOR_DOT_COLORS, SUI_COLOR_DOT_HEX, SUI_CUSTOM_ICONS, SUI_EMOJI_MAP, SUI_FLAG_NAMES, SUI_HEX_TO_COLOR, SUI_KEY_ICON_COLORS, SUI_KEY_ICON_SIZES, SUI_NAVBAR_VISIBILITY, SUI_PASSWORD_STRENGTH_DEFAULT_CONDITIONS, SUI_PASSWORD_STRENGTH_DEFAULT_LEVEL_LABELS, SUI_PAYMENT_ICON_TYPES, SUI_PRODUCT_FALLBACK_COLORS, SUI_TAB_BAR, SuiAccordion, SuiAccordionContent, SuiActivityFeed, SuiActivityFilter, SuiAlert, SuiAppStoreBadge, SuiAvatar, SuiAvatarGroup, SuiBadge, SuiBanner, SuiBrandLogo, SuiBreadcrumbItem, SuiBreadcrumbs, SuiButton, SuiButtonGroup, SuiButtonGroupItem, SuiCard, SuiChartLegend, SuiChartLegendDot, SuiCheckbox, SuiCheckboxCard, SuiCheckboxLabel, SuiCircularProgressBar, SuiColorDot, SuiColorPicker, SuiCommandMenuFooter, SuiCommandMenuItem, SuiCommandMenuSearch, SuiCompactAvatarGroup, SuiCompactButton, SuiCompactSelect, SuiCompactSelectForInput, SuiContentCard, SuiContentDivider, SuiContentLabel, SuiCounterInput, SuiDateSelector, SuiDatepicker, SuiDayCell, SuiDayLabel, SuiDivider, SuiDrawerFooter, SuiDrawerHeader, SuiDropdownCaption, SuiDropdownItem, SuiDropdownMenu, SuiDropdownPanel, SuiDropdownSearch, SuiEmoji, SuiEmptyState, SuiFancyButton, SuiFileIcon, SuiFileUpload, SuiFileUploadCard, SuiFilterBar, SuiFilterItem, SuiFilterPanelFooter, SuiFilterPanelHeader, SuiFlag, SuiFormHint, SuiFormLabel, SuiHref, SuiIcon, SuiImageUpload, SuiImageUploadProfile, SuiImgRetry, SuiInlineInput, SuiInlineSelect, SuiInput, SuiIntegrationSwitch, SuiKbd, SuiKeyIcon, SuiLinkButton, SuiModal, SuiModalFooter, SuiModalHeader, SuiModalSheet, SuiNotification, SuiNotificationFooter, SuiNotificationTabMenu, SuiOtpInput, SuiPageHeader, SuiPagination, SuiPasswordStrength, SuiPaymentIcon, SuiPeriodRange, SuiPopover, SuiProductCard, SuiProgressBar, SuiProgressBarLabel, SuiRadio, SuiRadioCard, SuiRadioGroup, SuiRadioLabel, SuiRating, SuiRichEditor, SuiRichEditorItem, SuiSegmentedControl, SuiSelect, SuiSidebar, SuiSlider, SuiSocialButton, SuiStatusBadge, SuiStepper, SuiStoreCard, SuiSwitch, SuiSwitchCard, SuiSwitchLabel, SuiTabChips, SuiTabMenuHorizontal, SuiTabMenuVertical, SuiTable, SuiTableCellDirective, SuiTag, SuiTagInput, SuiTextarea, SuiTimePicker, SuiTimePickerDuration, SuiTimePickerItem, SuiTimePickerStatus, SuiToastOutlet, SuiToastService, SuiTooltip, SuiTooltipPanel, SuiTopbar, SuiTopbarButton, SuiTopbarItem, SuiTopbarUser, buildCalendarGrid, buildHourList, buildMinuteList, formatDateInput, formatDateShort, formatMonthYear, formatTime, isSameTime, normalizeHex, pad2, parseTime, to12h, to24h };
 //# sourceMappingURL=ajuarezso-sui-design-system.mjs.map