@ajuarezso/sui-design-system 0.18.10 → 0.20.0

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

@@ -147,7 +147,7 @@ class SuiBadge {
     /** Internal: true when the badge renders its built-in dot (type=with-dot). */
     showsDot = computed(() => this.type() === 'with-dot', ...(ngDevMode ? [{ debugName: "showsDot" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiBadge, isStandalone: true, selector: "sui-badge", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-sui-color": "color()", "attr.data-sui-variant": "variant()", "attr.data-sui-size": "size()", "attr.data-sui-type": "type()", "attr.data-sui-disabled": "disabled() ? \"\" : null", "attr.role": "\"status\"" } }, ngImport: i0, template: "@if (showsDot()) {\n  <span class=\"sui-badge__dot\" aria-hidden=\"true\"></span>\n}\n<ng-content select=\"[data-slot=start]\"></ng-content>\n<span class=\"sui-badge__label\"><ng-content></ng-content></span>\n<ng-content select=\"[data-slot=end]\"></ng-content>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border:1px solid transparent;border-radius:var(--sui-radius-full);font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;white-space:nowrap;vertical-align:middle;overflow:clip;font-size:var(--sui-type-subheading-2xs-size);font-weight:var(--sui-type-subheading-2xs-weight);line-height:var(--sui-type-subheading-2xs-line);letter-spacing:var(--sui-type-subheading-2xs-spacing);text-transform:uppercase}.sui-badge__label{display:inline-flex;align-items:center}:host ::ng-deep [data-slot=start],:host ::ng-deep [data-slot=end]{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.sui-badge__dot{display:block;flex-shrink:0;width:16px;height:16px;background-image:radial-gradient(circle at center,currentColor 0,currentColor 2px,transparent 2.5px)}:host([data-sui-size=small]){height:16px}:host([data-sui-size=small]) ::ng-deep [data-slot=start],:host([data-sui-size=small]) ::ng-deep [data-slot=end]{width:var(--sui-icon-size-xs);height:var(--sui-icon-size-xs)}:host([data-sui-size=medium]){height:20px;font-size:var(--sui-type-label-xs-size);font-weight:var(--sui-type-label-xs-weight);line-height:var(--sui-type-label-xs-line);letter-spacing:var(--sui-type-label-xs-spacing);text-transform:none}:host([data-sui-size=medium]) ::ng-deep [data-slot=start],:host([data-sui-size=medium]) ::ng-deep [data-slot=end]{width:var(--sui-icon-size-sm);height:var(--sui-icon-size-sm)}:host([data-sui-type=basic]){padding:2px 8px;gap:0}:host([data-sui-type=left-icon]){padding:2px 8px 2px 4px;gap:2px}:host([data-sui-type=right-icon]){padding:2px 4px 2px 8px;gap:2px}:host([data-sui-size=small][data-sui-type=with-dot]){padding:0 8px 0 0;gap:0}:host([data-sui-size=medium][data-sui-type=with-dot]){padding:2px 8px 2px 2px;gap:0}:host([data-sui-type=number]){gap:0;padding:0 4px;justify-content:center}:host([data-sui-type=number]) .sui-badge__label{display:inline-block;text-align:center}:host([data-sui-type=number][data-sui-size=small]){height:16px;min-width:16px}:host([data-sui-type=number][data-sui-size=medium]){height:20px;min-width:20px}:host([data-sui-color=gray][data-sui-variant=filled]){background:var(--sui-state-faded-base);border-color:var(--sui-state-faded-base);color:var(--sui-static-white)}:host([data-sui-color=gray][data-sui-variant=light]){background:var(--sui-state-faded-light);border-color:transparent;color:var(--sui-state-faded-dark)}:host([data-sui-color=gray][data-sui-variant=lighter]){background:var(--sui-state-faded-lighter);border-color:transparent;color:var(--sui-state-faded-base)}:host([data-sui-color=gray][data-sui-variant=stroke]){background:transparent;border-color:var(--sui-state-faded-base);color:var(--sui-state-faded-base)}:host([data-sui-color=gray][data-sui-variant=dark]){background:color-mix(in srgb,var(--sui-state-faded-base) 22%,transparent);border-color:color-mix(in srgb,var(--sui-state-faded-base) 45%,transparent);color:var(--sui-static-white)}:host([data-sui-color=blue][data-sui-variant=filled]){background:var(--sui-state-information-base);border-color:var(--sui-state-information-base);color:var(--sui-static-white)}:host([data-sui-color=blue][data-sui-variant=light]){background:var(--sui-state-information-light);border-color:transparent;color:var(--sui-state-information-dark)}:host([data-sui-color=blue][data-sui-variant=lighter]){background:var(--sui-state-information-lighter);border-color:transparent;color:var(--sui-state-information-base)}:host([data-sui-color=blue][data-sui-variant=stroke]){background:transparent;border-color:var(--sui-state-information-base);color:var(--sui-state-information-base)}:host([data-sui-color=blue][data-sui-variant=dark]){background:color-mix(in srgb,var(--sui-state-information-base) 22%,transparent);border-color:color-mix(in srgb,var(--sui-state-information-base) 45%,transparent);color:var(--sui-static-white)}:host([data-sui-color=orange][data-sui-variant=filled]){background:var(--sui-state-warning-base);border-color:var(--sui-state-warning-base);color:var(--sui-static-white)}:host([data-sui-color=orange][data-sui-variant=light]){background:var(--sui-state-warning-light);border-color:transparent;color:var(--sui-state-warning-dark)}:host([data-sui-color=orange][data-sui-variant=lighter]){background:var(--sui-state-warning-lighter);border-color:transparent;color:var(--sui-state-warning-base)}:host([data-sui-color=orange][data-sui-variant=stroke]){background:transparent;border-color:var(--sui-state-warning-base);color:var(--sui-state-warning-base)}:host([data-sui-color=orange][data-sui-variant=dark]){background:color-mix(in srgb,var(--sui-state-warning-base) 22%,transparent);border-color:color-mix(in srgb,var(--sui-state-warning-base) 45%,transparent);color:var(--sui-static-white)}:host([data-sui-color=red][data-sui-variant=filled]){background:var(--sui-state-error-base);border-color:var(--sui-state-error-base);color:var(--sui-static-white)}:host([data-sui-color=red][data-sui-variant=light]){background:var(--sui-state-error-light);border-color:transparent;color:var(--sui-state-error-dark)}:host([data-sui-color=red][data-sui-variant=lighter]){background:var(--sui-state-error-lighter);border-color:transparent;color:var(--sui-state-error-base)}:host([data-sui-color=red][data-sui-variant=stroke]){background:transparent;border-color:var(--sui-state-error-base);color:var(--sui-state-error-base)}:host([data-sui-color=red][data-sui-variant=dark]){background:color-mix(in srgb,var(--sui-state-error-base) 22%,transparent);border-color:color-mix(in srgb,var(--sui-state-error-base) 45%,transparent);color:var(--sui-static-white)}:host([data-sui-color=green][data-sui-variant=filled]){background:var(--sui-state-success-base);border-color:var(--sui-state-success-base);color:var(--sui-static-white)}:host([data-sui-color=green][data-sui-variant=light]){background:var(--sui-state-success-light);border-color:transparent;color:var(--sui-state-success-dark)}:host([data-sui-color=green][data-sui-variant=lighter]){background:var(--sui-state-success-lighter);border-color:transparent;color:var(--sui-state-success-base)}:host([data-sui-color=green][data-sui-variant=stroke]){background:transparent;border-color:var(--sui-state-success-base);color:var(--sui-state-success-base)}:host([data-sui-color=green][data-sui-variant=dark]){background:color-mix(in srgb,var(--sui-state-success-base) 22%,transparent);border-color:color-mix(in srgb,var(--sui-state-success-base) 45%,transparent);color:var(--sui-static-white)}:host([data-sui-color=yellow][data-sui-variant=filled]){background:var(--sui-state-away-base);border-color:var(--sui-state-away-base);color:var(--sui-static-white)}:host([data-sui-color=yellow][data-sui-variant=light]){background:var(--sui-state-away-light);border-color:transparent;color:var(--sui-state-away-dark)}:host([data-sui-color=yellow][data-sui-variant=lighter]){background:var(--sui-state-away-lighter);border-color:transparent;color:var(--sui-state-away-base)}:host([data-sui-color=yellow][data-sui-variant=stroke]){background:transparent;border-color:var(--sui-state-away-base);color:var(--sui-state-away-base)}:host([data-sui-color=yellow][data-sui-variant=dark]){background:color-mix(in srgb,var(--sui-state-away-base) 22%,transparent);border-color:color-mix(in srgb,var(--sui-state-away-base) 45%,transparent);color:var(--sui-static-white)}:host([data-sui-color=purple][data-sui-variant=filled]){background:var(--sui-state-feature-base);border-color:var(--sui-state-feature-base);color:var(--sui-static-white)}:host([data-sui-color=purple][data-sui-variant=light]){background:var(--sui-state-feature-light);border-color:transparent;color:var(--sui-state-feature-dark)}:host([data-sui-color=purple][data-sui-variant=lighter]){background:var(--sui-state-feature-lighter);border-color:transparent;color:var(--sui-state-feature-base)}:host([data-sui-color=purple][data-sui-variant=stroke]){background:transparent;border-color:var(--sui-state-feature-base);color:var(--sui-state-feature-base)}:host([data-sui-color=purple][data-sui-variant=dark]){background:color-mix(in srgb,var(--sui-state-feature-base) 22%,transparent);border-color:color-mix(in srgb,var(--sui-state-feature-base) 45%,transparent);color:var(--sui-static-white)}:host([data-sui-color=sky][data-sui-variant=filled]){background:var(--sui-state-verified-base);border-color:var(--sui-state-verified-base);color:var(--sui-static-white)}:host([data-sui-color=sky][data-sui-variant=light]){background:var(--sui-state-verified-light);border-color:transparent;color:var(--sui-state-verified-dark)}:host([data-sui-color=sky][data-sui-variant=lighter]){background:var(--sui-state-verified-lighter);border-color:transparent;color:var(--sui-state-verified-base)}:host([data-sui-color=sky][data-sui-variant=stroke]){background:transparent;border-color:var(--sui-state-verified-base);color:var(--sui-state-verified-base)}:host([data-sui-color=sky][data-sui-variant=dark]){background:color-mix(in srgb,var(--sui-state-verified-base) 22%,transparent);border-color:color-mix(in srgb,var(--sui-state-verified-base) 45%,transparent);color:var(--sui-static-white)}:host([data-sui-color=pink][data-sui-variant=filled]){background:var(--sui-state-highlighted-base);border-color:var(--sui-state-highlighted-base);color:var(--sui-static-white)}:host([data-sui-color=pink][data-sui-variant=light]){background:var(--sui-state-highlighted-light);border-color:transparent;color:var(--sui-state-highlighted-dark)}:host([data-sui-color=pink][data-sui-variant=lighter]){background:var(--sui-state-highlighted-lighter);border-color:transparent;color:var(--sui-state-highlighted-base)}:host([data-sui-color=pink][data-sui-variant=stroke]){background:transparent;border-color:var(--sui-state-highlighted-base);color:var(--sui-state-highlighted-base)}:host([data-sui-color=pink][data-sui-variant=dark]){background:color-mix(in srgb,var(--sui-state-highlighted-base) 22%,transparent);border-color:color-mix(in srgb,var(--sui-state-highlighted-base) 45%,transparent);color:var(--sui-static-white)}:host([data-sui-color=teal][data-sui-variant=filled]){background:var(--sui-state-stable-base);border-color:var(--sui-state-stable-base);color:var(--sui-static-white)}:host([data-sui-color=teal][data-sui-variant=light]){background:var(--sui-state-stable-light);border-color:transparent;color:var(--sui-state-stable-dark)}:host([data-sui-color=teal][data-sui-variant=lighter]){background:var(--sui-state-stable-lighter);border-color:transparent;color:var(--sui-state-stable-base)}:host([data-sui-color=teal][data-sui-variant=stroke]){background:transparent;border-color:var(--sui-state-stable-base);color:var(--sui-state-stable-base)}:host([data-sui-color=teal][data-sui-variant=dark]){background:color-mix(in srgb,var(--sui-state-stable-base) 22%,transparent);border-color:color-mix(in srgb,var(--sui-state-stable-base) 45%,transparent);color:var(--sui-static-white)}:host([data-sui-variant=dark]:not([data-sui-color])),:host([data-sui-variant=dark][data-sui-color=gray]){background:#ffffff1a;border-color:#ffffff29;color:var(--sui-static-white)}:host([data-sui-disabled]){pointer-events:none;color:var(--sui-text-disabled-300)}:host([data-sui-disabled][data-sui-variant=filled]){background:var(--sui-state-faded-light);border-color:var(--sui-state-faded-light);color:var(--sui-text-disabled-300)}:host([data-sui-disabled][data-sui-variant=light]),:host([data-sui-disabled][data-sui-variant=lighter]){background:var(--sui-state-faded-lighter);border-color:transparent;color:var(--sui-text-disabled-300)}:host([data-sui-disabled][data-sui-variant=stroke]){background:transparent;border-color:var(--sui-stroke-soft-200);color:var(--sui-text-disabled-300)}:host([data-sui-disabled][data-sui-variant=dark]){background:#ffffff0f;border-color:#ffffff1a;color:#ffffff73}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiBadge, isStandalone: true, selector: "sui-badge", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-sui-color": "color()", "attr.data-sui-variant": "variant()", "attr.data-sui-size": "size()", "attr.data-sui-type": "type()", "attr.data-sui-disabled": "disabled() ? \"\" : null", "attr.role": "\"status\"" } }, ngImport: i0, template: "@if (showsDot()) {\n  <span class=\"sui-badge__dot\" aria-hidden=\"true\"></span>\n}\n<ng-content select=\"[data-slot=start]\"></ng-content>\n<span class=\"sui-badge__label\"><ng-content></ng-content></span>\n<ng-content select=\"[data-slot=end]\"></ng-content>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border:1px solid transparent;border-radius:var(--sui-radius-full);font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;white-space:nowrap;vertical-align:middle;overflow:clip;font-size:var(--sui-type-subheading-2xs-size);font-weight:var(--sui-type-subheading-2xs-weight);line-height:var(--sui-type-subheading-2xs-line);letter-spacing:var(--sui-type-subheading-2xs-spacing);text-transform:uppercase}.sui-badge__label{display:inline-flex;align-items:center}:host ::ng-deep [data-slot=start],:host ::ng-deep [data-slot=end]{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.sui-badge__dot{display:block;flex-shrink:0;width:16px;height:16px;background-image:radial-gradient(circle at center,currentColor 0,currentColor 2px,transparent 2.5px)}:host([data-sui-size=small]){height:16px}:host([data-sui-size=small]) ::ng-deep [data-slot=start],:host([data-sui-size=small]) ::ng-deep [data-slot=end]{width:var(--sui-icon-size-xs);height:var(--sui-icon-size-xs)}:host([data-sui-size=medium]){height:20px;font-size:var(--sui-type-label-xs-size);font-weight:var(--sui-type-label-xs-weight);line-height:var(--sui-type-label-xs-line);letter-spacing:var(--sui-type-label-xs-spacing);text-transform:none}:host([data-sui-size=medium]) ::ng-deep [data-slot=start],:host([data-sui-size=medium]) ::ng-deep [data-slot=end]{width:var(--sui-icon-size-sm);height:var(--sui-icon-size-sm)}:host([data-sui-size=large]){height:24px;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);text-transform:none}:host([data-sui-size=large]) ::ng-deep [data-slot=start],:host([data-sui-size=large]) ::ng-deep [data-slot=end]{width:var(--sui-icon-size-sm);height:var(--sui-icon-size-sm)}:host([data-sui-size=xlarge]){height:28px;font-size:var(--sui-type-label-md-size);font-weight:var(--sui-type-label-md-weight);line-height:var(--sui-type-label-md-line);letter-spacing:var(--sui-type-label-md-spacing);text-transform:none}:host([data-sui-size=xlarge]) ::ng-deep [data-slot=start],:host([data-sui-size=xlarge]) ::ng-deep [data-slot=end]{width:var(--sui-icon-size-md);height:var(--sui-icon-size-md)}:host([data-sui-type=basic]){padding:2px 8px;gap:0}:host([data-sui-type=left-icon]){padding:2px 8px 2px 4px;gap:2px}:host([data-sui-type=right-icon]){padding:2px 4px 2px 8px;gap:2px}:host([data-sui-size=medium][data-sui-type=left-icon]),:host([data-sui-size=medium][data-sui-type=right-icon]){gap:4px}:host([data-sui-size=small][data-sui-type=with-dot]){padding:0 8px 0 0;gap:0}:host([data-sui-size=medium][data-sui-type=with-dot]){padding:2px 8px 2px 2px;gap:0}:host([data-sui-type=number]){gap:0;padding:0 4px;justify-content:center}:host([data-sui-type=number]) .sui-badge__label{display:inline-block;text-align:center}:host([data-sui-type=number][data-sui-size=small]){height:16px;min-width:16px}:host([data-sui-type=number][data-sui-size=medium]){height:20px;min-width:20px}:host([data-sui-type=number][data-sui-size=large]){height:24px;min-width:24px;padding:0 6px}:host([data-sui-type=number][data-sui-size=xlarge]){height:28px;min-width:28px;padding:0 8px}:host([data-sui-size=large][data-sui-type=basic]){padding:2px 10px}:host([data-sui-size=xlarge][data-sui-type=basic]){padding:2px 12px}:host([data-sui-size=large][data-sui-type=left-icon]){padding:2px 10px 2px 6px;gap:4px}:host([data-sui-size=xlarge][data-sui-type=left-icon]){padding:2px 12px 2px 8px;gap:4px}:host([data-sui-size=large][data-sui-type=right-icon]){padding:2px 6px 2px 10px;gap:4px}:host([data-sui-size=xlarge][data-sui-type=right-icon]){padding:2px 8px 2px 12px;gap:4px}:host([data-sui-size=large][data-sui-type=with-dot]){padding:4px 10px 4px 4px;gap:0}:host([data-sui-size=xlarge][data-sui-type=with-dot]){padding:6px 12px 6px 6px;gap:0}:host([data-sui-color=gray][data-sui-variant=filled]){background:var(--sui-state-faded-base);border-color:var(--sui-state-faded-base);color:var(--sui-static-white)}:host([data-sui-color=gray][data-sui-variant=light]){background:var(--sui-state-faded-light);border-color:transparent;color:var(--sui-state-faded-dark)}:host([data-sui-color=gray][data-sui-variant=lighter]){background:var(--sui-state-faded-lighter);border-color:transparent;color:var(--sui-state-faded-base)}:host([data-sui-color=gray][data-sui-variant=stroke]){background:transparent;border-color:var(--sui-state-faded-base);color:var(--sui-state-faded-base)}:host([data-sui-color=gray][data-sui-variant=dark]){background:color-mix(in srgb,var(--sui-state-faded-base) 22%,transparent);border-color:color-mix(in srgb,var(--sui-state-faded-base) 45%,transparent);color:var(--sui-static-white)}:host([data-sui-color=blue][data-sui-variant=filled]){background:var(--sui-state-information-base);border-color:var(--sui-state-information-base);color:var(--sui-static-white)}:host([data-sui-color=blue][data-sui-variant=light]){background:var(--sui-state-information-light);border-color:transparent;color:var(--sui-state-information-dark)}:host([data-sui-color=blue][data-sui-variant=lighter]){background:var(--sui-state-information-lighter);border-color:transparent;color:var(--sui-state-information-base)}:host([data-sui-color=blue][data-sui-variant=stroke]){background:transparent;border-color:var(--sui-state-information-base);color:var(--sui-state-information-base)}:host([data-sui-color=blue][data-sui-variant=dark]){background:color-mix(in srgb,var(--sui-state-information-base) 22%,transparent);border-color:color-mix(in srgb,var(--sui-state-information-base) 45%,transparent);color:var(--sui-static-white)}:host([data-sui-color=orange][data-sui-variant=filled]){background:var(--sui-state-warning-base);border-color:var(--sui-state-warning-base);color:var(--sui-static-white)}:host([data-sui-color=orange][data-sui-variant=light]){background:var(--sui-state-warning-light);border-color:transparent;color:var(--sui-state-warning-dark)}:host([data-sui-color=orange][data-sui-variant=lighter]){background:var(--sui-state-warning-lighter);border-color:transparent;color:var(--sui-state-warning-base)}:host([data-sui-color=orange][data-sui-variant=stroke]){background:transparent;border-color:var(--sui-state-warning-base);color:var(--sui-state-warning-base)}:host([data-sui-color=orange][data-sui-variant=dark]){background:color-mix(in srgb,var(--sui-state-warning-base) 22%,transparent);border-color:color-mix(in srgb,var(--sui-state-warning-base) 45%,transparent);color:var(--sui-static-white)}:host([data-sui-color=red][data-sui-variant=filled]){background:var(--sui-state-error-base);border-color:var(--sui-state-error-base);color:var(--sui-static-white)}:host([data-sui-color=red][data-sui-variant=light]){background:var(--sui-state-error-light);border-color:transparent;color:var(--sui-state-error-dark)}:host([data-sui-color=red][data-sui-variant=lighter]){background:var(--sui-state-error-lighter);border-color:transparent;color:var(--sui-state-error-base)}:host([data-sui-color=red][data-sui-variant=stroke]){background:transparent;border-color:var(--sui-state-error-base);color:var(--sui-state-error-base)}:host([data-sui-color=red][data-sui-variant=dark]){background:color-mix(in srgb,var(--sui-state-error-base) 22%,transparent);border-color:color-mix(in srgb,var(--sui-state-error-base) 45%,transparent);color:var(--sui-static-white)}:host([data-sui-color=green][data-sui-variant=filled]){background:var(--sui-state-success-base);border-color:var(--sui-state-success-base);color:var(--sui-static-white)}:host([data-sui-color=green][data-sui-variant=light]){background:var(--sui-state-success-light);border-color:transparent;color:var(--sui-state-success-dark)}:host([data-sui-color=green][data-sui-variant=lighter]){background:var(--sui-state-success-lighter);border-color:transparent;color:var(--sui-state-success-base)}:host([data-sui-color=green][data-sui-variant=stroke]){background:transparent;border-color:var(--sui-state-success-base);color:var(--sui-state-success-base)}:host([data-sui-color=green][data-sui-variant=dark]){background:color-mix(in srgb,var(--sui-state-success-base) 22%,transparent);border-color:color-mix(in srgb,var(--sui-state-success-base) 45%,transparent);color:var(--sui-static-white)}:host([data-sui-color=yellow][data-sui-variant=filled]){background:var(--sui-state-away-base);border-color:var(--sui-state-away-base);color:var(--sui-static-white)}:host([data-sui-color=yellow][data-sui-variant=light]){background:var(--sui-state-away-light);border-color:transparent;color:var(--sui-state-away-dark)}:host([data-sui-color=yellow][data-sui-variant=lighter]){background:var(--sui-state-away-lighter);border-color:transparent;color:var(--sui-state-away-base)}:host([data-sui-color=yellow][data-sui-variant=stroke]){background:transparent;border-color:var(--sui-state-away-base);color:var(--sui-state-away-base)}:host([data-sui-color=yellow][data-sui-variant=dark]){background:color-mix(in srgb,var(--sui-state-away-base) 22%,transparent);border-color:color-mix(in srgb,var(--sui-state-away-base) 45%,transparent);color:var(--sui-static-white)}:host([data-sui-color=purple][data-sui-variant=filled]){background:var(--sui-state-feature-base);border-color:var(--sui-state-feature-base);color:var(--sui-static-white)}:host([data-sui-color=purple][data-sui-variant=light]){background:var(--sui-state-feature-light);border-color:transparent;color:var(--sui-state-feature-dark)}:host([data-sui-color=purple][data-sui-variant=lighter]){background:var(--sui-state-feature-lighter);border-color:transparent;color:var(--sui-state-feature-base)}:host([data-sui-color=purple][data-sui-variant=stroke]){background:transparent;border-color:var(--sui-state-feature-base);color:var(--sui-state-feature-base)}:host([data-sui-color=purple][data-sui-variant=dark]){background:color-mix(in srgb,var(--sui-state-feature-base) 22%,transparent);border-color:color-mix(in srgb,var(--sui-state-feature-base) 45%,transparent);color:var(--sui-static-white)}:host([data-sui-color=sky][data-sui-variant=filled]){background:var(--sui-state-verified-base);border-color:var(--sui-state-verified-base);color:var(--sui-static-white)}:host([data-sui-color=sky][data-sui-variant=light]){background:var(--sui-state-verified-light);border-color:transparent;color:var(--sui-state-verified-dark)}:host([data-sui-color=sky][data-sui-variant=lighter]){background:var(--sui-state-verified-lighter);border-color:transparent;color:var(--sui-state-verified-base)}:host([data-sui-color=sky][data-sui-variant=stroke]){background:transparent;border-color:var(--sui-state-verified-base);color:var(--sui-state-verified-base)}:host([data-sui-color=sky][data-sui-variant=dark]){background:color-mix(in srgb,var(--sui-state-verified-base) 22%,transparent);border-color:color-mix(in srgb,var(--sui-state-verified-base) 45%,transparent);color:var(--sui-static-white)}:host([data-sui-color=pink][data-sui-variant=filled]){background:var(--sui-state-highlighted-base);border-color:var(--sui-state-highlighted-base);color:var(--sui-static-white)}:host([data-sui-color=pink][data-sui-variant=light]){background:var(--sui-state-highlighted-light);border-color:transparent;color:var(--sui-state-highlighted-dark)}:host([data-sui-color=pink][data-sui-variant=lighter]){background:var(--sui-state-highlighted-lighter);border-color:transparent;color:var(--sui-state-highlighted-base)}:host([data-sui-color=pink][data-sui-variant=stroke]){background:transparent;border-color:var(--sui-state-highlighted-base);color:var(--sui-state-highlighted-base)}:host([data-sui-color=pink][data-sui-variant=dark]){background:color-mix(in srgb,var(--sui-state-highlighted-base) 22%,transparent);border-color:color-mix(in srgb,var(--sui-state-highlighted-base) 45%,transparent);color:var(--sui-static-white)}:host([data-sui-color=teal][data-sui-variant=filled]){background:var(--sui-state-stable-base);border-color:var(--sui-state-stable-base);color:var(--sui-static-white)}:host([data-sui-color=teal][data-sui-variant=light]){background:var(--sui-state-stable-light);border-color:transparent;color:var(--sui-state-stable-dark)}:host([data-sui-color=teal][data-sui-variant=lighter]){background:var(--sui-state-stable-lighter);border-color:transparent;color:var(--sui-state-stable-base)}:host([data-sui-color=teal][data-sui-variant=stroke]){background:transparent;border-color:var(--sui-state-stable-base);color:var(--sui-state-stable-base)}:host([data-sui-color=teal][data-sui-variant=dark]){background:color-mix(in srgb,var(--sui-state-stable-base) 22%,transparent);border-color:color-mix(in srgb,var(--sui-state-stable-base) 45%,transparent);color:var(--sui-static-white)}:host([data-sui-variant=dark]:not([data-sui-color])),:host([data-sui-variant=dark][data-sui-color=gray]){background:#ffffff1a;border-color:#ffffff29;color:var(--sui-static-white)}:host([data-sui-disabled]){pointer-events:none;color:var(--sui-text-disabled-300)}:host([data-sui-disabled][data-sui-variant=filled]){background:var(--sui-state-faded-light);border-color:var(--sui-state-faded-light);color:var(--sui-text-disabled-300)}:host([data-sui-disabled][data-sui-variant=light]),:host([data-sui-disabled][data-sui-variant=lighter]){background:var(--sui-state-faded-lighter);border-color:transparent;color:var(--sui-text-disabled-300)}:host([data-sui-disabled][data-sui-variant=stroke]){background:transparent;border-color:var(--sui-stroke-soft-200);color:var(--sui-text-disabled-300)}:host([data-sui-disabled][data-sui-variant=dark]){background:#ffffff0f;border-color:#ffffff1a;color:#ffffff73}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiBadge, decorators: [{
             type: Component,
@@ -158,7 +158,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         '[attr.data-sui-type]': 'type()',
                         '[attr.data-sui-disabled]': 'disabled() ? "" : null',
                         '[attr.role]': '"status"',
-                    }, template: "@if (showsDot()) {\n  <span class=\"sui-badge__dot\" aria-hidden=\"true\"></span>\n}\n<ng-content select=\"[data-slot=start]\"></ng-content>\n<span class=\"sui-badge__label\"><ng-content></ng-content></span>\n<ng-content select=\"[data-slot=end]\"></ng-content>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border:1px solid transparent;border-radius:var(--sui-radius-full);font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;white-space:nowrap;vertical-align:middle;overflow:clip;font-size:var(--sui-type-subheading-2xs-size);font-weight:var(--sui-type-subheading-2xs-weight);line-height:var(--sui-type-subheading-2xs-line);letter-spacing:var(--sui-type-subheading-2xs-spacing);text-transform:uppercase}.sui-badge__label{display:inline-flex;align-items:center}:host ::ng-deep [data-slot=start],:host ::ng-deep [data-slot=end]{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.sui-badge__dot{display:block;flex-shrink:0;width:16px;height:16px;background-image:radial-gradient(circle at center,currentColor 0,currentColor 2px,transparent 2.5px)}:host([data-sui-size=small]){height:16px}:host([data-sui-size=small]) ::ng-deep [data-slot=start],:host([data-sui-size=small]) ::ng-deep [data-slot=end]{width:var(--sui-icon-size-xs);height:var(--sui-icon-size-xs)}:host([data-sui-size=medium]){height:20px;font-size:var(--sui-type-label-xs-size);font-weight:var(--sui-type-label-xs-weight);line-height:var(--sui-type-label-xs-line);letter-spacing:var(--sui-type-label-xs-spacing);text-transform:none}:host([data-sui-size=medium]) ::ng-deep [data-slot=start],:host([data-sui-size=medium]) ::ng-deep [data-slot=end]{width:var(--sui-icon-size-sm);height:var(--sui-icon-size-sm)}:host([data-sui-type=basic]){padding:2px 8px;gap:0}:host([data-sui-type=left-icon]){padding:2px 8px 2px 4px;gap:2px}:host([data-sui-type=right-icon]){padding:2px 4px 2px 8px;gap:2px}:host([data-sui-size=small][data-sui-type=with-dot]){padding:0 8px 0 0;gap:0}:host([data-sui-size=medium][data-sui-type=with-dot]){padding:2px 8px 2px 2px;gap:0}:host([data-sui-type=number]){gap:0;padding:0 4px;justify-content:center}:host([data-sui-type=number]) .sui-badge__label{display:inline-block;text-align:center}:host([data-sui-type=number][data-sui-size=small]){height:16px;min-width:16px}:host([data-sui-type=number][data-sui-size=medium]){height:20px;min-width:20px}:host([data-sui-color=gray][data-sui-variant=filled]){background:var(--sui-state-faded-base);border-color:var(--sui-state-faded-base);color:var(--sui-static-white)}:host([data-sui-color=gray][data-sui-variant=light]){background:var(--sui-state-faded-light);border-color:transparent;color:var(--sui-state-faded-dark)}:host([data-sui-color=gray][data-sui-variant=lighter]){background:var(--sui-state-faded-lighter);border-color:transparent;color:var(--sui-state-faded-base)}:host([data-sui-color=gray][data-sui-variant=stroke]){background:transparent;border-color:var(--sui-state-faded-base);color:var(--sui-state-faded-base)}:host([data-sui-color=gray][data-sui-variant=dark]){background:color-mix(in srgb,var(--sui-state-faded-base) 22%,transparent);border-color:color-mix(in srgb,var(--sui-state-faded-base) 45%,transparent);color:var(--sui-static-white)}:host([data-sui-color=blue][data-sui-variant=filled]){background:var(--sui-state-information-base);border-color:var(--sui-state-information-base);color:var(--sui-static-white)}:host([data-sui-color=blue][data-sui-variant=light]){background:var(--sui-state-information-light);border-color:transparent;color:var(--sui-state-information-dark)}:host([data-sui-color=blue][data-sui-variant=lighter]){background:var(--sui-state-information-lighter);border-color:transparent;color:var(--sui-state-information-base)}:host([data-sui-color=blue][data-sui-variant=stroke]){background:transparent;border-color:var(--sui-state-information-base);color:var(--sui-state-information-base)}:host([data-sui-color=blue][data-sui-variant=dark]){background:color-mix(in srgb,var(--sui-state-information-base) 22%,transparent);border-color:color-mix(in srgb,var(--sui-state-information-base) 45%,transparent);color:var(--sui-static-white)}:host([data-sui-color=orange][data-sui-variant=filled]){background:var(--sui-state-warning-base);border-color:var(--sui-state-warning-base);color:var(--sui-static-white)}:host([data-sui-color=orange][data-sui-variant=light]){background:var(--sui-state-warning-light);border-color:transparent;color:var(--sui-state-warning-dark)}:host([data-sui-color=orange][data-sui-variant=lighter]){background:var(--sui-state-warning-lighter);border-color:transparent;color:var(--sui-state-warning-base)}:host([data-sui-color=orange][data-sui-variant=stroke]){background:transparent;border-color:var(--sui-state-warning-base);color:var(--sui-state-warning-base)}:host([data-sui-color=orange][data-sui-variant=dark]){background:color-mix(in srgb,var(--sui-state-warning-base) 22%,transparent);border-color:color-mix(in srgb,var(--sui-state-warning-base) 45%,transparent);color:var(--sui-static-white)}:host([data-sui-color=red][data-sui-variant=filled]){background:var(--sui-state-error-base);border-color:var(--sui-state-error-base);color:var(--sui-static-white)}:host([data-sui-color=red][data-sui-variant=light]){background:var(--sui-state-error-light);border-color:transparent;color:var(--sui-state-error-dark)}:host([data-sui-color=red][data-sui-variant=lighter]){background:var(--sui-state-error-lighter);border-color:transparent;color:var(--sui-state-error-base)}:host([data-sui-color=red][data-sui-variant=stroke]){background:transparent;border-color:var(--sui-state-error-base);color:var(--sui-state-error-base)}:host([data-sui-color=red][data-sui-variant=dark]){background:color-mix(in srgb,var(--sui-state-error-base) 22%,transparent);border-color:color-mix(in srgb,var(--sui-state-error-base) 45%,transparent);color:var(--sui-static-white)}:host([data-sui-color=green][data-sui-variant=filled]){background:var(--sui-state-success-base);border-color:var(--sui-state-success-base);color:var(--sui-static-white)}:host([data-sui-color=green][data-sui-variant=light]){background:var(--sui-state-success-light);border-color:transparent;color:var(--sui-state-success-dark)}:host([data-sui-color=green][data-sui-variant=lighter]){background:var(--sui-state-success-lighter);border-color:transparent;color:var(--sui-state-success-base)}:host([data-sui-color=green][data-sui-variant=stroke]){background:transparent;border-color:var(--sui-state-success-base);color:var(--sui-state-success-base)}:host([data-sui-color=green][data-sui-variant=dark]){background:color-mix(in srgb,var(--sui-state-success-base) 22%,transparent);border-color:color-mix(in srgb,var(--sui-state-success-base) 45%,transparent);color:var(--sui-static-white)}:host([data-sui-color=yellow][data-sui-variant=filled]){background:var(--sui-state-away-base);border-color:var(--sui-state-away-base);color:var(--sui-static-white)}:host([data-sui-color=yellow][data-sui-variant=light]){background:var(--sui-state-away-light);border-color:transparent;color:var(--sui-state-away-dark)}:host([data-sui-color=yellow][data-sui-variant=lighter]){background:var(--sui-state-away-lighter);border-color:transparent;color:var(--sui-state-away-base)}:host([data-sui-color=yellow][data-sui-variant=stroke]){background:transparent;border-color:var(--sui-state-away-base);color:var(--sui-state-away-base)}:host([data-sui-color=yellow][data-sui-variant=dark]){background:color-mix(in srgb,var(--sui-state-away-base) 22%,transparent);border-color:color-mix(in srgb,var(--sui-state-away-base) 45%,transparent);color:var(--sui-static-white)}:host([data-sui-color=purple][data-sui-variant=filled]){background:var(--sui-state-feature-base);border-color:var(--sui-state-feature-base);color:var(--sui-static-white)}:host([data-sui-color=purple][data-sui-variant=light]){background:var(--sui-state-feature-light);border-color:transparent;color:var(--sui-state-feature-dark)}:host([data-sui-color=purple][data-sui-variant=lighter]){background:var(--sui-state-feature-lighter);border-color:transparent;color:var(--sui-state-feature-base)}:host([data-sui-color=purple][data-sui-variant=stroke]){background:transparent;border-color:var(--sui-state-feature-base);color:var(--sui-state-feature-base)}:host([data-sui-color=purple][data-sui-variant=dark]){background:color-mix(in srgb,var(--sui-state-feature-base) 22%,transparent);border-color:color-mix(in srgb,var(--sui-state-feature-base) 45%,transparent);color:var(--sui-static-white)}:host([data-sui-color=sky][data-sui-variant=filled]){background:var(--sui-state-verified-base);border-color:var(--sui-state-verified-base);color:var(--sui-static-white)}:host([data-sui-color=sky][data-sui-variant=light]){background:var(--sui-state-verified-light);border-color:transparent;color:var(--sui-state-verified-dark)}:host([data-sui-color=sky][data-sui-variant=lighter]){background:var(--sui-state-verified-lighter);border-color:transparent;color:var(--sui-state-verified-base)}:host([data-sui-color=sky][data-sui-variant=stroke]){background:transparent;border-color:var(--sui-state-verified-base);color:var(--sui-state-verified-base)}:host([data-sui-color=sky][data-sui-variant=dark]){background:color-mix(in srgb,var(--sui-state-verified-base) 22%,transparent);border-color:color-mix(in srgb,var(--sui-state-verified-base) 45%,transparent);color:var(--sui-static-white)}:host([data-sui-color=pink][data-sui-variant=filled]){background:var(--sui-state-highlighted-base);border-color:var(--sui-state-highlighted-base);color:var(--sui-static-white)}:host([data-sui-color=pink][data-sui-variant=light]){background:var(--sui-state-highlighted-light);border-color:transparent;color:var(--sui-state-highlighted-dark)}:host([data-sui-color=pink][data-sui-variant=lighter]){background:var(--sui-state-highlighted-lighter);border-color:transparent;color:var(--sui-state-highlighted-base)}:host([data-sui-color=pink][data-sui-variant=stroke]){background:transparent;border-color:var(--sui-state-highlighted-base);color:var(--sui-state-highlighted-base)}:host([data-sui-color=pink][data-sui-variant=dark]){background:color-mix(in srgb,var(--sui-state-highlighted-base) 22%,transparent);border-color:color-mix(in srgb,var(--sui-state-highlighted-base) 45%,transparent);color:var(--sui-static-white)}:host([data-sui-color=teal][data-sui-variant=filled]){background:var(--sui-state-stable-base);border-color:var(--sui-state-stable-base);color:var(--sui-static-white)}:host([data-sui-color=teal][data-sui-variant=light]){background:var(--sui-state-stable-light);border-color:transparent;color:var(--sui-state-stable-dark)}:host([data-sui-color=teal][data-sui-variant=lighter]){background:var(--sui-state-stable-lighter);border-color:transparent;color:var(--sui-state-stable-base)}:host([data-sui-color=teal][data-sui-variant=stroke]){background:transparent;border-color:var(--sui-state-stable-base);color:var(--sui-state-stable-base)}:host([data-sui-color=teal][data-sui-variant=dark]){background:color-mix(in srgb,var(--sui-state-stable-base) 22%,transparent);border-color:color-mix(in srgb,var(--sui-state-stable-base) 45%,transparent);color:var(--sui-static-white)}:host([data-sui-variant=dark]:not([data-sui-color])),:host([data-sui-variant=dark][data-sui-color=gray]){background:#ffffff1a;border-color:#ffffff29;color:var(--sui-static-white)}:host([data-sui-disabled]){pointer-events:none;color:var(--sui-text-disabled-300)}:host([data-sui-disabled][data-sui-variant=filled]){background:var(--sui-state-faded-light);border-color:var(--sui-state-faded-light);color:var(--sui-text-disabled-300)}:host([data-sui-disabled][data-sui-variant=light]),:host([data-sui-disabled][data-sui-variant=lighter]){background:var(--sui-state-faded-lighter);border-color:transparent;color:var(--sui-text-disabled-300)}:host([data-sui-disabled][data-sui-variant=stroke]){background:transparent;border-color:var(--sui-stroke-soft-200);color:var(--sui-text-disabled-300)}:host([data-sui-disabled][data-sui-variant=dark]){background:#ffffff0f;border-color:#ffffff1a;color:#ffffff73}\n"] }]
+                    }, template: "@if (showsDot()) {\n  <span class=\"sui-badge__dot\" aria-hidden=\"true\"></span>\n}\n<ng-content select=\"[data-slot=start]\"></ng-content>\n<span class=\"sui-badge__label\"><ng-content></ng-content></span>\n<ng-content select=\"[data-slot=end]\"></ng-content>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border:1px solid transparent;border-radius:var(--sui-radius-full);font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;white-space:nowrap;vertical-align:middle;overflow:clip;font-size:var(--sui-type-subheading-2xs-size);font-weight:var(--sui-type-subheading-2xs-weight);line-height:var(--sui-type-subheading-2xs-line);letter-spacing:var(--sui-type-subheading-2xs-spacing);text-transform:uppercase}.sui-badge__label{display:inline-flex;align-items:center}:host ::ng-deep [data-slot=start],:host ::ng-deep [data-slot=end]{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.sui-badge__dot{display:block;flex-shrink:0;width:16px;height:16px;background-image:radial-gradient(circle at center,currentColor 0,currentColor 2px,transparent 2.5px)}:host([data-sui-size=small]){height:16px}:host([data-sui-size=small]) ::ng-deep [data-slot=start],:host([data-sui-size=small]) ::ng-deep [data-slot=end]{width:var(--sui-icon-size-xs);height:var(--sui-icon-size-xs)}:host([data-sui-size=medium]){height:20px;font-size:var(--sui-type-label-xs-size);font-weight:var(--sui-type-label-xs-weight);line-height:var(--sui-type-label-xs-line);letter-spacing:var(--sui-type-label-xs-spacing);text-transform:none}:host([data-sui-size=medium]) ::ng-deep [data-slot=start],:host([data-sui-size=medium]) ::ng-deep [data-slot=end]{width:var(--sui-icon-size-sm);height:var(--sui-icon-size-sm)}:host([data-sui-size=large]){height:24px;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);text-transform:none}:host([data-sui-size=large]) ::ng-deep [data-slot=start],:host([data-sui-size=large]) ::ng-deep [data-slot=end]{width:var(--sui-icon-size-sm);height:var(--sui-icon-size-sm)}:host([data-sui-size=xlarge]){height:28px;font-size:var(--sui-type-label-md-size);font-weight:var(--sui-type-label-md-weight);line-height:var(--sui-type-label-md-line);letter-spacing:var(--sui-type-label-md-spacing);text-transform:none}:host([data-sui-size=xlarge]) ::ng-deep [data-slot=start],:host([data-sui-size=xlarge]) ::ng-deep [data-slot=end]{width:var(--sui-icon-size-md);height:var(--sui-icon-size-md)}:host([data-sui-type=basic]){padding:2px 8px;gap:0}:host([data-sui-type=left-icon]){padding:2px 8px 2px 4px;gap:2px}:host([data-sui-type=right-icon]){padding:2px 4px 2px 8px;gap:2px}:host([data-sui-size=medium][data-sui-type=left-icon]),:host([data-sui-size=medium][data-sui-type=right-icon]){gap:4px}:host([data-sui-size=small][data-sui-type=with-dot]){padding:0 8px 0 0;gap:0}:host([data-sui-size=medium][data-sui-type=with-dot]){padding:2px 8px 2px 2px;gap:0}:host([data-sui-type=number]){gap:0;padding:0 4px;justify-content:center}:host([data-sui-type=number]) .sui-badge__label{display:inline-block;text-align:center}:host([data-sui-type=number][data-sui-size=small]){height:16px;min-width:16px}:host([data-sui-type=number][data-sui-size=medium]){height:20px;min-width:20px}:host([data-sui-type=number][data-sui-size=large]){height:24px;min-width:24px;padding:0 6px}:host([data-sui-type=number][data-sui-size=xlarge]){height:28px;min-width:28px;padding:0 8px}:host([data-sui-size=large][data-sui-type=basic]){padding:2px 10px}:host([data-sui-size=xlarge][data-sui-type=basic]){padding:2px 12px}:host([data-sui-size=large][data-sui-type=left-icon]){padding:2px 10px 2px 6px;gap:4px}:host([data-sui-size=xlarge][data-sui-type=left-icon]){padding:2px 12px 2px 8px;gap:4px}:host([data-sui-size=large][data-sui-type=right-icon]){padding:2px 6px 2px 10px;gap:4px}:host([data-sui-size=xlarge][data-sui-type=right-icon]){padding:2px 8px 2px 12px;gap:4px}:host([data-sui-size=large][data-sui-type=with-dot]){padding:4px 10px 4px 4px;gap:0}:host([data-sui-size=xlarge][data-sui-type=with-dot]){padding:6px 12px 6px 6px;gap:0}:host([data-sui-color=gray][data-sui-variant=filled]){background:var(--sui-state-faded-base);border-color:var(--sui-state-faded-base);color:var(--sui-static-white)}:host([data-sui-color=gray][data-sui-variant=light]){background:var(--sui-state-faded-light);border-color:transparent;color:var(--sui-state-faded-dark)}:host([data-sui-color=gray][data-sui-variant=lighter]){background:var(--sui-state-faded-lighter);border-color:transparent;color:var(--sui-state-faded-base)}:host([data-sui-color=gray][data-sui-variant=stroke]){background:transparent;border-color:var(--sui-state-faded-base);color:var(--sui-state-faded-base)}:host([data-sui-color=gray][data-sui-variant=dark]){background:color-mix(in srgb,var(--sui-state-faded-base) 22%,transparent);border-color:color-mix(in srgb,var(--sui-state-faded-base) 45%,transparent);color:var(--sui-static-white)}:host([data-sui-color=blue][data-sui-variant=filled]){background:var(--sui-state-information-base);border-color:var(--sui-state-information-base);color:var(--sui-static-white)}:host([data-sui-color=blue][data-sui-variant=light]){background:var(--sui-state-information-light);border-color:transparent;color:var(--sui-state-information-dark)}:host([data-sui-color=blue][data-sui-variant=lighter]){background:var(--sui-state-information-lighter);border-color:transparent;color:var(--sui-state-information-base)}:host([data-sui-color=blue][data-sui-variant=stroke]){background:transparent;border-color:var(--sui-state-information-base);color:var(--sui-state-information-base)}:host([data-sui-color=blue][data-sui-variant=dark]){background:color-mix(in srgb,var(--sui-state-information-base) 22%,transparent);border-color:color-mix(in srgb,var(--sui-state-information-base) 45%,transparent);color:var(--sui-static-white)}:host([data-sui-color=orange][data-sui-variant=filled]){background:var(--sui-state-warning-base);border-color:var(--sui-state-warning-base);color:var(--sui-static-white)}:host([data-sui-color=orange][data-sui-variant=light]){background:var(--sui-state-warning-light);border-color:transparent;color:var(--sui-state-warning-dark)}:host([data-sui-color=orange][data-sui-variant=lighter]){background:var(--sui-state-warning-lighter);border-color:transparent;color:var(--sui-state-warning-base)}:host([data-sui-color=orange][data-sui-variant=stroke]){background:transparent;border-color:var(--sui-state-warning-base);color:var(--sui-state-warning-base)}:host([data-sui-color=orange][data-sui-variant=dark]){background:color-mix(in srgb,var(--sui-state-warning-base) 22%,transparent);border-color:color-mix(in srgb,var(--sui-state-warning-base) 45%,transparent);color:var(--sui-static-white)}:host([data-sui-color=red][data-sui-variant=filled]){background:var(--sui-state-error-base);border-color:var(--sui-state-error-base);color:var(--sui-static-white)}:host([data-sui-color=red][data-sui-variant=light]){background:var(--sui-state-error-light);border-color:transparent;color:var(--sui-state-error-dark)}:host([data-sui-color=red][data-sui-variant=lighter]){background:var(--sui-state-error-lighter);border-color:transparent;color:var(--sui-state-error-base)}:host([data-sui-color=red][data-sui-variant=stroke]){background:transparent;border-color:var(--sui-state-error-base);color:var(--sui-state-error-base)}:host([data-sui-color=red][data-sui-variant=dark]){background:color-mix(in srgb,var(--sui-state-error-base) 22%,transparent);border-color:color-mix(in srgb,var(--sui-state-error-base) 45%,transparent);color:var(--sui-static-white)}:host([data-sui-color=green][data-sui-variant=filled]){background:var(--sui-state-success-base);border-color:var(--sui-state-success-base);color:var(--sui-static-white)}:host([data-sui-color=green][data-sui-variant=light]){background:var(--sui-state-success-light);border-color:transparent;color:var(--sui-state-success-dark)}:host([data-sui-color=green][data-sui-variant=lighter]){background:var(--sui-state-success-lighter);border-color:transparent;color:var(--sui-state-success-base)}:host([data-sui-color=green][data-sui-variant=stroke]){background:transparent;border-color:var(--sui-state-success-base);color:var(--sui-state-success-base)}:host([data-sui-color=green][data-sui-variant=dark]){background:color-mix(in srgb,var(--sui-state-success-base) 22%,transparent);border-color:color-mix(in srgb,var(--sui-state-success-base) 45%,transparent);color:var(--sui-static-white)}:host([data-sui-color=yellow][data-sui-variant=filled]){background:var(--sui-state-away-base);border-color:var(--sui-state-away-base);color:var(--sui-static-white)}:host([data-sui-color=yellow][data-sui-variant=light]){background:var(--sui-state-away-light);border-color:transparent;color:var(--sui-state-away-dark)}:host([data-sui-color=yellow][data-sui-variant=lighter]){background:var(--sui-state-away-lighter);border-color:transparent;color:var(--sui-state-away-base)}:host([data-sui-color=yellow][data-sui-variant=stroke]){background:transparent;border-color:var(--sui-state-away-base);color:var(--sui-state-away-base)}:host([data-sui-color=yellow][data-sui-variant=dark]){background:color-mix(in srgb,var(--sui-state-away-base) 22%,transparent);border-color:color-mix(in srgb,var(--sui-state-away-base) 45%,transparent);color:var(--sui-static-white)}:host([data-sui-color=purple][data-sui-variant=filled]){background:var(--sui-state-feature-base);border-color:var(--sui-state-feature-base);color:var(--sui-static-white)}:host([data-sui-color=purple][data-sui-variant=light]){background:var(--sui-state-feature-light);border-color:transparent;color:var(--sui-state-feature-dark)}:host([data-sui-color=purple][data-sui-variant=lighter]){background:var(--sui-state-feature-lighter);border-color:transparent;color:var(--sui-state-feature-base)}:host([data-sui-color=purple][data-sui-variant=stroke]){background:transparent;border-color:var(--sui-state-feature-base);color:var(--sui-state-feature-base)}:host([data-sui-color=purple][data-sui-variant=dark]){background:color-mix(in srgb,var(--sui-state-feature-base) 22%,transparent);border-color:color-mix(in srgb,var(--sui-state-feature-base) 45%,transparent);color:var(--sui-static-white)}:host([data-sui-color=sky][data-sui-variant=filled]){background:var(--sui-state-verified-base);border-color:var(--sui-state-verified-base);color:var(--sui-static-white)}:host([data-sui-color=sky][data-sui-variant=light]){background:var(--sui-state-verified-light);border-color:transparent;color:var(--sui-state-verified-dark)}:host([data-sui-color=sky][data-sui-variant=lighter]){background:var(--sui-state-verified-lighter);border-color:transparent;color:var(--sui-state-verified-base)}:host([data-sui-color=sky][data-sui-variant=stroke]){background:transparent;border-color:var(--sui-state-verified-base);color:var(--sui-state-verified-base)}:host([data-sui-color=sky][data-sui-variant=dark]){background:color-mix(in srgb,var(--sui-state-verified-base) 22%,transparent);border-color:color-mix(in srgb,var(--sui-state-verified-base) 45%,transparent);color:var(--sui-static-white)}:host([data-sui-color=pink][data-sui-variant=filled]){background:var(--sui-state-highlighted-base);border-color:var(--sui-state-highlighted-base);color:var(--sui-static-white)}:host([data-sui-color=pink][data-sui-variant=light]){background:var(--sui-state-highlighted-light);border-color:transparent;color:var(--sui-state-highlighted-dark)}:host([data-sui-color=pink][data-sui-variant=lighter]){background:var(--sui-state-highlighted-lighter);border-color:transparent;color:var(--sui-state-highlighted-base)}:host([data-sui-color=pink][data-sui-variant=stroke]){background:transparent;border-color:var(--sui-state-highlighted-base);color:var(--sui-state-highlighted-base)}:host([data-sui-color=pink][data-sui-variant=dark]){background:color-mix(in srgb,var(--sui-state-highlighted-base) 22%,transparent);border-color:color-mix(in srgb,var(--sui-state-highlighted-base) 45%,transparent);color:var(--sui-static-white)}:host([data-sui-color=teal][data-sui-variant=filled]){background:var(--sui-state-stable-base);border-color:var(--sui-state-stable-base);color:var(--sui-static-white)}:host([data-sui-color=teal][data-sui-variant=light]){background:var(--sui-state-stable-light);border-color:transparent;color:var(--sui-state-stable-dark)}:host([data-sui-color=teal][data-sui-variant=lighter]){background:var(--sui-state-stable-lighter);border-color:transparent;color:var(--sui-state-stable-base)}:host([data-sui-color=teal][data-sui-variant=stroke]){background:transparent;border-color:var(--sui-state-stable-base);color:var(--sui-state-stable-base)}:host([data-sui-color=teal][data-sui-variant=dark]){background:color-mix(in srgb,var(--sui-state-stable-base) 22%,transparent);border-color:color-mix(in srgb,var(--sui-state-stable-base) 45%,transparent);color:var(--sui-static-white)}:host([data-sui-variant=dark]:not([data-sui-color])),:host([data-sui-variant=dark][data-sui-color=gray]){background:#ffffff1a;border-color:#ffffff29;color:var(--sui-static-white)}:host([data-sui-disabled]){pointer-events:none;color:var(--sui-text-disabled-300)}:host([data-sui-disabled][data-sui-variant=filled]){background:var(--sui-state-faded-light);border-color:var(--sui-state-faded-light);color:var(--sui-text-disabled-300)}:host([data-sui-disabled][data-sui-variant=light]),:host([data-sui-disabled][data-sui-variant=lighter]){background:var(--sui-state-faded-lighter);border-color:transparent;color:var(--sui-text-disabled-300)}:host([data-sui-disabled][data-sui-variant=stroke]){background:transparent;border-color:var(--sui-stroke-soft-200);color:var(--sui-text-disabled-300)}:host([data-sui-disabled][data-sui-variant=dark]){background:#ffffff0f;border-color:#ffffff1a;color:#ffffff73}\n"] }]
         }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
 /**
@@ -1001,6 +1001,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  *     Container          flex / inline-flex, gap=4px, items=center
  *     Medium size        text 14/20/-0.6%, icons 20×20
  *     Small  size        text 12/16/0,     icons 16×16
+ *     Large  size        text 16/24/-1.1%, icons 20×20 — extensión SUI
+ *                        (03-10-2026, pedido del dueño): en mobile el link se
+ *                        lee y se toca con el dedo. Ícono 20 como el sui-button
+ *                        large (texto 16 + ícono 20), no 24: con 24 el chevron
+ *                        pesa más que el texto.
  *     Font features      'ss11' 1, 'calt' 0, 'liga' 0
  *     Underline          (hover / focus / underline=on): línea continua SOLO
  *                        bajo el texto (los iconos chevron NO van subrayados —
@@ -1063,7 +1068,15 @@ class SuiLinkButton {
     type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
     ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     clicked = output();
-    iconSize = computed(() => (this.size() === 'medium' ? 20 : 16), ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
+    /** Px de los íconos por tamaño: large 20 · medium 20 · small 16. */
+    iconSize = computed(() => {
+        switch (this.size()) {
+            case 'small': return 16;
+            case 'large':
+            case 'medium':
+            default: return 20;
+        }
+    }, ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
     isAnchor = computed(() => !!this.href() && !this.disabled(), ...(ngDevMode ? [{ debugName: "isAnchor" }] : /* istanbul ignore next */ []));
     onClick(event) {
         if (this.disabled()) {
@@ -1074,7 +1087,7 @@ 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    [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 });
+    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-size=large]) .sui-link-button__el{font-size:var(--sui-type-label-md-size, 16px);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em);font-weight:var(--sui-type-label-md-weight, 500)}:host([data-sui-size=large]) .sui-link-button__icon{width:20px;height:20px}: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,
@@ -1083,7 +1096,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         '[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    [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"] }]
+                    }, 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-size=large]) .sui-link-button__el{font-size:var(--sui-type-label-md-size, 16px);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em);font-weight:var(--sui-type-label-md-weight, 500)}:host([data-sui-size=large]) .sui-link-button__icon{width:20px;height:20px}: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
@@ -1108,6 +1121,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  *   Sizes:
  *     Large:  24×24 container, icon 20×20
  *     Medium: 20×20 container, icon 16×16
+ *     2xlarge 32 / 3xlarge 36 / 4xlarge 40 (extensión SUI, 03-10-2026): para
+ *     tocar con el dedo en mobile; íconos 20 / 20 / 24 como sui-button.
  *
  *   Style=Stroke  (node 189:3645):
  *     bg:     var(--sui-bg-white-0)
@@ -1167,6 +1182,9 @@ class SuiCompactButton {
     clicked = output();
     iconSize = computed(() => {
         switch (this.size()) {
+            case '4xlarge': return 24;
+            case '3xlarge': return 20;
+            case '2xlarge': return 20;
             case 'xlarge': return 24;
             case 'large': return 20;
             default: return 16; // medium
@@ -1182,7 +1200,7 @@ 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    [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 });
+    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=\"4xlarge\"]) .sui-compact-button__el{width:40px;height:40px}:host([data-sui-size=\"3xlarge\"]) .sui-compact-button__el{width:36px;height:36px}:host([data-sui-size=\"2xlarge\"]) .sui-compact-button__el{width:32px;height:32px}: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,
@@ -1191,7 +1209,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         '[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    [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"] }]
+                    }, 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=\"4xlarge\"]) .sui-compact-button__el{width:40px;height:40px}:host([data-sui-size=\"3xlarge\"]) .sui-compact-button__el{width:36px;height:36px}:host([data-sui-size=\"2xlarge\"]) .sui-compact-button__el{width:32px;height:32px}: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"] }] } });
 
 /**
@@ -1982,6 +2000,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  *       · both-icons  (226:5344): p4 (cuadrado), gap 4
  *       · only-icon   (226:5348): p4 → 24×24, sin gap
  *
+ *   Extensión SUI (03-10-2026, pedido del dueño) — tamaños para mobile, fuera
+ *   del Figma, con la escala de `sui-button`:
+ *     large (48) — Label/Medium (16/24), icon 20px: px20 py11 · icono px18 · p11 → 48², gap 8 (py −1 del borde)
+ *     medium (40) — Label/Small (14/20), icon 20px: px18 py9 · icono px16 · p9 → 40², gap 8 (py −1 del borde)
+ *
  *   States × visual:
  *     Default:  bg-white-0 + border stroke-soft-200 + text-sub-600
  *     Hover:    bg-weak-50 + border stroke-soft-200 + text-sub-600
@@ -2042,9 +2065,13 @@ class SuiButtonGroupItem {
             return 'right';
         return 'none';
     }, ...(ngDevMode ? [{ debugName: "iconLayout" }] : /* istanbul ignore next */ []));
-    /** Tamaño del icono en px según size del item (small/xsmall=20, 2xsmall=16) */
+    /** Tamaño del icono en px según size del item (large/medium/small/xsmall=20, 2xsmall=16).
+     *  En large y medium el ícono se queda en 20, igual que `sui-button`: el ícono
+     *  que acompaña texto no escala. */
     iconSize = computed(() => {
         switch (this.size()) {
+            case 'large': return 20;
+            case 'medium': return 20;
             case 'small': return 20;
             case 'xsmall': return 20;
             case '2xsmall': return 16;
@@ -2057,7 +2084,7 @@ class SuiButtonGroupItem {
         this.clicked.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiButtonGroupItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiButtonGroupItem, isStandalone: true, selector: "sui-button-group-item", inputs: { label: { classPropertyName: "label", publicName: "label", 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 }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", 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 } }, outputs: { clicked: "clicked" }, host: { properties: { "attr.data-sui-size": "size()", "attr.data-sui-state": "state()", "attr.data-sui-only-icon": "onlyIcon() ? \"\" : null", "attr.data-sui-icons": "iconLayout()" } }, ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"sui-button-group-item__inner\"\n  [disabled]=\"disabled() || null\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  [attr.aria-pressed]=\"active() ? 'true' : 'false'\"\n  (click)=\"onClick()\"\n  (touchstart)=\"$event.currentTarget\"\n  (touchend)=\"$any($event.currentTarget).blur()\"\n>\n  @if (leftIcon()) {\n    <sui-icon class=\"sui-button-group-item__icon\" [name]=\"leftIcon()\" [size]=\"iconSize()\" />\n  }\n  @if (label()) {\n    <span class=\"sui-button-group-item__label\">{{ label() }}</span>\n  }\n  @if (rightIcon()) {\n    <sui-icon class=\"sui-button-group-item__icon\" [name]=\"rightIcon()\" [size]=\"iconSize()\" />\n  }\n</button>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-button-group-item__inner{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin:0;appearance:none;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-sizing:border-box;color:var(--sui-text-sub-600);text-align:center;cursor:pointer;overflow:clip;white-space:nowrap;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);transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-button-group-item__inner:active{transform:none}:host([data-sui-first][data-sui-size=small]) .sui-button-group-item__inner,:host([data-sui-first][data-sui-size=xsmall]) .sui-button-group-item__inner{border-top-left-radius:var(--sui-radius-8);border-bottom-left-radius:var(--sui-radius-8)}:host([data-sui-last][data-sui-size=small]) .sui-button-group-item__inner,:host([data-sui-last][data-sui-size=xsmall]) .sui-button-group-item__inner{border-top-right-radius:var(--sui-radius-8);border-bottom-right-radius:var(--sui-radius-8)}:host([data-sui-first][data-sui-size=\"2xsmall\"]) .sui-button-group-item__inner{border-top-left-radius:var(--sui-radius-6);border-bottom-left-radius:var(--sui-radius-6)}:host([data-sui-last][data-sui-size=\"2xsmall\"]) .sui-button-group-item__inner{border-top-right-radius:var(--sui-radius-6);border-bottom-right-radius:var(--sui-radius-6)}:host([data-sui-size=small]) .sui-button-group-item__inner{gap:8px;padding:8px 16px;min-height:36px}:host([data-sui-size=small][data-sui-icons=left]) .sui-button-group-item__inner,:host([data-sui-size=small][data-sui-icons=right]) .sui-button-group-item__inner{padding:8px 14px}:host([data-sui-size=small][data-sui-icons=both]) .sui-button-group-item__inner{padding:8px}:host([data-sui-size=small][data-sui-icons=only]) .sui-button-group-item__inner{padding:8px;width:36px;height:36px}:host([data-sui-size=xsmall]) .sui-button-group-item__inner{gap:6px;padding:6px 14px;min-height:32px}:host([data-sui-size=xsmall][data-sui-icons=left]) .sui-button-group-item__inner,:host([data-sui-size=xsmall][data-sui-icons=right]) .sui-button-group-item__inner{padding:6px 12px}:host([data-sui-size=xsmall][data-sui-icons=both]) .sui-button-group-item__inner{padding:6px}:host([data-sui-size=xsmall][data-sui-icons=only]) .sui-button-group-item__inner{padding:6px;width:32px;height:32px}:host([data-sui-size=\"2xsmall\"]) .sui-button-group-item__inner{gap:4px;padding:4px 12px;min-height:24px;font-size:var(--sui-type-label-xs-size);font-weight:var(--sui-type-label-xs-weight);line-height:var(--sui-type-label-xs-line);letter-spacing:var(--sui-type-label-xs-spacing)}:host([data-sui-size=\"2xsmall\"][data-sui-icons=left]) .sui-button-group-item__inner,:host([data-sui-size=\"2xsmall\"][data-sui-icons=right]) .sui-button-group-item__inner{padding:4px 10px}:host([data-sui-size=\"2xsmall\"][data-sui-icons=both]) .sui-button-group-item__inner{padding:4px}:host([data-sui-size=\"2xsmall\"][data-sui-icons=only]) .sui-button-group-item__inner{padding:4px;width:24px;height:24px}:host([data-sui-state=default]) .sui-button-group-item__inner:hover{background:var(--sui-bg-weak-50)}:host([data-sui-state=active]) .sui-button-group-item__inner{background:var(--sui-bg-weak-50);color:var(--sui-text-strong-950)}:host([data-sui-state=disabled]) .sui-button-group-item__inner{background:var(--sui-bg-weak-50);border-color:transparent;color:var(--sui-text-disabled-300);pointer-events:none}.sui-button-group-item__inner:focus-visible{outline:2px solid var(--sui-stroke-strong-950, var(--sui-text-strong-950));outline-offset:-2px;z-index:1;position:relative}.sui-button-group-item__icon{flex-shrink:0}.sui-button-group-item__label{display:inline-flex;align-items:center}\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: SuiButtonGroupItem, isStandalone: true, selector: "sui-button-group-item", inputs: { label: { classPropertyName: "label", publicName: "label", 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 }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", 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 } }, outputs: { clicked: "clicked" }, host: { properties: { "attr.data-sui-size": "size()", "attr.data-sui-state": "state()", "attr.data-sui-only-icon": "onlyIcon() ? \"\" : null", "attr.data-sui-icons": "iconLayout()" } }, ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"sui-button-group-item__inner\"\n  [disabled]=\"disabled() || null\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  [attr.aria-pressed]=\"active() ? 'true' : 'false'\"\n  (click)=\"onClick()\"\n  (touchstart)=\"$event.currentTarget\"\n  (touchend)=\"$any($event.currentTarget).blur()\"\n>\n  @if (leftIcon()) {\n    <sui-icon class=\"sui-button-group-item__icon\" [name]=\"leftIcon()\" [size]=\"iconSize()\" />\n  }\n  @if (label()) {\n    <span class=\"sui-button-group-item__label\">{{ label() }}</span>\n  }\n  @if (rightIcon()) {\n    <sui-icon class=\"sui-button-group-item__icon\" [name]=\"rightIcon()\" [size]=\"iconSize()\" />\n  }\n</button>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-button-group-item__inner{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin:0;appearance:none;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-sizing:border-box;color:var(--sui-text-sub-600);text-align:center;cursor:pointer;overflow:clip;white-space:nowrap;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);transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-button-group-item__inner:active{transform:none}:host([data-sui-first][data-sui-size=small]) .sui-button-group-item__inner,:host([data-sui-first][data-sui-size=xsmall]) .sui-button-group-item__inner{border-top-left-radius:var(--sui-radius-8);border-bottom-left-radius:var(--sui-radius-8)}:host([data-sui-last][data-sui-size=small]) .sui-button-group-item__inner,:host([data-sui-last][data-sui-size=xsmall]) .sui-button-group-item__inner{border-top-right-radius:var(--sui-radius-8);border-bottom-right-radius:var(--sui-radius-8)}:host([data-sui-first][data-sui-size=\"2xsmall\"]) .sui-button-group-item__inner{border-top-left-radius:var(--sui-radius-6);border-bottom-left-radius:var(--sui-radius-6)}:host([data-sui-last][data-sui-size=\"2xsmall\"]) .sui-button-group-item__inner{border-top-right-radius:var(--sui-radius-6);border-bottom-right-radius:var(--sui-radius-6)}:host([data-sui-size=small]) .sui-button-group-item__inner{gap:8px;padding:7px 16px;min-height:36px}:host([data-sui-size=small][data-sui-icons=left]) .sui-button-group-item__inner,:host([data-sui-size=small][data-sui-icons=right]) .sui-button-group-item__inner{padding:7px 14px}:host([data-sui-size=small][data-sui-icons=both]) .sui-button-group-item__inner{padding:7px 8px}:host([data-sui-size=small][data-sui-icons=only]) .sui-button-group-item__inner{padding:8px;width:36px;height:36px}:host([data-sui-size=xsmall]) .sui-button-group-item__inner{gap:6px;padding:5px 14px;min-height:32px}:host([data-sui-size=xsmall][data-sui-icons=left]) .sui-button-group-item__inner,:host([data-sui-size=xsmall][data-sui-icons=right]) .sui-button-group-item__inner{padding:5px 12px}:host([data-sui-size=xsmall][data-sui-icons=both]) .sui-button-group-item__inner{padding:5px 6px}:host([data-sui-size=xsmall][data-sui-icons=only]) .sui-button-group-item__inner{padding:6px;width:32px;height:32px}:host([data-sui-size=\"2xsmall\"]) .sui-button-group-item__inner{gap:4px;padding:3px 12px;min-height:24px;font-size:var(--sui-type-label-xs-size);font-weight:var(--sui-type-label-xs-weight);line-height:var(--sui-type-label-xs-line);letter-spacing:var(--sui-type-label-xs-spacing)}:host([data-sui-size=\"2xsmall\"][data-sui-icons=left]) .sui-button-group-item__inner,:host([data-sui-size=\"2xsmall\"][data-sui-icons=right]) .sui-button-group-item__inner{padding:3px 10px}:host([data-sui-size=\"2xsmall\"][data-sui-icons=both]) .sui-button-group-item__inner{padding:3px 4px}:host([data-sui-size=\"2xsmall\"][data-sui-icons=only]) .sui-button-group-item__inner{padding:4px;width:24px;height:24px}:host([data-sui-size=medium]) .sui-button-group-item__inner{gap:8px;padding:9px 18px;min-height:40px}:host([data-sui-size=medium][data-sui-icons=left]) .sui-button-group-item__inner,:host([data-sui-size=medium][data-sui-icons=right]) .sui-button-group-item__inner{padding:9px 16px}:host([data-sui-size=medium][data-sui-icons=both]) .sui-button-group-item__inner{padding:9px}:host([data-sui-size=medium][data-sui-icons=only]) .sui-button-group-item__inner{padding:9px;width:40px;height:40px}:host([data-sui-size=large]) .sui-button-group-item__inner{gap:8px;padding:11px 20px;min-height:48px;font-size:var(--sui-type-label-md-size);font-weight:var(--sui-type-label-md-weight);line-height:var(--sui-type-label-md-line);letter-spacing:var(--sui-type-label-md-spacing)}:host([data-sui-size=large][data-sui-icons=left]) .sui-button-group-item__inner,:host([data-sui-size=large][data-sui-icons=right]) .sui-button-group-item__inner{padding:11px 18px}:host([data-sui-size=large][data-sui-icons=both]) .sui-button-group-item__inner{padding:11px}:host([data-sui-size=large][data-sui-icons=only]) .sui-button-group-item__inner{padding:11px;width:48px;height:48px}:host([data-sui-first][data-sui-size=medium]) .sui-button-group-item__inner{border-top-left-radius:var(--sui-radius-10);border-bottom-left-radius:var(--sui-radius-10)}:host([data-sui-last][data-sui-size=medium]) .sui-button-group-item__inner{border-top-right-radius:var(--sui-radius-10);border-bottom-right-radius:var(--sui-radius-10)}:host([data-sui-first][data-sui-size=large]) .sui-button-group-item__inner{border-top-left-radius:var(--sui-radius-12);border-bottom-left-radius:var(--sui-radius-12)}:host([data-sui-last][data-sui-size=large]) .sui-button-group-item__inner{border-top-right-radius:var(--sui-radius-12);border-bottom-right-radius:var(--sui-radius-12)}:host([data-sui-state=default]) .sui-button-group-item__inner:hover{background:var(--sui-bg-weak-50)}:host([data-sui-state=active]) .sui-button-group-item__inner{background:var(--sui-bg-weak-50);color:var(--sui-text-strong-950)}:host([data-sui-state=disabled]) .sui-button-group-item__inner{background:var(--sui-bg-weak-50);border-color:transparent;color:var(--sui-text-disabled-300);pointer-events:none}.sui-button-group-item__inner:focus-visible{outline:2px solid var(--sui-stroke-strong-950, var(--sui-text-strong-950));outline-offset:-2px;z-index:1;position:relative}.sui-button-group-item__icon{flex-shrink:0}.sui-button-group-item__label{display:inline-flex;align-items:center}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiButtonGroupItem, decorators: [{
             type: Component,
@@ -2069,7 +2096,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                            Gobierna el padding-x adaptativo por size (Figma reduce px cuando hay
                            icono de un lado, colapsa a padding cuadrado cuando hay dos / only). */
                         '[attr.data-sui-icons]': 'iconLayout()',
-                    }, template: "<button\n  type=\"button\"\n  class=\"sui-button-group-item__inner\"\n  [disabled]=\"disabled() || null\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  [attr.aria-pressed]=\"active() ? 'true' : 'false'\"\n  (click)=\"onClick()\"\n  (touchstart)=\"$event.currentTarget\"\n  (touchend)=\"$any($event.currentTarget).blur()\"\n>\n  @if (leftIcon()) {\n    <sui-icon class=\"sui-button-group-item__icon\" [name]=\"leftIcon()\" [size]=\"iconSize()\" />\n  }\n  @if (label()) {\n    <span class=\"sui-button-group-item__label\">{{ label() }}</span>\n  }\n  @if (rightIcon()) {\n    <sui-icon class=\"sui-button-group-item__icon\" [name]=\"rightIcon()\" [size]=\"iconSize()\" />\n  }\n</button>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-button-group-item__inner{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin:0;appearance:none;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-sizing:border-box;color:var(--sui-text-sub-600);text-align:center;cursor:pointer;overflow:clip;white-space:nowrap;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);transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-button-group-item__inner:active{transform:none}:host([data-sui-first][data-sui-size=small]) .sui-button-group-item__inner,:host([data-sui-first][data-sui-size=xsmall]) .sui-button-group-item__inner{border-top-left-radius:var(--sui-radius-8);border-bottom-left-radius:var(--sui-radius-8)}:host([data-sui-last][data-sui-size=small]) .sui-button-group-item__inner,:host([data-sui-last][data-sui-size=xsmall]) .sui-button-group-item__inner{border-top-right-radius:var(--sui-radius-8);border-bottom-right-radius:var(--sui-radius-8)}:host([data-sui-first][data-sui-size=\"2xsmall\"]) .sui-button-group-item__inner{border-top-left-radius:var(--sui-radius-6);border-bottom-left-radius:var(--sui-radius-6)}:host([data-sui-last][data-sui-size=\"2xsmall\"]) .sui-button-group-item__inner{border-top-right-radius:var(--sui-radius-6);border-bottom-right-radius:var(--sui-radius-6)}:host([data-sui-size=small]) .sui-button-group-item__inner{gap:8px;padding:8px 16px;min-height:36px}:host([data-sui-size=small][data-sui-icons=left]) .sui-button-group-item__inner,:host([data-sui-size=small][data-sui-icons=right]) .sui-button-group-item__inner{padding:8px 14px}:host([data-sui-size=small][data-sui-icons=both]) .sui-button-group-item__inner{padding:8px}:host([data-sui-size=small][data-sui-icons=only]) .sui-button-group-item__inner{padding:8px;width:36px;height:36px}:host([data-sui-size=xsmall]) .sui-button-group-item__inner{gap:6px;padding:6px 14px;min-height:32px}:host([data-sui-size=xsmall][data-sui-icons=left]) .sui-button-group-item__inner,:host([data-sui-size=xsmall][data-sui-icons=right]) .sui-button-group-item__inner{padding:6px 12px}:host([data-sui-size=xsmall][data-sui-icons=both]) .sui-button-group-item__inner{padding:6px}:host([data-sui-size=xsmall][data-sui-icons=only]) .sui-button-group-item__inner{padding:6px;width:32px;height:32px}:host([data-sui-size=\"2xsmall\"]) .sui-button-group-item__inner{gap:4px;padding:4px 12px;min-height:24px;font-size:var(--sui-type-label-xs-size);font-weight:var(--sui-type-label-xs-weight);line-height:var(--sui-type-label-xs-line);letter-spacing:var(--sui-type-label-xs-spacing)}:host([data-sui-size=\"2xsmall\"][data-sui-icons=left]) .sui-button-group-item__inner,:host([data-sui-size=\"2xsmall\"][data-sui-icons=right]) .sui-button-group-item__inner{padding:4px 10px}:host([data-sui-size=\"2xsmall\"][data-sui-icons=both]) .sui-button-group-item__inner{padding:4px}:host([data-sui-size=\"2xsmall\"][data-sui-icons=only]) .sui-button-group-item__inner{padding:4px;width:24px;height:24px}:host([data-sui-state=default]) .sui-button-group-item__inner:hover{background:var(--sui-bg-weak-50)}:host([data-sui-state=active]) .sui-button-group-item__inner{background:var(--sui-bg-weak-50);color:var(--sui-text-strong-950)}:host([data-sui-state=disabled]) .sui-button-group-item__inner{background:var(--sui-bg-weak-50);border-color:transparent;color:var(--sui-text-disabled-300);pointer-events:none}.sui-button-group-item__inner:focus-visible{outline:2px solid var(--sui-stroke-strong-950, var(--sui-text-strong-950));outline-offset:-2px;z-index:1;position:relative}.sui-button-group-item__icon{flex-shrink:0}.sui-button-group-item__label{display:inline-flex;align-items:center}\n"] }]
+                    }, template: "<button\n  type=\"button\"\n  class=\"sui-button-group-item__inner\"\n  [disabled]=\"disabled() || null\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  [attr.aria-pressed]=\"active() ? 'true' : 'false'\"\n  (click)=\"onClick()\"\n  (touchstart)=\"$event.currentTarget\"\n  (touchend)=\"$any($event.currentTarget).blur()\"\n>\n  @if (leftIcon()) {\n    <sui-icon class=\"sui-button-group-item__icon\" [name]=\"leftIcon()\" [size]=\"iconSize()\" />\n  }\n  @if (label()) {\n    <span class=\"sui-button-group-item__label\">{{ label() }}</span>\n  }\n  @if (rightIcon()) {\n    <sui-icon class=\"sui-button-group-item__icon\" [name]=\"rightIcon()\" [size]=\"iconSize()\" />\n  }\n</button>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-button-group-item__inner{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin:0;appearance:none;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-sizing:border-box;color:var(--sui-text-sub-600);text-align:center;cursor:pointer;overflow:clip;white-space:nowrap;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);transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-button-group-item__inner:active{transform:none}:host([data-sui-first][data-sui-size=small]) .sui-button-group-item__inner,:host([data-sui-first][data-sui-size=xsmall]) .sui-button-group-item__inner{border-top-left-radius:var(--sui-radius-8);border-bottom-left-radius:var(--sui-radius-8)}:host([data-sui-last][data-sui-size=small]) .sui-button-group-item__inner,:host([data-sui-last][data-sui-size=xsmall]) .sui-button-group-item__inner{border-top-right-radius:var(--sui-radius-8);border-bottom-right-radius:var(--sui-radius-8)}:host([data-sui-first][data-sui-size=\"2xsmall\"]) .sui-button-group-item__inner{border-top-left-radius:var(--sui-radius-6);border-bottom-left-radius:var(--sui-radius-6)}:host([data-sui-last][data-sui-size=\"2xsmall\"]) .sui-button-group-item__inner{border-top-right-radius:var(--sui-radius-6);border-bottom-right-radius:var(--sui-radius-6)}:host([data-sui-size=small]) .sui-button-group-item__inner{gap:8px;padding:7px 16px;min-height:36px}:host([data-sui-size=small][data-sui-icons=left]) .sui-button-group-item__inner,:host([data-sui-size=small][data-sui-icons=right]) .sui-button-group-item__inner{padding:7px 14px}:host([data-sui-size=small][data-sui-icons=both]) .sui-button-group-item__inner{padding:7px 8px}:host([data-sui-size=small][data-sui-icons=only]) .sui-button-group-item__inner{padding:8px;width:36px;height:36px}:host([data-sui-size=xsmall]) .sui-button-group-item__inner{gap:6px;padding:5px 14px;min-height:32px}:host([data-sui-size=xsmall][data-sui-icons=left]) .sui-button-group-item__inner,:host([data-sui-size=xsmall][data-sui-icons=right]) .sui-button-group-item__inner{padding:5px 12px}:host([data-sui-size=xsmall][data-sui-icons=both]) .sui-button-group-item__inner{padding:5px 6px}:host([data-sui-size=xsmall][data-sui-icons=only]) .sui-button-group-item__inner{padding:6px;width:32px;height:32px}:host([data-sui-size=\"2xsmall\"]) .sui-button-group-item__inner{gap:4px;padding:3px 12px;min-height:24px;font-size:var(--sui-type-label-xs-size);font-weight:var(--sui-type-label-xs-weight);line-height:var(--sui-type-label-xs-line);letter-spacing:var(--sui-type-label-xs-spacing)}:host([data-sui-size=\"2xsmall\"][data-sui-icons=left]) .sui-button-group-item__inner,:host([data-sui-size=\"2xsmall\"][data-sui-icons=right]) .sui-button-group-item__inner{padding:3px 10px}:host([data-sui-size=\"2xsmall\"][data-sui-icons=both]) .sui-button-group-item__inner{padding:3px 4px}:host([data-sui-size=\"2xsmall\"][data-sui-icons=only]) .sui-button-group-item__inner{padding:4px;width:24px;height:24px}:host([data-sui-size=medium]) .sui-button-group-item__inner{gap:8px;padding:9px 18px;min-height:40px}:host([data-sui-size=medium][data-sui-icons=left]) .sui-button-group-item__inner,:host([data-sui-size=medium][data-sui-icons=right]) .sui-button-group-item__inner{padding:9px 16px}:host([data-sui-size=medium][data-sui-icons=both]) .sui-button-group-item__inner{padding:9px}:host([data-sui-size=medium][data-sui-icons=only]) .sui-button-group-item__inner{padding:9px;width:40px;height:40px}:host([data-sui-size=large]) .sui-button-group-item__inner{gap:8px;padding:11px 20px;min-height:48px;font-size:var(--sui-type-label-md-size);font-weight:var(--sui-type-label-md-weight);line-height:var(--sui-type-label-md-line);letter-spacing:var(--sui-type-label-md-spacing)}:host([data-sui-size=large][data-sui-icons=left]) .sui-button-group-item__inner,:host([data-sui-size=large][data-sui-icons=right]) .sui-button-group-item__inner{padding:11px 18px}:host([data-sui-size=large][data-sui-icons=both]) .sui-button-group-item__inner{padding:11px}:host([data-sui-size=large][data-sui-icons=only]) .sui-button-group-item__inner{padding:11px;width:48px;height:48px}:host([data-sui-first][data-sui-size=medium]) .sui-button-group-item__inner{border-top-left-radius:var(--sui-radius-10);border-bottom-left-radius:var(--sui-radius-10)}:host([data-sui-last][data-sui-size=medium]) .sui-button-group-item__inner{border-top-right-radius:var(--sui-radius-10);border-bottom-right-radius:var(--sui-radius-10)}:host([data-sui-first][data-sui-size=large]) .sui-button-group-item__inner{border-top-left-radius:var(--sui-radius-12);border-bottom-left-radius:var(--sui-radius-12)}:host([data-sui-last][data-sui-size=large]) .sui-button-group-item__inner{border-top-right-radius:var(--sui-radius-12);border-bottom-right-radius:var(--sui-radius-12)}:host([data-sui-state=default]) .sui-button-group-item__inner:hover{background:var(--sui-bg-weak-50)}:host([data-sui-state=active]) .sui-button-group-item__inner{background:var(--sui-bg-weak-50);color:var(--sui-text-strong-950)}:host([data-sui-state=disabled]) .sui-button-group-item__inner{background:var(--sui-bg-weak-50);border-color:transparent;color:var(--sui-text-disabled-300);pointer-events:none}.sui-button-group-item__inner:focus-visible{outline:2px solid var(--sui-stroke-strong-950, var(--sui-text-strong-950));outline-offset:-2px;z-index:1;position:relative}.sui-button-group-item__icon{flex-shrink:0}.sui-button-group-item__label{display:inline-flex;align-items:center}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], leftIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "leftIcon", required: false }] }], rightIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightIcon", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
 
 /**
@@ -2089,6 +2116,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  *   - Group container: bg-white-0, border 1px stroke-soft-200, rounded:
  *       · small / xsmall → radius-8 (8px)
  *       · 2xsmall        → radius-6 (6px)
+ *   - Extensión SUI (03-10-2026): medium (40, radius-10) y large (48, radius-12)
+ *     para tocar con el dedo en mobile; fuera del Figma, escala de sui-button.
  *   - overflow: clip (corta los bordes externos de items en las esquinas)
  *
  * Behavior:
@@ -2157,7 +2186,7 @@ class SuiButtonGroup {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiButtonGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiButtonGroup, isStandalone: true, selector: "sui-button-group", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", change: "change" }, host: { attributes: { "role": "group" }, properties: { "attr.data-sui-size": "size()", "attr.data-sui-multi": "multi() ? \"\" : null", "attr.aria-label": "ariaLabel() || null" } }, ngImport: i0, template: "@for (entry of items(); track entry.value; let first = $first; let last = $last) {\n  <sui-button-group-item\n    class=\"sui-button-group__item\"\n    [attr.data-sui-first]=\"first ? '' : null\"\n    [attr.data-sui-last]=\"last ? '' : null\"\n    [size]=\"size()\"\n    [label]=\"entry.label ?? ''\"\n    [leftIcon]=\"entry.leftIcon ?? ''\"\n    [rightIcon]=\"entry.rightIcon ?? ''\"\n    [active]=\"isActive(entry)\"\n    [disabled]=\"entry.disabled ?? false\"\n    [ariaLabel]=\"entry.ariaLabel ?? ''\"\n    (clicked)=\"onItemClicked(entry)\"\n  />\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:flex-start;overflow:clip;box-sizing:border-box;isolation:isolate}:host([data-sui-size=small]),:host([data-sui-size=xsmall]){border-radius:var(--sui-radius-8)}:host([data-sui-size=\"2xsmall\"]){flex-wrap:wrap;align-content:flex-start;gap:0;border-radius:var(--sui-radius-6)}.sui-button-group__item{margin-left:-1px}.sui-button-group__item[data-sui-first]{margin-left:0}\n"], dependencies: [{ kind: "component", type: SuiButtonGroupItem, selector: "sui-button-group-item", inputs: ["label", "leftIcon", "rightIcon", "size", "active", "disabled", "ariaLabel"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiButtonGroup, isStandalone: true, selector: "sui-button-group", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", change: "change" }, host: { attributes: { "role": "group" }, properties: { "attr.data-sui-size": "size()", "attr.data-sui-multi": "multi() ? \"\" : null", "attr.aria-label": "ariaLabel() || null" } }, ngImport: i0, template: "@for (entry of items(); track entry.value; let first = $first; let last = $last) {\n  <sui-button-group-item\n    class=\"sui-button-group__item\"\n    [attr.data-sui-first]=\"first ? '' : null\"\n    [attr.data-sui-last]=\"last ? '' : null\"\n    [size]=\"size()\"\n    [label]=\"entry.label ?? ''\"\n    [leftIcon]=\"entry.leftIcon ?? ''\"\n    [rightIcon]=\"entry.rightIcon ?? ''\"\n    [active]=\"isActive(entry)\"\n    [disabled]=\"entry.disabled ?? false\"\n    [ariaLabel]=\"entry.ariaLabel ?? ''\"\n    (clicked)=\"onItemClicked(entry)\"\n  />\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:flex-start;overflow:clip;box-sizing:border-box;isolation:isolate}:host([data-sui-size=small]),:host([data-sui-size=xsmall]){border-radius:var(--sui-radius-8)}:host([data-sui-size=medium]){border-radius:var(--sui-radius-10)}:host([data-sui-size=large]){border-radius:var(--sui-radius-12)}:host([data-sui-size=\"2xsmall\"]){flex-wrap:wrap;align-content:flex-start;gap:0;border-radius:var(--sui-radius-6)}.sui-button-group__item{margin-left:-1px}.sui-button-group__item[data-sui-first]{margin-left:0}\n"], dependencies: [{ kind: "component", type: SuiButtonGroupItem, selector: "sui-button-group-item", inputs: ["label", "leftIcon", "rightIcon", "size", "active", "disabled", "ariaLabel"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiButtonGroup, decorators: [{
             type: Component,
@@ -2166,7 +2195,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         '[attr.data-sui-size]': 'size()',
                         '[attr.data-sui-multi]': 'multi() ? "" : null',
                         '[attr.aria-label]': 'ariaLabel() || null',
-                    }, template: "@for (entry of items(); track entry.value; let first = $first; let last = $last) {\n  <sui-button-group-item\n    class=\"sui-button-group__item\"\n    [attr.data-sui-first]=\"first ? '' : null\"\n    [attr.data-sui-last]=\"last ? '' : null\"\n    [size]=\"size()\"\n    [label]=\"entry.label ?? ''\"\n    [leftIcon]=\"entry.leftIcon ?? ''\"\n    [rightIcon]=\"entry.rightIcon ?? ''\"\n    [active]=\"isActive(entry)\"\n    [disabled]=\"entry.disabled ?? false\"\n    [ariaLabel]=\"entry.ariaLabel ?? ''\"\n    (clicked)=\"onItemClicked(entry)\"\n  />\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:flex-start;overflow:clip;box-sizing:border-box;isolation:isolate}:host([data-sui-size=small]),:host([data-sui-size=xsmall]){border-radius:var(--sui-radius-8)}:host([data-sui-size=\"2xsmall\"]){flex-wrap:wrap;align-content:flex-start;gap:0;border-radius:var(--sui-radius-6)}.sui-button-group__item{margin-left:-1px}.sui-button-group__item[data-sui-first]{margin-left:0}\n"] }]
+                    }, template: "@for (entry of items(); track entry.value; let first = $first; let last = $last) {\n  <sui-button-group-item\n    class=\"sui-button-group__item\"\n    [attr.data-sui-first]=\"first ? '' : null\"\n    [attr.data-sui-last]=\"last ? '' : null\"\n    [size]=\"size()\"\n    [label]=\"entry.label ?? ''\"\n    [leftIcon]=\"entry.leftIcon ?? ''\"\n    [rightIcon]=\"entry.rightIcon ?? ''\"\n    [active]=\"isActive(entry)\"\n    [disabled]=\"entry.disabled ?? false\"\n    [ariaLabel]=\"entry.ariaLabel ?? ''\"\n    (clicked)=\"onItemClicked(entry)\"\n  />\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:flex-start;overflow:clip;box-sizing:border-box;isolation:isolate}:host([data-sui-size=small]),:host([data-sui-size=xsmall]){border-radius:var(--sui-radius-8)}:host([data-sui-size=medium]){border-radius:var(--sui-radius-10)}:host([data-sui-size=large]){border-radius:var(--sui-radius-12)}:host([data-sui-size=\"2xsmall\"]){flex-wrap:wrap;align-content:flex-start;gap:0;border-radius:var(--sui-radius-6)}.sui-button-group__item{margin-left:-1px}.sui-button-group__item[data-sui-first]{margin-left:0}\n"] }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], multi: [{ type: i0.Input, args: [{ isSignal: true, alias: "multi", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], change: [{ type: i0.Output, args: ["change"] }] } });
 
 /**
@@ -3138,6 +3167,24 @@ class SuiCheckboxLabel {
             ? { ...cfg, rel: cfg.rel ?? (cfg.target === '_blank' ? 'noopener noreferrer' : undefined) }
             : null;
     }, ...(ngDevMode ? [{ debugName: "linkCfg" }] : /* istanbul ignore next */ []));
+    /**
+     * Tamaño. `medium` (default, Figma): control 20, label 14/20.
+     * Extensión SUI (03-10-2026) para tocar en mobile:
+     *   - `large`:  control 24, label 16/24, sublabel y descripción 14/20, badge medium.
+     *   - `xlarge`: control 28, label 16/24, sublabel y descripción 14/20, badge large.
+     * El badge toma este default solo si su config no trae `size`.
+     */
+    size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Badge por default según el tamaño (si la config no fija uno). */
+    badgeSize = computed(() => {
+        switch (this.size()) {
+            case 'large': return 'medium';
+            case 'xlarge': return 'large';
+            default: return 'small';
+        }
+    }, ...(ngDevMode ? [{ debugName: "badgeSize" }] : /* istanbul ignore next */ []));
+    /** El link-button tiene dos tamaños: small (12/16) en Figma, medium (14/20) en mobile. */
+    linkSize = computed(() => this.size() === 'medium' ? 'small' : 'medium', ...(ngDevMode ? [{ debugName: "linkSize" }] : /* istanbul ignore next */ []));
     /** Si true, invierte orden: [content] [checkbox] (label a la izquierda). */
     flip = input(false, ...(ngDevMode ? [{ debugName: "flip" }] : /* istanbul ignore next */ []));
     /** Deshabilita el checkbox + wrapper. */
@@ -3200,13 +3247,13 @@ class SuiCheckboxLabel {
         this._disabledByForm.set(isDisabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiCheckboxLabel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiCheckboxLabel, isStandalone: true, selector: "sui-checkbox-label", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, sublabel: { classPropertyName: "sublabel", publicName: "sublabel", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, flip: { classPropertyName: "flip", publicName: "flip", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange", linkClick: "linkClick" }, host: { listeners: { "click": "onLabelClick($event)" }, properties: { "attr.data-sui-flip": "flip() ? \"\" : null", "attr.data-sui-with-description": "description() ? \"\" : null", "attr.data-sui-disabled": "isDisabled() ? \"\" : null" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiCheckboxLabel, isStandalone: true, selector: "sui-checkbox-label", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, sublabel: { classPropertyName: "sublabel", publicName: "sublabel", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, flip: { classPropertyName: "flip", publicName: "flip", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange", linkClick: "linkClick" }, host: { listeners: { "click": "onLabelClick($event)" }, properties: { "attr.data-sui-size": "size()", "attr.data-sui-flip": "flip() ? \"\" : null", "attr.data-sui-with-description": "description() ? \"\" : null", "attr.data-sui-disabled": "isDisabled() ? \"\" : null" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SuiCheckboxLabel),
                 multi: true,
             },
-        ], ngImport: i0, template: "<!-- Layout flex: el orden visual depende de [flip]. CSS rota via `order` para\n     mantener un solo DOM order accesible (checkbox primero). -->\n<sui-checkbox\n  class=\"sui-checkbox-label__checkbox\"\n  [checked]=\"active()\"\n  [indeterminate]=\"indeterminate()\"\n  [disabled]=\"isDisabled()\"\n  (checkedChange)=\"onCheckboxChange($event)\"\n/>\n\n<div class=\"sui-checkbox-label__content\">\n  <!-- Bloque de texto: Title + Description van pegados (gap-4 en Figma). -->\n  <div class=\"sui-checkbox-label__text\">\n    <div class=\"sui-checkbox-label__title\">\n      <span class=\"sui-checkbox-label__label\">{{ label() }}</span>\n      @if (sublabel(); as sl) {\n        <span class=\"sui-checkbox-label__sublabel\">{{ sl }}</span>\n      }\n      @if (badgeCfg(); as bcfg) {\n        <sui-badge\n          class=\"sui-checkbox-label__badge\"\n          [color]=\"bcfg.color ?? 'orange'\"\n          [variant]=\"bcfg.variant ?? 'light'\"\n          [size]=\"bcfg.size ?? 'small'\"\n        >{{ bcfg.label }}</sui-badge>\n      }\n    </div>\n\n    @if (description(); as desc) {\n      <p class=\"sui-checkbox-label__description\">{{ desc }}</p>\n    }\n  </div>\n\n  @if (description() && linkCfg(); as link) {\n    <sui-link-button\n      variant=\"primary\"\n      size=\"small\"\n      [disabled]=\"isDisabled()\"\n      [href]=\"link.href ?? null\"\n      [target]=\"link.target ?? null\"\n      [rel]=\"link.rel ?? null\"\n      (clicked)=\"onLinkClick($event)\"\n    >{{ link.label }}</sui-link-button>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:flex-start;gap:8px;cursor:pointer;font-family:var(--sui-font-sans, \"Inter\", system-ui, sans-serif);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;-webkit-tap-highlight-color:transparent}:host([data-sui-flip]) .sui-checkbox-label__checkbox{order:2}:host([data-sui-flip]) .sui-checkbox-label__content{order:1}:host([data-sui-disabled]){cursor:not-allowed}:host([data-sui-disabled]) .sui-checkbox-label__content{opacity:.5}.sui-checkbox-label__checkbox{flex-shrink:0}.sui-checkbox-label__content{display:flex;flex:1 0 0;min-width:0;flex-direction:column;align-items:flex-start;gap:4px}:host([data-sui-with-description]) .sui-checkbox-label__content{gap:10px}.sui-checkbox-label__text{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%}.sui-checkbox-label__title{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.sui-checkbox-label__label{font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.084px;color:var(--sui-text-strong-950)}:host([data-sui-with-description]) .sui-checkbox-label__label{font-weight:500}.sui-checkbox-label__sublabel{font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-sub-600)}.sui-checkbox-label__badge{flex-shrink:0}.sui-checkbox-label__description{margin:0;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-sub-600);word-break:break-word}\n"], dependencies: [{ kind: "component", type: SuiCheckbox, selector: "sui-checkbox", inputs: ["size", "checked", "indeterminate", "disabled"], outputs: ["checkedChange"] }, { kind: "component", type: SuiBadge, selector: "sui-badge", inputs: ["color", "variant", "size", "type", "disabled"] }, { kind: "component", type: SuiLinkButton, selector: "sui-link-button", inputs: ["variant", "size", "underline", "disabled", "leftIcon", "rightIcon", "href", "target", "rel", "type", "ariaLabel"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "<!-- Layout flex: el orden visual depende de [flip]. CSS rota via `order` para\n     mantener un solo DOM order accesible (checkbox primero). -->\n<sui-checkbox\n  class=\"sui-checkbox-label__checkbox\"\n  [size]=\"size()\"\n  [checked]=\"active()\"\n  [indeterminate]=\"indeterminate()\"\n  [disabled]=\"isDisabled()\"\n  (checkedChange)=\"onCheckboxChange($event)\"\n/>\n\n<div class=\"sui-checkbox-label__content\">\n  <!-- Bloque de texto: Title + Description van pegados (gap-4 en Figma). -->\n  <div class=\"sui-checkbox-label__text\">\n    <div class=\"sui-checkbox-label__title\">\n      <span class=\"sui-checkbox-label__label\">{{ label() }}</span>\n      @if (sublabel(); as sl) {\n        <span class=\"sui-checkbox-label__sublabel\">{{ sl }}</span>\n      }\n      @if (badgeCfg(); as bcfg) {\n        <sui-badge\n          class=\"sui-checkbox-label__badge\"\n          [color]=\"bcfg.color ?? 'orange'\"\n          [variant]=\"bcfg.variant ?? 'light'\"\n          [size]=\"bcfg.size ?? badgeSize()\"\n        >{{ bcfg.label }}</sui-badge>\n      }\n    </div>\n\n    @if (description(); as desc) {\n      <p class=\"sui-checkbox-label__description\">{{ desc }}</p>\n    }\n  </div>\n\n  @if (description() && linkCfg(); as link) {\n    <sui-link-button\n      variant=\"primary\"\n      [size]=\"linkSize()\"\n      [disabled]=\"isDisabled()\"\n      [href]=\"link.href ?? null\"\n      [target]=\"link.target ?? null\"\n      [rel]=\"link.rel ?? null\"\n      (clicked)=\"onLinkClick($event)\"\n    >{{ link.label }}</sui-link-button>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:flex-start;gap:8px;cursor:pointer;font-family:var(--sui-font-sans, \"Inter\", system-ui, sans-serif);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;-webkit-tap-highlight-color:transparent}:host([data-sui-flip]) .sui-checkbox-label__checkbox{order:2}:host([data-sui-flip]) .sui-checkbox-label__content{order:1}:host([data-sui-disabled]){cursor:not-allowed}:host([data-sui-disabled]) .sui-checkbox-label__content{opacity:.5}.sui-checkbox-label__checkbox{flex-shrink:0}.sui-checkbox-label__content{display:flex;flex:1 0 0;min-width:0;flex-direction:column;align-items:flex-start;gap:4px}:host([data-sui-with-description]) .sui-checkbox-label__content{gap:10px}.sui-checkbox-label__text{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%}.sui-checkbox-label__title{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.sui-checkbox-label__label{font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.084px;color:var(--sui-text-strong-950)}:host([data-sui-with-description]) .sui-checkbox-label__label{font-weight:500}.sui-checkbox-label__sublabel{font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-sub-600)}.sui-checkbox-label__badge{flex-shrink:0}.sui-checkbox-label__description{margin:0;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-sub-600);word-break:break-word}:host([data-sui-size=large]){gap:10px}:host([data-sui-size=xlarge]){gap:12px}:host([data-sui-size=large]) .sui-checkbox-label__label,:host([data-sui-size=xlarge]) .sui-checkbox-label__label{font-size:var(--sui-type-paragraph-md-size);line-height:var(--sui-type-paragraph-md-line);letter-spacing:var(--sui-type-paragraph-md-spacing)}:host([data-sui-size=large]) .sui-checkbox-label__sublabel,:host([data-sui-size=large]) .sui-checkbox-label__description,:host([data-sui-size=xlarge]) .sui-checkbox-label__sublabel,:host([data-sui-size=xlarge]) .sui-checkbox-label__description{font-size:var(--sui-type-paragraph-sm-size);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing)}:host([data-sui-size=xlarge]) .sui-checkbox-label__content{padding-top:2px}\n"], dependencies: [{ kind: "component", type: SuiCheckbox, selector: "sui-checkbox", inputs: ["size", "checked", "indeterminate", "disabled"], outputs: ["checkedChange"] }, { kind: "component", type: SuiBadge, selector: "sui-badge", inputs: ["color", "variant", "size", "type", "disabled"] }, { kind: "component", type: SuiLinkButton, selector: "sui-link-button", inputs: ["variant", "size", "underline", "disabled", "leftIcon", "rightIcon", "href", "target", "rel", "type", "ariaLabel"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiCheckboxLabel, decorators: [{
             type: Component,
@@ -3217,12 +3264,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                             multi: true,
                         },
                     ], host: {
+                        '[attr.data-sui-size]': 'size()',
                         '[attr.data-sui-flip]': 'flip() ? "" : null',
                         '[attr.data-sui-with-description]': 'description() ? "" : null',
                         '[attr.data-sui-disabled]': 'isDisabled() ? "" : null',
                         '(click)': 'onLabelClick($event)',
-                    }, template: "<!-- Layout flex: el orden visual depende de [flip]. CSS rota via `order` para\n     mantener un solo DOM order accesible (checkbox primero). -->\n<sui-checkbox\n  class=\"sui-checkbox-label__checkbox\"\n  [checked]=\"active()\"\n  [indeterminate]=\"indeterminate()\"\n  [disabled]=\"isDisabled()\"\n  (checkedChange)=\"onCheckboxChange($event)\"\n/>\n\n<div class=\"sui-checkbox-label__content\">\n  <!-- Bloque de texto: Title + Description van pegados (gap-4 en Figma). -->\n  <div class=\"sui-checkbox-label__text\">\n    <div class=\"sui-checkbox-label__title\">\n      <span class=\"sui-checkbox-label__label\">{{ label() }}</span>\n      @if (sublabel(); as sl) {\n        <span class=\"sui-checkbox-label__sublabel\">{{ sl }}</span>\n      }\n      @if (badgeCfg(); as bcfg) {\n        <sui-badge\n          class=\"sui-checkbox-label__badge\"\n          [color]=\"bcfg.color ?? 'orange'\"\n          [variant]=\"bcfg.variant ?? 'light'\"\n          [size]=\"bcfg.size ?? 'small'\"\n        >{{ bcfg.label }}</sui-badge>\n      }\n    </div>\n\n    @if (description(); as desc) {\n      <p class=\"sui-checkbox-label__description\">{{ desc }}</p>\n    }\n  </div>\n\n  @if (description() && linkCfg(); as link) {\n    <sui-link-button\n      variant=\"primary\"\n      size=\"small\"\n      [disabled]=\"isDisabled()\"\n      [href]=\"link.href ?? null\"\n      [target]=\"link.target ?? null\"\n      [rel]=\"link.rel ?? null\"\n      (clicked)=\"onLinkClick($event)\"\n    >{{ link.label }}</sui-link-button>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:flex-start;gap:8px;cursor:pointer;font-family:var(--sui-font-sans, \"Inter\", system-ui, sans-serif);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;-webkit-tap-highlight-color:transparent}:host([data-sui-flip]) .sui-checkbox-label__checkbox{order:2}:host([data-sui-flip]) .sui-checkbox-label__content{order:1}:host([data-sui-disabled]){cursor:not-allowed}:host([data-sui-disabled]) .sui-checkbox-label__content{opacity:.5}.sui-checkbox-label__checkbox{flex-shrink:0}.sui-checkbox-label__content{display:flex;flex:1 0 0;min-width:0;flex-direction:column;align-items:flex-start;gap:4px}:host([data-sui-with-description]) .sui-checkbox-label__content{gap:10px}.sui-checkbox-label__text{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%}.sui-checkbox-label__title{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.sui-checkbox-label__label{font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.084px;color:var(--sui-text-strong-950)}:host([data-sui-with-description]) .sui-checkbox-label__label{font-weight:500}.sui-checkbox-label__sublabel{font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-sub-600)}.sui-checkbox-label__badge{flex-shrink:0}.sui-checkbox-label__description{margin:0;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-sub-600);word-break:break-word}\n"] }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], sublabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sublabel", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: false }] }], flip: [{ type: i0.Input, args: [{ isSignal: true, alias: "flip", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }, { type: i0.Output, args: ["activeChange"] }], linkClick: [{ type: i0.Output, args: ["linkClick"] }] } });
+                    }, template: "<!-- Layout flex: el orden visual depende de [flip]. CSS rota via `order` para\n     mantener un solo DOM order accesible (checkbox primero). -->\n<sui-checkbox\n  class=\"sui-checkbox-label__checkbox\"\n  [size]=\"size()\"\n  [checked]=\"active()\"\n  [indeterminate]=\"indeterminate()\"\n  [disabled]=\"isDisabled()\"\n  (checkedChange)=\"onCheckboxChange($event)\"\n/>\n\n<div class=\"sui-checkbox-label__content\">\n  <!-- Bloque de texto: Title + Description van pegados (gap-4 en Figma). -->\n  <div class=\"sui-checkbox-label__text\">\n    <div class=\"sui-checkbox-label__title\">\n      <span class=\"sui-checkbox-label__label\">{{ label() }}</span>\n      @if (sublabel(); as sl) {\n        <span class=\"sui-checkbox-label__sublabel\">{{ sl }}</span>\n      }\n      @if (badgeCfg(); as bcfg) {\n        <sui-badge\n          class=\"sui-checkbox-label__badge\"\n          [color]=\"bcfg.color ?? 'orange'\"\n          [variant]=\"bcfg.variant ?? 'light'\"\n          [size]=\"bcfg.size ?? badgeSize()\"\n        >{{ bcfg.label }}</sui-badge>\n      }\n    </div>\n\n    @if (description(); as desc) {\n      <p class=\"sui-checkbox-label__description\">{{ desc }}</p>\n    }\n  </div>\n\n  @if (description() && linkCfg(); as link) {\n    <sui-link-button\n      variant=\"primary\"\n      [size]=\"linkSize()\"\n      [disabled]=\"isDisabled()\"\n      [href]=\"link.href ?? null\"\n      [target]=\"link.target ?? null\"\n      [rel]=\"link.rel ?? null\"\n      (clicked)=\"onLinkClick($event)\"\n    >{{ link.label }}</sui-link-button>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:flex-start;gap:8px;cursor:pointer;font-family:var(--sui-font-sans, \"Inter\", system-ui, sans-serif);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;-webkit-tap-highlight-color:transparent}:host([data-sui-flip]) .sui-checkbox-label__checkbox{order:2}:host([data-sui-flip]) .sui-checkbox-label__content{order:1}:host([data-sui-disabled]){cursor:not-allowed}:host([data-sui-disabled]) .sui-checkbox-label__content{opacity:.5}.sui-checkbox-label__checkbox{flex-shrink:0}.sui-checkbox-label__content{display:flex;flex:1 0 0;min-width:0;flex-direction:column;align-items:flex-start;gap:4px}:host([data-sui-with-description]) .sui-checkbox-label__content{gap:10px}.sui-checkbox-label__text{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%}.sui-checkbox-label__title{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.sui-checkbox-label__label{font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.084px;color:var(--sui-text-strong-950)}:host([data-sui-with-description]) .sui-checkbox-label__label{font-weight:500}.sui-checkbox-label__sublabel{font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-sub-600)}.sui-checkbox-label__badge{flex-shrink:0}.sui-checkbox-label__description{margin:0;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-sub-600);word-break:break-word}:host([data-sui-size=large]){gap:10px}:host([data-sui-size=xlarge]){gap:12px}:host([data-sui-size=large]) .sui-checkbox-label__label,:host([data-sui-size=xlarge]) .sui-checkbox-label__label{font-size:var(--sui-type-paragraph-md-size);line-height:var(--sui-type-paragraph-md-line);letter-spacing:var(--sui-type-paragraph-md-spacing)}:host([data-sui-size=large]) .sui-checkbox-label__sublabel,:host([data-sui-size=large]) .sui-checkbox-label__description,:host([data-sui-size=xlarge]) .sui-checkbox-label__sublabel,:host([data-sui-size=xlarge]) .sui-checkbox-label__description{font-size:var(--sui-type-paragraph-sm-size);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing)}:host([data-sui-size=xlarge]) .sui-checkbox-label__content{padding-top:2px}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], sublabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sublabel", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], flip: [{ type: i0.Input, args: [{ isSignal: true, alias: "flip", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }, { type: i0.Output, args: ["activeChange"] }], linkClick: [{ type: i0.Output, args: ["linkClick"] }] } });
 
 /**
  * sui-circular-progress-bar — SUI Design System 2.0 · Circular Progress Bar
@@ -3476,6 +3524,11 @@ class SuiColorDot {
      *   - `disabled` → dot gris pálido, sin pointer events.
      */
     state = input('default', ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    /**
+     * Tamaño. `medium` (default, Figma 24): dot 16 / hover 14 / selected 12 + anillo 18.
+     * `large` (32, extensión SUI para mobile): dot 22 / hover 18 / selected 16 + anillo 24.
+     */
+    size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     /** aria-label override. */
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     clicked = output();
@@ -3496,17 +3549,18 @@ class SuiColorDot {
         this.clicked.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiColorDot, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: SuiColorDot, isStandalone: true, selector: "sui-color-dot", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, customHex: { classPropertyName: "customHex", publicName: "customHex", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", 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-color": "color()", "attr.data-sui-state": "state()", "attr.data-sui-custom": "customHex() ? \"\" : null", "style.--c": "customHex() || null" } }, ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"sui-color-dot__inner\"\n  role=\"radio\"\n  [disabled]=\"state() === 'disabled' || null\"\n  [attr.aria-checked]=\"state() === 'selected' ? 'true' : 'false'\"\n  [attr.aria-label]=\"ariaLabel() || defaultAriaLabel()\"\n  (click)=\"onClick()\"\n  (touchstart)=\"$event.currentTarget\"\n  (touchend)=\"$any($event.currentTarget).blur()\"\n></button>\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;width:24px;height:24px;vertical-align:middle;--c: var(--sui-neutral-500)}:host([data-sui-color=gray]){--c: var(--sui-neutral-500)}:host([data-sui-color=blue]){--c: var(--sui-blue-500)}:host([data-sui-color=orange]){--c: var(--sui-orange-500)}:host([data-sui-color=red]){--c: var(--sui-red-500)}:host([data-sui-color=green]){--c: var(--sui-green-500)}:host([data-sui-color=yellow]){--c: var(--sui-yellow-500)}:host([data-sui-color=purple]){--c: var(--sui-purple-500)}:host([data-sui-color=sky]){--c: var(--sui-sky-500)}:host([data-sui-color=pink]){--c: var(--sui-pink-500)}:host([data-sui-color=teal]){--c: var(--sui-teal-500)}:host([data-sui-state=disabled]){--c: var(--sui-bg-soft-200)}.sui-color-dot__inner{position:relative;display:block;width:24px;height:24px;padding:0;margin:0;border:none;background:transparent;cursor:pointer;appearance:none;outline:none;border-radius:50%;transition:transform var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-color-dot__inner:after{content:\"\";position:absolute;inset:4px;border-radius:50%;background:var(--c);transition:inset var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-state=selected]) .sui-color-dot__inner:after{inset:6px}.sui-color-dot__inner:before{content:\"\";position:absolute;inset:3px;border-radius:50%;border:2px solid transparent;transition:border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-state=selected]) .sui-color-dot__inner:before{border-color:var(--c)}.sui-color-dot__inner:active{transform:none}:host([data-sui-state=default]) .sui-color-dot__inner:hover:after,:host([data-sui-state=hover]) .sui-color-dot__inner:after{inset:5px}.sui-color-dot__inner:focus-visible{outline:2px solid var(--c);outline-offset:2px}:host([data-sui-state=disabled]) .sui-color-dot__inner{cursor:not-allowed;pointer-events:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: SuiColorDot, isStandalone: true, selector: "sui-color-dot", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, customHex: { classPropertyName: "customHex", publicName: "customHex", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", 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: { clicked: "clicked" }, host: { properties: { "attr.data-sui-color": "color()", "attr.data-sui-size": "size()", "attr.data-sui-state": "state()", "attr.data-sui-custom": "customHex() ? \"\" : null", "style.--c": "customHex() || null" } }, ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"sui-color-dot__inner\"\n  role=\"radio\"\n  [disabled]=\"state() === 'disabled' || null\"\n  [attr.aria-checked]=\"state() === 'selected' ? 'true' : 'false'\"\n  [attr.aria-label]=\"ariaLabel() || defaultAriaLabel()\"\n  (click)=\"onClick()\"\n  (touchstart)=\"$event.currentTarget\"\n  (touchend)=\"$any($event.currentTarget).blur()\"\n></button>\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;width:24px;height:24px;vertical-align:middle;--c: var(--sui-neutral-500)}:host([data-sui-color=gray]){--c: var(--sui-neutral-500)}:host([data-sui-color=blue]){--c: var(--sui-blue-500)}:host([data-sui-color=orange]){--c: var(--sui-orange-500)}:host([data-sui-color=red]){--c: var(--sui-red-500)}:host([data-sui-color=green]){--c: var(--sui-green-500)}:host([data-sui-color=yellow]){--c: var(--sui-yellow-500)}:host([data-sui-color=purple]){--c: var(--sui-purple-500)}:host([data-sui-color=sky]){--c: var(--sui-sky-500)}:host([data-sui-color=pink]){--c: var(--sui-pink-500)}:host([data-sui-color=teal]){--c: var(--sui-teal-500)}:host([data-sui-state=disabled]){--c: var(--sui-bg-soft-200)}.sui-color-dot__inner{position:relative;display:block;width:24px;height:24px;padding:0;margin:0;border:none;background:transparent;cursor:pointer;appearance:none;outline:none;border-radius:50%;transition:transform var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-color-dot__inner:after{content:\"\";position:absolute;inset:4px;border-radius:50%;background:var(--c);transition:inset var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-state=selected]) .sui-color-dot__inner:after{inset:6px}.sui-color-dot__inner:before{content:\"\";position:absolute;inset:3px;border-radius:50%;border:2px solid transparent;transition:border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-state=selected]) .sui-color-dot__inner:before{border-color:var(--c)}.sui-color-dot__inner:active{transform:none}:host([data-sui-state=default]) .sui-color-dot__inner:hover:after,:host([data-sui-state=hover]) .sui-color-dot__inner:after{inset:5px}.sui-color-dot__inner:focus-visible{outline:2px solid var(--c);outline-offset:2px}:host([data-sui-state=disabled]) .sui-color-dot__inner{cursor:not-allowed;pointer-events:none}:host([data-sui-size=large]){width:32px;height:32px}:host([data-sui-size=large]) .sui-color-dot__inner{width:32px;height:32px}:host([data-sui-size=large]) .sui-color-dot__inner:after{inset:5px}:host([data-sui-size=large][data-sui-state=default]) .sui-color-dot__inner:hover:after,:host([data-sui-size=large][data-sui-state=hover]) .sui-color-dot__inner:after{inset:7px}:host([data-sui-size=large][data-sui-state=selected]) .sui-color-dot__inner:after{inset:8px}:host([data-sui-size=large]) .sui-color-dot__inner:before{inset:4px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiColorDot, decorators: [{
             type: Component,
             args: [{ selector: 'sui-color-dot', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[attr.data-sui-color]': 'color()',
+                        '[attr.data-sui-size]': 'size()',
                         '[attr.data-sui-state]': 'state()',
                         '[attr.data-sui-custom]': 'customHex() ? "" : null',
                         '[style.--c]': 'customHex() || null',
-                    }, template: "<button\n  type=\"button\"\n  class=\"sui-color-dot__inner\"\n  role=\"radio\"\n  [disabled]=\"state() === 'disabled' || null\"\n  [attr.aria-checked]=\"state() === 'selected' ? 'true' : 'false'\"\n  [attr.aria-label]=\"ariaLabel() || defaultAriaLabel()\"\n  (click)=\"onClick()\"\n  (touchstart)=\"$event.currentTarget\"\n  (touchend)=\"$any($event.currentTarget).blur()\"\n></button>\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;width:24px;height:24px;vertical-align:middle;--c: var(--sui-neutral-500)}:host([data-sui-color=gray]){--c: var(--sui-neutral-500)}:host([data-sui-color=blue]){--c: var(--sui-blue-500)}:host([data-sui-color=orange]){--c: var(--sui-orange-500)}:host([data-sui-color=red]){--c: var(--sui-red-500)}:host([data-sui-color=green]){--c: var(--sui-green-500)}:host([data-sui-color=yellow]){--c: var(--sui-yellow-500)}:host([data-sui-color=purple]){--c: var(--sui-purple-500)}:host([data-sui-color=sky]){--c: var(--sui-sky-500)}:host([data-sui-color=pink]){--c: var(--sui-pink-500)}:host([data-sui-color=teal]){--c: var(--sui-teal-500)}:host([data-sui-state=disabled]){--c: var(--sui-bg-soft-200)}.sui-color-dot__inner{position:relative;display:block;width:24px;height:24px;padding:0;margin:0;border:none;background:transparent;cursor:pointer;appearance:none;outline:none;border-radius:50%;transition:transform var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-color-dot__inner:after{content:\"\";position:absolute;inset:4px;border-radius:50%;background:var(--c);transition:inset var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-state=selected]) .sui-color-dot__inner:after{inset:6px}.sui-color-dot__inner:before{content:\"\";position:absolute;inset:3px;border-radius:50%;border:2px solid transparent;transition:border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-state=selected]) .sui-color-dot__inner:before{border-color:var(--c)}.sui-color-dot__inner:active{transform:none}:host([data-sui-state=default]) .sui-color-dot__inner:hover:after,:host([data-sui-state=hover]) .sui-color-dot__inner:after{inset:5px}.sui-color-dot__inner:focus-visible{outline:2px solid var(--c);outline-offset:2px}:host([data-sui-state=disabled]) .sui-color-dot__inner{cursor:not-allowed;pointer-events:none}\n"] }]
-        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], customHex: [{ type: i0.Input, args: [{ isSignal: true, alias: "customHex", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
+                    }, template: "<button\n  type=\"button\"\n  class=\"sui-color-dot__inner\"\n  role=\"radio\"\n  [disabled]=\"state() === 'disabled' || null\"\n  [attr.aria-checked]=\"state() === 'selected' ? 'true' : 'false'\"\n  [attr.aria-label]=\"ariaLabel() || defaultAriaLabel()\"\n  (click)=\"onClick()\"\n  (touchstart)=\"$event.currentTarget\"\n  (touchend)=\"$any($event.currentTarget).blur()\"\n></button>\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;width:24px;height:24px;vertical-align:middle;--c: var(--sui-neutral-500)}:host([data-sui-color=gray]){--c: var(--sui-neutral-500)}:host([data-sui-color=blue]){--c: var(--sui-blue-500)}:host([data-sui-color=orange]){--c: var(--sui-orange-500)}:host([data-sui-color=red]){--c: var(--sui-red-500)}:host([data-sui-color=green]){--c: var(--sui-green-500)}:host([data-sui-color=yellow]){--c: var(--sui-yellow-500)}:host([data-sui-color=purple]){--c: var(--sui-purple-500)}:host([data-sui-color=sky]){--c: var(--sui-sky-500)}:host([data-sui-color=pink]){--c: var(--sui-pink-500)}:host([data-sui-color=teal]){--c: var(--sui-teal-500)}:host([data-sui-state=disabled]){--c: var(--sui-bg-soft-200)}.sui-color-dot__inner{position:relative;display:block;width:24px;height:24px;padding:0;margin:0;border:none;background:transparent;cursor:pointer;appearance:none;outline:none;border-radius:50%;transition:transform var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-color-dot__inner:after{content:\"\";position:absolute;inset:4px;border-radius:50%;background:var(--c);transition:inset var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-state=selected]) .sui-color-dot__inner:after{inset:6px}.sui-color-dot__inner:before{content:\"\";position:absolute;inset:3px;border-radius:50%;border:2px solid transparent;transition:border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-state=selected]) .sui-color-dot__inner:before{border-color:var(--c)}.sui-color-dot__inner:active{transform:none}:host([data-sui-state=default]) .sui-color-dot__inner:hover:after,:host([data-sui-state=hover]) .sui-color-dot__inner:after{inset:5px}.sui-color-dot__inner:focus-visible{outline:2px solid var(--c);outline-offset:2px}:host([data-sui-state=disabled]) .sui-color-dot__inner{cursor:not-allowed;pointer-events:none}:host([data-sui-size=large]){width:32px;height:32px}:host([data-sui-size=large]) .sui-color-dot__inner{width:32px;height:32px}:host([data-sui-size=large]) .sui-color-dot__inner:after{inset:5px}:host([data-sui-size=large][data-sui-state=default]) .sui-color-dot__inner:hover:after,:host([data-sui-size=large][data-sui-state=hover]) .sui-color-dot__inner:after{inset:7px}:host([data-sui-size=large][data-sui-state=selected]) .sui-color-dot__inner:after{inset:8px}:host([data-sui-size=large]) .sui-color-dot__inner:before{inset:4px}\n"] }]
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], customHex: [{ type: i0.Input, args: [{ isSignal: true, alias: "customHex", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
 
 /**
  * Structural directive — marca un `<ng-template>` como panel del
@@ -4365,7 +4419,7 @@ class SuiColorPicker {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiColorPicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiColorPicker, isStandalone: true, selector: "sui-color-picker", inputs: { colors: { classPropertyName: "colors", publicName: "colors", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, recommendedLabel: { classPropertyName: "recommendedLabel", publicName: "recommendedLabel", isSignal: true, isRequired: false, transformFunction: null }, presetsOnly: { classPropertyName: "presetsOnly", publicName: "presetsOnly", isSignal: true, isRequired: false, transformFunction: null }, alpha: { classPropertyName: "alpha", publicName: "alpha", isSignal: true, isRequired: false, transformFunction: null }, eyedropper: { classPropertyName: "eyedropper", publicName: "eyedropper", isSignal: true, isRequired: false, transformFunction: null }, showFormatLabel: { classPropertyName: "showFormatLabel", publicName: "showFormatLabel", 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 } }, outputs: { value: "valueChange", change: "change" }, host: { properties: { "attr.data-sui-open": "open() ? \"\" : null", "attr.data-sui-disabled": "disabled() ? \"\" : null", "attr.data-sui-presets-only": "presetsOnly() ? \"\" : null" } }, viewQueries: [{ propertyName: "_menu", first: true, predicate: SuiDropdownMenu, descendants: true, isSignal: true }, { propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, isSignal: true }, { propertyName: "hueRef", first: true, predicate: ["hueSlider"], descendants: true, isSignal: true }, { propertyName: "opacityRef", first: true, predicate: ["opacitySlider"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n  #trigger\n  type=\"button\"\n  class=\"sui-color-picker__trigger\"\n  [disabled]=\"disabled() || null\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-haspopup]=\"'dialog'\"\n  [attr.aria-expanded]=\"open() ? 'true' : 'false'\"\n  (click)=\"toggle()\"\n  (touchstart)=\"$event.currentTarget\"\n  (touchend)=\"$any($event.currentTarget).blur()\"\n>\n  @if (value()) {\n    @if (currentPreset()) {\n      <sui-color-dot [color]=\"currentPreset()!\" state=\"selected\" class=\"sui-color-picker__preview\" />\n    } @else {\n      <sui-color-dot [customHex]=\"previewColor()\" state=\"selected\" class=\"sui-color-picker__preview\" />\n    }\n  } @else {\n    <span class=\"sui-color-picker__placeholder-dot\" aria-hidden=\"true\"></span>\n  }\n  <span class=\"sui-color-picker__label\">{{ currentLabel() }}</span>\n  <sui-icon name=\"arrow-down-s-line\" [size]=\"16\" class=\"sui-color-picker__chevron\" />\n</button>\n\n<!-- Panel en CDK overlay (via sui-dropdown-menu): escapa cualquier overflow\n     clipping del contenedor (Storybook docs, modales, tablas). El contenido del\n     ng-template mantiene el scoping de estilos del componente. -->\n<sui-dropdown-menu\n  [origin]=\"trigger\"\n  [disabled]=\"disabled()\"\n  [flexibleDimensions]=\"false\"\n  panelClass=\"sui-color-picker__overlay-pane\"\n  (openedChange)=\"onMenuOpenedChange($event)\"\n>\n  <ng-template suiDropdownPanel>\n  <div\n    class=\"sui-color-picker__panel\"\n    role=\"dialog\"\n    [attr.aria-label]=\"ariaLabel()\"\n  >\n    @if (!presetsOnly()) {\n      <!-- Secci\u00F3n \"Colors\" \u2014 Figma 4456:115716 -->\n      <div class=\"sui-color-picker__section sui-color-picker__section--colors\">\n        <!-- HSV Color Spectrum \u2014 Figma 4456:115425 -->\n        <div\n          #canvas\n          class=\"sui-color-picker__canvas\"\n          role=\"application\"\n          aria-label=\"Saturaci\u00F3n y brillo\"\n          [style.--hue-color]=\"hueColor()\"\n          (pointerdown)=\"onCanvasPointerDown($event)\"\n          (pointermove)=\"onCanvasPointerMove($event)\"\n          (pointerup)=\"onCanvasPointerUp($event)\"\n          (pointercancel)=\"onCanvasPointerUp($event)\"\n        >\n          <div\n            class=\"sui-color-picker__canvas-thumb\"\n            [style.left]=\"canvasThumbX()\"\n            [style.top]=\"canvasThumbY()\"\n            [style.background-color]=\"currentHex()\"\n          ></div>\n        </div>\n\n        <!-- Hue slider \u2014 Figma 4415:53669 -->\n        <div\n          #hueSlider\n          class=\"sui-color-picker__slider sui-color-picker__hue\"\n          role=\"slider\"\n          aria-label=\"Matiz\"\n          aria-valuemin=\"0\"\n          aria-valuemax=\"360\"\n          [attr.aria-valuenow]=\"hueRounded()\"\n          (pointerdown)=\"onHuePointerDown($event)\"\n          (pointermove)=\"onHuePointerMove($event)\"\n          (pointerup)=\"onHuePointerUp($event)\"\n          (pointercancel)=\"onHuePointerUp($event)\"\n        >\n          <div class=\"sui-color-picker__slider-track\"></div>\n          <div\n            class=\"sui-color-picker__slider-thumb\"\n            [style.left]=\"hueThumbX()\"\n            [style.background-color]=\"hueColor()\"\n          ></div>\n        </div>\n\n        <!-- Opacity slider \u2014 Figma 4415:53670. Visible por default (alpha on);\n             ocultable con [alpha]=false. -->\n        @if (alpha()) {\n          <div\n            #opacitySlider\n            class=\"sui-color-picker__slider sui-color-picker__opacity\"\n            role=\"slider\"\n            aria-label=\"Opacidad\"\n            aria-valuemin=\"0\"\n            aria-valuemax=\"100\"\n            [attr.aria-valuenow]=\"alphaPercent()\"\n            [style.--opacity-color]=\"opacityColor()\"\n            (pointerdown)=\"onOpacityPointerDown($event)\"\n            (pointermove)=\"onOpacityPointerMove($event)\"\n            (pointerup)=\"onOpacityPointerUp($event)\"\n            (pointercancel)=\"onOpacityPointerUp($event)\"\n          >\n            <div class=\"sui-color-picker__slider-track\"></div>\n            <div\n              class=\"sui-color-picker__slider-thumb\"\n              [style.left]=\"opacityThumbX()\"\n              [style.--thumb-color]=\"opacityThumbColor()\"\n            ></div>\n          </div>\n        }\n\n        <!-- Color Input \u2014 Figma 4456:115720 -->\n        <div class=\"sui-color-picker__color-input\">\n          <!-- Format label \"Hex\" + chevron \u2014 Figma 4456:115721.\n               Hex-only por ahora (ver PENDING VERIFY en el .ts). -->\n          @if (showFormatLabel()) {\n            <div class=\"sui-color-picker__format\" aria-hidden=\"true\">\n              <span class=\"sui-color-picker__format-label\">Hex</span>\n              <sui-icon name=\"arrow-down-s-line\" [size]=\"20\" class=\"sui-color-picker__format-chevron\" />\n            </div>\n          }\n\n          <!-- Input row \u2014 Figma 4456:115724: sip | hex | opacity -->\n          <div class=\"sui-color-picker__input-row\">\n            <!-- Sip (eyedropper) \u2014 Figma 4456:115796. Solo con EyeDropper API. -->\n            @if (showEyedropper()) {\n              <button\n                type=\"button\"\n                class=\"sui-color-picker__sip\"\n                aria-label=\"Cuentagotas\"\n                (click)=\"onEyedropper()\"\n                (touchstart)=\"$event.currentTarget\"\n                (touchend)=\"$any($event.currentTarget).blur()\"\n              >\n                <sui-icon name=\"sip-line\" [size]=\"20\" />\n              </button>\n            }\n\n            <!-- Hex field \u2014 Figma 4456:115725 / 4456:115726: el texto va SIN\n                 prefijo '#' (Figma muestra \"335CFF\" pelado dentro de la celda). -->\n            <div class=\"sui-color-picker__hex-cell\">\n              <input\n                class=\"sui-color-picker__hex-field\"\n                type=\"text\"\n                inputmode=\"text\"\n                autocomplete=\"off\"\n                spellcheck=\"false\"\n                maxlength=\"8\"\n                aria-label=\"Valor hexadecimal\"\n                [value]=\"hexDisplayValue()\"\n                (input)=\"onHexInputChange($event)\"\n                (keydown)=\"onHexKeyDown($event)\"\n                (blur)=\"onHexCommit()\"\n              />\n            </div>\n\n            <!-- Opacity field \"%\" \u2014 Figma 4456:115727. Visible por default\n                 (alpha on); ocultable con [alpha]=false. -->\n            @if (alpha()) {\n              <div class=\"sui-color-picker__opacity-cell\">\n                <input\n                  class=\"sui-color-picker__opacity-field\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  autocomplete=\"off\"\n                  maxlength=\"3\"\n                  aria-label=\"Opacidad\"\n                  [value]=\"alphaPercent()\"\n                  (change)=\"onOpacityFieldCommit($event)\"\n                  (keydown)=\"onHexKeyDown($event)\"\n                />\n                <span class=\"sui-color-picker__opacity-suffix\" aria-hidden=\"true\">%</span>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    }\n\n    <!-- Secci\u00F3n \"Recommended Colors\" \u2014 Figma 4456:115765 -->\n    <div class=\"sui-color-picker__section sui-color-picker__section--recommended\">\n      <p class=\"sui-color-picker__panel-label\">{{ recommendedLabel() }}</p>\n      <div class=\"sui-color-picker__grid\" role=\"radiogroup\">\n        @for (c of colors(); track c) {\n          <sui-color-dot\n            [color]=\"c\"\n            [state]=\"currentPreset() === c ? 'selected' : 'default'\"\n            (clicked)=\"onPresetClick(c)\"\n          />\n        }\n      </div>\n    </div>\n  </div>\n  </ng-template>\n</sui-dropdown-menu>\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:inline-block;font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-color-picker__trigger{display:inline-flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-8);cursor:pointer;appearance:none;font:inherit;color:var(--sui-text-strong-950);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);transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-color-picker__trigger:hover{background:var(--sui-bg-weak-50)}:host([data-sui-open]) .sui-color-picker__trigger{border-color:var(--sui-stroke-strong-950, var(--sui-text-strong-950))}.sui-color-picker__trigger:focus-visible{outline:2px solid var(--sui-stroke-strong-950, var(--sui-text-strong-950));outline-offset:2px}.sui-color-picker__trigger:active{transform:none}:host([data-sui-disabled]) .sui-color-picker__trigger{background:var(--sui-bg-weak-50);color:var(--sui-text-disabled-300);cursor:not-allowed;pointer-events:none}.sui-color-picker__placeholder-dot{display:inline-block;width:24px;height:24px;border-radius:50%;background:var(--sui-bg-soft-200)}.sui-color-picker__label{flex:1 0 auto;white-space:nowrap}.sui-color-picker__chevron{flex-shrink:0;color:var(--sui-icon-sub-600);transition:transform var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-open]) .sui-color-picker__chevron{transform:rotate(180deg)}.sui-color-picker__panel{width:272px;margin-top:6px;box-sizing:border-box;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-16);box-shadow:var(--sui-shadow-medium);overflow:hidden;display:flex;flex-direction:column;animation:sui-color-picker__fade var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}@keyframes sui-color-picker__fade{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.sui-color-picker__section{box-sizing:border-box;display:flex;flex-direction:column;gap:12px;padding:16px;width:100%}.sui-color-picker__section--colors{border-bottom:1px solid var(--sui-stroke-soft-200)}.sui-color-picker__section--recommended{gap:8px}:host([data-sui-presets-only]) .sui-color-picker__section--recommended{border-bottom:none}.sui-color-picker__canvas{position:relative;width:100%;height:232px;border-radius:var(--sui-radius-8);cursor:crosshair;-webkit-user-select:none;user-select:none;touch-action:none;overflow:hidden;background-color:var(--hue-color, #335cff);background-image:linear-gradient(to top,#000,#0000),linear-gradient(to right,#fff,#fff0)}.sui-color-picker__canvas-thumb{position:absolute;width:16px;height:16px;border-radius:50%;border:2px solid var(--sui-static-white, #fff);box-shadow:0 0 0 1px #00000026,0 1px 2px #0003;transform:translate(-50%,-50%);pointer-events:none}.sui-color-picker__slider{position:relative;width:100%;height:16px;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none}.sui-color-picker__slider-track{position:absolute;left:0;right:0;top:4px;height:8px;border-radius:var(--sui-radius-full);overflow:hidden}.sui-color-picker__hue .sui-color-picker__slider-track{background-image:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.sui-color-picker__opacity .sui-color-picker__slider-track{background-color:#fff;background-image:linear-gradient(to right,transparent,var(--opacity-color, #335cff)),conic-gradient(#ebebeb 0 25%,transparent 0 50%,#ebebeb 0 75%,transparent 0);background-size:auto,10.88px 10.88px}.sui-color-picker__slider-thumb{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;border:2px solid var(--sui-static-white, #fff);box-shadow:0 0 0 1px #00000026,0 1px 2px #0003;transform:translate(-50%,-50%);pointer-events:none}.sui-color-picker__opacity .sui-color-picker__slider-thumb{background-image:linear-gradient(var(--thumb-color, #335cff),var(--thumb-color, #335cff)),conic-gradient(#ebebeb 0 25%,#fff 0 50%,#ebebeb 0 75%,#fff 0);background-size:auto,6px 6px}.sui-color-picker__color-input{display:flex;flex-direction:column;gap:4px;width:100%}.sui-color-picker__format{display:flex;align-items:center;gap:2px;appearance:none;border:none;background:transparent;padding:0;cursor:default;font:inherit;color:var(--sui-text-strong-950)}.sui-color-picker__format-label{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);white-space:nowrap}.sui-color-picker__format-chevron{flex-shrink:0;color:var(--sui-icon-sub-600)}.sui-color-picker__input-row{box-sizing:border-box;display:flex;align-items:stretch;width:100%;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-8);overflow:hidden}.sui-color-picker__sip{display:flex;align-items:center;justify-content:center;padding:6px;border:none;border-right:1px solid var(--sui-stroke-soft-200);background:var(--sui-bg-white-0);color:var(--sui-icon-sub-600);cursor:pointer;appearance:none;flex-shrink:0;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-color-picker__sip:hover{background:var(--sui-bg-weak-50)}.sui-color-picker__sip:focus-visible{outline:2px solid var(--sui-stroke-strong-950, var(--sui-text-strong-950));outline-offset:-2px}.sui-color-picker__sip:active{transform:none}.sui-color-picker__hex-cell{box-sizing:border-box;display:flex;align-items:center;flex:1 0 0;min-width:0;padding:6px 10px;border-right:1px solid var(--sui-stroke-soft-200)}.sui-color-picker__hex-cell:last-child{border-right:none}.sui-color-picker__hex-field{flex:1 0 0;min-width:0;width:100%;border:none;outline:none;background:transparent;padding:0;appearance:none;color:var(--sui-text-strong-950);font-family:inherit;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);text-transform:uppercase}.sui-color-picker__hex-field::placeholder{color:var(--sui-text-soft-400);text-transform:none}.sui-color-picker__opacity-cell{box-sizing:border-box;display:flex;align-items:center;flex-shrink:0;padding:6px 10px}.sui-color-picker__opacity-field{width:3.5ch;border:none;outline:none;background:transparent;padding:0;appearance:none;text-align:right;color:var(--sui-text-sub-600);font-family:inherit;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)}.sui-color-picker__opacity-suffix{color:var(--sui-text-sub-600);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)}.sui-color-picker__panel-label{margin:0;font-size:var(--sui-type-paragraph-xs-size);font-weight:var(--sui-type-paragraph-xs-weight);line-height:var(--sui-type-paragraph-xs-line);letter-spacing:var(--sui-type-paragraph-xs-spacing);color:var(--sui-text-sub-600)}.sui-color-picker__grid{display:flex;flex-wrap:wrap;gap:4px;width:100%}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiColorDot, selector: "sui-color-dot", inputs: ["color", "customHex", "state", "ariaLabel"], outputs: ["clicked"] }, { kind: "component", type: SuiDropdownMenu, selector: "sui-dropdown-menu", inputs: ["matchWidth", "flexibleDimensions", "push", "minWidth", "position", "viewportMargin", "panelClass", "disabled", "popupRole", "origin"], outputs: ["openedChange"], exportAs: ["suiDropdownMenu"] }, { kind: "directive", type: SuiDropdownPanel, selector: "ng-template[suiDropdownPanel]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiColorPicker, isStandalone: true, selector: "sui-color-picker", inputs: { colors: { classPropertyName: "colors", publicName: "colors", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, recommendedLabel: { classPropertyName: "recommendedLabel", publicName: "recommendedLabel", isSignal: true, isRequired: false, transformFunction: null }, presetsOnly: { classPropertyName: "presetsOnly", publicName: "presetsOnly", isSignal: true, isRequired: false, transformFunction: null }, alpha: { classPropertyName: "alpha", publicName: "alpha", isSignal: true, isRequired: false, transformFunction: null }, eyedropper: { classPropertyName: "eyedropper", publicName: "eyedropper", isSignal: true, isRequired: false, transformFunction: null }, showFormatLabel: { classPropertyName: "showFormatLabel", publicName: "showFormatLabel", 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 } }, outputs: { value: "valueChange", change: "change" }, host: { properties: { "attr.data-sui-open": "open() ? \"\" : null", "attr.data-sui-disabled": "disabled() ? \"\" : null", "attr.data-sui-presets-only": "presetsOnly() ? \"\" : null" } }, viewQueries: [{ propertyName: "_menu", first: true, predicate: SuiDropdownMenu, descendants: true, isSignal: true }, { propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, isSignal: true }, { propertyName: "hueRef", first: true, predicate: ["hueSlider"], descendants: true, isSignal: true }, { propertyName: "opacityRef", first: true, predicate: ["opacitySlider"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n  #trigger\n  type=\"button\"\n  class=\"sui-color-picker__trigger\"\n  [disabled]=\"disabled() || null\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-haspopup]=\"'dialog'\"\n  [attr.aria-expanded]=\"open() ? 'true' : 'false'\"\n  (click)=\"toggle()\"\n  (touchstart)=\"$event.currentTarget\"\n  (touchend)=\"$any($event.currentTarget).blur()\"\n>\n  @if (value()) {\n    @if (currentPreset()) {\n      <sui-color-dot [color]=\"currentPreset()!\" state=\"selected\" class=\"sui-color-picker__preview\" />\n    } @else {\n      <sui-color-dot [customHex]=\"previewColor()\" state=\"selected\" class=\"sui-color-picker__preview\" />\n    }\n  } @else {\n    <span class=\"sui-color-picker__placeholder-dot\" aria-hidden=\"true\"></span>\n  }\n  <span class=\"sui-color-picker__label\">{{ currentLabel() }}</span>\n  <sui-icon name=\"arrow-down-s-line\" [size]=\"16\" class=\"sui-color-picker__chevron\" />\n</button>\n\n<!-- Panel en CDK overlay (via sui-dropdown-menu): escapa cualquier overflow\n     clipping del contenedor (Storybook docs, modales, tablas). El contenido del\n     ng-template mantiene el scoping de estilos del componente. -->\n<sui-dropdown-menu\n  [origin]=\"trigger\"\n  [disabled]=\"disabled()\"\n  [flexibleDimensions]=\"false\"\n  panelClass=\"sui-color-picker__overlay-pane\"\n  (openedChange)=\"onMenuOpenedChange($event)\"\n>\n  <ng-template suiDropdownPanel>\n  <div\n    class=\"sui-color-picker__panel\"\n    role=\"dialog\"\n    [attr.aria-label]=\"ariaLabel()\"\n  >\n    @if (!presetsOnly()) {\n      <!-- Secci\u00F3n \"Colors\" \u2014 Figma 4456:115716 -->\n      <div class=\"sui-color-picker__section sui-color-picker__section--colors\">\n        <!-- HSV Color Spectrum \u2014 Figma 4456:115425 -->\n        <div\n          #canvas\n          class=\"sui-color-picker__canvas\"\n          role=\"application\"\n          aria-label=\"Saturaci\u00F3n y brillo\"\n          [style.--hue-color]=\"hueColor()\"\n          (pointerdown)=\"onCanvasPointerDown($event)\"\n          (pointermove)=\"onCanvasPointerMove($event)\"\n          (pointerup)=\"onCanvasPointerUp($event)\"\n          (pointercancel)=\"onCanvasPointerUp($event)\"\n        >\n          <div\n            class=\"sui-color-picker__canvas-thumb\"\n            [style.left]=\"canvasThumbX()\"\n            [style.top]=\"canvasThumbY()\"\n            [style.background-color]=\"currentHex()\"\n          ></div>\n        </div>\n\n        <!-- Hue slider \u2014 Figma 4415:53669 -->\n        <div\n          #hueSlider\n          class=\"sui-color-picker__slider sui-color-picker__hue\"\n          role=\"slider\"\n          aria-label=\"Matiz\"\n          aria-valuemin=\"0\"\n          aria-valuemax=\"360\"\n          [attr.aria-valuenow]=\"hueRounded()\"\n          (pointerdown)=\"onHuePointerDown($event)\"\n          (pointermove)=\"onHuePointerMove($event)\"\n          (pointerup)=\"onHuePointerUp($event)\"\n          (pointercancel)=\"onHuePointerUp($event)\"\n        >\n          <div class=\"sui-color-picker__slider-track\"></div>\n          <div\n            class=\"sui-color-picker__slider-thumb\"\n            [style.left]=\"hueThumbX()\"\n            [style.background-color]=\"hueColor()\"\n          ></div>\n        </div>\n\n        <!-- Opacity slider \u2014 Figma 4415:53670. Visible por default (alpha on);\n             ocultable con [alpha]=false. -->\n        @if (alpha()) {\n          <div\n            #opacitySlider\n            class=\"sui-color-picker__slider sui-color-picker__opacity\"\n            role=\"slider\"\n            aria-label=\"Opacidad\"\n            aria-valuemin=\"0\"\n            aria-valuemax=\"100\"\n            [attr.aria-valuenow]=\"alphaPercent()\"\n            [style.--opacity-color]=\"opacityColor()\"\n            (pointerdown)=\"onOpacityPointerDown($event)\"\n            (pointermove)=\"onOpacityPointerMove($event)\"\n            (pointerup)=\"onOpacityPointerUp($event)\"\n            (pointercancel)=\"onOpacityPointerUp($event)\"\n          >\n            <div class=\"sui-color-picker__slider-track\"></div>\n            <div\n              class=\"sui-color-picker__slider-thumb\"\n              [style.left]=\"opacityThumbX()\"\n              [style.--thumb-color]=\"opacityThumbColor()\"\n            ></div>\n          </div>\n        }\n\n        <!-- Color Input \u2014 Figma 4456:115720 -->\n        <div class=\"sui-color-picker__color-input\">\n          <!-- Format label \"Hex\" + chevron \u2014 Figma 4456:115721.\n               Hex-only por ahora (ver PENDING VERIFY en el .ts). -->\n          @if (showFormatLabel()) {\n            <div class=\"sui-color-picker__format\" aria-hidden=\"true\">\n              <span class=\"sui-color-picker__format-label\">Hex</span>\n              <sui-icon name=\"arrow-down-s-line\" [size]=\"20\" class=\"sui-color-picker__format-chevron\" />\n            </div>\n          }\n\n          <!-- Input row \u2014 Figma 4456:115724: sip | hex | opacity -->\n          <div class=\"sui-color-picker__input-row\">\n            <!-- Sip (eyedropper) \u2014 Figma 4456:115796. Solo con EyeDropper API. -->\n            @if (showEyedropper()) {\n              <button\n                type=\"button\"\n                class=\"sui-color-picker__sip\"\n                aria-label=\"Cuentagotas\"\n                (click)=\"onEyedropper()\"\n                (touchstart)=\"$event.currentTarget\"\n                (touchend)=\"$any($event.currentTarget).blur()\"\n              >\n                <sui-icon name=\"sip-line\" [size]=\"20\" />\n              </button>\n            }\n\n            <!-- Hex field \u2014 Figma 4456:115725 / 4456:115726: el texto va SIN\n                 prefijo '#' (Figma muestra \"335CFF\" pelado dentro de la celda). -->\n            <div class=\"sui-color-picker__hex-cell\">\n              <input\n                class=\"sui-color-picker__hex-field\"\n                type=\"text\"\n                inputmode=\"text\"\n                autocomplete=\"off\"\n                spellcheck=\"false\"\n                maxlength=\"8\"\n                aria-label=\"Valor hexadecimal\"\n                [value]=\"hexDisplayValue()\"\n                (input)=\"onHexInputChange($event)\"\n                (keydown)=\"onHexKeyDown($event)\"\n                (blur)=\"onHexCommit()\"\n              />\n            </div>\n\n            <!-- Opacity field \"%\" \u2014 Figma 4456:115727. Visible por default\n                 (alpha on); ocultable con [alpha]=false. -->\n            @if (alpha()) {\n              <div class=\"sui-color-picker__opacity-cell\">\n                <input\n                  class=\"sui-color-picker__opacity-field\"\n                  type=\"text\"\n                  inputmode=\"numeric\"\n                  autocomplete=\"off\"\n                  maxlength=\"3\"\n                  aria-label=\"Opacidad\"\n                  [value]=\"alphaPercent()\"\n                  (change)=\"onOpacityFieldCommit($event)\"\n                  (keydown)=\"onHexKeyDown($event)\"\n                />\n                <span class=\"sui-color-picker__opacity-suffix\" aria-hidden=\"true\">%</span>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    }\n\n    <!-- Secci\u00F3n \"Recommended Colors\" \u2014 Figma 4456:115765 -->\n    <div class=\"sui-color-picker__section sui-color-picker__section--recommended\">\n      <p class=\"sui-color-picker__panel-label\">{{ recommendedLabel() }}</p>\n      <div class=\"sui-color-picker__grid\" role=\"radiogroup\">\n        @for (c of colors(); track c) {\n          <sui-color-dot\n            [color]=\"c\"\n            [state]=\"currentPreset() === c ? 'selected' : 'default'\"\n            (clicked)=\"onPresetClick(c)\"\n          />\n        }\n      </div>\n    </div>\n  </div>\n  </ng-template>\n</sui-dropdown-menu>\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:inline-block;font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-color-picker__trigger{display:inline-flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-8);cursor:pointer;appearance:none;font:inherit;color:var(--sui-text-strong-950);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);transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-color-picker__trigger:hover{background:var(--sui-bg-weak-50)}:host([data-sui-open]) .sui-color-picker__trigger{border-color:var(--sui-stroke-strong-950, var(--sui-text-strong-950))}.sui-color-picker__trigger:focus-visible{outline:2px solid var(--sui-stroke-strong-950, var(--sui-text-strong-950));outline-offset:2px}.sui-color-picker__trigger:active{transform:none}:host([data-sui-disabled]) .sui-color-picker__trigger{background:var(--sui-bg-weak-50);color:var(--sui-text-disabled-300);cursor:not-allowed;pointer-events:none}.sui-color-picker__placeholder-dot{display:inline-block;width:24px;height:24px;border-radius:50%;background:var(--sui-bg-soft-200)}.sui-color-picker__label{flex:1 0 auto;white-space:nowrap}.sui-color-picker__chevron{flex-shrink:0;color:var(--sui-icon-sub-600);transition:transform var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-open]) .sui-color-picker__chevron{transform:rotate(180deg)}.sui-color-picker__panel{width:272px;margin-top:6px;box-sizing:border-box;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-16);box-shadow:var(--sui-shadow-medium);overflow:hidden;display:flex;flex-direction:column;animation:sui-color-picker__fade var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}@keyframes sui-color-picker__fade{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.sui-color-picker__section{box-sizing:border-box;display:flex;flex-direction:column;gap:12px;padding:16px;width:100%}.sui-color-picker__section--colors{border-bottom:1px solid var(--sui-stroke-soft-200)}.sui-color-picker__section--recommended{gap:8px}:host([data-sui-presets-only]) .sui-color-picker__section--recommended{border-bottom:none}.sui-color-picker__canvas{position:relative;width:100%;height:232px;border-radius:var(--sui-radius-8);cursor:crosshair;-webkit-user-select:none;user-select:none;touch-action:none;overflow:hidden;background-color:var(--hue-color, #335cff);background-image:linear-gradient(to top,#000,#0000),linear-gradient(to right,#fff,#fff0)}.sui-color-picker__canvas-thumb{position:absolute;width:16px;height:16px;border-radius:50%;border:2px solid var(--sui-static-white, #fff);box-shadow:0 0 0 1px #00000026,0 1px 2px #0003;transform:translate(-50%,-50%);pointer-events:none}.sui-color-picker__slider{position:relative;width:100%;height:16px;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none}.sui-color-picker__slider-track{position:absolute;left:0;right:0;top:4px;height:8px;border-radius:var(--sui-radius-full);overflow:hidden}.sui-color-picker__hue .sui-color-picker__slider-track{background-image:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.sui-color-picker__opacity .sui-color-picker__slider-track{background-color:#fff;background-image:linear-gradient(to right,transparent,var(--opacity-color, #335cff)),conic-gradient(#ebebeb 0 25%,transparent 0 50%,#ebebeb 0 75%,transparent 0);background-size:auto,10.88px 10.88px}.sui-color-picker__slider-thumb{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;border:2px solid var(--sui-static-white, #fff);box-shadow:0 0 0 1px #00000026,0 1px 2px #0003;transform:translate(-50%,-50%);pointer-events:none}.sui-color-picker__opacity .sui-color-picker__slider-thumb{background-image:linear-gradient(var(--thumb-color, #335cff),var(--thumb-color, #335cff)),conic-gradient(#ebebeb 0 25%,#fff 0 50%,#ebebeb 0 75%,#fff 0);background-size:auto,6px 6px}.sui-color-picker__color-input{display:flex;flex-direction:column;gap:4px;width:100%}.sui-color-picker__format{display:flex;align-items:center;gap:2px;appearance:none;border:none;background:transparent;padding:0;cursor:default;font:inherit;color:var(--sui-text-strong-950)}.sui-color-picker__format-label{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);white-space:nowrap}.sui-color-picker__format-chevron{flex-shrink:0;color:var(--sui-icon-sub-600)}.sui-color-picker__input-row{box-sizing:border-box;display:flex;align-items:stretch;width:100%;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-8);overflow:hidden}.sui-color-picker__sip{display:flex;align-items:center;justify-content:center;padding:6px;border:none;border-right:1px solid var(--sui-stroke-soft-200);background:var(--sui-bg-white-0);color:var(--sui-icon-sub-600);cursor:pointer;appearance:none;flex-shrink:0;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-color-picker__sip:hover{background:var(--sui-bg-weak-50)}.sui-color-picker__sip:focus-visible{outline:2px solid var(--sui-stroke-strong-950, var(--sui-text-strong-950));outline-offset:-2px}.sui-color-picker__sip:active{transform:none}.sui-color-picker__hex-cell{box-sizing:border-box;display:flex;align-items:center;flex:1 0 0;min-width:0;padding:6px 10px;border-right:1px solid var(--sui-stroke-soft-200)}.sui-color-picker__hex-cell:last-child{border-right:none}.sui-color-picker__hex-field{flex:1 0 0;min-width:0;width:100%;border:none;outline:none;background:transparent;padding:0;appearance:none;color:var(--sui-text-strong-950);font-family:inherit;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);text-transform:uppercase}.sui-color-picker__hex-field::placeholder{color:var(--sui-text-soft-400);text-transform:none}.sui-color-picker__opacity-cell{box-sizing:border-box;display:flex;align-items:center;flex-shrink:0;padding:6px 10px}.sui-color-picker__opacity-field{width:3.5ch;border:none;outline:none;background:transparent;padding:0;appearance:none;text-align:right;color:var(--sui-text-sub-600);font-family:inherit;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)}.sui-color-picker__opacity-suffix{color:var(--sui-text-sub-600);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)}.sui-color-picker__panel-label{margin:0;font-size:var(--sui-type-paragraph-xs-size);font-weight:var(--sui-type-paragraph-xs-weight);line-height:var(--sui-type-paragraph-xs-line);letter-spacing:var(--sui-type-paragraph-xs-spacing);color:var(--sui-text-sub-600)}.sui-color-picker__grid{display:flex;flex-wrap:wrap;gap:4px;width:100%}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiColorDot, selector: "sui-color-dot", inputs: ["color", "customHex", "state", "size", "ariaLabel"], outputs: ["clicked"] }, { kind: "component", type: SuiDropdownMenu, selector: "sui-dropdown-menu", inputs: ["matchWidth", "flexibleDimensions", "push", "minWidth", "position", "viewportMargin", "panelClass", "disabled", "popupRole", "origin"], outputs: ["openedChange"], exportAs: ["suiDropdownMenu"] }, { kind: "directive", type: SuiDropdownPanel, selector: "ng-template[suiDropdownPanel]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiColorPicker, decorators: [{
             type: Component,
@@ -14063,6 +14117,24 @@ class SuiRadioLabel {
             ? { ...cfg, rel: cfg.rel ?? (cfg.target === '_blank' ? 'noopener noreferrer' : undefined) }
             : null;
     }, ...(ngDevMode ? [{ debugName: "linkCfg" }] : /* istanbul ignore next */ []));
+    /**
+     * Tamaño. `medium` (default, Figma): control 20, label 14/20.
+     * Extensión SUI (03-10-2026) para tocar en mobile:
+     *   - `large`:  control 24, label 16/24, sublabel y descripción 14/20, badge medium.
+     *   - `xlarge`: control 28, label 16/24, sublabel y descripción 14/20, badge large.
+     * El badge toma este default solo si su config no trae `size`.
+     */
+    size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Badge por default según el tamaño (si la config no fija uno). */
+    badgeSize = computed(() => {
+        switch (this.size()) {
+            case 'large': return 'medium';
+            case 'xlarge': return 'large';
+            default: return 'small';
+        }
+    }, ...(ngDevMode ? [{ debugName: "badgeSize" }] : /* istanbul ignore next */ []));
+    /** El link-button tiene dos tamaños: small (12/16) en Figma, medium (14/20) en mobile. */
+    linkSize = computed(() => this.size() === 'medium' ? 'small' : 'medium', ...(ngDevMode ? [{ debugName: "linkSize" }] : /* istanbul ignore next */ []));
     /** Si true, invierte orden: [content] [radio] (radio a la derecha). */
     flip = input(false, ...(ngDevMode ? [{ debugName: "flip" }] : /* istanbul ignore next */ []));
     /** Deshabilita el radio + wrapper. */
@@ -14110,7 +14182,7 @@ class SuiRadioLabel {
         this.linkClick.emit(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiRadioLabel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiRadioLabel, isStandalone: true, selector: "sui-radio-label", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, sublabel: { classPropertyName: "sublabel", publicName: "sublabel", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, flip: { classPropertyName: "flip", publicName: "flip", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", selected: "selected", linkClick: "linkClick" }, host: { listeners: { "click": "onLabelClick($event)", "keydown.space": "onKeySelect($event)", "keydown.enter": "onKeySelect($event)", "touchstart": "$event.currentTarget", "touchend": "$any($event.currentTarget).blur()" }, properties: { "attr.role": "\"radio\"", "attr.aria-checked": "isChecked() ? \"true\" : \"false\"", "attr.aria-disabled": "isDisabled() ? \"true\" : null", "attr.tabindex": "isDisabled() ? null : 0", "attr.data-sui-checked": "isChecked() ? \"\" : null", "attr.data-sui-flip": "flip() ? \"\" : null", "attr.data-sui-with-description": "description() ? \"\" : null", "attr.data-sui-disabled": "isDisabled() ? \"\" : null" } }, ngImport: i0, template: "<!-- Layout flex: el orden visual depende de [flip]. CSS rota via `order` para\n     mantener un solo DOM order accesible (radio primero). El sui-radio es solo\n     visual (pointer-events none) \u2014 la selecci\u00F3n vive en el host. -->\n<sui-radio\n  class=\"sui-radio-label__radio\"\n  [value]=\"value()\"\n  [standaloneChecked]=\"isChecked()\"\n  [disabled]=\"isDisabled()\"\n/>\n\n<div class=\"sui-radio-label__content\">\n  <!-- Bloque de texto: Title + Description van pegados (gap-4 en Figma). -->\n  <div class=\"sui-radio-label__text\">\n    <div class=\"sui-radio-label__title\">\n      <span class=\"sui-radio-label__label\">{{ label() }}</span>\n      @if (sublabel(); as sl) {\n        <span class=\"sui-radio-label__sublabel\">{{ sl }}</span>\n      }\n      @if (badgeCfg(); as bcfg) {\n        <sui-badge\n          class=\"sui-radio-label__badge\"\n          [color]=\"bcfg.color ?? 'orange'\"\n          [variant]=\"bcfg.variant ?? 'light'\"\n          [size]=\"bcfg.size ?? 'small'\"\n        >{{ bcfg.label }}</sui-badge>\n      }\n    </div>\n\n    @if (description(); as desc) {\n      <p class=\"sui-radio-label__description\">{{ desc }}</p>\n    }\n  </div>\n\n  @if (description() && linkCfg(); as link) {\n    <sui-link-button\n      variant=\"primary\"\n      size=\"small\"\n      [disabled]=\"isDisabled()\"\n      [href]=\"link.href ?? null\"\n      [target]=\"link.target ?? null\"\n      [rel]=\"link.rel ?? null\"\n      (clicked)=\"onLinkClick($event)\"\n    >{{ link.label }}</sui-link-button>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:flex-start;gap:8px;cursor:pointer;font-family:var(--sui-font-sans, \"Inter\", system-ui, sans-serif);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;-webkit-tap-highlight-color:transparent}:host([data-sui-flip]) .sui-radio-label__radio{order:2}:host([data-sui-flip]) .sui-radio-label__content{order:1}:host([data-sui-disabled]){cursor:not-allowed}:host([data-sui-disabled]) .sui-radio-label__content{opacity:.5}.sui-radio-label__radio{flex-shrink:0}.sui-radio-label__content{display:flex;flex:1 0 0;min-width:0;flex-direction:column;align-items:flex-start;gap:4px}:host([data-sui-with-description]) .sui-radio-label__content{gap:10px}.sui-radio-label__text{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%}.sui-radio-label__title{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.sui-radio-label__label{font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.084px;color:var(--sui-text-strong-950)}:host([data-sui-with-description]) .sui-radio-label__label{font-weight:500}.sui-radio-label__sublabel{font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-sub-600)}.sui-radio-label__badge{flex-shrink:0}.sui-radio-label__description{margin:0;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-sub-600);word-break:break-word}:host sui-radio{pointer-events:none}\n"], dependencies: [{ kind: "component", type: SuiRadio, selector: "sui-radio", inputs: ["size", "value", "disabled", "standaloneChecked"], outputs: ["standaloneCheckedChange"] }, { kind: "component", type: SuiBadge, selector: "sui-badge", inputs: ["color", "variant", "size", "type", "disabled"] }, { kind: "component", type: SuiLinkButton, selector: "sui-link-button", inputs: ["variant", "size", "underline", "disabled", "leftIcon", "rightIcon", "href", "target", "rel", "type", "ariaLabel"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiRadioLabel, isStandalone: true, selector: "sui-radio-label", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, sublabel: { classPropertyName: "sublabel", publicName: "sublabel", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, flip: { classPropertyName: "flip", publicName: "flip", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", selected: "selected", linkClick: "linkClick" }, host: { listeners: { "click": "onLabelClick($event)", "keydown.space": "onKeySelect($event)", "keydown.enter": "onKeySelect($event)", "touchstart": "$event.currentTarget", "touchend": "$any($event.currentTarget).blur()" }, properties: { "attr.role": "\"radio\"", "attr.aria-checked": "isChecked() ? \"true\" : \"false\"", "attr.aria-disabled": "isDisabled() ? \"true\" : null", "attr.tabindex": "isDisabled() ? null : 0", "attr.data-sui-checked": "isChecked() ? \"\" : null", "attr.data-sui-size": "size()", "attr.data-sui-flip": "flip() ? \"\" : null", "attr.data-sui-with-description": "description() ? \"\" : null", "attr.data-sui-disabled": "isDisabled() ? \"\" : null" } }, ngImport: i0, template: "<!-- Layout flex: el orden visual depende de [flip]. CSS rota via `order` para\n     mantener un solo DOM order accesible (radio primero). El sui-radio es solo\n     visual (pointer-events none) \u2014 la selecci\u00F3n vive en el host. -->\n<sui-radio\n  class=\"sui-radio-label__radio\"\n  [size]=\"size()\"\n  [value]=\"value()\"\n  [standaloneChecked]=\"isChecked()\"\n  [disabled]=\"isDisabled()\"\n/>\n\n<div class=\"sui-radio-label__content\">\n  <!-- Bloque de texto: Title + Description van pegados (gap-4 en Figma). -->\n  <div class=\"sui-radio-label__text\">\n    <div class=\"sui-radio-label__title\">\n      <span class=\"sui-radio-label__label\">{{ label() }}</span>\n      @if (sublabel(); as sl) {\n        <span class=\"sui-radio-label__sublabel\">{{ sl }}</span>\n      }\n      @if (badgeCfg(); as bcfg) {\n        <sui-badge\n          class=\"sui-radio-label__badge\"\n          [color]=\"bcfg.color ?? 'orange'\"\n          [variant]=\"bcfg.variant ?? 'light'\"\n          [size]=\"bcfg.size ?? badgeSize()\"\n        >{{ bcfg.label }}</sui-badge>\n      }\n    </div>\n\n    @if (description(); as desc) {\n      <p class=\"sui-radio-label__description\">{{ desc }}</p>\n    }\n  </div>\n\n  @if (description() && linkCfg(); as link) {\n    <sui-link-button\n      variant=\"primary\"\n      [size]=\"linkSize()\"\n      [disabled]=\"isDisabled()\"\n      [href]=\"link.href ?? null\"\n      [target]=\"link.target ?? null\"\n      [rel]=\"link.rel ?? null\"\n      (clicked)=\"onLinkClick($event)\"\n    >{{ link.label }}</sui-link-button>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:flex-start;gap:8px;cursor:pointer;font-family:var(--sui-font-sans, \"Inter\", system-ui, sans-serif);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;-webkit-tap-highlight-color:transparent}:host([data-sui-flip]) .sui-radio-label__radio{order:2}:host([data-sui-flip]) .sui-radio-label__content{order:1}:host([data-sui-disabled]){cursor:not-allowed}:host([data-sui-disabled]) .sui-radio-label__content{opacity:.5}.sui-radio-label__radio{flex-shrink:0}.sui-radio-label__content{display:flex;flex:1 0 0;min-width:0;flex-direction:column;align-items:flex-start;gap:4px}:host([data-sui-with-description]) .sui-radio-label__content{gap:10px}.sui-radio-label__text{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%}.sui-radio-label__title{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.sui-radio-label__label{font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.084px;color:var(--sui-text-strong-950)}:host([data-sui-with-description]) .sui-radio-label__label{font-weight:500}.sui-radio-label__sublabel{font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-sub-600)}.sui-radio-label__badge{flex-shrink:0}.sui-radio-label__description{margin:0;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-sub-600);word-break:break-word}:host sui-radio{pointer-events:none}:host([data-sui-size=large]){gap:10px}:host([data-sui-size=xlarge]){gap:12px}:host([data-sui-size=large]) .sui-radio-label__label,:host([data-sui-size=xlarge]) .sui-radio-label__label{font-size:var(--sui-type-paragraph-md-size);line-height:var(--sui-type-paragraph-md-line);letter-spacing:var(--sui-type-paragraph-md-spacing)}:host([data-sui-size=large]) .sui-radio-label__sublabel,:host([data-sui-size=large]) .sui-radio-label__description,:host([data-sui-size=xlarge]) .sui-radio-label__sublabel,:host([data-sui-size=xlarge]) .sui-radio-label__description{font-size:var(--sui-type-paragraph-sm-size);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing)}:host([data-sui-size=xlarge]) .sui-radio-label__content{padding-top:2px}\n"], dependencies: [{ kind: "component", type: SuiRadio, selector: "sui-radio", inputs: ["size", "value", "disabled", "standaloneChecked"], outputs: ["standaloneCheckedChange"] }, { kind: "component", type: SuiBadge, selector: "sui-badge", inputs: ["color", "variant", "size", "type", "disabled"] }, { kind: "component", type: SuiLinkButton, selector: "sui-link-button", inputs: ["variant", "size", "underline", "disabled", "leftIcon", "rightIcon", "href", "target", "rel", "type", "ariaLabel"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiRadioLabel, decorators: [{
             type: Component,
@@ -14120,6 +14192,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         '[attr.aria-disabled]': 'isDisabled() ? "true" : null',
                         '[attr.tabindex]': 'isDisabled() ? null : 0',
                         '[attr.data-sui-checked]': 'isChecked() ? "" : null',
+                        '[attr.data-sui-size]': 'size()',
                         '[attr.data-sui-flip]': 'flip() ? "" : null',
                         '[attr.data-sui-with-description]': 'description() ? "" : null',
                         '[attr.data-sui-disabled]': 'isDisabled() ? "" : null',
@@ -14129,8 +14202,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         /* iOS WKWebView: engage del touch pipeline + deselección inmediata. */
                         '(touchstart)': '$event.currentTarget',
                         '(touchend)': '$any($event.currentTarget).blur()',
-                    }, template: "<!-- Layout flex: el orden visual depende de [flip]. CSS rota via `order` para\n     mantener un solo DOM order accesible (radio primero). El sui-radio es solo\n     visual (pointer-events none) \u2014 la selecci\u00F3n vive en el host. -->\n<sui-radio\n  class=\"sui-radio-label__radio\"\n  [value]=\"value()\"\n  [standaloneChecked]=\"isChecked()\"\n  [disabled]=\"isDisabled()\"\n/>\n\n<div class=\"sui-radio-label__content\">\n  <!-- Bloque de texto: Title + Description van pegados (gap-4 en Figma). -->\n  <div class=\"sui-radio-label__text\">\n    <div class=\"sui-radio-label__title\">\n      <span class=\"sui-radio-label__label\">{{ label() }}</span>\n      @if (sublabel(); as sl) {\n        <span class=\"sui-radio-label__sublabel\">{{ sl }}</span>\n      }\n      @if (badgeCfg(); as bcfg) {\n        <sui-badge\n          class=\"sui-radio-label__badge\"\n          [color]=\"bcfg.color ?? 'orange'\"\n          [variant]=\"bcfg.variant ?? 'light'\"\n          [size]=\"bcfg.size ?? 'small'\"\n        >{{ bcfg.label }}</sui-badge>\n      }\n    </div>\n\n    @if (description(); as desc) {\n      <p class=\"sui-radio-label__description\">{{ desc }}</p>\n    }\n  </div>\n\n  @if (description() && linkCfg(); as link) {\n    <sui-link-button\n      variant=\"primary\"\n      size=\"small\"\n      [disabled]=\"isDisabled()\"\n      [href]=\"link.href ?? null\"\n      [target]=\"link.target ?? null\"\n      [rel]=\"link.rel ?? null\"\n      (clicked)=\"onLinkClick($event)\"\n    >{{ link.label }}</sui-link-button>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:flex-start;gap:8px;cursor:pointer;font-family:var(--sui-font-sans, \"Inter\", system-ui, sans-serif);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;-webkit-tap-highlight-color:transparent}:host([data-sui-flip]) .sui-radio-label__radio{order:2}:host([data-sui-flip]) .sui-radio-label__content{order:1}:host([data-sui-disabled]){cursor:not-allowed}:host([data-sui-disabled]) .sui-radio-label__content{opacity:.5}.sui-radio-label__radio{flex-shrink:0}.sui-radio-label__content{display:flex;flex:1 0 0;min-width:0;flex-direction:column;align-items:flex-start;gap:4px}:host([data-sui-with-description]) .sui-radio-label__content{gap:10px}.sui-radio-label__text{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%}.sui-radio-label__title{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.sui-radio-label__label{font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.084px;color:var(--sui-text-strong-950)}:host([data-sui-with-description]) .sui-radio-label__label{font-weight:500}.sui-radio-label__sublabel{font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-sub-600)}.sui-radio-label__badge{flex-shrink:0}.sui-radio-label__description{margin:0;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-sub-600);word-break:break-word}:host sui-radio{pointer-events:none}\n"] }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], sublabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sublabel", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: false }] }], flip: [{ type: i0.Input, args: [{ isSignal: true, alias: "flip", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], selected: [{ type: i0.Output, args: ["selected"] }], linkClick: [{ type: i0.Output, args: ["linkClick"] }] } });
+                    }, template: "<!-- Layout flex: el orden visual depende de [flip]. CSS rota via `order` para\n     mantener un solo DOM order accesible (radio primero). El sui-radio es solo\n     visual (pointer-events none) \u2014 la selecci\u00F3n vive en el host. -->\n<sui-radio\n  class=\"sui-radio-label__radio\"\n  [size]=\"size()\"\n  [value]=\"value()\"\n  [standaloneChecked]=\"isChecked()\"\n  [disabled]=\"isDisabled()\"\n/>\n\n<div class=\"sui-radio-label__content\">\n  <!-- Bloque de texto: Title + Description van pegados (gap-4 en Figma). -->\n  <div class=\"sui-radio-label__text\">\n    <div class=\"sui-radio-label__title\">\n      <span class=\"sui-radio-label__label\">{{ label() }}</span>\n      @if (sublabel(); as sl) {\n        <span class=\"sui-radio-label__sublabel\">{{ sl }}</span>\n      }\n      @if (badgeCfg(); as bcfg) {\n        <sui-badge\n          class=\"sui-radio-label__badge\"\n          [color]=\"bcfg.color ?? 'orange'\"\n          [variant]=\"bcfg.variant ?? 'light'\"\n          [size]=\"bcfg.size ?? badgeSize()\"\n        >{{ bcfg.label }}</sui-badge>\n      }\n    </div>\n\n    @if (description(); as desc) {\n      <p class=\"sui-radio-label__description\">{{ desc }}</p>\n    }\n  </div>\n\n  @if (description() && linkCfg(); as link) {\n    <sui-link-button\n      variant=\"primary\"\n      [size]=\"linkSize()\"\n      [disabled]=\"isDisabled()\"\n      [href]=\"link.href ?? null\"\n      [target]=\"link.target ?? null\"\n      [rel]=\"link.rel ?? null\"\n      (clicked)=\"onLinkClick($event)\"\n    >{{ link.label }}</sui-link-button>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:flex-start;gap:8px;cursor:pointer;font-family:var(--sui-font-sans, \"Inter\", system-ui, sans-serif);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;-webkit-tap-highlight-color:transparent}:host([data-sui-flip]) .sui-radio-label__radio{order:2}:host([data-sui-flip]) .sui-radio-label__content{order:1}:host([data-sui-disabled]){cursor:not-allowed}:host([data-sui-disabled]) .sui-radio-label__content{opacity:.5}.sui-radio-label__radio{flex-shrink:0}.sui-radio-label__content{display:flex;flex:1 0 0;min-width:0;flex-direction:column;align-items:flex-start;gap:4px}:host([data-sui-with-description]) .sui-radio-label__content{gap:10px}.sui-radio-label__text{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%}.sui-radio-label__title{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.sui-radio-label__label{font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.084px;color:var(--sui-text-strong-950)}:host([data-sui-with-description]) .sui-radio-label__label{font-weight:500}.sui-radio-label__sublabel{font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-sub-600)}.sui-radio-label__badge{flex-shrink:0}.sui-radio-label__description{margin:0;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-sub-600);word-break:break-word}:host sui-radio{pointer-events:none}:host([data-sui-size=large]){gap:10px}:host([data-sui-size=xlarge]){gap:12px}:host([data-sui-size=large]) .sui-radio-label__label,:host([data-sui-size=xlarge]) .sui-radio-label__label{font-size:var(--sui-type-paragraph-md-size);line-height:var(--sui-type-paragraph-md-line);letter-spacing:var(--sui-type-paragraph-md-spacing)}:host([data-sui-size=large]) .sui-radio-label__sublabel,:host([data-sui-size=large]) .sui-radio-label__description,:host([data-sui-size=xlarge]) .sui-radio-label__sublabel,:host([data-sui-size=xlarge]) .sui-radio-label__description{font-size:var(--sui-type-paragraph-sm-size);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing)}:host([data-sui-size=xlarge]) .sui-radio-label__content{padding-top:2px}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], sublabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sublabel", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], flip: [{ type: i0.Input, args: [{ isSignal: true, alias: "flip", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], selected: [{ type: i0.Output, args: ["selected"] }], linkClick: [{ type: i0.Output, args: ["linkClick"] }] } });
 
 /**
  * SUI Rating — SUI Design System 2.0
@@ -15353,6 +15426,8 @@ class SuiSlider {
     hostRef = inject(ElementRef);
     // ── API pública ────────────────────────────────────────────────────────
     type = input('single', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    /** `medium` (default, Figma) o `large` (mobile, extensión SUI). */
+    size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     /** Rango numérico de la escala. */
     min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
     max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
@@ -15598,13 +15673,13 @@ class SuiSlider {
         this.hovering.set(null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiSlider, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiSlider, isStandalone: true, selector: "sui-slider", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, sublabel: { classPropertyName: "sublabel", publicName: "sublabel", isSignal: true, isRequired: false, transformFunction: null }, amount: { classPropertyName: "amount", publicName: "amount", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipAlways: { classPropertyName: "tooltipAlways", publicName: "tooltipAlways", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", minValueChange: "minValueChange", maxValueChange: "maxValueChange" }, host: { properties: { "attr.title": "null", "attr.data-sui-type": "type()", "attr.data-sui-disabled": "isDisabled() ? \"\" : null", "attr.data-sui-dragging": "dragging() ? \"\" : null" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiSlider, isStandalone: true, selector: "sui-slider", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, sublabel: { classPropertyName: "sublabel", publicName: "sublabel", isSignal: true, isRequired: false, transformFunction: null }, amount: { classPropertyName: "amount", publicName: "amount", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipAlways: { classPropertyName: "tooltipAlways", publicName: "tooltipAlways", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", minValueChange: "minValueChange", maxValueChange: "maxValueChange" }, host: { properties: { "attr.title": "null", "attr.data-sui-type": "type()", "attr.data-sui-size": "size()", "attr.data-sui-disabled": "isDisabled() ? \"\" : null", "attr.data-sui-dragging": "dragging() ? \"\" : null" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SuiSlider),
                 multi: true,
             },
-        ], ngImport: i0, template: "@if (label()) {\n  <div class=\"sui-slider__label-row\">\n    <span class=\"sui-slider__label\">{{ label() }}</span>\n    @if (sublabel()) {\n      <span class=\"sui-slider__sublabel\">{{ sublabel() }}</span>\n    }\n    <span class=\"sui-slider__amount\">{{ amountText() }}</span>\n  </div>\n}\n\n<div\n  class=\"sui-slider__track\"\n  (pointerdown)=\"onTrackPointerDown($event)\"\n  (pointermove)=\"onPointerMove($event)\"\n  (pointerup)=\"onPointerUp()\"\n  (pointercancel)=\"onPointerUp()\"\n>\n  <!-- BG track -->\n  <div class=\"sui-slider__bg\"></div>\n\n  @if (type() === 'single') {\n    <!-- Progress fill 0 \u2192 value -->\n    <div class=\"sui-slider__progress\" [style.width.%]=\"valuePct()\"></div>\n\n    <!-- Thumb \u00FAnico -->\n    <div\n      class=\"sui-slider__thumb\"\n      [class.sui-slider__thumb--zero]=\"!singleHasProgress()\"\n      [style.left.%]=\"valuePct()\"\n      role=\"slider\"\n      [attr.aria-valuemin]=\"min()\"\n      [attr.aria-valuemax]=\"max()\"\n      [attr.aria-valuenow]=\"effectiveValue()\"\n      [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n      [attr.tabindex]=\"isDisabled() ? '-1' : '0'\"\n      (keydown)=\"onThumbKeydown($event, 'single')\"\n      (pointerenter)=\"onThumbEnter('single')\"\n      (pointerleave)=\"onThumbLeave()\"\n      (touchstart)=\"$event.currentTarget\"\n      (touchend)=\"$any($event.currentTarget).blur()\"\n    >\n      <span class=\"sui-slider__dot\"></span>\n      @if (showSingleTooltip()) {\n        <div class=\"sui-slider__tooltip\">\n          <span class=\"sui-slider__tooltip-text\">{{ effectiveValue() }}</span>\n          <span class=\"sui-slider__tooltip-tail\"></span>\n        </div>\n      }\n    </div>\n  } @else {\n    <!-- Progress fill min \u2192 max -->\n    <div\n      class=\"sui-slider__progress\"\n      [style.left.%]=\"minPct()\"\n      [style.width.%]=\"maxPct() - minPct()\"\n    ></div>\n\n    <!-- Thumb min (izquierdo) -->\n    <div\n      class=\"sui-slider__thumb sui-slider__thumb--range-min\"\n      [class.sui-slider__thumb--zero]=\"!rangeMinColored()\"\n      [style.left.%]=\"minPct()\"\n      role=\"slider\"\n      [attr.aria-valuemin]=\"min()\"\n      [attr.aria-valuemax]=\"effectiveMax()\"\n      [attr.aria-valuenow]=\"effectiveMin()\"\n      [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n      [attr.tabindex]=\"isDisabled() ? '-1' : '0'\"\n      (keydown)=\"onThumbKeydown($event, 'min')\"\n      (pointerenter)=\"onThumbEnter('min')\"\n      (pointerleave)=\"onThumbLeave()\"\n      (touchstart)=\"$event.currentTarget\"\n      (touchend)=\"$any($event.currentTarget).blur()\"\n    >\n      <span class=\"sui-slider__dot\"></span>\n      @if (showMinTooltip()) {\n        <div class=\"sui-slider__tooltip\">\n          <span class=\"sui-slider__tooltip-text\">{{ effectiveMin() }}</span>\n          <span class=\"sui-slider__tooltip-tail\"></span>\n        </div>\n      }\n    </div>\n\n    <!-- Thumb max (derecho) -->\n    <div\n      class=\"sui-slider__thumb\"\n      [class.sui-slider__thumb--zero]=\"!rangeMaxColored()\"\n      [style.left.%]=\"maxPct()\"\n      role=\"slider\"\n      [attr.aria-valuemin]=\"effectiveMin()\"\n      [attr.aria-valuemax]=\"max()\"\n      [attr.aria-valuenow]=\"effectiveMax()\"\n      [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n      [attr.tabindex]=\"isDisabled() ? '-1' : '0'\"\n      (keydown)=\"onThumbKeydown($event, 'max')\"\n      (pointerenter)=\"onThumbEnter('max')\"\n      (pointerleave)=\"onThumbLeave()\"\n      (touchstart)=\"$event.currentTarget\"\n      (touchend)=\"$any($event.currentTarget).blur()\"\n    >\n      <span class=\"sui-slider__dot\"></span>\n      @if (showMaxTooltip()) {\n        <div class=\"sui-slider__tooltip\">\n          <span class=\"sui-slider__tooltip-text\">{{ effectiveMax() }}</span>\n          <span class=\"sui-slider__tooltip-tail\"></span>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;align-items:stretch;gap:4px;width:100%;box-sizing:border-box;font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;-webkit-user-select:none;user-select:none}.sui-slider__label-row{display:flex;align-items:flex-start;gap:2px;width:100%;font-size:12px;line-height:16px;font-weight:400}.sui-slider__label{color:var(--sui-text-sub-600);white-space:nowrap}.sui-slider__sublabel{color:var(--sui-text-soft-400);white-space:nowrap}.sui-slider__amount{flex:1 0 0;min-width:0;text-align:right;color:var(--sui-text-sub-600)}.sui-slider__track{position:relative;width:100%;height:16px;cursor:pointer;touch-action:none}.sui-slider__bg{position:absolute;left:0;right:0;top:5px;height:6px;border-radius:var(--sui-radius-full);background:var(--sui-bg-soft-200)}.sui-slider__progress{position:absolute;left:0;top:5px;height:6px;border-radius:var(--sui-radius-full);background:var(--sui-primary-base)}.sui-slider__thumb{position:absolute;top:50%;width:16px;height:16px;margin-left:-8px;transform:translateY(-50%);border-radius:50%;background:var(--sui-static-white, #ffffff);filter:drop-shadow(0px 6px 5px rgba(14,18,27,.06)) drop-shadow(0px 2px 2px rgba(14,18,27,.03));display:flex;align-items:center;justify-content:center;cursor:grab;outline:none;box-sizing:border-box}.sui-slider__thumb:active{cursor:grabbing}.sui-slider__thumb--range-min{margin-left:-5px}.sui-slider__thumb:focus-visible{box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-base)}.sui-slider__dot{width:6px;height:6px;border-radius:50%;background:var(--sui-primary-base);box-sizing:border-box}.sui-slider__thumb--zero .sui-slider__dot{background:var(--sui-bg-soft-200)}.sui-slider__tooltip{position:absolute;left:50%;top:-28px;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;pointer-events:none;z-index:2}.sui-slider__tooltip-text{display:flex;align-items:center;justify-content:center;padding:2px 6px;border-radius:var(--sui-radius-4);background:var(--sui-bg-strong-950);color:var(--sui-text-white-0);font-size:12px;line-height:16px;font-weight:400;white-space:nowrap;box-shadow:0 12px 24px #0e121b0f,0 1px 2px #0e121b08}.sui-slider__tooltip-tail{width:8px;height:4px;background:var(--sui-bg-strong-950);clip-path:polygon(0 0,100% 0,50% 100%)}:host([data-sui-disabled]){cursor:not-allowed}:host([data-sui-disabled]) .sui-slider__track{cursor:not-allowed}:host([data-sui-disabled]) .sui-slider__thumb{cursor:not-allowed}:host([data-sui-disabled]) .sui-slider__progress{background:var(--sui-text-disabled-300)}:host([data-sui-disabled]) .sui-slider__dot{background:var(--sui-text-disabled-300)}:host([data-sui-disabled]) .sui-slider__label,:host([data-sui-disabled]) .sui-slider__amount{color:var(--sui-text-disabled-300)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "@if (label()) {\n  <div class=\"sui-slider__label-row\">\n    <span class=\"sui-slider__label\">{{ label() }}</span>\n    @if (sublabel()) {\n      <span class=\"sui-slider__sublabel\">{{ sublabel() }}</span>\n    }\n    <span class=\"sui-slider__amount\">{{ amountText() }}</span>\n  </div>\n}\n\n<div\n  class=\"sui-slider__track\"\n  (pointerdown)=\"onTrackPointerDown($event)\"\n  (pointermove)=\"onPointerMove($event)\"\n  (pointerup)=\"onPointerUp()\"\n  (pointercancel)=\"onPointerUp()\"\n>\n  <!-- BG track -->\n  <div class=\"sui-slider__bg\"></div>\n\n  @if (type() === 'single') {\n    <!-- Progress fill 0 \u2192 value -->\n    <div class=\"sui-slider__progress\" [style.width.%]=\"valuePct()\"></div>\n\n    <!-- Thumb \u00FAnico -->\n    <div\n      class=\"sui-slider__thumb\"\n      [class.sui-slider__thumb--zero]=\"!singleHasProgress()\"\n      [style.left.%]=\"valuePct()\"\n      role=\"slider\"\n      [attr.aria-valuemin]=\"min()\"\n      [attr.aria-valuemax]=\"max()\"\n      [attr.aria-valuenow]=\"effectiveValue()\"\n      [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n      [attr.tabindex]=\"isDisabled() ? '-1' : '0'\"\n      (keydown)=\"onThumbKeydown($event, 'single')\"\n      (pointerenter)=\"onThumbEnter('single')\"\n      (pointerleave)=\"onThumbLeave()\"\n      (touchstart)=\"$event.currentTarget\"\n      (touchend)=\"$any($event.currentTarget).blur()\"\n    >\n      <span class=\"sui-slider__dot\"></span>\n      @if (showSingleTooltip()) {\n        <div class=\"sui-slider__tooltip\">\n          <span class=\"sui-slider__tooltip-text\">{{ effectiveValue() }}</span>\n          <span class=\"sui-slider__tooltip-tail\"></span>\n        </div>\n      }\n    </div>\n  } @else {\n    <!-- Progress fill min \u2192 max -->\n    <div\n      class=\"sui-slider__progress\"\n      [style.left.%]=\"minPct()\"\n      [style.width.%]=\"maxPct() - minPct()\"\n    ></div>\n\n    <!-- Thumb min (izquierdo) -->\n    <div\n      class=\"sui-slider__thumb sui-slider__thumb--range-min\"\n      [class.sui-slider__thumb--zero]=\"!rangeMinColored()\"\n      [style.left.%]=\"minPct()\"\n      role=\"slider\"\n      [attr.aria-valuemin]=\"min()\"\n      [attr.aria-valuemax]=\"effectiveMax()\"\n      [attr.aria-valuenow]=\"effectiveMin()\"\n      [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n      [attr.tabindex]=\"isDisabled() ? '-1' : '0'\"\n      (keydown)=\"onThumbKeydown($event, 'min')\"\n      (pointerenter)=\"onThumbEnter('min')\"\n      (pointerleave)=\"onThumbLeave()\"\n      (touchstart)=\"$event.currentTarget\"\n      (touchend)=\"$any($event.currentTarget).blur()\"\n    >\n      <span class=\"sui-slider__dot\"></span>\n      @if (showMinTooltip()) {\n        <div class=\"sui-slider__tooltip\">\n          <span class=\"sui-slider__tooltip-text\">{{ effectiveMin() }}</span>\n          <span class=\"sui-slider__tooltip-tail\"></span>\n        </div>\n      }\n    </div>\n\n    <!-- Thumb max (derecho) -->\n    <div\n      class=\"sui-slider__thumb\"\n      [class.sui-slider__thumb--zero]=\"!rangeMaxColored()\"\n      [style.left.%]=\"maxPct()\"\n      role=\"slider\"\n      [attr.aria-valuemin]=\"effectiveMin()\"\n      [attr.aria-valuemax]=\"max()\"\n      [attr.aria-valuenow]=\"effectiveMax()\"\n      [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n      [attr.tabindex]=\"isDisabled() ? '-1' : '0'\"\n      (keydown)=\"onThumbKeydown($event, 'max')\"\n      (pointerenter)=\"onThumbEnter('max')\"\n      (pointerleave)=\"onThumbLeave()\"\n      (touchstart)=\"$event.currentTarget\"\n      (touchend)=\"$any($event.currentTarget).blur()\"\n    >\n      <span class=\"sui-slider__dot\"></span>\n      @if (showMaxTooltip()) {\n        <div class=\"sui-slider__tooltip\">\n          <span class=\"sui-slider__tooltip-text\">{{ effectiveMax() }}</span>\n          <span class=\"sui-slider__tooltip-tail\"></span>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;align-items:stretch;gap:4px;width:100%;box-sizing:border-box;font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;-webkit-user-select:none;user-select:none}.sui-slider__label-row{display:flex;align-items:flex-start;gap:2px;width:100%;font-size:12px;line-height:16px;font-weight:400}.sui-slider__label{color:var(--sui-text-sub-600);white-space:nowrap}.sui-slider__sublabel{color:var(--sui-text-soft-400);white-space:nowrap}.sui-slider__amount{flex:1 0 0;min-width:0;text-align:right;color:var(--sui-text-sub-600)}.sui-slider__track{position:relative;width:100%;height:16px;cursor:pointer;touch-action:none}.sui-slider__bg{position:absolute;left:0;right:0;top:5px;height:6px;border-radius:var(--sui-radius-full);background:var(--sui-bg-soft-200)}.sui-slider__progress{position:absolute;left:0;top:5px;height:6px;border-radius:var(--sui-radius-full);background:var(--sui-primary-base)}.sui-slider__thumb{position:absolute;top:50%;width:16px;height:16px;margin-left:-8px;transform:translateY(-50%);border-radius:50%;background:var(--sui-static-white, #ffffff);filter:drop-shadow(0px 6px 5px rgba(14,18,27,.06)) drop-shadow(0px 2px 2px rgba(14,18,27,.03));display:flex;align-items:center;justify-content:center;cursor:grab;outline:none;box-sizing:border-box}.sui-slider__thumb:active{cursor:grabbing}.sui-slider__thumb--range-min{margin-left:-5px}.sui-slider__thumb:focus-visible{box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-base)}.sui-slider__dot{width:6px;height:6px;border-radius:50%;background:var(--sui-primary-base);box-sizing:border-box}.sui-slider__thumb--zero .sui-slider__dot{background:var(--sui-bg-soft-200)}:host([data-sui-size=large]){gap:8px}:host([data-sui-size=large]) .sui-slider__label-row{font-size:var(--sui-type-paragraph-sm-size);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing)}:host([data-sui-size=large]) .sui-slider__track{height:24px}:host([data-sui-size=large]) .sui-slider__bg,:host([data-sui-size=large]) .sui-slider__progress{top:8px;height:8px}:host([data-sui-size=large]) .sui-slider__thumb{width:24px;height:24px;margin-left:-12px}:host([data-sui-size=large]) .sui-slider__thumb--range-min{margin-left:-9px}:host([data-sui-size=large]) .sui-slider__dot{width:8px;height:8px}.sui-slider__tooltip{position:absolute;left:50%;top:-28px;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;pointer-events:none;z-index:2}.sui-slider__tooltip-text{display:flex;align-items:center;justify-content:center;padding:2px 6px;border-radius:var(--sui-radius-4);background:var(--sui-bg-strong-950);color:var(--sui-text-white-0);font-size:12px;line-height:16px;font-weight:400;white-space:nowrap;box-shadow:0 12px 24px #0e121b0f,0 1px 2px #0e121b08}.sui-slider__tooltip-tail{width:8px;height:4px;background:var(--sui-bg-strong-950);clip-path:polygon(0 0,100% 0,50% 100%)}:host([data-sui-disabled]){cursor:not-allowed}:host([data-sui-disabled]) .sui-slider__track{cursor:not-allowed}:host([data-sui-disabled]) .sui-slider__thumb{cursor:not-allowed}:host([data-sui-disabled]) .sui-slider__progress{background:var(--sui-text-disabled-300)}:host([data-sui-disabled]) .sui-slider__dot{background:var(--sui-text-disabled-300)}:host([data-sui-disabled]) .sui-slider__label,:host([data-sui-disabled]) .sui-slider__amount{color:var(--sui-text-disabled-300)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiSlider, decorators: [{
             type: Component,
@@ -15618,10 +15693,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         /* Strip native `title` attr — patrón canon Ontop (ver CLAUDE.md). */
                         '[attr.title]': 'null',
                         '[attr.data-sui-type]': 'type()',
+                        '[attr.data-sui-size]': 'size()',
                         '[attr.data-sui-disabled]': 'isDisabled() ? "" : null',
                         '[attr.data-sui-dragging]': 'dragging() ? "" : null',
-                    }, template: "@if (label()) {\n  <div class=\"sui-slider__label-row\">\n    <span class=\"sui-slider__label\">{{ label() }}</span>\n    @if (sublabel()) {\n      <span class=\"sui-slider__sublabel\">{{ sublabel() }}</span>\n    }\n    <span class=\"sui-slider__amount\">{{ amountText() }}</span>\n  </div>\n}\n\n<div\n  class=\"sui-slider__track\"\n  (pointerdown)=\"onTrackPointerDown($event)\"\n  (pointermove)=\"onPointerMove($event)\"\n  (pointerup)=\"onPointerUp()\"\n  (pointercancel)=\"onPointerUp()\"\n>\n  <!-- BG track -->\n  <div class=\"sui-slider__bg\"></div>\n\n  @if (type() === 'single') {\n    <!-- Progress fill 0 \u2192 value -->\n    <div class=\"sui-slider__progress\" [style.width.%]=\"valuePct()\"></div>\n\n    <!-- Thumb \u00FAnico -->\n    <div\n      class=\"sui-slider__thumb\"\n      [class.sui-slider__thumb--zero]=\"!singleHasProgress()\"\n      [style.left.%]=\"valuePct()\"\n      role=\"slider\"\n      [attr.aria-valuemin]=\"min()\"\n      [attr.aria-valuemax]=\"max()\"\n      [attr.aria-valuenow]=\"effectiveValue()\"\n      [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n      [attr.tabindex]=\"isDisabled() ? '-1' : '0'\"\n      (keydown)=\"onThumbKeydown($event, 'single')\"\n      (pointerenter)=\"onThumbEnter('single')\"\n      (pointerleave)=\"onThumbLeave()\"\n      (touchstart)=\"$event.currentTarget\"\n      (touchend)=\"$any($event.currentTarget).blur()\"\n    >\n      <span class=\"sui-slider__dot\"></span>\n      @if (showSingleTooltip()) {\n        <div class=\"sui-slider__tooltip\">\n          <span class=\"sui-slider__tooltip-text\">{{ effectiveValue() }}</span>\n          <span class=\"sui-slider__tooltip-tail\"></span>\n        </div>\n      }\n    </div>\n  } @else {\n    <!-- Progress fill min \u2192 max -->\n    <div\n      class=\"sui-slider__progress\"\n      [style.left.%]=\"minPct()\"\n      [style.width.%]=\"maxPct() - minPct()\"\n    ></div>\n\n    <!-- Thumb min (izquierdo) -->\n    <div\n      class=\"sui-slider__thumb sui-slider__thumb--range-min\"\n      [class.sui-slider__thumb--zero]=\"!rangeMinColored()\"\n      [style.left.%]=\"minPct()\"\n      role=\"slider\"\n      [attr.aria-valuemin]=\"min()\"\n      [attr.aria-valuemax]=\"effectiveMax()\"\n      [attr.aria-valuenow]=\"effectiveMin()\"\n      [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n      [attr.tabindex]=\"isDisabled() ? '-1' : '0'\"\n      (keydown)=\"onThumbKeydown($event, 'min')\"\n      (pointerenter)=\"onThumbEnter('min')\"\n      (pointerleave)=\"onThumbLeave()\"\n      (touchstart)=\"$event.currentTarget\"\n      (touchend)=\"$any($event.currentTarget).blur()\"\n    >\n      <span class=\"sui-slider__dot\"></span>\n      @if (showMinTooltip()) {\n        <div class=\"sui-slider__tooltip\">\n          <span class=\"sui-slider__tooltip-text\">{{ effectiveMin() }}</span>\n          <span class=\"sui-slider__tooltip-tail\"></span>\n        </div>\n      }\n    </div>\n\n    <!-- Thumb max (derecho) -->\n    <div\n      class=\"sui-slider__thumb\"\n      [class.sui-slider__thumb--zero]=\"!rangeMaxColored()\"\n      [style.left.%]=\"maxPct()\"\n      role=\"slider\"\n      [attr.aria-valuemin]=\"effectiveMin()\"\n      [attr.aria-valuemax]=\"max()\"\n      [attr.aria-valuenow]=\"effectiveMax()\"\n      [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n      [attr.tabindex]=\"isDisabled() ? '-1' : '0'\"\n      (keydown)=\"onThumbKeydown($event, 'max')\"\n      (pointerenter)=\"onThumbEnter('max')\"\n      (pointerleave)=\"onThumbLeave()\"\n      (touchstart)=\"$event.currentTarget\"\n      (touchend)=\"$any($event.currentTarget).blur()\"\n    >\n      <span class=\"sui-slider__dot\"></span>\n      @if (showMaxTooltip()) {\n        <div class=\"sui-slider__tooltip\">\n          <span class=\"sui-slider__tooltip-text\">{{ effectiveMax() }}</span>\n          <span class=\"sui-slider__tooltip-tail\"></span>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;align-items:stretch;gap:4px;width:100%;box-sizing:border-box;font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;-webkit-user-select:none;user-select:none}.sui-slider__label-row{display:flex;align-items:flex-start;gap:2px;width:100%;font-size:12px;line-height:16px;font-weight:400}.sui-slider__label{color:var(--sui-text-sub-600);white-space:nowrap}.sui-slider__sublabel{color:var(--sui-text-soft-400);white-space:nowrap}.sui-slider__amount{flex:1 0 0;min-width:0;text-align:right;color:var(--sui-text-sub-600)}.sui-slider__track{position:relative;width:100%;height:16px;cursor:pointer;touch-action:none}.sui-slider__bg{position:absolute;left:0;right:0;top:5px;height:6px;border-radius:var(--sui-radius-full);background:var(--sui-bg-soft-200)}.sui-slider__progress{position:absolute;left:0;top:5px;height:6px;border-radius:var(--sui-radius-full);background:var(--sui-primary-base)}.sui-slider__thumb{position:absolute;top:50%;width:16px;height:16px;margin-left:-8px;transform:translateY(-50%);border-radius:50%;background:var(--sui-static-white, #ffffff);filter:drop-shadow(0px 6px 5px rgba(14,18,27,.06)) drop-shadow(0px 2px 2px rgba(14,18,27,.03));display:flex;align-items:center;justify-content:center;cursor:grab;outline:none;box-sizing:border-box}.sui-slider__thumb:active{cursor:grabbing}.sui-slider__thumb--range-min{margin-left:-5px}.sui-slider__thumb:focus-visible{box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-base)}.sui-slider__dot{width:6px;height:6px;border-radius:50%;background:var(--sui-primary-base);box-sizing:border-box}.sui-slider__thumb--zero .sui-slider__dot{background:var(--sui-bg-soft-200)}.sui-slider__tooltip{position:absolute;left:50%;top:-28px;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;pointer-events:none;z-index:2}.sui-slider__tooltip-text{display:flex;align-items:center;justify-content:center;padding:2px 6px;border-radius:var(--sui-radius-4);background:var(--sui-bg-strong-950);color:var(--sui-text-white-0);font-size:12px;line-height:16px;font-weight:400;white-space:nowrap;box-shadow:0 12px 24px #0e121b0f,0 1px 2px #0e121b08}.sui-slider__tooltip-tail{width:8px;height:4px;background:var(--sui-bg-strong-950);clip-path:polygon(0 0,100% 0,50% 100%)}:host([data-sui-disabled]){cursor:not-allowed}:host([data-sui-disabled]) .sui-slider__track{cursor:not-allowed}:host([data-sui-disabled]) .sui-slider__thumb{cursor:not-allowed}:host([data-sui-disabled]) .sui-slider__progress{background:var(--sui-text-disabled-300)}:host([data-sui-disabled]) .sui-slider__dot{background:var(--sui-text-disabled-300)}:host([data-sui-disabled]) .sui-slider__label,:host([data-sui-disabled]) .sui-slider__amount{color:var(--sui-text-disabled-300)}\n"] }]
-        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], sublabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sublabel", required: false }] }], amount: [{ type: i0.Input, args: [{ isSignal: true, alias: "amount", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], tooltipAlways: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipAlways", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], minValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "minValue", required: false }] }], minValueChange: [{ type: i0.Output, args: ["minValueChange"] }], maxValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxValue", required: false }] }], maxValueChange: [{ type: i0.Output, args: ["maxValueChange"] }] } });
+                    }, template: "@if (label()) {\n  <div class=\"sui-slider__label-row\">\n    <span class=\"sui-slider__label\">{{ label() }}</span>\n    @if (sublabel()) {\n      <span class=\"sui-slider__sublabel\">{{ sublabel() }}</span>\n    }\n    <span class=\"sui-slider__amount\">{{ amountText() }}</span>\n  </div>\n}\n\n<div\n  class=\"sui-slider__track\"\n  (pointerdown)=\"onTrackPointerDown($event)\"\n  (pointermove)=\"onPointerMove($event)\"\n  (pointerup)=\"onPointerUp()\"\n  (pointercancel)=\"onPointerUp()\"\n>\n  <!-- BG track -->\n  <div class=\"sui-slider__bg\"></div>\n\n  @if (type() === 'single') {\n    <!-- Progress fill 0 \u2192 value -->\n    <div class=\"sui-slider__progress\" [style.width.%]=\"valuePct()\"></div>\n\n    <!-- Thumb \u00FAnico -->\n    <div\n      class=\"sui-slider__thumb\"\n      [class.sui-slider__thumb--zero]=\"!singleHasProgress()\"\n      [style.left.%]=\"valuePct()\"\n      role=\"slider\"\n      [attr.aria-valuemin]=\"min()\"\n      [attr.aria-valuemax]=\"max()\"\n      [attr.aria-valuenow]=\"effectiveValue()\"\n      [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n      [attr.tabindex]=\"isDisabled() ? '-1' : '0'\"\n      (keydown)=\"onThumbKeydown($event, 'single')\"\n      (pointerenter)=\"onThumbEnter('single')\"\n      (pointerleave)=\"onThumbLeave()\"\n      (touchstart)=\"$event.currentTarget\"\n      (touchend)=\"$any($event.currentTarget).blur()\"\n    >\n      <span class=\"sui-slider__dot\"></span>\n      @if (showSingleTooltip()) {\n        <div class=\"sui-slider__tooltip\">\n          <span class=\"sui-slider__tooltip-text\">{{ effectiveValue() }}</span>\n          <span class=\"sui-slider__tooltip-tail\"></span>\n        </div>\n      }\n    </div>\n  } @else {\n    <!-- Progress fill min \u2192 max -->\n    <div\n      class=\"sui-slider__progress\"\n      [style.left.%]=\"minPct()\"\n      [style.width.%]=\"maxPct() - minPct()\"\n    ></div>\n\n    <!-- Thumb min (izquierdo) -->\n    <div\n      class=\"sui-slider__thumb sui-slider__thumb--range-min\"\n      [class.sui-slider__thumb--zero]=\"!rangeMinColored()\"\n      [style.left.%]=\"minPct()\"\n      role=\"slider\"\n      [attr.aria-valuemin]=\"min()\"\n      [attr.aria-valuemax]=\"effectiveMax()\"\n      [attr.aria-valuenow]=\"effectiveMin()\"\n      [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n      [attr.tabindex]=\"isDisabled() ? '-1' : '0'\"\n      (keydown)=\"onThumbKeydown($event, 'min')\"\n      (pointerenter)=\"onThumbEnter('min')\"\n      (pointerleave)=\"onThumbLeave()\"\n      (touchstart)=\"$event.currentTarget\"\n      (touchend)=\"$any($event.currentTarget).blur()\"\n    >\n      <span class=\"sui-slider__dot\"></span>\n      @if (showMinTooltip()) {\n        <div class=\"sui-slider__tooltip\">\n          <span class=\"sui-slider__tooltip-text\">{{ effectiveMin() }}</span>\n          <span class=\"sui-slider__tooltip-tail\"></span>\n        </div>\n      }\n    </div>\n\n    <!-- Thumb max (derecho) -->\n    <div\n      class=\"sui-slider__thumb\"\n      [class.sui-slider__thumb--zero]=\"!rangeMaxColored()\"\n      [style.left.%]=\"maxPct()\"\n      role=\"slider\"\n      [attr.aria-valuemin]=\"effectiveMin()\"\n      [attr.aria-valuemax]=\"max()\"\n      [attr.aria-valuenow]=\"effectiveMax()\"\n      [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n      [attr.tabindex]=\"isDisabled() ? '-1' : '0'\"\n      (keydown)=\"onThumbKeydown($event, 'max')\"\n      (pointerenter)=\"onThumbEnter('max')\"\n      (pointerleave)=\"onThumbLeave()\"\n      (touchstart)=\"$event.currentTarget\"\n      (touchend)=\"$any($event.currentTarget).blur()\"\n    >\n      <span class=\"sui-slider__dot\"></span>\n      @if (showMaxTooltip()) {\n        <div class=\"sui-slider__tooltip\">\n          <span class=\"sui-slider__tooltip-text\">{{ effectiveMax() }}</span>\n          <span class=\"sui-slider__tooltip-tail\"></span>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;align-items:stretch;gap:4px;width:100%;box-sizing:border-box;font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;-webkit-user-select:none;user-select:none}.sui-slider__label-row{display:flex;align-items:flex-start;gap:2px;width:100%;font-size:12px;line-height:16px;font-weight:400}.sui-slider__label{color:var(--sui-text-sub-600);white-space:nowrap}.sui-slider__sublabel{color:var(--sui-text-soft-400);white-space:nowrap}.sui-slider__amount{flex:1 0 0;min-width:0;text-align:right;color:var(--sui-text-sub-600)}.sui-slider__track{position:relative;width:100%;height:16px;cursor:pointer;touch-action:none}.sui-slider__bg{position:absolute;left:0;right:0;top:5px;height:6px;border-radius:var(--sui-radius-full);background:var(--sui-bg-soft-200)}.sui-slider__progress{position:absolute;left:0;top:5px;height:6px;border-radius:var(--sui-radius-full);background:var(--sui-primary-base)}.sui-slider__thumb{position:absolute;top:50%;width:16px;height:16px;margin-left:-8px;transform:translateY(-50%);border-radius:50%;background:var(--sui-static-white, #ffffff);filter:drop-shadow(0px 6px 5px rgba(14,18,27,.06)) drop-shadow(0px 2px 2px rgba(14,18,27,.03));display:flex;align-items:center;justify-content:center;cursor:grab;outline:none;box-sizing:border-box}.sui-slider__thumb:active{cursor:grabbing}.sui-slider__thumb--range-min{margin-left:-5px}.sui-slider__thumb:focus-visible{box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-base)}.sui-slider__dot{width:6px;height:6px;border-radius:50%;background:var(--sui-primary-base);box-sizing:border-box}.sui-slider__thumb--zero .sui-slider__dot{background:var(--sui-bg-soft-200)}:host([data-sui-size=large]){gap:8px}:host([data-sui-size=large]) .sui-slider__label-row{font-size:var(--sui-type-paragraph-sm-size);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing)}:host([data-sui-size=large]) .sui-slider__track{height:24px}:host([data-sui-size=large]) .sui-slider__bg,:host([data-sui-size=large]) .sui-slider__progress{top:8px;height:8px}:host([data-sui-size=large]) .sui-slider__thumb{width:24px;height:24px;margin-left:-12px}:host([data-sui-size=large]) .sui-slider__thumb--range-min{margin-left:-9px}:host([data-sui-size=large]) .sui-slider__dot{width:8px;height:8px}.sui-slider__tooltip{position:absolute;left:50%;top:-28px;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;pointer-events:none;z-index:2}.sui-slider__tooltip-text{display:flex;align-items:center;justify-content:center;padding:2px 6px;border-radius:var(--sui-radius-4);background:var(--sui-bg-strong-950);color:var(--sui-text-white-0);font-size:12px;line-height:16px;font-weight:400;white-space:nowrap;box-shadow:0 12px 24px #0e121b0f,0 1px 2px #0e121b08}.sui-slider__tooltip-tail{width:8px;height:4px;background:var(--sui-bg-strong-950);clip-path:polygon(0 0,100% 0,50% 100%)}:host([data-sui-disabled]){cursor:not-allowed}:host([data-sui-disabled]) .sui-slider__track{cursor:not-allowed}:host([data-sui-disabled]) .sui-slider__thumb{cursor:not-allowed}:host([data-sui-disabled]) .sui-slider__progress{background:var(--sui-text-disabled-300)}:host([data-sui-disabled]) .sui-slider__dot{background:var(--sui-text-disabled-300)}:host([data-sui-disabled]) .sui-slider__label,:host([data-sui-disabled]) .sui-slider__amount{color:var(--sui-text-disabled-300)}\n"] }]
+        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], sublabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sublabel", required: false }] }], amount: [{ type: i0.Input, args: [{ isSignal: true, alias: "amount", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], tooltipAlways: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipAlways", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], minValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "minValue", required: false }] }], minValueChange: [{ type: i0.Output, args: ["minValueChange"] }], maxValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxValue", required: false }] }], maxValueChange: [{ type: i0.Output, args: ["maxValueChange"] }] } });
 
 /** Brand color map — exact bg-color por brand cuando style=filled. */
 const BRAND_FILLED_BG = {
@@ -15775,7 +15851,7 @@ 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    [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 });
+    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;flex:1 1 auto;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;flex:none}: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,
@@ -15786,7 +15862,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         '[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    [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"] }]
+                    }, 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;flex:1 1 auto;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;flex:none}: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"] }] } });
 
 /**
@@ -15797,7 +15873,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  *
  * Componente separado del `sui-badge` regular. A diferencia del Badge:
  *   - radius 6 (NO full)
- *   - solo medium size (font Label/X Small 12/16/0)
+ *   - Figma trae solo medium (font Label/X Small 12/16/0); large/xlarge son
+ *     extensión SUI para mobile (ver «Tamaños» abajo)
  *   - solo 2 styles: stroke + light (NO filled/lighter/dark)
  *   - status enum cerrado (5 valores) — cada uno con su icono semántico fijo
  *   - withDot reemplaza el icono por un dot de 6×6 (diámetro 6px) con el color del status
@@ -15837,11 +15914,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  *   - 'information' → state-information + ri-information-fill
  *   - 'disabled'    → state-faded   + ri-forbid-fill
  *
+ * Tamaños — extensión SUI (03-10-2026, pedido del dueño):
+ *   El frame 171:5100 trae 20 símbolos, TODOS Medium (24px). Para mobile se
+ *   sumaron dos más grandes, en la escala del sui-button (28 · 32) y no en la
+ *   del sui-badge (24 · 28): el status-badge ya parte de 24, así que un
+ *   «large 24» no cambiaría nada.
+ *     medium  24 · Label/X Small 12/16 · icono 12 en caja 16 · dot 6 (default, Figma)
+ *     large   28 · Label/Small 14/20   · icono 16 en caja 20 · dot 8
+ *     xlarge  32 · Label/Medium 16/24  · icono 20 en caja 24 · dot 8
+ *   No hay `small`: Figma no lo trae y en web 24 ya es el mínimo legible.
+ *
  * PENDING VERIFY (no críticos):
- *   - Small size del Status Badge: CONFIRMADO que NO existe — el frame 171:5100
- *     contiene 20 símbolos (5 status × 2 styles × 2 withDot), TODOS Medium (24px
- *     de alto). No hay eje Size en este componente. Si el DS agrega Small más
- *     adelante, recién ahí se introduce el input `size`.
  *   - Hover/focus states: CONFIRMADO display-only — el frame no expone ningún
  *     eje de interacción (ni Disabled como estado, salvo el status semántico
  *     'disabled' que es un valor de contenido, no un state CSS).
@@ -15860,6 +15943,16 @@ class SuiStatusBadge {
      * linter trata de parsear como CSS y rompe con valores como "light").
      */
     appearance = input('stroke', ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+    /** Tamaño: medium 24 (default, Figma) · large 28 · xlarge 32 (mobile). */
+    size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Px del glyph del sui-icon interno por tamaño (12 / 16 / 20). */
+    iconSize = computed(() => {
+        switch (this.size()) {
+            case 'xlarge': return 20;
+            case 'large': return 16;
+            default: return 12;
+        }
+    }, ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
     /**
      * Si `true`, reemplaza el icono semántico por un dot 6×6 (diámetro 6px,
      * radio 3px — confirmado en Figma 171:5156) del color del status.
@@ -15892,17 +15985,18 @@ class SuiStatusBadge {
         }
     }, ...(ngDevMode ? [{ debugName: "iconoDelStatus" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiStatusBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiStatusBadge, isStandalone: true, selector: "sui-status-badge", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, withDot: { classPropertyName: "withDot", publicName: "withDot", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-sui-status": "status()", "attr.data-sui-appearance": "appearance()", "attr.data-sui-with-dot": "withDot() ? \"\" : null", "attr.role": "\"status\"" } }, ngImport: i0, template: "@if (withDot()) {\n  <span class=\"sui-status-badge__dot\" aria-hidden=\"true\"></span>\n} @else {\n  <span class=\"sui-status-badge__icon\" aria-hidden=\"true\">\n    <sui-icon [name]=\"iconName()\" [size]=\"12\" />\n  </span>\n}\n<span class=\"sui-status-badge__label\"><ng-content></ng-content></span>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;box-sizing:border-box;height:24px;padding:4px 8px 4px 4px;border:1px solid transparent;border-radius:var(--sui-radius-6);font-family:var(--sui-font-sans);font-size:var(--sui-type-label-xs-size);font-weight:var(--sui-type-label-xs-weight);line-height:var(--sui-type-label-xs-line);letter-spacing:var(--sui-type-label-xs-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;white-space:nowrap;vertical-align:middle;overflow:clip;gap:4px}:host([data-sui-with-dot]){gap:2px}.sui-status-badge__icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0}.sui-status-badge__dot{display:inline-block;width:16px;height:16px;flex-shrink:0;background-image:radial-gradient(circle at center,currentColor 0,currentColor 3px,transparent 3.5px)}.sui-status-badge__label{display:inline-flex;align-items:center}:host([data-sui-status=completed][data-sui-appearance=stroke]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-state-success-base)}:host([data-sui-status=completed][data-sui-appearance=stroke]) .sui-status-badge__label{color:var(--sui-text-sub-600)}:host([data-sui-status=completed][data-sui-appearance=light]){background:var(--sui-state-success-lighter);border-color:transparent;color:var(--sui-state-success-base)}:host([data-sui-status=completed][data-sui-appearance=light]) .sui-status-badge__label{color:var(--sui-state-success-base)}:host([data-sui-status=pending][data-sui-appearance=stroke]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-state-warning-base)}:host([data-sui-status=pending][data-sui-appearance=stroke]) .sui-status-badge__label{color:var(--sui-text-sub-600)}:host([data-sui-status=pending][data-sui-appearance=light]){background:var(--sui-state-warning-lighter);border-color:transparent;color:var(--sui-state-warning-base)}:host([data-sui-status=pending][data-sui-appearance=light]) .sui-status-badge__label{color:var(--sui-state-warning-base)}:host([data-sui-status=failed][data-sui-appearance=stroke]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-state-error-base)}:host([data-sui-status=failed][data-sui-appearance=stroke]) .sui-status-badge__label{color:var(--sui-text-sub-600)}:host([data-sui-status=failed][data-sui-appearance=light]){background:var(--sui-state-error-lighter);border-color:transparent;color:var(--sui-state-error-base)}:host([data-sui-status=failed][data-sui-appearance=light]) .sui-status-badge__label{color:var(--sui-state-error-base)}:host([data-sui-status=information][data-sui-appearance=stroke]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-state-information-base)}:host([data-sui-status=information][data-sui-appearance=stroke]) .sui-status-badge__label{color:var(--sui-text-sub-600)}:host([data-sui-status=information][data-sui-appearance=light]){background:var(--sui-state-information-lighter);border-color:transparent;color:var(--sui-state-information-base)}:host([data-sui-status=information][data-sui-appearance=light]) .sui-status-badge__label{color:var(--sui-state-information-base)}:host([data-sui-status=disabled][data-sui-appearance=stroke]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-state-faded-base)}:host([data-sui-status=disabled][data-sui-appearance=stroke]) .sui-status-badge__label{color:var(--sui-text-sub-600)}:host([data-sui-status=disabled][data-sui-appearance=light]){background:var(--sui-state-faded-lighter);border-color:transparent;color:var(--sui-state-faded-base)}:host([data-sui-status=disabled][data-sui-appearance=light]) .sui-status-badge__label{color:var(--sui-state-faded-base)}:host([data-sui-status=disabled][data-sui-appearance=light]) .sui-status-badge__label{color:var(--sui-text-sub-600)}\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: SuiStatusBadge, isStandalone: true, selector: "sui-status-badge", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, withDot: { classPropertyName: "withDot", publicName: "withDot", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-sui-status": "status()", "attr.data-sui-appearance": "appearance()", "attr.data-sui-size": "size()", "attr.data-sui-with-dot": "withDot() ? \"\" : null", "attr.role": "\"status\"" } }, ngImport: i0, template: "@if (withDot()) {\n  <span class=\"sui-status-badge__dot\" aria-hidden=\"true\"></span>\n} @else {\n  <span class=\"sui-status-badge__icon\" aria-hidden=\"true\">\n    <sui-icon [name]=\"iconName()\" [size]=\"iconSize()\" />\n  </span>\n}\n<span class=\"sui-status-badge__label\"><ng-content></ng-content></span>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;box-sizing:border-box;height:24px;padding:4px 8px 4px 4px;border:1px solid transparent;border-radius:var(--sui-radius-6);font-family:var(--sui-font-sans);font-size:var(--sui-type-label-xs-size);font-weight:var(--sui-type-label-xs-weight);line-height:var(--sui-type-label-xs-line);letter-spacing:var(--sui-type-label-xs-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;white-space:nowrap;vertical-align:middle;overflow:clip;gap:4px}:host([data-sui-with-dot]){gap:2px}.sui-status-badge__icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0}.sui-status-badge__dot{display:inline-block;width:16px;height:16px;flex-shrink:0;background-image:radial-gradient(circle at center,currentColor 0,currentColor 3px,transparent 3.5px)}.sui-status-badge__label{display:inline-flex;align-items:center}:host([data-sui-size=large]){height:28px;padding:4px 10px 4px 6px;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)}:host([data-sui-size=xlarge]){height:32px;padding:4px 12px 4px 6px;font-size:var(--sui-type-label-md-size);font-weight:var(--sui-type-label-md-weight);line-height:var(--sui-type-label-md-line);letter-spacing:var(--sui-type-label-md-spacing)}:host([data-sui-size=large]) .sui-status-badge__icon,:host([data-sui-size=large]) .sui-status-badge__dot{width:20px;height:20px}:host([data-sui-size=xlarge]) .sui-status-badge__icon,:host([data-sui-size=xlarge]) .sui-status-badge__dot{width:24px;height:24px}:host([data-sui-size=large]) .sui-status-badge__dot,:host([data-sui-size=xlarge]) .sui-status-badge__dot{background-image:radial-gradient(circle at center,currentColor 0,currentColor 4px,transparent 4.5px)}:host([data-sui-status=completed][data-sui-appearance=stroke]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-state-success-base)}:host([data-sui-status=completed][data-sui-appearance=stroke]) .sui-status-badge__label{color:var(--sui-text-sub-600)}:host([data-sui-status=completed][data-sui-appearance=light]){background:var(--sui-state-success-lighter);border-color:transparent;color:var(--sui-state-success-base)}:host([data-sui-status=completed][data-sui-appearance=light]) .sui-status-badge__label{color:var(--sui-state-success-base)}:host([data-sui-status=pending][data-sui-appearance=stroke]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-state-warning-base)}:host([data-sui-status=pending][data-sui-appearance=stroke]) .sui-status-badge__label{color:var(--sui-text-sub-600)}:host([data-sui-status=pending][data-sui-appearance=light]){background:var(--sui-state-warning-lighter);border-color:transparent;color:var(--sui-state-warning-base)}:host([data-sui-status=pending][data-sui-appearance=light]) .sui-status-badge__label{color:var(--sui-state-warning-base)}:host([data-sui-status=failed][data-sui-appearance=stroke]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-state-error-base)}:host([data-sui-status=failed][data-sui-appearance=stroke]) .sui-status-badge__label{color:var(--sui-text-sub-600)}:host([data-sui-status=failed][data-sui-appearance=light]){background:var(--sui-state-error-lighter);border-color:transparent;color:var(--sui-state-error-base)}:host([data-sui-status=failed][data-sui-appearance=light]) .sui-status-badge__label{color:var(--sui-state-error-base)}:host([data-sui-status=information][data-sui-appearance=stroke]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-state-information-base)}:host([data-sui-status=information][data-sui-appearance=stroke]) .sui-status-badge__label{color:var(--sui-text-sub-600)}:host([data-sui-status=information][data-sui-appearance=light]){background:var(--sui-state-information-lighter);border-color:transparent;color:var(--sui-state-information-base)}:host([data-sui-status=information][data-sui-appearance=light]) .sui-status-badge__label{color:var(--sui-state-information-base)}:host([data-sui-status=disabled][data-sui-appearance=stroke]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-state-faded-base)}:host([data-sui-status=disabled][data-sui-appearance=stroke]) .sui-status-badge__label{color:var(--sui-text-sub-600)}:host([data-sui-status=disabled][data-sui-appearance=light]){background:var(--sui-state-faded-lighter);border-color:transparent;color:var(--sui-state-faded-base)}:host([data-sui-status=disabled][data-sui-appearance=light]) .sui-status-badge__label{color:var(--sui-state-faded-base)}:host([data-sui-status=disabled][data-sui-appearance=light]) .sui-status-badge__label{color:var(--sui-text-sub-600)}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiStatusBadge, decorators: [{
             type: Component,
             args: [{ selector: 'sui-status-badge', standalone: true, imports: [SuiIcon], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[attr.data-sui-status]': 'status()',
                         '[attr.data-sui-appearance]': 'appearance()',
+                        '[attr.data-sui-size]': 'size()',
                         '[attr.data-sui-with-dot]': 'withDot() ? "" : null',
                         '[attr.role]': '"status"',
-                    }, template: "@if (withDot()) {\n  <span class=\"sui-status-badge__dot\" aria-hidden=\"true\"></span>\n} @else {\n  <span class=\"sui-status-badge__icon\" aria-hidden=\"true\">\n    <sui-icon [name]=\"iconName()\" [size]=\"12\" />\n  </span>\n}\n<span class=\"sui-status-badge__label\"><ng-content></ng-content></span>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;box-sizing:border-box;height:24px;padding:4px 8px 4px 4px;border:1px solid transparent;border-radius:var(--sui-radius-6);font-family:var(--sui-font-sans);font-size:var(--sui-type-label-xs-size);font-weight:var(--sui-type-label-xs-weight);line-height:var(--sui-type-label-xs-line);letter-spacing:var(--sui-type-label-xs-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;white-space:nowrap;vertical-align:middle;overflow:clip;gap:4px}:host([data-sui-with-dot]){gap:2px}.sui-status-badge__icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0}.sui-status-badge__dot{display:inline-block;width:16px;height:16px;flex-shrink:0;background-image:radial-gradient(circle at center,currentColor 0,currentColor 3px,transparent 3.5px)}.sui-status-badge__label{display:inline-flex;align-items:center}:host([data-sui-status=completed][data-sui-appearance=stroke]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-state-success-base)}:host([data-sui-status=completed][data-sui-appearance=stroke]) .sui-status-badge__label{color:var(--sui-text-sub-600)}:host([data-sui-status=completed][data-sui-appearance=light]){background:var(--sui-state-success-lighter);border-color:transparent;color:var(--sui-state-success-base)}:host([data-sui-status=completed][data-sui-appearance=light]) .sui-status-badge__label{color:var(--sui-state-success-base)}:host([data-sui-status=pending][data-sui-appearance=stroke]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-state-warning-base)}:host([data-sui-status=pending][data-sui-appearance=stroke]) .sui-status-badge__label{color:var(--sui-text-sub-600)}:host([data-sui-status=pending][data-sui-appearance=light]){background:var(--sui-state-warning-lighter);border-color:transparent;color:var(--sui-state-warning-base)}:host([data-sui-status=pending][data-sui-appearance=light]) .sui-status-badge__label{color:var(--sui-state-warning-base)}:host([data-sui-status=failed][data-sui-appearance=stroke]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-state-error-base)}:host([data-sui-status=failed][data-sui-appearance=stroke]) .sui-status-badge__label{color:var(--sui-text-sub-600)}:host([data-sui-status=failed][data-sui-appearance=light]){background:var(--sui-state-error-lighter);border-color:transparent;color:var(--sui-state-error-base)}:host([data-sui-status=failed][data-sui-appearance=light]) .sui-status-badge__label{color:var(--sui-state-error-base)}:host([data-sui-status=information][data-sui-appearance=stroke]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-state-information-base)}:host([data-sui-status=information][data-sui-appearance=stroke]) .sui-status-badge__label{color:var(--sui-text-sub-600)}:host([data-sui-status=information][data-sui-appearance=light]){background:var(--sui-state-information-lighter);border-color:transparent;color:var(--sui-state-information-base)}:host([data-sui-status=information][data-sui-appearance=light]) .sui-status-badge__label{color:var(--sui-state-information-base)}:host([data-sui-status=disabled][data-sui-appearance=stroke]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-state-faded-base)}:host([data-sui-status=disabled][data-sui-appearance=stroke]) .sui-status-badge__label{color:var(--sui-text-sub-600)}:host([data-sui-status=disabled][data-sui-appearance=light]){background:var(--sui-state-faded-lighter);border-color:transparent;color:var(--sui-state-faded-base)}:host([data-sui-status=disabled][data-sui-appearance=light]) .sui-status-badge__label{color:var(--sui-state-faded-base)}:host([data-sui-status=disabled][data-sui-appearance=light]) .sui-status-badge__label{color:var(--sui-text-sub-600)}\n"] }]
-        }], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], withDot: [{ type: i0.Input, args: [{ isSignal: true, alias: "withDot", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }] } });
+                    }, template: "@if (withDot()) {\n  <span class=\"sui-status-badge__dot\" aria-hidden=\"true\"></span>\n} @else {\n  <span class=\"sui-status-badge__icon\" aria-hidden=\"true\">\n    <sui-icon [name]=\"iconName()\" [size]=\"iconSize()\" />\n  </span>\n}\n<span class=\"sui-status-badge__label\"><ng-content></ng-content></span>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;box-sizing:border-box;height:24px;padding:4px 8px 4px 4px;border:1px solid transparent;border-radius:var(--sui-radius-6);font-family:var(--sui-font-sans);font-size:var(--sui-type-label-xs-size);font-weight:var(--sui-type-label-xs-weight);line-height:var(--sui-type-label-xs-line);letter-spacing:var(--sui-type-label-xs-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;white-space:nowrap;vertical-align:middle;overflow:clip;gap:4px}:host([data-sui-with-dot]){gap:2px}.sui-status-badge__icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0}.sui-status-badge__dot{display:inline-block;width:16px;height:16px;flex-shrink:0;background-image:radial-gradient(circle at center,currentColor 0,currentColor 3px,transparent 3.5px)}.sui-status-badge__label{display:inline-flex;align-items:center}:host([data-sui-size=large]){height:28px;padding:4px 10px 4px 6px;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)}:host([data-sui-size=xlarge]){height:32px;padding:4px 12px 4px 6px;font-size:var(--sui-type-label-md-size);font-weight:var(--sui-type-label-md-weight);line-height:var(--sui-type-label-md-line);letter-spacing:var(--sui-type-label-md-spacing)}:host([data-sui-size=large]) .sui-status-badge__icon,:host([data-sui-size=large]) .sui-status-badge__dot{width:20px;height:20px}:host([data-sui-size=xlarge]) .sui-status-badge__icon,:host([data-sui-size=xlarge]) .sui-status-badge__dot{width:24px;height:24px}:host([data-sui-size=large]) .sui-status-badge__dot,:host([data-sui-size=xlarge]) .sui-status-badge__dot{background-image:radial-gradient(circle at center,currentColor 0,currentColor 4px,transparent 4.5px)}:host([data-sui-status=completed][data-sui-appearance=stroke]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-state-success-base)}:host([data-sui-status=completed][data-sui-appearance=stroke]) .sui-status-badge__label{color:var(--sui-text-sub-600)}:host([data-sui-status=completed][data-sui-appearance=light]){background:var(--sui-state-success-lighter);border-color:transparent;color:var(--sui-state-success-base)}:host([data-sui-status=completed][data-sui-appearance=light]) .sui-status-badge__label{color:var(--sui-state-success-base)}:host([data-sui-status=pending][data-sui-appearance=stroke]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-state-warning-base)}:host([data-sui-status=pending][data-sui-appearance=stroke]) .sui-status-badge__label{color:var(--sui-text-sub-600)}:host([data-sui-status=pending][data-sui-appearance=light]){background:var(--sui-state-warning-lighter);border-color:transparent;color:var(--sui-state-warning-base)}:host([data-sui-status=pending][data-sui-appearance=light]) .sui-status-badge__label{color:var(--sui-state-warning-base)}:host([data-sui-status=failed][data-sui-appearance=stroke]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-state-error-base)}:host([data-sui-status=failed][data-sui-appearance=stroke]) .sui-status-badge__label{color:var(--sui-text-sub-600)}:host([data-sui-status=failed][data-sui-appearance=light]){background:var(--sui-state-error-lighter);border-color:transparent;color:var(--sui-state-error-base)}:host([data-sui-status=failed][data-sui-appearance=light]) .sui-status-badge__label{color:var(--sui-state-error-base)}:host([data-sui-status=information][data-sui-appearance=stroke]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-state-information-base)}:host([data-sui-status=information][data-sui-appearance=stroke]) .sui-status-badge__label{color:var(--sui-text-sub-600)}:host([data-sui-status=information][data-sui-appearance=light]){background:var(--sui-state-information-lighter);border-color:transparent;color:var(--sui-state-information-base)}:host([data-sui-status=information][data-sui-appearance=light]) .sui-status-badge__label{color:var(--sui-state-information-base)}:host([data-sui-status=disabled][data-sui-appearance=stroke]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-state-faded-base)}:host([data-sui-status=disabled][data-sui-appearance=stroke]) .sui-status-badge__label{color:var(--sui-text-sub-600)}:host([data-sui-status=disabled][data-sui-appearance=light]){background:var(--sui-state-faded-lighter);border-color:transparent;color:var(--sui-state-faded-base)}:host([data-sui-status=disabled][data-sui-appearance=light]) .sui-status-badge__label{color:var(--sui-state-faded-base)}:host([data-sui-status=disabled][data-sui-appearance=light]) .sui-status-badge__label{color:var(--sui-text-sub-600)}\n"] }]
+        }], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], withDot: [{ type: i0.Input, args: [{ isSignal: true, alias: "withDot", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }] } });
 
 /**
  * SUI Stepper — SUI Design System 2.0
@@ -15932,7 +16026,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * @input count         Cantidad de dots (variant='dot' only). Si se pasan steps,
  *                      tiene precedencia el length de steps.
  * @input currentStep   0-indexed; index < cur = completed, === cur = active, > cur = default
- * @input size          'small' | 'xsmall' — solo aplica a variant='dot'
+ * @input size          'small' | 'xsmall' | 'medium'.
+ *                      small/xsmall (Figma) solo cambian el dot (8 / 4); horizontal y
+ *                      vertical miden igual en los dos (indicador 20).
+ *                      medium — extensión SUI (03-10-2026, pedido del dueño) para
+ *                      mobile — agranda los tres variants: dot 10, indicador 24,
+ *                      número Label/Small (14/20), label Paragraph/Medium (16/24),
+ *                      card vertical de 44 de alto (24 + padding 10×2).
  * @input interactive   Si true, los steps son clickeables y emiten stepClick
  *
  * @output stepClick    Index del step clickeado (solo si interactive=true)
@@ -15981,6 +16081,9 @@ class SuiStepper {
     interactive = input(false, ...(ngDevMode ? [{ debugName: "interactive" }] : /* istanbul ignore next */ []));
     ariaLabel = input('Progreso', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     stepClick = output();
+    /** Ícono del indicador (completed / error): 24 en medium, 20 en los de Figma.
+     *  Es el indicador mismo, por eso crece; separador y chevron se quedan en 20. */
+    indicatorIconPx = computed(() => (this.size() === 'medium' ? 24 : 20), ...(ngDevMode ? [{ debugName: "indicatorIconPx" }] : /* istanbul ignore next */ []));
     /**
      * Vista pre-computada de items. Una sola pasada por cambio de inputs:
      *  - resuelve length: steps.length || count (para variant=dot sin labels)
@@ -16027,7 +16130,7 @@ class SuiStepper {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiStepper, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiStepper, isStandalone: true, selector: "sui-stepper", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, currentStep: { classPropertyName: "currentStep", publicName: "currentStep", isSignal: true, isRequired: false, transformFunction: null }, errorStep: { classPropertyName: "errorStep", publicName: "errorStep", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stepClick: "stepClick" }, host: { properties: { "attr.data-variant": "variant()", "attr.data-size": "size()", "attr.role": "\"list\"", "attr.aria-label": "ariaLabel()" } }, ngImport: i0, template: "@switch (variant()) {\n\n  @case ('dot') {\n    @for (item of items(); track item.index) {\n      @if (interactive()) {\n        <button\n          type=\"button\"\n          class=\"sui-stepper__dot\"\n          [attr.data-state]=\"item.state\"\n          [attr.aria-label]=\"item.label\"\n          [attr.aria-current]=\"item.state === 'active' ? 'step' : null\"\n          (click)=\"onItemClick(item.index)\"\n          (touchstart)=\"$event.currentTarget\"\n          (touchend)=\"$any($event.currentTarget).blur()\">\n        </button>\n      } @else {\n        <span\n          class=\"sui-stepper__dot\"\n          [attr.data-state]=\"item.state\"\n          [attr.aria-current]=\"item.state === 'active' ? 'step' : null\"\n          role=\"listitem\">\n        </span>\n      }\n    }\n  }\n\n  @case ('horizontal') {\n    @for (item of items(); track item.index) {\n      @if (interactive()) {\n        <button\n          type=\"button\"\n          class=\"sui-stepper__h-item\"\n          [attr.data-state]=\"item.state\"\n          [attr.aria-current]=\"item.state === 'active' ? 'step' : null\"\n          (click)=\"onItemClick(item.index)\"\n          (touchstart)=\"$event.currentTarget\"\n          (touchend)=\"$any($event.currentTarget).blur()\">\n          <span class=\"sui-stepper__indicator\">\n            @if (item.state === 'completed') {\n              <sui-icon name=\"checkbox-circle-fill\" [size]=\"20\" />\n            } @else if (item.state === 'error') {\n              <sui-icon name=\"close-circle-fill\" [size]=\"20\" />\n            } @else {\n              <span class=\"sui-stepper__indicator-num\">{{ item.number }}</span>\n            }\n          </span>\n          <span class=\"sui-stepper__label\">{{ item.label }}</span>\n        </button>\n      } @else {\n        <div\n          class=\"sui-stepper__h-item\"\n          [attr.data-state]=\"item.state\"\n          [attr.aria-current]=\"item.state === 'active' ? 'step' : null\"\n          role=\"listitem\">\n          <span class=\"sui-stepper__indicator\">\n            @if (item.state === 'completed') {\n              <sui-icon name=\"checkbox-circle-fill\" [size]=\"20\" />\n            } @else if (item.state === 'error') {\n              <sui-icon name=\"close-circle-fill\" [size]=\"20\" />\n            } @else {\n              <span class=\"sui-stepper__indicator-num\">{{ item.number }}</span>\n            }\n          </span>\n          <span class=\"sui-stepper__label\">{{ item.label }}</span>\n        </div>\n      }\n      @if (!item.isLast) {\n        <span class=\"sui-stepper__separator\" aria-hidden=\"true\">\n          <sui-icon name=\"arrow-right-s-line\" [size]=\"20\" />\n        </span>\n      }\n    }\n  }\n\n  @case ('vertical') {\n    @for (item of items(); track item.index) {\n      @if (interactive()) {\n        <button\n          type=\"button\"\n          class=\"sui-stepper__v-item\"\n          [attr.data-state]=\"item.state\"\n          [attr.aria-current]=\"item.state === 'active' ? 'step' : null\"\n          (click)=\"onItemClick(item.index)\"\n          (touchstart)=\"$event.currentTarget\"\n          (touchend)=\"$any($event.currentTarget).blur()\">\n          <span class=\"sui-stepper__indicator\">\n            @if (item.state === 'completed') {\n              <sui-icon name=\"checkbox-circle-fill\" [size]=\"20\" />\n            } @else if (item.state === 'error') {\n              <sui-icon name=\"close-circle-fill\" [size]=\"20\" />\n            } @else {\n              <span class=\"sui-stepper__indicator-num\">{{ item.number }}</span>\n            }\n          </span>\n          <span class=\"sui-stepper__label\">{{ item.label }}</span>\n          @if (item.state === 'active') {\n            <span class=\"sui-stepper__chevron\" aria-hidden=\"true\">\n              <sui-icon name=\"arrow-right-s-line\" [size]=\"20\" />\n            </span>\n          }\n        </button>\n      } @else {\n        <div\n          class=\"sui-stepper__v-item\"\n          [attr.data-state]=\"item.state\"\n          [attr.aria-current]=\"item.state === 'active' ? 'step' : null\"\n          role=\"listitem\">\n          <span class=\"sui-stepper__indicator\">\n            @if (item.state === 'completed') {\n              <sui-icon name=\"checkbox-circle-fill\" [size]=\"20\" />\n            } @else if (item.state === 'error') {\n              <sui-icon name=\"close-circle-fill\" [size]=\"20\" />\n            } @else {\n              <span class=\"sui-stepper__indicator-num\">{{ item.number }}</span>\n            }\n          </span>\n          <span class=\"sui-stepper__label\">{{ item.label }}</span>\n          @if (item.state === 'active') {\n            <span class=\"sui-stepper__chevron\" aria-hidden=\"true\">\n              <sui-icon name=\"arrow-right-s-line\" [size]=\"20\" />\n            </span>\n          }\n        </div>\n      }\n    }\n  }\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;font-family:var(--sui-font-sans)}:host([data-variant=dot]){align-items:center;flex-wrap:wrap;gap:10px}:host([data-variant=dot][data-size=xsmall]){gap:6px}.sui-stepper__dot{appearance:none;border:0;padding:0;margin:0;background:transparent;cursor:default;font:inherit;display:inline-block;width:8px;height:8px;border-radius:999px;background:var(--sui-bg-soft-200);flex-shrink:0;transition:background-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}.sui-stepper__dot[data-state=active]{background:var(--sui-primary-base)}:host([data-variant=dot][data-size=xsmall]) .sui-stepper__dot{width:4px;height:4px}:host([data-variant=dot]) button.sui-stepper__dot{cursor:pointer}:host([data-variant=dot]) button.sui-stepper__dot:focus-visible{outline:2px solid var(--sui-text-strong-950);outline-offset:2px}:host([data-variant=horizontal]){align-items:center;flex-wrap:wrap;gap:16px}.sui-stepper__h-item{appearance:none;border:0;padding:0;margin:0;background:transparent;font:inherit;text-align:left;display:inline-flex;align-items:center;gap:8px;flex-shrink:0;cursor:default}.sui-stepper__h-item[data-state=active] .sui-stepper__label,.sui-stepper__h-item[data-state=completed] .sui-stepper__label{color:var(--sui-text-strong-950)}:host([data-variant=horizontal]) button.sui-stepper__h-item{cursor:pointer}:host([data-variant=horizontal]) button.sui-stepper__h-item:focus-visible{outline:2px solid var(--sui-text-strong-950);outline-offset:2px;border-radius:6px}.sui-stepper__separator{display:inline-flex;align-items:center;color:var(--sui-icon-soft-400);flex-shrink:0}:host([data-variant=vertical]){flex-direction:column;align-items:stretch;gap:8px;width:100%}.sui-stepper__v-item{appearance:none;border:0;margin:0;font:inherit;text-align:left;display:flex;align-items:center;gap:10px;padding:8px;border-radius:var(--sui-radius-10);background:var(--sui-bg-weak-50);width:100%;cursor:default;transition:background-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)}.sui-stepper__v-item[data-state=active]{background:var(--sui-bg-white-0);box-shadow:var(--sui-regular-shadow-x-small)}.sui-stepper__v-item[data-state=active] .sui-stepper__label{color:var(--sui-text-strong-950)}.sui-stepper__v-item[data-state=completed] .sui-stepper__label{color:var(--sui-text-sub-600)}:host([data-variant=vertical]) button.sui-stepper__v-item{cursor:pointer}:host([data-variant=vertical]) button.sui-stepper__v-item:focus-visible{outline:2px solid var(--sui-text-strong-950);outline-offset:2px}.sui-stepper__chevron{display:inline-flex;align-items:center;color:var(--sui-icon-sub-600);flex-shrink:0;margin-left:auto}.sui-stepper__indicator{width:20px;height:20px;border-radius:var(--sui-radius-full);display:inline-flex;align-items:center;justify-content:center;background:var(--sui-bg-white-0);flex-shrink:0;overflow:clip;box-shadow:inset 0 0 0 1px var(--sui-stroke-soft-200);transition:background-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)}[data-state=active] .sui-stepper__indicator{background:var(--sui-primary-base);box-shadow:none}[data-state=completed] .sui-stepper__indicator{background:transparent;box-shadow:none;color:var(--sui-state-success-base)}[data-state=error] .sui-stepper__indicator{background:transparent;box-shadow:none;color:var(--sui-state-error-base)}[data-state=error] .sui-stepper__label{color:var(--sui-state-error-base)}:host([data-variant=vertical]) .sui-stepper__v-item[data-state=default] .sui-stepper__indicator{box-shadow:var(--sui-regular-shadow-x-small)}.sui-stepper__indicator-num{font-size:var(--sui-type-label-xs-size);font-weight:var(--sui-type-label-xs-weight);line-height:var(--sui-type-label-xs-line);letter-spacing:var(--sui-type-label-xs-spacing);color:var(--sui-text-sub-600);text-align:center;width:16px;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}[data-state=active] .sui-stepper__indicator-num{color:var(--sui-static-white, #ffffff)}.sui-stepper__label{font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-sub-600);white-space:nowrap;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}:host([data-variant=vertical]) .sui-stepper__label{white-space:normal;flex:1 0 0;min-width:0}\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: SuiStepper, isStandalone: true, selector: "sui-stepper", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, currentStep: { classPropertyName: "currentStep", publicName: "currentStep", isSignal: true, isRequired: false, transformFunction: null }, errorStep: { classPropertyName: "errorStep", publicName: "errorStep", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stepClick: "stepClick" }, host: { properties: { "attr.data-variant": "variant()", "attr.data-size": "size()", "attr.role": "\"list\"", "attr.aria-label": "ariaLabel()" } }, ngImport: i0, template: "@switch (variant()) {\n\n  @case ('dot') {\n    @for (item of items(); track item.index) {\n      @if (interactive()) {\n        <button\n          type=\"button\"\n          class=\"sui-stepper__dot\"\n          [attr.data-state]=\"item.state\"\n          [attr.aria-label]=\"item.label\"\n          [attr.aria-current]=\"item.state === 'active' ? 'step' : null\"\n          (click)=\"onItemClick(item.index)\"\n          (touchstart)=\"$event.currentTarget\"\n          (touchend)=\"$any($event.currentTarget).blur()\">\n        </button>\n      } @else {\n        <span\n          class=\"sui-stepper__dot\"\n          [attr.data-state]=\"item.state\"\n          [attr.aria-current]=\"item.state === 'active' ? 'step' : null\"\n          role=\"listitem\">\n        </span>\n      }\n    }\n  }\n\n  @case ('horizontal') {\n    @for (item of items(); track item.index) {\n      @if (interactive()) {\n        <button\n          type=\"button\"\n          class=\"sui-stepper__h-item\"\n          [attr.data-state]=\"item.state\"\n          [attr.aria-current]=\"item.state === 'active' ? 'step' : null\"\n          (click)=\"onItemClick(item.index)\"\n          (touchstart)=\"$event.currentTarget\"\n          (touchend)=\"$any($event.currentTarget).blur()\">\n          <span class=\"sui-stepper__indicator\">\n            @if (item.state === 'completed') {\n              <sui-icon name=\"checkbox-circle-fill\" [size]=\"indicatorIconPx()\" />\n            } @else if (item.state === 'error') {\n              <sui-icon name=\"close-circle-fill\" [size]=\"indicatorIconPx()\" />\n            } @else {\n              <span class=\"sui-stepper__indicator-num\">{{ item.number }}</span>\n            }\n          </span>\n          <span class=\"sui-stepper__label\">{{ item.label }}</span>\n        </button>\n      } @else {\n        <div\n          class=\"sui-stepper__h-item\"\n          [attr.data-state]=\"item.state\"\n          [attr.aria-current]=\"item.state === 'active' ? 'step' : null\"\n          role=\"listitem\">\n          <span class=\"sui-stepper__indicator\">\n            @if (item.state === 'completed') {\n              <sui-icon name=\"checkbox-circle-fill\" [size]=\"indicatorIconPx()\" />\n            } @else if (item.state === 'error') {\n              <sui-icon name=\"close-circle-fill\" [size]=\"indicatorIconPx()\" />\n            } @else {\n              <span class=\"sui-stepper__indicator-num\">{{ item.number }}</span>\n            }\n          </span>\n          <span class=\"sui-stepper__label\">{{ item.label }}</span>\n        </div>\n      }\n      @if (!item.isLast) {\n        <span class=\"sui-stepper__separator\" aria-hidden=\"true\">\n          <sui-icon name=\"arrow-right-s-line\" [size]=\"20\" />\n        </span>\n      }\n    }\n  }\n\n  @case ('vertical') {\n    @for (item of items(); track item.index) {\n      @if (interactive()) {\n        <button\n          type=\"button\"\n          class=\"sui-stepper__v-item\"\n          [attr.data-state]=\"item.state\"\n          [attr.aria-current]=\"item.state === 'active' ? 'step' : null\"\n          (click)=\"onItemClick(item.index)\"\n          (touchstart)=\"$event.currentTarget\"\n          (touchend)=\"$any($event.currentTarget).blur()\">\n          <span class=\"sui-stepper__indicator\">\n            @if (item.state === 'completed') {\n              <sui-icon name=\"checkbox-circle-fill\" [size]=\"indicatorIconPx()\" />\n            } @else if (item.state === 'error') {\n              <sui-icon name=\"close-circle-fill\" [size]=\"indicatorIconPx()\" />\n            } @else {\n              <span class=\"sui-stepper__indicator-num\">{{ item.number }}</span>\n            }\n          </span>\n          <span class=\"sui-stepper__label\">{{ item.label }}</span>\n          @if (item.state === 'active') {\n            <span class=\"sui-stepper__chevron\" aria-hidden=\"true\">\n              <sui-icon name=\"arrow-right-s-line\" [size]=\"20\" />\n            </span>\n          }\n        </button>\n      } @else {\n        <div\n          class=\"sui-stepper__v-item\"\n          [attr.data-state]=\"item.state\"\n          [attr.aria-current]=\"item.state === 'active' ? 'step' : null\"\n          role=\"listitem\">\n          <span class=\"sui-stepper__indicator\">\n            @if (item.state === 'completed') {\n              <sui-icon name=\"checkbox-circle-fill\" [size]=\"indicatorIconPx()\" />\n            } @else if (item.state === 'error') {\n              <sui-icon name=\"close-circle-fill\" [size]=\"indicatorIconPx()\" />\n            } @else {\n              <span class=\"sui-stepper__indicator-num\">{{ item.number }}</span>\n            }\n          </span>\n          <span class=\"sui-stepper__label\">{{ item.label }}</span>\n          @if (item.state === 'active') {\n            <span class=\"sui-stepper__chevron\" aria-hidden=\"true\">\n              <sui-icon name=\"arrow-right-s-line\" [size]=\"20\" />\n            </span>\n          }\n        </div>\n      }\n    }\n  }\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;font-family:var(--sui-font-sans)}:host([data-variant=dot]){align-items:center;flex-wrap:wrap;gap:10px}:host([data-variant=dot][data-size=xsmall]){gap:6px}.sui-stepper__dot{appearance:none;border:0;padding:0;margin:0;background:transparent;cursor:default;font:inherit;display:inline-block;width:8px;height:8px;border-radius:999px;background:var(--sui-bg-soft-200);flex-shrink:0;transition:background-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}.sui-stepper__dot[data-state=active]{background:var(--sui-primary-base)}:host([data-variant=dot][data-size=xsmall]) .sui-stepper__dot{width:4px;height:4px}:host([data-variant=dot]) button.sui-stepper__dot{cursor:pointer}:host([data-variant=dot]) button.sui-stepper__dot:focus-visible{outline:2px solid var(--sui-text-strong-950);outline-offset:2px}:host([data-variant=horizontal]){align-items:center;flex-wrap:wrap;gap:16px}.sui-stepper__h-item{appearance:none;border:0;padding:0;margin:0;background:transparent;font:inherit;text-align:left;display:inline-flex;align-items:center;gap:8px;flex-shrink:0;cursor:default}.sui-stepper__h-item[data-state=active] .sui-stepper__label,.sui-stepper__h-item[data-state=completed] .sui-stepper__label{color:var(--sui-text-strong-950)}:host([data-variant=horizontal]) button.sui-stepper__h-item{cursor:pointer}:host([data-variant=horizontal]) button.sui-stepper__h-item:focus-visible{outline:2px solid var(--sui-text-strong-950);outline-offset:2px;border-radius:6px}.sui-stepper__separator{display:inline-flex;align-items:center;color:var(--sui-icon-soft-400);flex-shrink:0}:host([data-variant=vertical]){flex-direction:column;align-items:stretch;gap:8px;width:100%}.sui-stepper__v-item{appearance:none;border:0;margin:0;font:inherit;text-align:left;display:flex;align-items:center;gap:10px;padding:8px;border-radius:var(--sui-radius-10);background:var(--sui-bg-weak-50);width:100%;cursor:default;transition:background-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)}.sui-stepper__v-item[data-state=active]{background:var(--sui-bg-white-0);box-shadow:var(--sui-regular-shadow-x-small)}.sui-stepper__v-item[data-state=active] .sui-stepper__label{color:var(--sui-text-strong-950)}.sui-stepper__v-item[data-state=completed] .sui-stepper__label{color:var(--sui-text-sub-600)}:host([data-variant=vertical]) button.sui-stepper__v-item{cursor:pointer}:host([data-variant=vertical]) button.sui-stepper__v-item:focus-visible{outline:2px solid var(--sui-text-strong-950);outline-offset:2px}.sui-stepper__chevron{display:inline-flex;align-items:center;color:var(--sui-icon-sub-600);flex-shrink:0;margin-left:auto}.sui-stepper__indicator{width:20px;height:20px;border-radius:var(--sui-radius-full);display:inline-flex;align-items:center;justify-content:center;background:var(--sui-bg-white-0);flex-shrink:0;overflow:clip;box-shadow:inset 0 0 0 1px var(--sui-stroke-soft-200);transition:background-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)}[data-state=active] .sui-stepper__indicator{background:var(--sui-primary-base);box-shadow:none}[data-state=completed] .sui-stepper__indicator{background:transparent;box-shadow:none;color:var(--sui-state-success-base)}[data-state=error] .sui-stepper__indicator{background:transparent;box-shadow:none;color:var(--sui-state-error-base)}[data-state=error] .sui-stepper__label{color:var(--sui-state-error-base)}:host([data-variant=vertical]) .sui-stepper__v-item[data-state=default] .sui-stepper__indicator{box-shadow:var(--sui-regular-shadow-x-small)}.sui-stepper__indicator-num{font-size:var(--sui-type-label-xs-size);font-weight:var(--sui-type-label-xs-weight);line-height:var(--sui-type-label-xs-line);letter-spacing:var(--sui-type-label-xs-spacing);color:var(--sui-text-sub-600);text-align:center;width:16px;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}[data-state=active] .sui-stepper__indicator-num{color:var(--sui-static-white, #ffffff)}.sui-stepper__label{font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-sub-600);white-space:nowrap;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}:host([data-variant=vertical]) .sui-stepper__label{white-space:normal;flex:1 0 0;min-width:0}:host([data-variant=dot][data-size=medium]){gap:12px}:host([data-variant=dot][data-size=medium]) .sui-stepper__dot{width:10px;height:10px}:host([data-size=medium]) .sui-stepper__indicator{width:24px;height:24px}:host([data-size=medium]) .sui-stepper__indicator-num{width:20px;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)}:host([data-size=medium]) .sui-stepper__label{font-size:var(--sui-type-paragraph-md-size);font-weight:var(--sui-type-paragraph-md-weight);line-height:var(--sui-type-paragraph-md-line);letter-spacing:var(--sui-type-paragraph-md-spacing)}:host([data-variant=horizontal][data-size=medium]) .sui-stepper__h-item{gap:10px}:host([data-variant=vertical][data-size=medium]) .sui-stepper__v-item{gap:12px;padding:10px;border-radius:var(--sui-radius-12)}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiStepper, decorators: [{
             type: Component,
@@ -16036,7 +16139,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         '[attr.data-size]': 'size()',
                         '[attr.role]': '"list"',
                         '[attr.aria-label]': 'ariaLabel()',
-                    }, template: "@switch (variant()) {\n\n  @case ('dot') {\n    @for (item of items(); track item.index) {\n      @if (interactive()) {\n        <button\n          type=\"button\"\n          class=\"sui-stepper__dot\"\n          [attr.data-state]=\"item.state\"\n          [attr.aria-label]=\"item.label\"\n          [attr.aria-current]=\"item.state === 'active' ? 'step' : null\"\n          (click)=\"onItemClick(item.index)\"\n          (touchstart)=\"$event.currentTarget\"\n          (touchend)=\"$any($event.currentTarget).blur()\">\n        </button>\n      } @else {\n        <span\n          class=\"sui-stepper__dot\"\n          [attr.data-state]=\"item.state\"\n          [attr.aria-current]=\"item.state === 'active' ? 'step' : null\"\n          role=\"listitem\">\n        </span>\n      }\n    }\n  }\n\n  @case ('horizontal') {\n    @for (item of items(); track item.index) {\n      @if (interactive()) {\n        <button\n          type=\"button\"\n          class=\"sui-stepper__h-item\"\n          [attr.data-state]=\"item.state\"\n          [attr.aria-current]=\"item.state === 'active' ? 'step' : null\"\n          (click)=\"onItemClick(item.index)\"\n          (touchstart)=\"$event.currentTarget\"\n          (touchend)=\"$any($event.currentTarget).blur()\">\n          <span class=\"sui-stepper__indicator\">\n            @if (item.state === 'completed') {\n              <sui-icon name=\"checkbox-circle-fill\" [size]=\"20\" />\n            } @else if (item.state === 'error') {\n              <sui-icon name=\"close-circle-fill\" [size]=\"20\" />\n            } @else {\n              <span class=\"sui-stepper__indicator-num\">{{ item.number }}</span>\n            }\n          </span>\n          <span class=\"sui-stepper__label\">{{ item.label }}</span>\n        </button>\n      } @else {\n        <div\n          class=\"sui-stepper__h-item\"\n          [attr.data-state]=\"item.state\"\n          [attr.aria-current]=\"item.state === 'active' ? 'step' : null\"\n          role=\"listitem\">\n          <span class=\"sui-stepper__indicator\">\n            @if (item.state === 'completed') {\n              <sui-icon name=\"checkbox-circle-fill\" [size]=\"20\" />\n            } @else if (item.state === 'error') {\n              <sui-icon name=\"close-circle-fill\" [size]=\"20\" />\n            } @else {\n              <span class=\"sui-stepper__indicator-num\">{{ item.number }}</span>\n            }\n          </span>\n          <span class=\"sui-stepper__label\">{{ item.label }}</span>\n        </div>\n      }\n      @if (!item.isLast) {\n        <span class=\"sui-stepper__separator\" aria-hidden=\"true\">\n          <sui-icon name=\"arrow-right-s-line\" [size]=\"20\" />\n        </span>\n      }\n    }\n  }\n\n  @case ('vertical') {\n    @for (item of items(); track item.index) {\n      @if (interactive()) {\n        <button\n          type=\"button\"\n          class=\"sui-stepper__v-item\"\n          [attr.data-state]=\"item.state\"\n          [attr.aria-current]=\"item.state === 'active' ? 'step' : null\"\n          (click)=\"onItemClick(item.index)\"\n          (touchstart)=\"$event.currentTarget\"\n          (touchend)=\"$any($event.currentTarget).blur()\">\n          <span class=\"sui-stepper__indicator\">\n            @if (item.state === 'completed') {\n              <sui-icon name=\"checkbox-circle-fill\" [size]=\"20\" />\n            } @else if (item.state === 'error') {\n              <sui-icon name=\"close-circle-fill\" [size]=\"20\" />\n            } @else {\n              <span class=\"sui-stepper__indicator-num\">{{ item.number }}</span>\n            }\n          </span>\n          <span class=\"sui-stepper__label\">{{ item.label }}</span>\n          @if (item.state === 'active') {\n            <span class=\"sui-stepper__chevron\" aria-hidden=\"true\">\n              <sui-icon name=\"arrow-right-s-line\" [size]=\"20\" />\n            </span>\n          }\n        </button>\n      } @else {\n        <div\n          class=\"sui-stepper__v-item\"\n          [attr.data-state]=\"item.state\"\n          [attr.aria-current]=\"item.state === 'active' ? 'step' : null\"\n          role=\"listitem\">\n          <span class=\"sui-stepper__indicator\">\n            @if (item.state === 'completed') {\n              <sui-icon name=\"checkbox-circle-fill\" [size]=\"20\" />\n            } @else if (item.state === 'error') {\n              <sui-icon name=\"close-circle-fill\" [size]=\"20\" />\n            } @else {\n              <span class=\"sui-stepper__indicator-num\">{{ item.number }}</span>\n            }\n          </span>\n          <span class=\"sui-stepper__label\">{{ item.label }}</span>\n          @if (item.state === 'active') {\n            <span class=\"sui-stepper__chevron\" aria-hidden=\"true\">\n              <sui-icon name=\"arrow-right-s-line\" [size]=\"20\" />\n            </span>\n          }\n        </div>\n      }\n    }\n  }\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;font-family:var(--sui-font-sans)}:host([data-variant=dot]){align-items:center;flex-wrap:wrap;gap:10px}:host([data-variant=dot][data-size=xsmall]){gap:6px}.sui-stepper__dot{appearance:none;border:0;padding:0;margin:0;background:transparent;cursor:default;font:inherit;display:inline-block;width:8px;height:8px;border-radius:999px;background:var(--sui-bg-soft-200);flex-shrink:0;transition:background-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}.sui-stepper__dot[data-state=active]{background:var(--sui-primary-base)}:host([data-variant=dot][data-size=xsmall]) .sui-stepper__dot{width:4px;height:4px}:host([data-variant=dot]) button.sui-stepper__dot{cursor:pointer}:host([data-variant=dot]) button.sui-stepper__dot:focus-visible{outline:2px solid var(--sui-text-strong-950);outline-offset:2px}:host([data-variant=horizontal]){align-items:center;flex-wrap:wrap;gap:16px}.sui-stepper__h-item{appearance:none;border:0;padding:0;margin:0;background:transparent;font:inherit;text-align:left;display:inline-flex;align-items:center;gap:8px;flex-shrink:0;cursor:default}.sui-stepper__h-item[data-state=active] .sui-stepper__label,.sui-stepper__h-item[data-state=completed] .sui-stepper__label{color:var(--sui-text-strong-950)}:host([data-variant=horizontal]) button.sui-stepper__h-item{cursor:pointer}:host([data-variant=horizontal]) button.sui-stepper__h-item:focus-visible{outline:2px solid var(--sui-text-strong-950);outline-offset:2px;border-radius:6px}.sui-stepper__separator{display:inline-flex;align-items:center;color:var(--sui-icon-soft-400);flex-shrink:0}:host([data-variant=vertical]){flex-direction:column;align-items:stretch;gap:8px;width:100%}.sui-stepper__v-item{appearance:none;border:0;margin:0;font:inherit;text-align:left;display:flex;align-items:center;gap:10px;padding:8px;border-radius:var(--sui-radius-10);background:var(--sui-bg-weak-50);width:100%;cursor:default;transition:background-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)}.sui-stepper__v-item[data-state=active]{background:var(--sui-bg-white-0);box-shadow:var(--sui-regular-shadow-x-small)}.sui-stepper__v-item[data-state=active] .sui-stepper__label{color:var(--sui-text-strong-950)}.sui-stepper__v-item[data-state=completed] .sui-stepper__label{color:var(--sui-text-sub-600)}:host([data-variant=vertical]) button.sui-stepper__v-item{cursor:pointer}:host([data-variant=vertical]) button.sui-stepper__v-item:focus-visible{outline:2px solid var(--sui-text-strong-950);outline-offset:2px}.sui-stepper__chevron{display:inline-flex;align-items:center;color:var(--sui-icon-sub-600);flex-shrink:0;margin-left:auto}.sui-stepper__indicator{width:20px;height:20px;border-radius:var(--sui-radius-full);display:inline-flex;align-items:center;justify-content:center;background:var(--sui-bg-white-0);flex-shrink:0;overflow:clip;box-shadow:inset 0 0 0 1px var(--sui-stroke-soft-200);transition:background-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)}[data-state=active] .sui-stepper__indicator{background:var(--sui-primary-base);box-shadow:none}[data-state=completed] .sui-stepper__indicator{background:transparent;box-shadow:none;color:var(--sui-state-success-base)}[data-state=error] .sui-stepper__indicator{background:transparent;box-shadow:none;color:var(--sui-state-error-base)}[data-state=error] .sui-stepper__label{color:var(--sui-state-error-base)}:host([data-variant=vertical]) .sui-stepper__v-item[data-state=default] .sui-stepper__indicator{box-shadow:var(--sui-regular-shadow-x-small)}.sui-stepper__indicator-num{font-size:var(--sui-type-label-xs-size);font-weight:var(--sui-type-label-xs-weight);line-height:var(--sui-type-label-xs-line);letter-spacing:var(--sui-type-label-xs-spacing);color:var(--sui-text-sub-600);text-align:center;width:16px;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}[data-state=active] .sui-stepper__indicator-num{color:var(--sui-static-white, #ffffff)}.sui-stepper__label{font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-sub-600);white-space:nowrap;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}:host([data-variant=vertical]) .sui-stepper__label{white-space:normal;flex:1 0 0;min-width:0}\n"] }]
+                    }, template: "@switch (variant()) {\n\n  @case ('dot') {\n    @for (item of items(); track item.index) {\n      @if (interactive()) {\n        <button\n          type=\"button\"\n          class=\"sui-stepper__dot\"\n          [attr.data-state]=\"item.state\"\n          [attr.aria-label]=\"item.label\"\n          [attr.aria-current]=\"item.state === 'active' ? 'step' : null\"\n          (click)=\"onItemClick(item.index)\"\n          (touchstart)=\"$event.currentTarget\"\n          (touchend)=\"$any($event.currentTarget).blur()\">\n        </button>\n      } @else {\n        <span\n          class=\"sui-stepper__dot\"\n          [attr.data-state]=\"item.state\"\n          [attr.aria-current]=\"item.state === 'active' ? 'step' : null\"\n          role=\"listitem\">\n        </span>\n      }\n    }\n  }\n\n  @case ('horizontal') {\n    @for (item of items(); track item.index) {\n      @if (interactive()) {\n        <button\n          type=\"button\"\n          class=\"sui-stepper__h-item\"\n          [attr.data-state]=\"item.state\"\n          [attr.aria-current]=\"item.state === 'active' ? 'step' : null\"\n          (click)=\"onItemClick(item.index)\"\n          (touchstart)=\"$event.currentTarget\"\n          (touchend)=\"$any($event.currentTarget).blur()\">\n          <span class=\"sui-stepper__indicator\">\n            @if (item.state === 'completed') {\n              <sui-icon name=\"checkbox-circle-fill\" [size]=\"indicatorIconPx()\" />\n            } @else if (item.state === 'error') {\n              <sui-icon name=\"close-circle-fill\" [size]=\"indicatorIconPx()\" />\n            } @else {\n              <span class=\"sui-stepper__indicator-num\">{{ item.number }}</span>\n            }\n          </span>\n          <span class=\"sui-stepper__label\">{{ item.label }}</span>\n        </button>\n      } @else {\n        <div\n          class=\"sui-stepper__h-item\"\n          [attr.data-state]=\"item.state\"\n          [attr.aria-current]=\"item.state === 'active' ? 'step' : null\"\n          role=\"listitem\">\n          <span class=\"sui-stepper__indicator\">\n            @if (item.state === 'completed') {\n              <sui-icon name=\"checkbox-circle-fill\" [size]=\"indicatorIconPx()\" />\n            } @else if (item.state === 'error') {\n              <sui-icon name=\"close-circle-fill\" [size]=\"indicatorIconPx()\" />\n            } @else {\n              <span class=\"sui-stepper__indicator-num\">{{ item.number }}</span>\n            }\n          </span>\n          <span class=\"sui-stepper__label\">{{ item.label }}</span>\n        </div>\n      }\n      @if (!item.isLast) {\n        <span class=\"sui-stepper__separator\" aria-hidden=\"true\">\n          <sui-icon name=\"arrow-right-s-line\" [size]=\"20\" />\n        </span>\n      }\n    }\n  }\n\n  @case ('vertical') {\n    @for (item of items(); track item.index) {\n      @if (interactive()) {\n        <button\n          type=\"button\"\n          class=\"sui-stepper__v-item\"\n          [attr.data-state]=\"item.state\"\n          [attr.aria-current]=\"item.state === 'active' ? 'step' : null\"\n          (click)=\"onItemClick(item.index)\"\n          (touchstart)=\"$event.currentTarget\"\n          (touchend)=\"$any($event.currentTarget).blur()\">\n          <span class=\"sui-stepper__indicator\">\n            @if (item.state === 'completed') {\n              <sui-icon name=\"checkbox-circle-fill\" [size]=\"indicatorIconPx()\" />\n            } @else if (item.state === 'error') {\n              <sui-icon name=\"close-circle-fill\" [size]=\"indicatorIconPx()\" />\n            } @else {\n              <span class=\"sui-stepper__indicator-num\">{{ item.number }}</span>\n            }\n          </span>\n          <span class=\"sui-stepper__label\">{{ item.label }}</span>\n          @if (item.state === 'active') {\n            <span class=\"sui-stepper__chevron\" aria-hidden=\"true\">\n              <sui-icon name=\"arrow-right-s-line\" [size]=\"20\" />\n            </span>\n          }\n        </button>\n      } @else {\n        <div\n          class=\"sui-stepper__v-item\"\n          [attr.data-state]=\"item.state\"\n          [attr.aria-current]=\"item.state === 'active' ? 'step' : null\"\n          role=\"listitem\">\n          <span class=\"sui-stepper__indicator\">\n            @if (item.state === 'completed') {\n              <sui-icon name=\"checkbox-circle-fill\" [size]=\"indicatorIconPx()\" />\n            } @else if (item.state === 'error') {\n              <sui-icon name=\"close-circle-fill\" [size]=\"indicatorIconPx()\" />\n            } @else {\n              <span class=\"sui-stepper__indicator-num\">{{ item.number }}</span>\n            }\n          </span>\n          <span class=\"sui-stepper__label\">{{ item.label }}</span>\n          @if (item.state === 'active') {\n            <span class=\"sui-stepper__chevron\" aria-hidden=\"true\">\n              <sui-icon name=\"arrow-right-s-line\" [size]=\"20\" />\n            </span>\n          }\n        </div>\n      }\n    }\n  }\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;font-family:var(--sui-font-sans)}:host([data-variant=dot]){align-items:center;flex-wrap:wrap;gap:10px}:host([data-variant=dot][data-size=xsmall]){gap:6px}.sui-stepper__dot{appearance:none;border:0;padding:0;margin:0;background:transparent;cursor:default;font:inherit;display:inline-block;width:8px;height:8px;border-radius:999px;background:var(--sui-bg-soft-200);flex-shrink:0;transition:background-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}.sui-stepper__dot[data-state=active]{background:var(--sui-primary-base)}:host([data-variant=dot][data-size=xsmall]) .sui-stepper__dot{width:4px;height:4px}:host([data-variant=dot]) button.sui-stepper__dot{cursor:pointer}:host([data-variant=dot]) button.sui-stepper__dot:focus-visible{outline:2px solid var(--sui-text-strong-950);outline-offset:2px}:host([data-variant=horizontal]){align-items:center;flex-wrap:wrap;gap:16px}.sui-stepper__h-item{appearance:none;border:0;padding:0;margin:0;background:transparent;font:inherit;text-align:left;display:inline-flex;align-items:center;gap:8px;flex-shrink:0;cursor:default}.sui-stepper__h-item[data-state=active] .sui-stepper__label,.sui-stepper__h-item[data-state=completed] .sui-stepper__label{color:var(--sui-text-strong-950)}:host([data-variant=horizontal]) button.sui-stepper__h-item{cursor:pointer}:host([data-variant=horizontal]) button.sui-stepper__h-item:focus-visible{outline:2px solid var(--sui-text-strong-950);outline-offset:2px;border-radius:6px}.sui-stepper__separator{display:inline-flex;align-items:center;color:var(--sui-icon-soft-400);flex-shrink:0}:host([data-variant=vertical]){flex-direction:column;align-items:stretch;gap:8px;width:100%}.sui-stepper__v-item{appearance:none;border:0;margin:0;font:inherit;text-align:left;display:flex;align-items:center;gap:10px;padding:8px;border-radius:var(--sui-radius-10);background:var(--sui-bg-weak-50);width:100%;cursor:default;transition:background-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)}.sui-stepper__v-item[data-state=active]{background:var(--sui-bg-white-0);box-shadow:var(--sui-regular-shadow-x-small)}.sui-stepper__v-item[data-state=active] .sui-stepper__label{color:var(--sui-text-strong-950)}.sui-stepper__v-item[data-state=completed] .sui-stepper__label{color:var(--sui-text-sub-600)}:host([data-variant=vertical]) button.sui-stepper__v-item{cursor:pointer}:host([data-variant=vertical]) button.sui-stepper__v-item:focus-visible{outline:2px solid var(--sui-text-strong-950);outline-offset:2px}.sui-stepper__chevron{display:inline-flex;align-items:center;color:var(--sui-icon-sub-600);flex-shrink:0;margin-left:auto}.sui-stepper__indicator{width:20px;height:20px;border-radius:var(--sui-radius-full);display:inline-flex;align-items:center;justify-content:center;background:var(--sui-bg-white-0);flex-shrink:0;overflow:clip;box-shadow:inset 0 0 0 1px var(--sui-stroke-soft-200);transition:background-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)}[data-state=active] .sui-stepper__indicator{background:var(--sui-primary-base);box-shadow:none}[data-state=completed] .sui-stepper__indicator{background:transparent;box-shadow:none;color:var(--sui-state-success-base)}[data-state=error] .sui-stepper__indicator{background:transparent;box-shadow:none;color:var(--sui-state-error-base)}[data-state=error] .sui-stepper__label{color:var(--sui-state-error-base)}:host([data-variant=vertical]) .sui-stepper__v-item[data-state=default] .sui-stepper__indicator{box-shadow:var(--sui-regular-shadow-x-small)}.sui-stepper__indicator-num{font-size:var(--sui-type-label-xs-size);font-weight:var(--sui-type-label-xs-weight);line-height:var(--sui-type-label-xs-line);letter-spacing:var(--sui-type-label-xs-spacing);color:var(--sui-text-sub-600);text-align:center;width:16px;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}[data-state=active] .sui-stepper__indicator-num{color:var(--sui-static-white, #ffffff)}.sui-stepper__label{font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-sub-600);white-space:nowrap;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}:host([data-variant=vertical]) .sui-stepper__label{white-space:normal;flex:1 0 0;min-width:0}:host([data-variant=dot][data-size=medium]){gap:12px}:host([data-variant=dot][data-size=medium]) .sui-stepper__dot{width:10px;height:10px}:host([data-size=medium]) .sui-stepper__indicator{width:24px;height:24px}:host([data-size=medium]) .sui-stepper__indicator-num{width:20px;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)}:host([data-size=medium]) .sui-stepper__label{font-size:var(--sui-type-paragraph-md-size);font-weight:var(--sui-type-paragraph-md-weight);line-height:var(--sui-type-paragraph-md-line);letter-spacing:var(--sui-type-paragraph-md-spacing)}:host([data-variant=horizontal][data-size=medium]) .sui-stepper__h-item{gap:10px}:host([data-variant=vertical][data-size=medium]) .sui-stepper__v-item{gap:12px;padding:10px;border-radius:var(--sui-radius-12)}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: false }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], currentStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentStep", required: false }] }], errorStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStep", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], stepClick: [{ type: i0.Output, args: ["stepClick"] }] } });
 
 /**
@@ -16361,6 +16464,13 @@ class SuiProductCard {
     fallback = input(null, ...(ngDevMode ? [{ debugName: "fallback" }] : /* istanbul ignore next */ []));
     /** Texto del tag cuando no está disponible. */
     unavailableLabel = input('Agotado', ...(ngDevMode ? [{ debugName: "unavailableLabel" }] : /* istanbul ignore next */ []));
+    /** Qué hace el botón redondo del pie.
+     *  - `'add'` (default): «+» para agregar al carrito (y stepper si ya está).
+     *  - `'edit'`: lápiz para editar el producto — la grilla del DUEÑO del local
+     *    usa la misma tarjeta que su cliente, pero ahí el botón edita. El lápiz
+     *    se ve SIEMPRE: también con `available=false` (el agotado es justo el
+     *    que el dueño quiere tocar) y sin que `closed` lo apague. Nunca stepper. */
+    action = input('add', ...(ngDevMode ? [{ debugName: "action" }] : /* istanbul ignore next */ []));
     /** Tap en la card (abrir detalle del producto). */
     openDetail = output();
     /** Tap en el botón "+" (agregar al carrito). */
@@ -16369,8 +16479,10 @@ class SuiProductCard {
     increment = output();
     /** Tap en "−" / basurero del stepper (decrementar / quitar). */
     decrement = output();
+    /** Tap en el lápiz (solo con `action="edit"`). */
+    edit = output();
     formattedPrice = computed(() => (this.price() ?? 0).toFixed(2), ...(ngDevMode ? [{ debugName: "formattedPrice" }] : /* istanbul ignore next */ []));
-    showStepper = computed(() => this.available() && this.quantity() > 0, ...(ngDevMode ? [{ debugName: "showStepper" }] : /* istanbul ignore next */ []));
+    showStepper = computed(() => this.action() !== 'edit' && this.available() && this.quantity() > 0, ...(ngDevMode ? [{ debugName: "showStepper" }] : /* istanbul ignore next */ []));
     /** Config resuelta de la imagen (string → { url }; `position` default 50).
      *  null = sin imagen → fallback. */
     imageCfg = computed(() => {
@@ -16416,13 +16528,14 @@ class SuiProductCard {
     onAdd(event) { event.stopPropagation(); this.add.emit(); }
     onInc(event) { event.stopPropagation(); this.increment.emit(); }
     onDec(event) { event.stopPropagation(); this.decrement.emit(); }
+    onEdit(event) { event.stopPropagation(); this.edit.emit(); }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiProductCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiProductCard, isStandalone: true, selector: "sui-product-card", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, price: { classPropertyName: "price", publicName: "price", isSignal: true, isRequired: true, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, available: { classPropertyName: "available", publicName: "available", isSignal: true, isRequired: false, transformFunction: null }, quantity: { classPropertyName: "quantity", publicName: "quantity", isSignal: true, isRequired: false, transformFunction: null }, closed: { classPropertyName: "closed", publicName: "closed", isSignal: true, isRequired: false, transformFunction: null }, currencySymbol: { classPropertyName: "currencySymbol", publicName: "currencySymbol", isSignal: true, isRequired: false, transformFunction: null }, fallback: { classPropertyName: "fallback", publicName: "fallback", isSignal: true, isRequired: false, transformFunction: null }, unavailableLabel: { classPropertyName: "unavailableLabel", publicName: "unavailableLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openDetail: "openDetail", add: "add", increment: "increment", decrement: "decrement" }, ngImport: i0, template: "<button type=\"button\"\n        class=\"product\"\n        [class.product--unavailable]=\"!available()\"\n        (click)=\"onCard()\"\n        (touchstart)=\"$any($event.currentTarget)\"\n        (touchend)=\"$any($event.currentTarget).blur()\">\n  <div class=\"product__img\"\n       [class.product__img--icon]=\"showIconFallback()\"\n       [class.product__img--named]=\"showNamedFallback()\"\n       [class.product__img--cargando]=\"imageCfg() && cargandoImagen()\"\n       [style.--fallback-color]=\"showNamedFallback() ? resolvedFallbackColor() : null\">\n    @if (imageCfg(); as img) {\n      <img [ngSrc]=\"urlMostrada() ?? img.url\" [alt]=\"name()\" fill\n           [style.object-position]=\"'center ' + img.position + '%'\"\n           (load)=\"imagenLista()\" (error)=\"imagenFallo()\" />\n    } @else if (showNamedFallback()) {\n      <div class=\"product__band\">\n        <span class=\"product__band-name\">{{ name() }}</span>\n      </div>\n    } @else {\n      <sui-icon class=\"product__icon\" name=\"image-line\" [size]=\"32\" />\n    }\n    @if (!available()) {\n      <span class=\"product__tag product__tag--unavail\">{{ unavailableLabel() }}</span>\n    }\n  </div>\n\n  <div class=\"product__body\">\n    <h3 class=\"product__name\">{{ name() }}</h3>\n    @if (description()) {\n      <p class=\"product__desc\">{{ description() }}</p>\n    }\n    <div class=\"product__footer\">\n      <span class=\"product__price\">{{ currencySymbol() }} {{ formattedPrice() }}</span>\n      @if (available()) {\n        @if (showStepper()) {\n          <div class=\"product__stepper\" (click)=\"$event.stopPropagation()\">\n            <button type=\"button\" class=\"product__step\"\n                    (click)=\"onDec($event)\"\n                    (touchstart)=\"$any($event.currentTarget)\"\n                    (touchend)=\"$any($event.currentTarget).blur()\"\n                    [attr.aria-label]=\"quantity() === 1 ? 'Quitar del carrito' : 'Quitar uno'\">\n              <sui-icon [name]=\"quantity() === 1 ? 'delete-bin-line' : 'subtract-line'\" [size]=\"16\" />\n            </button>\n            <span class=\"product__step-qty\">{{ quantity() }}</span>\n            <button type=\"button\" class=\"product__step\"\n                    (click)=\"onInc($event)\"\n                    (touchstart)=\"$any($event.currentTarget)\"\n                    (touchend)=\"$any($event.currentTarget).blur()\"\n                    [disabled]=\"closed()\"\n                    aria-label=\"Agregar uno\">\n              <sui-icon name=\"add-line\" [size]=\"16\" />\n            </button>\n          </div>\n        } @else {\n          <button type=\"button\" class=\"product__add\"\n                  (click)=\"onAdd($event)\"\n                  (touchstart)=\"$any($event.currentTarget)\"\n                  (touchend)=\"$any($event.currentTarget).blur()\"\n                  [disabled]=\"closed()\"\n                  aria-label=\"Agregar al carrito\">\n            <sui-icon name=\"add-line\" [size]=\"18\" />\n          </button>\n        }\n      }\n    </div>\n  </div>\n</button>\n", styles: ["@charset \"UTF-8\";:host{display:block;min-width:0;content-visibility:auto;contain-intrinsic-size:auto 300px}.product{width:100%;height:100%;min-width:0;background:var(--sui-bg-white-0, #fff);border-radius:16px;overflow:hidden;cursor:pointer;text-align:left;font-family:inherit;color:inherit;display:flex;flex-direction:column;border:1px solid var(--sui-stroke-soft-200, #ebebeb);padding:0;transition:transform .15s var(--sui-ease-out-strong, cubic-bezier(.16, 1, .3, 1)),box-shadow .15s var(--sui-ease-out-strong, cubic-bezier(.16, 1, .3, 1))}.product:active{transform:scale(.98);box-shadow:var(--sui-shadow-x-small, 0 1px 2px rgba(0, 0, 0, .06))}.product--unavailable{opacity:.55;cursor:not-allowed}.product--unavailable .product__img{filter:grayscale(.55)}.product__img{width:100%;aspect-ratio:1/1;background-color:var(--sui-bg-soft-200, #e5e7eb);background-size:cover;background-position:center;position:relative;overflow:hidden}.product__img img{object-fit:cover}.product__img--cargando:after{content:\"\";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%);animation:sui-product-shimmer 1.3s ease-in-out infinite}.product__img--icon{background:linear-gradient(135deg,var(--brand-400, #fb9a56) 0%,var(--brand-500, #fa7319) 100%);display:flex;align-items:center;justify-content:center}.product__img--named{background:var(--sui-bg-soft-200, #e5e7eb);display:flex;align-items:center;justify-content:center}.product__icon{color:color-mix(in srgb,var(--sui-static-white, #fff) 70%,transparent)}.product__band{width:100%;height:100%;background:var(--fallback-color, #999);display:flex;align-items:center;justify-content:center;padding:14px 16px}.product__band-name{color:var(--sui-static-white, #fff);font-weight:800;font-size:15px;line-height:1.15;letter-spacing:-.01em;text-align:center;word-break:break-word;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}.product__tag{position:absolute;top:8px;left:8px;padding:3px 8px;border-radius:999px;background:#ffffffeb;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:10px;font-weight:600;color:var(--brand-500, #fa7319);text-transform:uppercase;letter-spacing:.05em}.product__tag--unavail{color:#64748b;background:#fffffff2}.product__body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px;flex:1}.product__name{font-size:13.5px;font-weight:600;letter-spacing:-.01em;color:var(--sui-text-strong-950, var(--text-strong, #171717));line-height:1.2;margin:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.product__desc{font-size:11px;color:var(--sui-text-sub-600, var(--text-sub, #5c5c5c));line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;margin:0}.product__footer{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:auto;padding-top:6px}.product__price{font-size:14px;font-weight:700;letter-spacing:-.01em;color:var(--sui-text-strong-950, var(--text-strong, #171717))}.product__add{width:36px;height:36px;border-radius:50%;background:var(--sui-text-strong-950, var(--text-strong, #171717));color:var(--sui-bg-white-0, #fff);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:transform .15s var(--sui-ease-out-strong, cubic-bezier(.16, 1, .3, 1)),opacity .15s var(--sui-ease-out-strong, cubic-bezier(.16, 1, .3, 1))}.product__add:active{transform:scale(.94)}.product__add:disabled{opacity:.4;cursor:not-allowed}.product__stepper{display:inline-flex;align-items:center;height:36px;border-radius:18px;background:var(--sui-text-strong-950, var(--text-strong, #171717));flex-shrink:0;overflow:hidden}.product__step{width:34px;height:36px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--sui-bg-white-0, #fff);cursor:pointer;flex-shrink:0;transition:transform .15s var(--sui-ease-out-strong, cubic-bezier(.16, 1, .3, 1))}.product__step:active{transform:scale(.88)}.product__step:disabled{opacity:.4;cursor:not-allowed}.product__step-qty{min-width:18px;text-align:center;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--sui-bg-white-0, #fff);-webkit-user-select:none;user-select:none}@keyframes sui-product-shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}@media(prefers-reduced-motion:reduce){.product__img--cargando:after{animation:none}}\n"], dependencies: [{ kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { 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: SuiProductCard, isStandalone: true, selector: "sui-product-card", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, price: { classPropertyName: "price", publicName: "price", isSignal: true, isRequired: true, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, available: { classPropertyName: "available", publicName: "available", isSignal: true, isRequired: false, transformFunction: null }, quantity: { classPropertyName: "quantity", publicName: "quantity", isSignal: true, isRequired: false, transformFunction: null }, closed: { classPropertyName: "closed", publicName: "closed", isSignal: true, isRequired: false, transformFunction: null }, currencySymbol: { classPropertyName: "currencySymbol", publicName: "currencySymbol", isSignal: true, isRequired: false, transformFunction: null }, fallback: { classPropertyName: "fallback", publicName: "fallback", isSignal: true, isRequired: false, transformFunction: null }, unavailableLabel: { classPropertyName: "unavailableLabel", publicName: "unavailableLabel", isSignal: true, isRequired: false, transformFunction: null }, action: { classPropertyName: "action", publicName: "action", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openDetail: "openDetail", add: "add", increment: "increment", decrement: "decrement", edit: "edit" }, ngImport: i0, template: "<button type=\"button\"\n        class=\"product\"\n        [class.product--unavailable]=\"!available()\"\n        [class.product--edit]=\"action() === 'edit'\"\n        (click)=\"onCard()\"\n        (touchstart)=\"$any($event.currentTarget)\"\n        (touchend)=\"$any($event.currentTarget).blur()\">\n  <div class=\"product__img\"\n       [class.product__img--icon]=\"showIconFallback()\"\n       [class.product__img--named]=\"showNamedFallback()\"\n       [class.product__img--cargando]=\"imageCfg() && cargandoImagen()\"\n       [style.--fallback-color]=\"showNamedFallback() ? resolvedFallbackColor() : null\">\n    @if (imageCfg(); as img) {\n      <img [ngSrc]=\"urlMostrada() ?? img.url\" [alt]=\"name()\" fill\n           [style.object-position]=\"'center ' + img.position + '%'\"\n           (load)=\"imagenLista()\" (error)=\"imagenFallo()\" />\n    } @else if (showNamedFallback()) {\n      <div class=\"product__band\">\n        <span class=\"product__band-name\">{{ name() }}</span>\n      </div>\n    } @else {\n      <sui-icon class=\"product__icon\" name=\"image-line\" [size]=\"32\" />\n    }\n    @if (!available()) {\n      <span class=\"product__tag product__tag--unavail\">{{ unavailableLabel() }}</span>\n    }\n  </div>\n\n  <div class=\"product__body\">\n    <h3 class=\"product__name\">{{ name() }}</h3>\n    @if (description()) {\n      <p class=\"product__desc\">{{ description() }}</p>\n    }\n    <div class=\"product__footer\">\n      <span class=\"product__price\">{{ currencySymbol() }} {{ formattedPrice() }}</span>\n      @if (action() === 'edit') {\n        <button type=\"button\" class=\"product__add product__add--edit\"\n                (click)=\"onEdit($event)\"\n                (touchstart)=\"$any($event.currentTarget)\"\n                (touchend)=\"$any($event.currentTarget).blur()\"\n                aria-label=\"Editar\">\n          <sui-icon name=\"pencil-line\" [size]=\"18\" />\n        </button>\n      } @else if (available()) {\n        @if (showStepper()) {\n          <div class=\"product__stepper\" (click)=\"$event.stopPropagation()\">\n            <button type=\"button\" class=\"product__step\"\n                    (click)=\"onDec($event)\"\n                    (touchstart)=\"$any($event.currentTarget)\"\n                    (touchend)=\"$any($event.currentTarget).blur()\"\n                    [attr.aria-label]=\"quantity() === 1 ? 'Quitar del carrito' : 'Quitar uno'\">\n              <sui-icon [name]=\"quantity() === 1 ? 'delete-bin-line' : 'subtract-line'\" [size]=\"16\" />\n            </button>\n            <span class=\"product__step-qty\">{{ quantity() }}</span>\n            <button type=\"button\" class=\"product__step\"\n                    (click)=\"onInc($event)\"\n                    (touchstart)=\"$any($event.currentTarget)\"\n                    (touchend)=\"$any($event.currentTarget).blur()\"\n                    [disabled]=\"closed()\"\n                    aria-label=\"Agregar uno\">\n              <sui-icon name=\"add-line\" [size]=\"16\" />\n            </button>\n          </div>\n        } @else {\n          <button type=\"button\" class=\"product__add\"\n                  (click)=\"onAdd($event)\"\n                  (touchstart)=\"$any($event.currentTarget)\"\n                  (touchend)=\"$any($event.currentTarget).blur()\"\n                  [disabled]=\"closed()\"\n                  aria-label=\"Agregar al carrito\">\n            <sui-icon name=\"add-line\" [size]=\"18\" />\n          </button>\n        }\n      }\n    </div>\n  </div>\n</button>\n", styles: ["@charset \"UTF-8\";:host{display:block;min-width:0;content-visibility:auto;contain-intrinsic-size:auto 300px}.product{width:100%;height:100%;min-width:0;background:var(--sui-bg-white-0, #fff);border-radius:16px;overflow:hidden;cursor:pointer;text-align:left;font-family:inherit;color:inherit;display:flex;flex-direction:column;border:1px solid var(--sui-stroke-soft-200, #ebebeb);padding:0;transition:transform .15s var(--sui-ease-out-strong, cubic-bezier(.16, 1, .3, 1)),box-shadow .15s var(--sui-ease-out-strong, cubic-bezier(.16, 1, .3, 1))}.product:active{transform:scale(.98);box-shadow:var(--sui-shadow-x-small, 0 1px 2px rgba(0, 0, 0, .06))}.product--unavailable{opacity:.55;cursor:not-allowed}.product--unavailable .product__img{filter:grayscale(.55)}.product--edit{cursor:pointer}.product__img{width:100%;aspect-ratio:1/1;background-color:var(--sui-bg-soft-200, #e5e7eb);background-size:cover;background-position:center;position:relative;overflow:hidden}.product__img img{object-fit:cover}.product__img--cargando:after{content:\"\";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%);animation:sui-product-shimmer 1.3s ease-in-out infinite}.product__img--icon{background:linear-gradient(135deg,var(--brand-400, #fb9a56) 0%,var(--brand-500, #fa7319) 100%);display:flex;align-items:center;justify-content:center}.product__img--named{background:var(--sui-bg-soft-200, #e5e7eb);display:flex;align-items:center;justify-content:center}.product__icon{color:color-mix(in srgb,var(--sui-static-white, #fff) 70%,transparent)}.product__band{width:100%;height:100%;background:var(--fallback-color, #999);display:flex;align-items:center;justify-content:center;padding:14px 16px}.product__band-name{color:var(--sui-static-white, #fff);font-weight:800;font-size:15px;line-height:1.15;letter-spacing:-.01em;text-align:center;word-break:break-word;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}.product__tag{position:absolute;top:8px;left:8px;padding:3px 8px;border-radius:999px;background:#ffffffeb;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:10px;font-weight:600;color:var(--brand-500, #fa7319);text-transform:uppercase;letter-spacing:.05em}.product__tag--unavail{color:#64748b;background:#fffffff2}.product__body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px;flex:1}.product__name{font-size:13.5px;font-weight:600;letter-spacing:-.01em;color:var(--sui-text-strong-950, var(--text-strong, #171717));line-height:1.2;margin:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.product__desc{font-size:11px;color:var(--sui-text-sub-600, var(--text-sub, #5c5c5c));line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;margin:0}.product__footer{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:auto;padding-top:6px}.product__price{font-size:14px;font-weight:700;letter-spacing:-.01em;color:var(--sui-text-strong-950, var(--text-strong, #171717))}.product__add{width:36px;height:36px;border-radius:50%;background:var(--sui-text-strong-950, var(--text-strong, #171717));color:var(--sui-bg-white-0, #fff);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:transform .15s var(--sui-ease-out-strong, cubic-bezier(.16, 1, .3, 1)),opacity .15s var(--sui-ease-out-strong, cubic-bezier(.16, 1, .3, 1))}.product__add:active{transform:scale(.94)}.product__add:disabled{opacity:.4;cursor:not-allowed}.product__stepper{display:inline-flex;align-items:center;height:36px;border-radius:18px;background:var(--sui-text-strong-950, var(--text-strong, #171717));flex-shrink:0;overflow:hidden}.product__step{width:34px;height:36px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--sui-bg-white-0, #fff);cursor:pointer;flex-shrink:0;transition:transform .15s var(--sui-ease-out-strong, cubic-bezier(.16, 1, .3, 1))}.product__step:active{transform:scale(.88)}.product__step:disabled{opacity:.4;cursor:not-allowed}.product__step-qty{min-width:18px;text-align:center;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--sui-bg-white-0, #fff);-webkit-user-select:none;user-select:none}@keyframes sui-product-shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}@media(prefers-reduced-motion:reduce){.product__img--cargando:after{animation:none}}\n"], dependencies: [{ kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { 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: SuiProductCard, decorators: [{
             type: Component,
-            args: [{ selector: 'sui-product-card', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgOptimizedImage, SuiIcon], template: "<button type=\"button\"\n        class=\"product\"\n        [class.product--unavailable]=\"!available()\"\n        (click)=\"onCard()\"\n        (touchstart)=\"$any($event.currentTarget)\"\n        (touchend)=\"$any($event.currentTarget).blur()\">\n  <div class=\"product__img\"\n       [class.product__img--icon]=\"showIconFallback()\"\n       [class.product__img--named]=\"showNamedFallback()\"\n       [class.product__img--cargando]=\"imageCfg() && cargandoImagen()\"\n       [style.--fallback-color]=\"showNamedFallback() ? resolvedFallbackColor() : null\">\n    @if (imageCfg(); as img) {\n      <img [ngSrc]=\"urlMostrada() ?? img.url\" [alt]=\"name()\" fill\n           [style.object-position]=\"'center ' + img.position + '%'\"\n           (load)=\"imagenLista()\" (error)=\"imagenFallo()\" />\n    } @else if (showNamedFallback()) {\n      <div class=\"product__band\">\n        <span class=\"product__band-name\">{{ name() }}</span>\n      </div>\n    } @else {\n      <sui-icon class=\"product__icon\" name=\"image-line\" [size]=\"32\" />\n    }\n    @if (!available()) {\n      <span class=\"product__tag product__tag--unavail\">{{ unavailableLabel() }}</span>\n    }\n  </div>\n\n  <div class=\"product__body\">\n    <h3 class=\"product__name\">{{ name() }}</h3>\n    @if (description()) {\n      <p class=\"product__desc\">{{ description() }}</p>\n    }\n    <div class=\"product__footer\">\n      <span class=\"product__price\">{{ currencySymbol() }} {{ formattedPrice() }}</span>\n      @if (available()) {\n        @if (showStepper()) {\n          <div class=\"product__stepper\" (click)=\"$event.stopPropagation()\">\n            <button type=\"button\" class=\"product__step\"\n                    (click)=\"onDec($event)\"\n                    (touchstart)=\"$any($event.currentTarget)\"\n                    (touchend)=\"$any($event.currentTarget).blur()\"\n                    [attr.aria-label]=\"quantity() === 1 ? 'Quitar del carrito' : 'Quitar uno'\">\n              <sui-icon [name]=\"quantity() === 1 ? 'delete-bin-line' : 'subtract-line'\" [size]=\"16\" />\n            </button>\n            <span class=\"product__step-qty\">{{ quantity() }}</span>\n            <button type=\"button\" class=\"product__step\"\n                    (click)=\"onInc($event)\"\n                    (touchstart)=\"$any($event.currentTarget)\"\n                    (touchend)=\"$any($event.currentTarget).blur()\"\n                    [disabled]=\"closed()\"\n                    aria-label=\"Agregar uno\">\n              <sui-icon name=\"add-line\" [size]=\"16\" />\n            </button>\n          </div>\n        } @else {\n          <button type=\"button\" class=\"product__add\"\n                  (click)=\"onAdd($event)\"\n                  (touchstart)=\"$any($event.currentTarget)\"\n                  (touchend)=\"$any($event.currentTarget).blur()\"\n                  [disabled]=\"closed()\"\n                  aria-label=\"Agregar al carrito\">\n            <sui-icon name=\"add-line\" [size]=\"18\" />\n          </button>\n        }\n      }\n    </div>\n  </div>\n</button>\n", styles: ["@charset \"UTF-8\";:host{display:block;min-width:0;content-visibility:auto;contain-intrinsic-size:auto 300px}.product{width:100%;height:100%;min-width:0;background:var(--sui-bg-white-0, #fff);border-radius:16px;overflow:hidden;cursor:pointer;text-align:left;font-family:inherit;color:inherit;display:flex;flex-direction:column;border:1px solid var(--sui-stroke-soft-200, #ebebeb);padding:0;transition:transform .15s var(--sui-ease-out-strong, cubic-bezier(.16, 1, .3, 1)),box-shadow .15s var(--sui-ease-out-strong, cubic-bezier(.16, 1, .3, 1))}.product:active{transform:scale(.98);box-shadow:var(--sui-shadow-x-small, 0 1px 2px rgba(0, 0, 0, .06))}.product--unavailable{opacity:.55;cursor:not-allowed}.product--unavailable .product__img{filter:grayscale(.55)}.product__img{width:100%;aspect-ratio:1/1;background-color:var(--sui-bg-soft-200, #e5e7eb);background-size:cover;background-position:center;position:relative;overflow:hidden}.product__img img{object-fit:cover}.product__img--cargando:after{content:\"\";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%);animation:sui-product-shimmer 1.3s ease-in-out infinite}.product__img--icon{background:linear-gradient(135deg,var(--brand-400, #fb9a56) 0%,var(--brand-500, #fa7319) 100%);display:flex;align-items:center;justify-content:center}.product__img--named{background:var(--sui-bg-soft-200, #e5e7eb);display:flex;align-items:center;justify-content:center}.product__icon{color:color-mix(in srgb,var(--sui-static-white, #fff) 70%,transparent)}.product__band{width:100%;height:100%;background:var(--fallback-color, #999);display:flex;align-items:center;justify-content:center;padding:14px 16px}.product__band-name{color:var(--sui-static-white, #fff);font-weight:800;font-size:15px;line-height:1.15;letter-spacing:-.01em;text-align:center;word-break:break-word;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}.product__tag{position:absolute;top:8px;left:8px;padding:3px 8px;border-radius:999px;background:#ffffffeb;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:10px;font-weight:600;color:var(--brand-500, #fa7319);text-transform:uppercase;letter-spacing:.05em}.product__tag--unavail{color:#64748b;background:#fffffff2}.product__body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px;flex:1}.product__name{font-size:13.5px;font-weight:600;letter-spacing:-.01em;color:var(--sui-text-strong-950, var(--text-strong, #171717));line-height:1.2;margin:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.product__desc{font-size:11px;color:var(--sui-text-sub-600, var(--text-sub, #5c5c5c));line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;margin:0}.product__footer{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:auto;padding-top:6px}.product__price{font-size:14px;font-weight:700;letter-spacing:-.01em;color:var(--sui-text-strong-950, var(--text-strong, #171717))}.product__add{width:36px;height:36px;border-radius:50%;background:var(--sui-text-strong-950, var(--text-strong, #171717));color:var(--sui-bg-white-0, #fff);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:transform .15s var(--sui-ease-out-strong, cubic-bezier(.16, 1, .3, 1)),opacity .15s var(--sui-ease-out-strong, cubic-bezier(.16, 1, .3, 1))}.product__add:active{transform:scale(.94)}.product__add:disabled{opacity:.4;cursor:not-allowed}.product__stepper{display:inline-flex;align-items:center;height:36px;border-radius:18px;background:var(--sui-text-strong-950, var(--text-strong, #171717));flex-shrink:0;overflow:hidden}.product__step{width:34px;height:36px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--sui-bg-white-0, #fff);cursor:pointer;flex-shrink:0;transition:transform .15s var(--sui-ease-out-strong, cubic-bezier(.16, 1, .3, 1))}.product__step:active{transform:scale(.88)}.product__step:disabled{opacity:.4;cursor:not-allowed}.product__step-qty{min-width:18px;text-align:center;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--sui-bg-white-0, #fff);-webkit-user-select:none;user-select:none}@keyframes sui-product-shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}@media(prefers-reduced-motion:reduce){.product__img--cargando:after{animation:none}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], price: [{ type: i0.Input, args: [{ isSignal: true, alias: "price", required: true }] }], image: [{ type: i0.Input, args: [{ isSignal: true, alias: "image", required: false }] }], available: [{ type: i0.Input, args: [{ isSignal: true, alias: "available", required: false }] }], quantity: [{ type: i0.Input, args: [{ isSignal: true, alias: "quantity", required: false }] }], closed: [{ type: i0.Input, args: [{ isSignal: true, alias: "closed", required: false }] }], currencySymbol: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencySymbol", required: false }] }], fallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "fallback", required: false }] }], unavailableLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "unavailableLabel", required: false }] }], openDetail: [{ type: i0.Output, args: ["openDetail"] }], add: [{ type: i0.Output, args: ["add"] }], increment: [{ type: i0.Output, args: ["increment"] }], decrement: [{ type: i0.Output, args: ["decrement"] }] } });
+            args: [{ selector: 'sui-product-card', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgOptimizedImage, SuiIcon], template: "<button type=\"button\"\n        class=\"product\"\n        [class.product--unavailable]=\"!available()\"\n        [class.product--edit]=\"action() === 'edit'\"\n        (click)=\"onCard()\"\n        (touchstart)=\"$any($event.currentTarget)\"\n        (touchend)=\"$any($event.currentTarget).blur()\">\n  <div class=\"product__img\"\n       [class.product__img--icon]=\"showIconFallback()\"\n       [class.product__img--named]=\"showNamedFallback()\"\n       [class.product__img--cargando]=\"imageCfg() && cargandoImagen()\"\n       [style.--fallback-color]=\"showNamedFallback() ? resolvedFallbackColor() : null\">\n    @if (imageCfg(); as img) {\n      <img [ngSrc]=\"urlMostrada() ?? img.url\" [alt]=\"name()\" fill\n           [style.object-position]=\"'center ' + img.position + '%'\"\n           (load)=\"imagenLista()\" (error)=\"imagenFallo()\" />\n    } @else if (showNamedFallback()) {\n      <div class=\"product__band\">\n        <span class=\"product__band-name\">{{ name() }}</span>\n      </div>\n    } @else {\n      <sui-icon class=\"product__icon\" name=\"image-line\" [size]=\"32\" />\n    }\n    @if (!available()) {\n      <span class=\"product__tag product__tag--unavail\">{{ unavailableLabel() }}</span>\n    }\n  </div>\n\n  <div class=\"product__body\">\n    <h3 class=\"product__name\">{{ name() }}</h3>\n    @if (description()) {\n      <p class=\"product__desc\">{{ description() }}</p>\n    }\n    <div class=\"product__footer\">\n      <span class=\"product__price\">{{ currencySymbol() }} {{ formattedPrice() }}</span>\n      @if (action() === 'edit') {\n        <button type=\"button\" class=\"product__add product__add--edit\"\n                (click)=\"onEdit($event)\"\n                (touchstart)=\"$any($event.currentTarget)\"\n                (touchend)=\"$any($event.currentTarget).blur()\"\n                aria-label=\"Editar\">\n          <sui-icon name=\"pencil-line\" [size]=\"18\" />\n        </button>\n      } @else if (available()) {\n        @if (showStepper()) {\n          <div class=\"product__stepper\" (click)=\"$event.stopPropagation()\">\n            <button type=\"button\" class=\"product__step\"\n                    (click)=\"onDec($event)\"\n                    (touchstart)=\"$any($event.currentTarget)\"\n                    (touchend)=\"$any($event.currentTarget).blur()\"\n                    [attr.aria-label]=\"quantity() === 1 ? 'Quitar del carrito' : 'Quitar uno'\">\n              <sui-icon [name]=\"quantity() === 1 ? 'delete-bin-line' : 'subtract-line'\" [size]=\"16\" />\n            </button>\n            <span class=\"product__step-qty\">{{ quantity() }}</span>\n            <button type=\"button\" class=\"product__step\"\n                    (click)=\"onInc($event)\"\n                    (touchstart)=\"$any($event.currentTarget)\"\n                    (touchend)=\"$any($event.currentTarget).blur()\"\n                    [disabled]=\"closed()\"\n                    aria-label=\"Agregar uno\">\n              <sui-icon name=\"add-line\" [size]=\"16\" />\n            </button>\n          </div>\n        } @else {\n          <button type=\"button\" class=\"product__add\"\n                  (click)=\"onAdd($event)\"\n                  (touchstart)=\"$any($event.currentTarget)\"\n                  (touchend)=\"$any($event.currentTarget).blur()\"\n                  [disabled]=\"closed()\"\n                  aria-label=\"Agregar al carrito\">\n            <sui-icon name=\"add-line\" [size]=\"18\" />\n          </button>\n        }\n      }\n    </div>\n  </div>\n</button>\n", styles: ["@charset \"UTF-8\";:host{display:block;min-width:0;content-visibility:auto;contain-intrinsic-size:auto 300px}.product{width:100%;height:100%;min-width:0;background:var(--sui-bg-white-0, #fff);border-radius:16px;overflow:hidden;cursor:pointer;text-align:left;font-family:inherit;color:inherit;display:flex;flex-direction:column;border:1px solid var(--sui-stroke-soft-200, #ebebeb);padding:0;transition:transform .15s var(--sui-ease-out-strong, cubic-bezier(.16, 1, .3, 1)),box-shadow .15s var(--sui-ease-out-strong, cubic-bezier(.16, 1, .3, 1))}.product:active{transform:scale(.98);box-shadow:var(--sui-shadow-x-small, 0 1px 2px rgba(0, 0, 0, .06))}.product--unavailable{opacity:.55;cursor:not-allowed}.product--unavailable .product__img{filter:grayscale(.55)}.product--edit{cursor:pointer}.product__img{width:100%;aspect-ratio:1/1;background-color:var(--sui-bg-soft-200, #e5e7eb);background-size:cover;background-position:center;position:relative;overflow:hidden}.product__img img{object-fit:cover}.product__img--cargando:after{content:\"\";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%);animation:sui-product-shimmer 1.3s ease-in-out infinite}.product__img--icon{background:linear-gradient(135deg,var(--brand-400, #fb9a56) 0%,var(--brand-500, #fa7319) 100%);display:flex;align-items:center;justify-content:center}.product__img--named{background:var(--sui-bg-soft-200, #e5e7eb);display:flex;align-items:center;justify-content:center}.product__icon{color:color-mix(in srgb,var(--sui-static-white, #fff) 70%,transparent)}.product__band{width:100%;height:100%;background:var(--fallback-color, #999);display:flex;align-items:center;justify-content:center;padding:14px 16px}.product__band-name{color:var(--sui-static-white, #fff);font-weight:800;font-size:15px;line-height:1.15;letter-spacing:-.01em;text-align:center;word-break:break-word;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}.product__tag{position:absolute;top:8px;left:8px;padding:3px 8px;border-radius:999px;background:#ffffffeb;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:10px;font-weight:600;color:var(--brand-500, #fa7319);text-transform:uppercase;letter-spacing:.05em}.product__tag--unavail{color:#64748b;background:#fffffff2}.product__body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px;flex:1}.product__name{font-size:13.5px;font-weight:600;letter-spacing:-.01em;color:var(--sui-text-strong-950, var(--text-strong, #171717));line-height:1.2;margin:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.product__desc{font-size:11px;color:var(--sui-text-sub-600, var(--text-sub, #5c5c5c));line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;margin:0}.product__footer{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:auto;padding-top:6px}.product__price{font-size:14px;font-weight:700;letter-spacing:-.01em;color:var(--sui-text-strong-950, var(--text-strong, #171717))}.product__add{width:36px;height:36px;border-radius:50%;background:var(--sui-text-strong-950, var(--text-strong, #171717));color:var(--sui-bg-white-0, #fff);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:transform .15s var(--sui-ease-out-strong, cubic-bezier(.16, 1, .3, 1)),opacity .15s var(--sui-ease-out-strong, cubic-bezier(.16, 1, .3, 1))}.product__add:active{transform:scale(.94)}.product__add:disabled{opacity:.4;cursor:not-allowed}.product__stepper{display:inline-flex;align-items:center;height:36px;border-radius:18px;background:var(--sui-text-strong-950, var(--text-strong, #171717));flex-shrink:0;overflow:hidden}.product__step{width:34px;height:36px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--sui-bg-white-0, #fff);cursor:pointer;flex-shrink:0;transition:transform .15s var(--sui-ease-out-strong, cubic-bezier(.16, 1, .3, 1))}.product__step:active{transform:scale(.88)}.product__step:disabled{opacity:.4;cursor:not-allowed}.product__step-qty{min-width:18px;text-align:center;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--sui-bg-white-0, #fff);-webkit-user-select:none;user-select:none}@keyframes sui-product-shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}@media(prefers-reduced-motion:reduce){.product__img--cargando:after{animation:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], price: [{ type: i0.Input, args: [{ isSignal: true, alias: "price", required: true }] }], image: [{ type: i0.Input, args: [{ isSignal: true, alias: "image", required: false }] }], available: [{ type: i0.Input, args: [{ isSignal: true, alias: "available", required: false }] }], quantity: [{ type: i0.Input, args: [{ isSignal: true, alias: "quantity", required: false }] }], closed: [{ type: i0.Input, args: [{ isSignal: true, alias: "closed", required: false }] }], currencySymbol: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencySymbol", required: false }] }], fallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "fallback", required: false }] }], unavailableLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "unavailableLabel", required: false }] }], action: [{ type: i0.Input, args: [{ isSignal: true, alias: "action", required: false }] }], openDetail: [{ type: i0.Output, args: ["openDetail"] }], add: [{ type: i0.Output, args: ["add"] }], increment: [{ type: i0.Output, args: ["increment"] }], decrement: [{ type: i0.Output, args: ["decrement"] }], edit: [{ type: i0.Output, args: ["edit"] }] } });
 
 /**
  * SUI Switch Card — SUI Design System 2.0
@@ -16844,8 +16957,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  *     [chips]="['Hamburguesas', 'Pizzas', 'Bebidas']"
  *     [(value)]="selected"
  *     [sticky]="true"
+ *     [size]="bp.isMobile() ? 'large' : 'medium'"
  *   />
  *
+ * Tamaños (extensión SUI, 03-10-2026): small 32 · medium 36 (default) ·
+ * large 40. Los tres con texto label-sm 14; cambia el alto y el aire lateral.
+ *
  *   También acepta objetos:
  *   <sui-tab-chips
  *     [chips]="[{value:'h', label:'Hamburguesas'}, {value:'p', label:'Pizzas'}]"
@@ -16859,6 +16976,8 @@ class SuiTabChips {
     value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     /** Si true, el componente queda sticky al top del scroll container. */
     sticky = input(false, ...(ngDevMode ? [{ debugName: "sticky" }] : /* istanbul ignore next */ []));
+    /** Tamaño de los chips: small 32 · medium 36 (default) · large 40 (mobile). */
+    size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     /** Auto-scroll horizontal del chip activo al cambiar `value`. */
     autoScroll = input(true, ...(ngDevMode ? [{ debugName: "autoScroll" }] : /* istanbul ignore next */ []));
     sentinelRef;
@@ -16914,7 +17033,7 @@ class SuiTabChips {
         nav.scrollTo({ left: Math.max(0, offset), behavior: 'smooth' });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTabChips, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiTabChips, isStandalone: true, selector: "sui-tab-chips", inputs: { chips: { classPropertyName: "chips", publicName: "chips", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, autoScroll: { classPropertyName: "autoScroll", publicName: "autoScroll", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.sui-tab-chips--host-sticky": "sticky()" } }, viewQueries: [{ propertyName: "sentinelRef", first: true, predicate: ["sentinel"], descendants: true }, { propertyName: "navRef", first: true, predicate: ["nav"], descendants: true }], ngImport: i0, template: "@if (sticky()) {\n  <div #sentinel class=\"sui-tab-chips__sentinel\" aria-hidden=\"true\"></div>\n}\n<nav\n  #nav\n  class=\"sui-tab-chips\"\n  [class.sui-tab-chips--sticky]=\"sticky()\"\n  [class.sui-tab-chips--stuck]=\"sticky() && stuck()\"\n  role=\"tablist\"\n>\n  @for (chip of normalizedChips(); track chip.value) {\n    <button\n      type=\"button\"\n      class=\"sui-tab-chips__chip\"\n      [class.sui-tab-chips__chip--active]=\"value() === chip.value\"\n      [attr.data-sui-chip-value]=\"chip.value\"\n      [attr.aria-selected]=\"value() === chip.value\"\n      [attr.tabindex]=\"value() === chip.value ? 0 : -1\"\n      role=\"tab\"\n      (click)=\"select(chip.value)\"\n    >\n      <span class=\"sui-tab-chips__chip-label\">{{ chip.label }}</span>\n      @if (chip.count) {\n        <span class=\"sui-tab-chips__chip-count\" aria-hidden=\"true\">{{ chip.count }}</span>\n      }\n    </button>\n  }\n</nav>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}:host(.sui-tab-chips--host-sticky){display:contents}.sui-tab-chips__sentinel{height:1px;margin-top:16px;margin-bottom:-1px;pointer-events:none}.sui-tab-chips{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:12px 0;background:transparent;scrollbar-width:none}.sui-tab-chips::-webkit-scrollbar{display:none}.sui-tab-chips--sticky{position:sticky;top:0;z-index:20;transition:padding-top var(--sui-motion-duration-fast, .15s) var(--sui-motion-ease-out, ease),background var(--sui-motion-duration-fast, .15s) var(--sui-motion-ease-out, ease)}.sui-tab-chips--stuck{padding-top:calc(env(safe-area-inset-top,0px) + 12px);background:var(--sui-bg-weak-50, #f7f7f7)}.sui-tab-chips__chip{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);color:var(--sui-text-sub-600, #5c5c5c);font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size, 13px);font-weight:600;letter-spacing:var(--sui-type-label-sm-spacing, -.006em);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),border-color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),transform var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease)}.sui-tab-chips__chip:hover{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-strong-950, #171717)}.sui-tab-chips__chip:active{transform:scale(.96)}.sui-tab-chips__chip:active:not(:disabled),.sui-tab-chips__chip:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sui-primary-alpha-10)}.sui-tab-chips__chip--active{background:var(--sui-bg-strong-950, #171717);color:var(--sui-bg-white-0, #fff);border-color:var(--sui-bg-strong-950, #171717)}.sui-tab-chips__chip--active:hover{background:var(--sui-bg-strong-950, #171717);color:var(--sui-bg-white-0, #fff)}.sui-tab-chips__chip-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 6px;border-radius:999px;background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-sub-600, #5c5c5c);font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1}.sui-tab-chips__chip--active .sui-tab-chips__chip-count{background:color-mix(in srgb,var(--sui-bg-white-0, #fff) 22%,transparent);color:var(--sui-bg-white-0, #fff)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiTabChips, isStandalone: true, selector: "sui-tab-chips", inputs: { chips: { classPropertyName: "chips", publicName: "chips", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, autoScroll: { classPropertyName: "autoScroll", publicName: "autoScroll", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.sui-tab-chips--host-sticky": "sticky()", "attr.data-sui-size": "size()" } }, viewQueries: [{ propertyName: "sentinelRef", first: true, predicate: ["sentinel"], descendants: true }, { propertyName: "navRef", first: true, predicate: ["nav"], descendants: true }], ngImport: i0, template: "@if (sticky()) {\n  <div #sentinel class=\"sui-tab-chips__sentinel\" aria-hidden=\"true\"></div>\n}\n<nav\n  #nav\n  class=\"sui-tab-chips\"\n  [class.sui-tab-chips--sticky]=\"sticky()\"\n  [class.sui-tab-chips--stuck]=\"sticky() && stuck()\"\n  role=\"tablist\"\n>\n  @for (chip of normalizedChips(); track chip.value) {\n    <button\n      type=\"button\"\n      class=\"sui-tab-chips__chip\"\n      [class.sui-tab-chips__chip--active]=\"value() === chip.value\"\n      [attr.data-sui-chip-value]=\"chip.value\"\n      [attr.aria-selected]=\"value() === chip.value\"\n      [attr.tabindex]=\"value() === chip.value ? 0 : -1\"\n      role=\"tab\"\n      (click)=\"select(chip.value)\"\n    >\n      <span class=\"sui-tab-chips__chip-label\">{{ chip.label }}</span>\n      @if (chip.count) {\n        <span class=\"sui-tab-chips__chip-count\" aria-hidden=\"true\">{{ chip.count }}</span>\n      }\n    </button>\n  }\n</nav>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}:host(.sui-tab-chips--host-sticky){display:contents}.sui-tab-chips__sentinel{height:1px;margin-top:16px;margin-bottom:-1px;pointer-events:none}.sui-tab-chips{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:12px 0;background:transparent;scrollbar-width:none}.sui-tab-chips::-webkit-scrollbar{display:none}.sui-tab-chips--sticky{position:sticky;top:0;z-index:20;transition:padding-top var(--sui-motion-duration-fast, .15s) var(--sui-motion-ease-out, ease),background var(--sui-motion-duration-fast, .15s) var(--sui-motion-ease-out, ease)}.sui-tab-chips--stuck{padding-top:calc(env(safe-area-inset-top,0px) + 12px);background:var(--sui-bg-weak-50, #f7f7f7)}.sui-tab-chips__chip{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);color:var(--sui-text-sub-600, #5c5c5c);font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size, 13px);font-weight:600;letter-spacing:var(--sui-type-label-sm-spacing, -.006em);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),border-color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),transform var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease)}.sui-tab-chips__chip:hover{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-strong-950, #171717)}.sui-tab-chips__chip:active{transform:scale(.96)}.sui-tab-chips__chip:active:not(:disabled),.sui-tab-chips__chip:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sui-primary-alpha-10)}.sui-tab-chips__chip--active{background:var(--sui-bg-strong-950, #171717);color:var(--sui-bg-white-0, #fff);border-color:var(--sui-bg-strong-950, #171717)}.sui-tab-chips__chip--active:hover{background:var(--sui-bg-strong-950, #171717);color:var(--sui-bg-white-0, #fff)}.sui-tab-chips__chip-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 6px;border-radius:999px;background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-sub-600, #5c5c5c);font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1}:host([data-sui-size=small]) .sui-tab-chips__chip{box-sizing:border-box;height:32px;padding:0 12px;line-height:var(--sui-type-label-sm-line, 20px)}:host([data-sui-size=large]) .sui-tab-chips__chip{box-sizing:border-box;height:40px;padding:0 16px;line-height:var(--sui-type-label-sm-line, 20px)}:host([data-sui-size=small]) .sui-tab-chips__chip-count{min-width:16px;height:16px;padding:0 5px}:host([data-sui-size=large]) .sui-tab-chips__chip-count{min-width:20px;height:20px;padding:0 6px;font-size:var(--sui-type-label-xs-size, 12px)}.sui-tab-chips__chip--active .sui-tab-chips__chip-count{background:color-mix(in srgb,var(--sui-bg-white-0, #fff) 22%,transparent);color:var(--sui-bg-white-0, #fff)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTabChips, decorators: [{
             type: Component,
@@ -16923,8 +17042,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                            <nav> sticky resuelva contra el scroll container real y no contra el host
                            (que mide ~50px → el sticky no se enganchaba). Gate por clase de host. */
                         '[class.sui-tab-chips--host-sticky]': 'sticky()',
-                    }, template: "@if (sticky()) {\n  <div #sentinel class=\"sui-tab-chips__sentinel\" aria-hidden=\"true\"></div>\n}\n<nav\n  #nav\n  class=\"sui-tab-chips\"\n  [class.sui-tab-chips--sticky]=\"sticky()\"\n  [class.sui-tab-chips--stuck]=\"sticky() && stuck()\"\n  role=\"tablist\"\n>\n  @for (chip of normalizedChips(); track chip.value) {\n    <button\n      type=\"button\"\n      class=\"sui-tab-chips__chip\"\n      [class.sui-tab-chips__chip--active]=\"value() === chip.value\"\n      [attr.data-sui-chip-value]=\"chip.value\"\n      [attr.aria-selected]=\"value() === chip.value\"\n      [attr.tabindex]=\"value() === chip.value ? 0 : -1\"\n      role=\"tab\"\n      (click)=\"select(chip.value)\"\n    >\n      <span class=\"sui-tab-chips__chip-label\">{{ chip.label }}</span>\n      @if (chip.count) {\n        <span class=\"sui-tab-chips__chip-count\" aria-hidden=\"true\">{{ chip.count }}</span>\n      }\n    </button>\n  }\n</nav>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}:host(.sui-tab-chips--host-sticky){display:contents}.sui-tab-chips__sentinel{height:1px;margin-top:16px;margin-bottom:-1px;pointer-events:none}.sui-tab-chips{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:12px 0;background:transparent;scrollbar-width:none}.sui-tab-chips::-webkit-scrollbar{display:none}.sui-tab-chips--sticky{position:sticky;top:0;z-index:20;transition:padding-top var(--sui-motion-duration-fast, .15s) var(--sui-motion-ease-out, ease),background var(--sui-motion-duration-fast, .15s) var(--sui-motion-ease-out, ease)}.sui-tab-chips--stuck{padding-top:calc(env(safe-area-inset-top,0px) + 12px);background:var(--sui-bg-weak-50, #f7f7f7)}.sui-tab-chips__chip{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);color:var(--sui-text-sub-600, #5c5c5c);font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size, 13px);font-weight:600;letter-spacing:var(--sui-type-label-sm-spacing, -.006em);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),border-color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),transform var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease)}.sui-tab-chips__chip:hover{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-strong-950, #171717)}.sui-tab-chips__chip:active{transform:scale(.96)}.sui-tab-chips__chip:active:not(:disabled),.sui-tab-chips__chip:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sui-primary-alpha-10)}.sui-tab-chips__chip--active{background:var(--sui-bg-strong-950, #171717);color:var(--sui-bg-white-0, #fff);border-color:var(--sui-bg-strong-950, #171717)}.sui-tab-chips__chip--active:hover{background:var(--sui-bg-strong-950, #171717);color:var(--sui-bg-white-0, #fff)}.sui-tab-chips__chip-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 6px;border-radius:999px;background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-sub-600, #5c5c5c);font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1}.sui-tab-chips__chip--active .sui-tab-chips__chip-count{background:color-mix(in srgb,var(--sui-bg-white-0, #fff) 22%,transparent);color:var(--sui-bg-white-0, #fff)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { chips: [{ type: i0.Input, args: [{ isSignal: true, alias: "chips", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], autoScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScroll", required: false }] }], sentinelRef: [{
+                        '[attr.data-sui-size]': 'size()',
+                    }, template: "@if (sticky()) {\n  <div #sentinel class=\"sui-tab-chips__sentinel\" aria-hidden=\"true\"></div>\n}\n<nav\n  #nav\n  class=\"sui-tab-chips\"\n  [class.sui-tab-chips--sticky]=\"sticky()\"\n  [class.sui-tab-chips--stuck]=\"sticky() && stuck()\"\n  role=\"tablist\"\n>\n  @for (chip of normalizedChips(); track chip.value) {\n    <button\n      type=\"button\"\n      class=\"sui-tab-chips__chip\"\n      [class.sui-tab-chips__chip--active]=\"value() === chip.value\"\n      [attr.data-sui-chip-value]=\"chip.value\"\n      [attr.aria-selected]=\"value() === chip.value\"\n      [attr.tabindex]=\"value() === chip.value ? 0 : -1\"\n      role=\"tab\"\n      (click)=\"select(chip.value)\"\n    >\n      <span class=\"sui-tab-chips__chip-label\">{{ chip.label }}</span>\n      @if (chip.count) {\n        <span class=\"sui-tab-chips__chip-count\" aria-hidden=\"true\">{{ chip.count }}</span>\n      }\n    </button>\n  }\n</nav>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}:host(.sui-tab-chips--host-sticky){display:contents}.sui-tab-chips__sentinel{height:1px;margin-top:16px;margin-bottom:-1px;pointer-events:none}.sui-tab-chips{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:12px 0;background:transparent;scrollbar-width:none}.sui-tab-chips::-webkit-scrollbar{display:none}.sui-tab-chips--sticky{position:sticky;top:0;z-index:20;transition:padding-top var(--sui-motion-duration-fast, .15s) var(--sui-motion-ease-out, ease),background var(--sui-motion-duration-fast, .15s) var(--sui-motion-ease-out, ease)}.sui-tab-chips--stuck{padding-top:calc(env(safe-area-inset-top,0px) + 12px);background:var(--sui-bg-weak-50, #f7f7f7)}.sui-tab-chips__chip{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);color:var(--sui-text-sub-600, #5c5c5c);font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size, 13px);font-weight:600;letter-spacing:var(--sui-type-label-sm-spacing, -.006em);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),border-color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),transform var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease)}.sui-tab-chips__chip:hover{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-strong-950, #171717)}.sui-tab-chips__chip:active{transform:scale(.96)}.sui-tab-chips__chip:active:not(:disabled),.sui-tab-chips__chip:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sui-primary-alpha-10)}.sui-tab-chips__chip--active{background:var(--sui-bg-strong-950, #171717);color:var(--sui-bg-white-0, #fff);border-color:var(--sui-bg-strong-950, #171717)}.sui-tab-chips__chip--active:hover{background:var(--sui-bg-strong-950, #171717);color:var(--sui-bg-white-0, #fff)}.sui-tab-chips__chip-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 6px;border-radius:999px;background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-sub-600, #5c5c5c);font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1}:host([data-sui-size=small]) .sui-tab-chips__chip{box-sizing:border-box;height:32px;padding:0 12px;line-height:var(--sui-type-label-sm-line, 20px)}:host([data-sui-size=large]) .sui-tab-chips__chip{box-sizing:border-box;height:40px;padding:0 16px;line-height:var(--sui-type-label-sm-line, 20px)}:host([data-sui-size=small]) .sui-tab-chips__chip-count{min-width:16px;height:16px;padding:0 5px}:host([data-sui-size=large]) .sui-tab-chips__chip-count{min-width:20px;height:20px;padding:0 6px;font-size:var(--sui-type-label-xs-size, 12px)}.sui-tab-chips__chip--active .sui-tab-chips__chip-count{background:color-mix(in srgb,var(--sui-bg-white-0, #fff) 22%,transparent);color:var(--sui-bg-white-0, #fff)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { chips: [{ type: i0.Input, args: [{ isSignal: true, alias: "chips", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], autoScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScroll", required: false }] }], sentinelRef: [{
                 type: ViewChild,
                 args: ['sentinel']
             }], navRef: [{
@@ -17620,6 +17740,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  *
  * EXACT (pulled, verified pixel/token):
  *  - Container: border-radius 6px (--sui-radius-6), height 24px (py=4px + 16px line).
+ *    (24 es `medium`, el default; ver TAMAÑOS abajo para large/xlarge.)
  *    NOTE: distinto del badge (radius-full 999px) — NO confundir.
  *  - Typography: Label/X Small (Inter Medium, 12px / line 16 / tracking 0, NO uppercase),
  *    font-feature 'ss11' 1, 'calt' 0, 'liga' 0. Label color text-sub-600 (#5c5c5c).
@@ -17682,12 +17803,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  *    contenido proyectado (avatar/flag con color propio) NO se puede forzar a gris
  *    desde el host — el consumer debe atenuar su propio leading si lo requiere.
  *
+ * TAMAÑOS — extensión SUI (03-10-2026, pedido del dueño):
+ *  Figma trae solo 24 px, con una X de 16 que en mobile queda muy por debajo de
+ *  los 44 del dedo. Se suman dos tamaños en la escala del sui-button:
+ *    medium  24 · Label/X Small 12/16 · leading 16 · X 16 (default, Figma)
+ *    large   32 · Label/Small 14/20   · leading 20 · X 20
+ *    xlarge  40 · Label/Medium 16/24  · leading 20 · X 24
+ *  En large/xlarge la X además se agranda por dentro (::before invisible) para
+ *  que el área táctil llegue al alto del tag sin cambiar cómo se ve.
+ *
  * CUSTOM (no en Figma — add-on local): ninguno por ahora. extraFeatures del
  * reporte de auditoría estaba vacío.
  */
 class SuiTag {
     /** Visual style. `stroke` = white bg + soft border; `gray` = weak-50 bg, no border. Default stroke. */
     tagStyle = input('stroke', ...(ngDevMode ? [{ debugName: "tagStyle" }] : /* istanbul ignore next */ []));
+    /** Tamaño: medium 24 (default, Figma) · large 32 · xlarge 40 (mobile). */
+    size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Px del glyph de la X por tamaño (16 / 20 / 24). */
+    dismissIconSize = computed(() => {
+        switch (this.size()) {
+            case 'xlarge': return 24;
+            case 'large': return 20;
+            default: return 16;
+        }
+    }, ...(ngDevMode ? [{ debugName: "dismissIconSize" }] : /* istanbul ignore next */ []));
     /**
      * True cuando hay un leading element proyectado (icon/avatar/flag/brand/company)
      * en `[data-slot=start]`. Ajusta el padding (pl=4) y agrega gap=4 leading↔texto.
@@ -17718,7 +17858,7 @@ class SuiTag {
         this.dismiss.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTag, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiTag, isStandalone: true, selector: "sui-tag", inputs: { tagStyle: { classPropertyName: "tagStyle", publicName: "tagStyle", isSignal: true, isRequired: false, transformFunction: null }, leading: { classPropertyName: "leading", publicName: "leading", isSignal: true, isRequired: false, transformFunction: null }, sublabel: { classPropertyName: "sublabel", publicName: "sublabel", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, dismissLabel: { classPropertyName: "dismissLabel", publicName: "dismissLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismiss: "dismiss" }, host: { properties: { "attr.title": "null", "attr.data-sui-style": "tagStyle()", "attr.data-sui-leading": "leading() ? \"\" : null", "attr.data-sui-dismissible": "dismissible() ? \"\" : null", "attr.data-sui-interactive": "interactive() ? \"\" : null", "attr.data-sui-disabled": "disabled() ? \"\" : null", "attr.aria-disabled": "disabled() ? \"true\" : null" } }, ngImport: i0, template: "<!-- Leading element (icon / avatar / flag / brand / company logo) \u2014 16\u00D716, gap-4 al texto.\n     Proyectado por el consumer; `leading` input ajusta padding/gap del host. -->\n<ng-content select=\"[data-slot=start]\"></ng-content>\n\n<!-- Bloque \"Text\" interno (Figma node \"Text\"): label + sublabel + close, gap-2. -->\n<span class=\"sui-tag__text\">\n  <span class=\"sui-tag__label\"><ng-content></ng-content></span>\n\n  @if (showsSublabel()) {\n    <span class=\"sui-tag__sublabel\">{{ sublabel() }}</span>\n  }\n\n  @if (dismissible()) {\n    <button\n      type=\"button\"\n      class=\"sui-tag__dismiss\"\n      [attr.aria-label]=\"dismissLabel()\"\n      [disabled]=\"disabled()\"\n      (click)=\"onDismiss($event)\"\n      (touchstart)=\"$any($event.currentTarget)\"\n      (touchend)=\"$any($event.currentTarget).blur()\"\n    >\n      <sui-icon name=\"close-line\" [size]=\"16\" aria-hidden=\"true\" />\n    </button>\n  }\n</span>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:24px;padding:4px 8px;gap:0;border:1px solid transparent;border-radius:var(--sui-radius-6);font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-size:var(--sui-type-label-xs-size);font-weight:var(--sui-type-label-xs-weight);line-height:var(--sui-type-label-xs-line);letter-spacing:var(--sui-type-label-xs-spacing);white-space:nowrap;vertical-align:middle;overflow:clip}.sui-tag__text{display:inline-flex;align-items:center;justify-content:center;gap:2px;min-width:0}.sui-tag__label{display:inline-flex;align-items:center;color:inherit}.sui-tag__sublabel{display:inline-flex;align-items:center;font-weight:400;color:var(--sui-text-soft-400)}:host ::ng-deep [data-slot=start]{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px}:host ::ng-deep [data-slot=start]>*{width:16px;height:16px}:host ::ng-deep [data-slot=start] img{width:16px;height:16px;object-fit:cover;display:block}:host([data-sui-leading]:not([data-sui-dismissible])){padding:4px 8px 4px 4px;gap:4px}:host([data-sui-leading][data-sui-dismissible]){padding:4px;gap:4px}.sui-tag__dismiss{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;margin:0;padding:0;border:0;background:transparent;color:var(--sui-icon-soft-400);cursor:pointer;border-radius:var(--sui-radius-4, 4px);transition:color .15s ease,background-color .15s ease;-webkit-tap-highlight-color:transparent}.sui-tag__dismiss:hover{color:var(--sui-text-strong-950)}.sui-tag__dismiss:disabled{cursor:not-allowed;color:inherit}:host([data-sui-dismissible]:not([data-sui-leading])){padding:4px 4px 4px 8px}:host([data-sui-style=stroke]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-text-sub-600)}:host([data-sui-style=gray]){background:var(--sui-bg-weak-50);border-color:transparent;color:var(--sui-text-sub-600)}:host([data-sui-style=gray]) ::ng-deep [data-slot=start] sui-icon{color:var(--sui-icon-soft-400)}:host([data-sui-interactive][data-sui-style=stroke]:hover){background:var(--sui-bg-weak-50)}:host([data-sui-interactive][data-sui-style=gray]:hover){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200)}:host([data-sui-interactive][data-sui-style=stroke]:active),:host([data-sui-interactive][data-sui-style=gray]:active){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-strong-950);color:var(--sui-text-strong-950)}:host([data-sui-interactive][data-sui-style=stroke]:active) .sui-tag__sublabel,:host([data-sui-interactive][data-sui-style=gray]:active) .sui-tag__sublabel{color:var(--sui-text-sub-600)}:host([data-sui-interactive][data-sui-style=stroke]:active) .sui-tag__dismiss:not(:disabled):not(:hover),:host([data-sui-interactive][data-sui-style=gray]:active) .sui-tag__dismiss:not(:disabled):not(:hover){color:var(--sui-text-strong-950)}:host([data-sui-interactive][data-sui-style=gray]:active) ::ng-deep [data-slot=start] sui-icon{color:var(--sui-icon-strong-950)}:host([data-sui-disabled]){pointer-events:none;background:var(--sui-bg-weak-50);border-color:transparent;color:var(--sui-text-disabled-300)}:host([data-sui-disabled]) .sui-tag__sublabel{color:var(--sui-text-disabled-300)}:host([data-sui-disabled]) .sui-tag__dismiss{color:var(--sui-icon-disabled-300)}:host([data-sui-disabled]) ::ng-deep [data-slot=start] sui-icon{color:var(--sui-icon-disabled-300)}\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: SuiTag, isStandalone: true, selector: "sui-tag", inputs: { tagStyle: { classPropertyName: "tagStyle", publicName: "tagStyle", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, leading: { classPropertyName: "leading", publicName: "leading", isSignal: true, isRequired: false, transformFunction: null }, sublabel: { classPropertyName: "sublabel", publicName: "sublabel", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, dismissLabel: { classPropertyName: "dismissLabel", publicName: "dismissLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismiss: "dismiss" }, host: { properties: { "attr.title": "null", "attr.data-sui-style": "tagStyle()", "attr.data-sui-size": "size()", "attr.data-sui-leading": "leading() ? \"\" : null", "attr.data-sui-dismissible": "dismissible() ? \"\" : null", "attr.data-sui-interactive": "interactive() ? \"\" : null", "attr.data-sui-disabled": "disabled() ? \"\" : null", "attr.aria-disabled": "disabled() ? \"true\" : null" } }, ngImport: i0, template: "<!-- Leading element (icon / avatar / flag / brand / company logo) \u2014 16\u00D716, gap-4 al texto.\n     Proyectado por el consumer; `leading` input ajusta padding/gap del host. -->\n<ng-content select=\"[data-slot=start]\"></ng-content>\n\n<!-- Bloque \"Text\" interno (Figma node \"Text\"): label + sublabel + close, gap-2. -->\n<span class=\"sui-tag__text\">\n  <span class=\"sui-tag__label\"><ng-content></ng-content></span>\n\n  @if (showsSublabel()) {\n    <span class=\"sui-tag__sublabel\">{{ sublabel() }}</span>\n  }\n\n  @if (dismissible()) {\n    <button\n      type=\"button\"\n      class=\"sui-tag__dismiss\"\n      [attr.aria-label]=\"dismissLabel()\"\n      [disabled]=\"disabled()\"\n      (click)=\"onDismiss($event)\"\n      (touchstart)=\"$any($event.currentTarget)\"\n      (touchend)=\"$any($event.currentTarget).blur()\"\n    >\n      <sui-icon name=\"close-line\" [size]=\"dismissIconSize()\" aria-hidden=\"true\" />\n    </button>\n  }\n</span>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:24px;padding:4px 8px;gap:0;border:1px solid transparent;border-radius:var(--sui-radius-6);font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-size:var(--sui-type-label-xs-size);font-weight:var(--sui-type-label-xs-weight);line-height:var(--sui-type-label-xs-line);letter-spacing:var(--sui-type-label-xs-spacing);white-space:nowrap;vertical-align:middle;overflow:clip}.sui-tag__text{display:inline-flex;align-items:center;justify-content:center;gap:2px;min-width:0}.sui-tag__label{display:inline-flex;align-items:center;color:inherit}.sui-tag__sublabel{display:inline-flex;align-items:center;font-weight:400;color:var(--sui-text-soft-400)}:host ::ng-deep [data-slot=start]{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px}:host ::ng-deep [data-slot=start]>*{width:16px;height:16px}:host ::ng-deep [data-slot=start] img{width:16px;height:16px;object-fit:cover;display:block}:host([data-sui-leading]:not([data-sui-dismissible])){padding:4px 8px 4px 4px;gap:4px}:host([data-sui-leading][data-sui-dismissible]){padding:4px;gap:4px}.sui-tag__dismiss{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;margin:0;padding:0;border:0;background:transparent;color:var(--sui-icon-soft-400);cursor:pointer;border-radius:var(--sui-radius-4, 4px);transition:color .15s ease,background-color .15s ease;-webkit-tap-highlight-color:transparent}.sui-tag__dismiss:hover{color:var(--sui-text-strong-950)}.sui-tag__dismiss:disabled{cursor:not-allowed;color:inherit}:host([data-sui-dismissible]:not([data-sui-leading])){padding:4px 4px 4px 8px}:host([data-sui-size=large]){height:32px;padding:0 10px;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)}:host([data-sui-size=xlarge]){height:40px;padding:0 12px;font-size:var(--sui-type-label-md-size);font-weight:var(--sui-type-label-md-weight);line-height:var(--sui-type-label-md-line);letter-spacing:var(--sui-type-label-md-spacing)}:host([data-sui-size=large][data-sui-leading]:not([data-sui-dismissible])){padding:0 10px 0 6px;gap:6px}:host([data-sui-size=large][data-sui-leading][data-sui-dismissible]){padding:0 6px;gap:6px}:host([data-sui-size=large][data-sui-dismissible]:not([data-sui-leading])){padding:0 6px 0 10px}:host([data-sui-size=xlarge][data-sui-leading]:not([data-sui-dismissible])){padding:0 12px 0 8px;gap:8px}:host([data-sui-size=xlarge][data-sui-leading][data-sui-dismissible]){padding:0 8px;gap:8px}:host([data-sui-size=xlarge][data-sui-dismissible]:not([data-sui-leading])){padding:0 8px 0 12px}:host([data-sui-size=large]) .sui-tag__text,:host([data-sui-size=xlarge]) .sui-tag__text{gap:4px}:host([data-sui-size=large]) ::ng-deep [data-slot=start],:host([data-sui-size=large]) ::ng-deep [data-slot=start]>*,:host([data-sui-size=large]) ::ng-deep [data-slot=start] img,:host([data-sui-size=xlarge]) ::ng-deep [data-slot=start],:host([data-sui-size=xlarge]) ::ng-deep [data-slot=start]>*,:host([data-sui-size=xlarge]) ::ng-deep [data-slot=start] img{width:20px;height:20px}:host([data-sui-size=large]) .sui-tag__dismiss{position:relative;width:20px;height:20px}:host([data-sui-size=xlarge]) .sui-tag__dismiss{position:relative;width:24px;height:24px}:host([data-sui-size=large]) .sui-tag__dismiss:before,:host([data-sui-size=xlarge]) .sui-tag__dismiss:before{content:\"\";position:absolute;inset:-6px}:host([data-sui-size=xlarge]) .sui-tag__dismiss:before{inset:-8px}:host([data-sui-style=stroke]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-text-sub-600)}:host([data-sui-style=gray]){background:var(--sui-bg-weak-50);border-color:transparent;color:var(--sui-text-sub-600)}:host([data-sui-style=gray]) ::ng-deep [data-slot=start] sui-icon{color:var(--sui-icon-soft-400)}:host([data-sui-interactive][data-sui-style=stroke]:hover){background:var(--sui-bg-weak-50)}:host([data-sui-interactive][data-sui-style=gray]:hover){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200)}:host([data-sui-interactive][data-sui-style=stroke]:active),:host([data-sui-interactive][data-sui-style=gray]:active){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-strong-950);color:var(--sui-text-strong-950)}:host([data-sui-interactive][data-sui-style=stroke]:active) .sui-tag__sublabel,:host([data-sui-interactive][data-sui-style=gray]:active) .sui-tag__sublabel{color:var(--sui-text-sub-600)}:host([data-sui-interactive][data-sui-style=stroke]:active) .sui-tag__dismiss:not(:disabled):not(:hover),:host([data-sui-interactive][data-sui-style=gray]:active) .sui-tag__dismiss:not(:disabled):not(:hover){color:var(--sui-text-strong-950)}:host([data-sui-interactive][data-sui-style=gray]:active) ::ng-deep [data-slot=start] sui-icon{color:var(--sui-icon-strong-950)}:host([data-sui-disabled]){pointer-events:none;background:var(--sui-bg-weak-50);border-color:transparent;color:var(--sui-text-disabled-300)}:host([data-sui-disabled]) .sui-tag__sublabel{color:var(--sui-text-disabled-300)}:host([data-sui-disabled]) .sui-tag__dismiss{color:var(--sui-icon-disabled-300)}:host([data-sui-disabled]) ::ng-deep [data-slot=start] sui-icon{color:var(--sui-icon-disabled-300)}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTag, decorators: [{
             type: Component,
@@ -17726,6 +17866,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         /* Strip native `title` attr — patrón canon Ontop (ver CLAUDE.md). */
                         '[attr.title]': 'null',
                         '[attr.data-sui-style]': 'tagStyle()',
+                        '[attr.data-sui-size]': 'size()',
                         '[attr.data-sui-leading]': 'leading() ? "" : null',
                         '[attr.data-sui-dismissible]': 'dismissible() ? "" : null',
                         '[attr.data-sui-interactive]': 'interactive() ? "" : null',
@@ -17734,8 +17875,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                            region que hacía que los lectores de pantalla anunciaran cada cambio de
                            contenido proyectado. Se omite el role para que renderee como genérico. */
                         '[attr.aria-disabled]': 'disabled() ? "true" : null',
-                    }, template: "<!-- Leading element (icon / avatar / flag / brand / company logo) \u2014 16\u00D716, gap-4 al texto.\n     Proyectado por el consumer; `leading` input ajusta padding/gap del host. -->\n<ng-content select=\"[data-slot=start]\"></ng-content>\n\n<!-- Bloque \"Text\" interno (Figma node \"Text\"): label + sublabel + close, gap-2. -->\n<span class=\"sui-tag__text\">\n  <span class=\"sui-tag__label\"><ng-content></ng-content></span>\n\n  @if (showsSublabel()) {\n    <span class=\"sui-tag__sublabel\">{{ sublabel() }}</span>\n  }\n\n  @if (dismissible()) {\n    <button\n      type=\"button\"\n      class=\"sui-tag__dismiss\"\n      [attr.aria-label]=\"dismissLabel()\"\n      [disabled]=\"disabled()\"\n      (click)=\"onDismiss($event)\"\n      (touchstart)=\"$any($event.currentTarget)\"\n      (touchend)=\"$any($event.currentTarget).blur()\"\n    >\n      <sui-icon name=\"close-line\" [size]=\"16\" aria-hidden=\"true\" />\n    </button>\n  }\n</span>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:24px;padding:4px 8px;gap:0;border:1px solid transparent;border-radius:var(--sui-radius-6);font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-size:var(--sui-type-label-xs-size);font-weight:var(--sui-type-label-xs-weight);line-height:var(--sui-type-label-xs-line);letter-spacing:var(--sui-type-label-xs-spacing);white-space:nowrap;vertical-align:middle;overflow:clip}.sui-tag__text{display:inline-flex;align-items:center;justify-content:center;gap:2px;min-width:0}.sui-tag__label{display:inline-flex;align-items:center;color:inherit}.sui-tag__sublabel{display:inline-flex;align-items:center;font-weight:400;color:var(--sui-text-soft-400)}:host ::ng-deep [data-slot=start]{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px}:host ::ng-deep [data-slot=start]>*{width:16px;height:16px}:host ::ng-deep [data-slot=start] img{width:16px;height:16px;object-fit:cover;display:block}:host([data-sui-leading]:not([data-sui-dismissible])){padding:4px 8px 4px 4px;gap:4px}:host([data-sui-leading][data-sui-dismissible]){padding:4px;gap:4px}.sui-tag__dismiss{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;margin:0;padding:0;border:0;background:transparent;color:var(--sui-icon-soft-400);cursor:pointer;border-radius:var(--sui-radius-4, 4px);transition:color .15s ease,background-color .15s ease;-webkit-tap-highlight-color:transparent}.sui-tag__dismiss:hover{color:var(--sui-text-strong-950)}.sui-tag__dismiss:disabled{cursor:not-allowed;color:inherit}:host([data-sui-dismissible]:not([data-sui-leading])){padding:4px 4px 4px 8px}:host([data-sui-style=stroke]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-text-sub-600)}:host([data-sui-style=gray]){background:var(--sui-bg-weak-50);border-color:transparent;color:var(--sui-text-sub-600)}:host([data-sui-style=gray]) ::ng-deep [data-slot=start] sui-icon{color:var(--sui-icon-soft-400)}:host([data-sui-interactive][data-sui-style=stroke]:hover){background:var(--sui-bg-weak-50)}:host([data-sui-interactive][data-sui-style=gray]:hover){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200)}:host([data-sui-interactive][data-sui-style=stroke]:active),:host([data-sui-interactive][data-sui-style=gray]:active){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-strong-950);color:var(--sui-text-strong-950)}:host([data-sui-interactive][data-sui-style=stroke]:active) .sui-tag__sublabel,:host([data-sui-interactive][data-sui-style=gray]:active) .sui-tag__sublabel{color:var(--sui-text-sub-600)}:host([data-sui-interactive][data-sui-style=stroke]:active) .sui-tag__dismiss:not(:disabled):not(:hover),:host([data-sui-interactive][data-sui-style=gray]:active) .sui-tag__dismiss:not(:disabled):not(:hover){color:var(--sui-text-strong-950)}:host([data-sui-interactive][data-sui-style=gray]:active) ::ng-deep [data-slot=start] sui-icon{color:var(--sui-icon-strong-950)}:host([data-sui-disabled]){pointer-events:none;background:var(--sui-bg-weak-50);border-color:transparent;color:var(--sui-text-disabled-300)}:host([data-sui-disabled]) .sui-tag__sublabel{color:var(--sui-text-disabled-300)}:host([data-sui-disabled]) .sui-tag__dismiss{color:var(--sui-icon-disabled-300)}:host([data-sui-disabled]) ::ng-deep [data-slot=start] sui-icon{color:var(--sui-icon-disabled-300)}\n"] }]
-        }], propDecorators: { tagStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "tagStyle", required: false }] }], leading: [{ type: i0.Input, args: [{ isSignal: true, alias: "leading", required: false }] }], sublabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sublabel", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], dismissLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissLabel", required: false }] }], dismiss: [{ type: i0.Output, args: ["dismiss"] }] } });
+                    }, template: "<!-- Leading element (icon / avatar / flag / brand / company logo) \u2014 16\u00D716, gap-4 al texto.\n     Proyectado por el consumer; `leading` input ajusta padding/gap del host. -->\n<ng-content select=\"[data-slot=start]\"></ng-content>\n\n<!-- Bloque \"Text\" interno (Figma node \"Text\"): label + sublabel + close, gap-2. -->\n<span class=\"sui-tag__text\">\n  <span class=\"sui-tag__label\"><ng-content></ng-content></span>\n\n  @if (showsSublabel()) {\n    <span class=\"sui-tag__sublabel\">{{ sublabel() }}</span>\n  }\n\n  @if (dismissible()) {\n    <button\n      type=\"button\"\n      class=\"sui-tag__dismiss\"\n      [attr.aria-label]=\"dismissLabel()\"\n      [disabled]=\"disabled()\"\n      (click)=\"onDismiss($event)\"\n      (touchstart)=\"$any($event.currentTarget)\"\n      (touchend)=\"$any($event.currentTarget).blur()\"\n    >\n      <sui-icon name=\"close-line\" [size]=\"dismissIconSize()\" aria-hidden=\"true\" />\n    </button>\n  }\n</span>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:24px;padding:4px 8px;gap:0;border:1px solid transparent;border-radius:var(--sui-radius-6);font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-size:var(--sui-type-label-xs-size);font-weight:var(--sui-type-label-xs-weight);line-height:var(--sui-type-label-xs-line);letter-spacing:var(--sui-type-label-xs-spacing);white-space:nowrap;vertical-align:middle;overflow:clip}.sui-tag__text{display:inline-flex;align-items:center;justify-content:center;gap:2px;min-width:0}.sui-tag__label{display:inline-flex;align-items:center;color:inherit}.sui-tag__sublabel{display:inline-flex;align-items:center;font-weight:400;color:var(--sui-text-soft-400)}:host ::ng-deep [data-slot=start]{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px}:host ::ng-deep [data-slot=start]>*{width:16px;height:16px}:host ::ng-deep [data-slot=start] img{width:16px;height:16px;object-fit:cover;display:block}:host([data-sui-leading]:not([data-sui-dismissible])){padding:4px 8px 4px 4px;gap:4px}:host([data-sui-leading][data-sui-dismissible]){padding:4px;gap:4px}.sui-tag__dismiss{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;margin:0;padding:0;border:0;background:transparent;color:var(--sui-icon-soft-400);cursor:pointer;border-radius:var(--sui-radius-4, 4px);transition:color .15s ease,background-color .15s ease;-webkit-tap-highlight-color:transparent}.sui-tag__dismiss:hover{color:var(--sui-text-strong-950)}.sui-tag__dismiss:disabled{cursor:not-allowed;color:inherit}:host([data-sui-dismissible]:not([data-sui-leading])){padding:4px 4px 4px 8px}:host([data-sui-size=large]){height:32px;padding:0 10px;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)}:host([data-sui-size=xlarge]){height:40px;padding:0 12px;font-size:var(--sui-type-label-md-size);font-weight:var(--sui-type-label-md-weight);line-height:var(--sui-type-label-md-line);letter-spacing:var(--sui-type-label-md-spacing)}:host([data-sui-size=large][data-sui-leading]:not([data-sui-dismissible])){padding:0 10px 0 6px;gap:6px}:host([data-sui-size=large][data-sui-leading][data-sui-dismissible]){padding:0 6px;gap:6px}:host([data-sui-size=large][data-sui-dismissible]:not([data-sui-leading])){padding:0 6px 0 10px}:host([data-sui-size=xlarge][data-sui-leading]:not([data-sui-dismissible])){padding:0 12px 0 8px;gap:8px}:host([data-sui-size=xlarge][data-sui-leading][data-sui-dismissible]){padding:0 8px;gap:8px}:host([data-sui-size=xlarge][data-sui-dismissible]:not([data-sui-leading])){padding:0 8px 0 12px}:host([data-sui-size=large]) .sui-tag__text,:host([data-sui-size=xlarge]) .sui-tag__text{gap:4px}:host([data-sui-size=large]) ::ng-deep [data-slot=start],:host([data-sui-size=large]) ::ng-deep [data-slot=start]>*,:host([data-sui-size=large]) ::ng-deep [data-slot=start] img,:host([data-sui-size=xlarge]) ::ng-deep [data-slot=start],:host([data-sui-size=xlarge]) ::ng-deep [data-slot=start]>*,:host([data-sui-size=xlarge]) ::ng-deep [data-slot=start] img{width:20px;height:20px}:host([data-sui-size=large]) .sui-tag__dismiss{position:relative;width:20px;height:20px}:host([data-sui-size=xlarge]) .sui-tag__dismiss{position:relative;width:24px;height:24px}:host([data-sui-size=large]) .sui-tag__dismiss:before,:host([data-sui-size=xlarge]) .sui-tag__dismiss:before{content:\"\";position:absolute;inset:-6px}:host([data-sui-size=xlarge]) .sui-tag__dismiss:before{inset:-8px}:host([data-sui-style=stroke]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-text-sub-600)}:host([data-sui-style=gray]){background:var(--sui-bg-weak-50);border-color:transparent;color:var(--sui-text-sub-600)}:host([data-sui-style=gray]) ::ng-deep [data-slot=start] sui-icon{color:var(--sui-icon-soft-400)}:host([data-sui-interactive][data-sui-style=stroke]:hover){background:var(--sui-bg-weak-50)}:host([data-sui-interactive][data-sui-style=gray]:hover){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200)}:host([data-sui-interactive][data-sui-style=stroke]:active),:host([data-sui-interactive][data-sui-style=gray]:active){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-strong-950);color:var(--sui-text-strong-950)}:host([data-sui-interactive][data-sui-style=stroke]:active) .sui-tag__sublabel,:host([data-sui-interactive][data-sui-style=gray]:active) .sui-tag__sublabel{color:var(--sui-text-sub-600)}:host([data-sui-interactive][data-sui-style=stroke]:active) .sui-tag__dismiss:not(:disabled):not(:hover),:host([data-sui-interactive][data-sui-style=gray]:active) .sui-tag__dismiss:not(:disabled):not(:hover){color:var(--sui-text-strong-950)}:host([data-sui-interactive][data-sui-style=gray]:active) ::ng-deep [data-slot=start] sui-icon{color:var(--sui-icon-strong-950)}:host([data-sui-disabled]){pointer-events:none;background:var(--sui-bg-weak-50);border-color:transparent;color:var(--sui-text-disabled-300)}:host([data-sui-disabled]) .sui-tag__sublabel{color:var(--sui-text-disabled-300)}:host([data-sui-disabled]) .sui-tag__dismiss{color:var(--sui-icon-disabled-300)}:host([data-sui-disabled]) ::ng-deep [data-slot=start] sui-icon{color:var(--sui-icon-disabled-300)}\n"] }]
+        }], propDecorators: { tagStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "tagStyle", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], leading: [{ type: i0.Input, args: [{ isSignal: true, alias: "leading", required: false }] }], sublabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sublabel", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], dismissLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissLabel", required: false }] }], dismiss: [{ type: i0.Output, args: ["dismiss"] }] } });
 
 /**
  * SUI Tag Input — SUI Design System 2.0
@@ -17759,6 +17900,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  *   - small  (Small 36):   py=8px, pl=10px, pr=8px, gap=8px, radius=8px
  *   - medium (Medium 40):  py=10px, pl=12px, pr=10px, gap=8px, radius=10px (default)
  *
+ *   - large  (48, extensión SUI 03-10-2026): py=12−1, pl=14, pr=12, gap=10, radius=12
+ *   - xlarge (52, extensión SUI 03-10-2026): py=14−1, pl=16, pr=14, gap=10, radius=12
+ *     Mismos valores que `sui-input` large/xlarge, para que un tag-input y un input
+ *     del mismo formulario midan igual en mobile.
+ *
  *   El alto se deriva del line-height(20) del texto + 2×py. No height explícito.
  *
  *   - Texto input/placeholder: Paragraph/Small (Inter 14 / 20 / -0.084px ≈ -0.006em),
@@ -17844,6 +17990,15 @@ class SuiTagInput {
             return r;
         return null;
     }, ...(ngDevMode ? [{ debugName: "rightIconCfg" }] : /* istanbul ignore next */ []));
+    /**
+     * El tamaño que se le pasa al `sui-form-label`. Igual que en `sui-input`: el
+     * label no crece con el campo; en large y xlarge crece el área de toque, no la
+     * jerarquía del formulario (y `SuiFormLabelSize` llega hasta medium).
+     */
+    labelSize = computed(() => {
+        const s = this.size();
+        return s === 'large' || s === 'xlarge' ? 'medium' : s;
+    }, ...(ngDevMode ? [{ debugName: "labelSize" }] : /* istanbul ignore next */ []));
     // ── Label inputs (delegated to sui-form-label) ──────────────────────────────
     label = input(null, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     sublabel = input(null, ...(ngDevMode ? [{ debugName: "sublabel" }] : /* istanbul ignore next */ []));
@@ -17983,7 +18138,7 @@ class SuiTagInput {
                 useExisting: forwardRef(() => SuiTagInput),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true }], ngImport: i0, template: "<!-- Label (Figma \"Label [1.1]\" arriba del field) \u2014 delegado a sui-form-label. -->\n@if (label()) {\n  <sui-form-label\n    [label]=\"label()!\"\n    [sublabel]=\"sublabel()\"\n    [required]=\"required()\"\n    [tooltip]=\"tooltip()\"\n    [size]=\"size()\"\n    class=\"sui-tag-input__label-host\"\n  />\n}\n\n<!-- Input box \"Basic\" \u2014 texto libre. Click en cualquier zona enfoca el input. -->\n<div\n  class=\"sui-tag-input__field\"\n  [class.sui-tag-input__field--error]=\"error()\"\n  [class.sui-tag-input__field--disabled]=\"isDisabled()\"\n  (mousedown)=\"onFieldPointerDown($event)\"\n>\n  <input\n    #inputEl\n    class=\"sui-tag-input__control\"\n    type=\"text\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    [value]=\"draft()\"\n    autocomplete=\"off\"\n    (input)=\"onInput($event)\"\n    (keydown)=\"onKeydown($event)\"\n    (blur)=\"onBlur()\"\n  />\n\n  <!-- Trailing icon (Figma rightIcon / pickRight, node 428:4819) \u2014 20\u00D720 info-custom-fill\n       (rightIcon=true), un icono custom (rightIcon=\"nombre\"), o el contenido que\n       proyecte el consumer en [slot=right]. -->\n  @if (rightIconCfg(); as rightIconName) {\n    <span class=\"sui-tag-input__right\">\n      <ng-content select=\"[slot=right]\">\n        <sui-icon [name]=\"rightIconName\" [size]=\"20\" />\n      </ng-content>\n    </span>\n  }\n</div>\n\n<!-- Tags row (Figma frame \"Tags\") \u2014 fila aparte debajo del input, pt=4 gap=8, wrap. -->\n@if (hasTags()) {\n  <div class=\"sui-tag-input__tags\" role=\"list\">\n    @for (tag of value(); track $index) {\n      <sui-tag\n        role=\"listitem\"\n        tagStyle=\"stroke\"\n        [dismissible]=\"true\"\n        [disabled]=\"isDisabled()\"\n        [dismissLabel]=\"'Quitar ' + tag\"\n        (dismiss)=\"removeAt($index)\"\n      >\n        {{ tag }}\n      </sui-tag>\n    }\n  </div>\n}\n\n<!-- Hint / error message \u2014 delegado a sui-form-hint.\n     El hint neutral muestra el icono 16\u00D716 `information-fill` (Figma node\n     I428:4900;266:5272); el error conserva su icono default (error-warning-line). -->\n@if (error() ? errorMessage() : hint()) {\n  <sui-form-hint\n    [message]=\"error() ? errorMessage() : hint()\"\n    [variant]=\"error() ? 'error' : 'neutral'\"\n    [icon]=\"error() ? undefined : 'information-fill'\"\n    class=\"sui-tag-input__hint-host\"\n  />\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-tag-input__label-host{display:block;margin-bottom:4px}.sui-tag-input__field{display:flex;align-items:center;width:100%;box-sizing:border-box;overflow:hidden;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);cursor:text;transition:border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-size=xsmall]) .sui-tag-input__field{gap:6px;padding:5px 6px 5px 10px;border-radius:var(--sui-radius-8);min-height:32px}:host([data-sui-size=small]) .sui-tag-input__field{gap:8px;padding:7px 8px 7px 10px;border-radius:var(--sui-radius-8);min-height:36px}:host([data-sui-size=medium]) .sui-tag-input__field,:host(:not([data-sui-size])) .sui-tag-input__field{gap:8px;padding:9px 10px 9px 12px;border-radius:var(--sui-radius-10);min-height:40px}.sui-tag-input__control{flex:1 0 0;min-width:0;width:100%;margin:0;padding:0;border:0;outline:0;background:transparent;color:var(--sui-text-strong-950);font-family:inherit;font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-tag-input__control::placeholder{color:var(--sui-text-soft-400);opacity:1}.sui-tag-input__right{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-soft-400);pointer-events:none}:host([data-sui-disabled]) .sui-tag-input__right{color:var(--sui-icon-disabled-300)}:host(:not([data-sui-disabled]):not([data-sui-error])) .sui-tag-input__field:hover{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}:host(:not([data-sui-disabled]):not([data-sui-error])) .sui-tag-input__field:hover .sui-tag-input__control::placeholder{color:var(--sui-text-sub-600)}:host(:not([data-sui-disabled]):not([data-sui-error])) .sui-tag-input__field:focus-within{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}:host([data-sui-error]) .sui-tag-input__field,.sui-tag-input__field--error{border-color:var(--sui-state-error-base)}:host([data-sui-error]) .sui-tag-input__field:focus-within{border-color:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-red-alpha-16)}:host([data-sui-disabled]) .sui-tag-input__field,.sui-tag-input__field--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed}:host([data-sui-disabled]) .sui-tag-input__control{color:var(--sui-text-disabled-300);cursor:not-allowed}:host([data-sui-disabled]) .sui-tag-input__control::placeholder{color:var(--sui-text-disabled-300)}.sui-tag-input__tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:4px;width:100%}.sui-tag-input__hint-host{display:block;margin-top:4px}\n"], dependencies: [{ kind: "component", type: SuiTag, selector: "sui-tag", inputs: ["tagStyle", "leading", "sublabel", "dismissible", "interactive", "disabled", "dismissLabel"], outputs: ["dismiss"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiFormLabel, selector: "sui-form-label", inputs: ["label", "sublabel", "required", "tooltip", "link", "size", "disabled", "for"], outputs: ["linkClick"] }, { kind: "component", type: SuiFormHint, selector: "sui-form-hint", inputs: ["message", "variant", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true }], ngImport: i0, template: "<!-- Label (Figma \"Label [1.1]\" arriba del field) \u2014 delegado a sui-form-label. -->\n@if (label()) {\n  <sui-form-label\n    [label]=\"label()!\"\n    [sublabel]=\"sublabel()\"\n    [required]=\"required()\"\n    [tooltip]=\"tooltip()\"\n    [size]=\"labelSize()\"\n    class=\"sui-tag-input__label-host\"\n  />\n}\n\n<!-- Input box \"Basic\" \u2014 texto libre. Click en cualquier zona enfoca el input. -->\n<div\n  class=\"sui-tag-input__field\"\n  [class.sui-tag-input__field--error]=\"error()\"\n  [class.sui-tag-input__field--disabled]=\"isDisabled()\"\n  (mousedown)=\"onFieldPointerDown($event)\"\n>\n  <input\n    #inputEl\n    class=\"sui-tag-input__control\"\n    type=\"text\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    [value]=\"draft()\"\n    autocomplete=\"off\"\n    (input)=\"onInput($event)\"\n    (keydown)=\"onKeydown($event)\"\n    (blur)=\"onBlur()\"\n  />\n\n  <!-- Trailing icon (Figma rightIcon / pickRight, node 428:4819) \u2014 20\u00D720 info-custom-fill\n       (rightIcon=true), un icono custom (rightIcon=\"nombre\"), o el contenido que\n       proyecte el consumer en [slot=right]. -->\n  @if (rightIconCfg(); as rightIconName) {\n    <span class=\"sui-tag-input__right\">\n      <ng-content select=\"[slot=right]\">\n        <sui-icon [name]=\"rightIconName\" [size]=\"20\" />\n      </ng-content>\n    </span>\n  }\n</div>\n\n<!-- Tags row (Figma frame \"Tags\") \u2014 fila aparte debajo del input, pt=4 gap=8, wrap. -->\n@if (hasTags()) {\n  <div class=\"sui-tag-input__tags\" role=\"list\">\n    @for (tag of value(); track $index) {\n      <sui-tag\n        role=\"listitem\"\n        tagStyle=\"stroke\"\n        [dismissible]=\"true\"\n        [disabled]=\"isDisabled()\"\n        [dismissLabel]=\"'Quitar ' + tag\"\n        (dismiss)=\"removeAt($index)\"\n      >\n        {{ tag }}\n      </sui-tag>\n    }\n  </div>\n}\n\n<!-- Hint / error message \u2014 delegado a sui-form-hint.\n     El hint neutral muestra el icono 16\u00D716 `information-fill` (Figma node\n     I428:4900;266:5272); el error conserva su icono default (error-warning-line). -->\n@if (error() ? errorMessage() : hint()) {\n  <sui-form-hint\n    [message]=\"error() ? errorMessage() : hint()\"\n    [variant]=\"error() ? 'error' : 'neutral'\"\n    [icon]=\"error() ? undefined : 'information-fill'\"\n    class=\"sui-tag-input__hint-host\"\n  />\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-tag-input__label-host{display:block;margin-bottom:4px}.sui-tag-input__field{display:flex;align-items:center;width:100%;box-sizing:border-box;overflow:hidden;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);cursor:text;transition:border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-size=xsmall]) .sui-tag-input__field{gap:6px;padding:5px 6px 5px 10px;border-radius:var(--sui-radius-8);min-height:32px}:host([data-sui-size=small]) .sui-tag-input__field{gap:8px;padding:7px 8px 7px 10px;border-radius:var(--sui-radius-8);min-height:36px}:host([data-sui-size=medium]) .sui-tag-input__field,:host(:not([data-sui-size])) .sui-tag-input__field{gap:8px;padding:9px 10px 9px 12px;border-radius:var(--sui-radius-10);min-height:40px}:host([data-sui-size=large]) .sui-tag-input__field{gap:10px;padding:11px 12px 11px 14px;border-radius:var(--sui-radius-12);min-height:48px}:host([data-sui-size=xlarge]) .sui-tag-input__field{gap:10px;padding:13px 14px 13px 16px;border-radius:var(--sui-radius-12);min-height:52px}.sui-tag-input__control{flex:1 0 0;min-width:0;width:100%;margin:0;padding:0;border:0;outline:0;background:transparent;color:var(--sui-text-strong-950);font-family:inherit;font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}@media(max-width:767px){.sui-tag-input__control{font-size:16px}}.sui-tag-input__control::placeholder{color:var(--sui-text-soft-400);opacity:1}.sui-tag-input__right{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-soft-400);pointer-events:none}:host([data-sui-disabled]) .sui-tag-input__right{color:var(--sui-icon-disabled-300)}:host(:not([data-sui-disabled]):not([data-sui-error])) .sui-tag-input__field:hover{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}:host(:not([data-sui-disabled]):not([data-sui-error])) .sui-tag-input__field:hover .sui-tag-input__control::placeholder{color:var(--sui-text-sub-600)}:host(:not([data-sui-disabled]):not([data-sui-error])) .sui-tag-input__field:focus-within{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}:host([data-sui-error]) .sui-tag-input__field,.sui-tag-input__field--error{border-color:var(--sui-state-error-base)}:host([data-sui-error]) .sui-tag-input__field:focus-within{border-color:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-red-alpha-16)}:host([data-sui-disabled]) .sui-tag-input__field,.sui-tag-input__field--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed}:host([data-sui-disabled]) .sui-tag-input__control{color:var(--sui-text-disabled-300);cursor:not-allowed}:host([data-sui-disabled]) .sui-tag-input__control::placeholder{color:var(--sui-text-disabled-300)}.sui-tag-input__tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:4px;width:100%}.sui-tag-input__hint-host{display:block;margin-top:4px}\n"], dependencies: [{ kind: "component", type: SuiTag, selector: "sui-tag", inputs: ["tagStyle", "size", "leading", "sublabel", "dismissible", "interactive", "disabled", "dismissLabel"], outputs: ["dismiss"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiFormLabel, selector: "sui-form-label", inputs: ["label", "sublabel", "required", "tooltip", "link", "size", "disabled", "for"], outputs: ["linkClick"] }, { kind: "component", type: SuiFormHint, selector: "sui-form-hint", inputs: ["message", "variant", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTagInput, decorators: [{
             type: Component,
@@ -17999,7 +18154,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         '[attr.data-sui-size]': 'size()',
                         '[attr.data-sui-error]': 'error() ? "" : null',
                         '[attr.data-sui-disabled]': 'isDisabled() ? "" : null',
-                    }, template: "<!-- Label (Figma \"Label [1.1]\" arriba del field) \u2014 delegado a sui-form-label. -->\n@if (label()) {\n  <sui-form-label\n    [label]=\"label()!\"\n    [sublabel]=\"sublabel()\"\n    [required]=\"required()\"\n    [tooltip]=\"tooltip()\"\n    [size]=\"size()\"\n    class=\"sui-tag-input__label-host\"\n  />\n}\n\n<!-- Input box \"Basic\" \u2014 texto libre. Click en cualquier zona enfoca el input. -->\n<div\n  class=\"sui-tag-input__field\"\n  [class.sui-tag-input__field--error]=\"error()\"\n  [class.sui-tag-input__field--disabled]=\"isDisabled()\"\n  (mousedown)=\"onFieldPointerDown($event)\"\n>\n  <input\n    #inputEl\n    class=\"sui-tag-input__control\"\n    type=\"text\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    [value]=\"draft()\"\n    autocomplete=\"off\"\n    (input)=\"onInput($event)\"\n    (keydown)=\"onKeydown($event)\"\n    (blur)=\"onBlur()\"\n  />\n\n  <!-- Trailing icon (Figma rightIcon / pickRight, node 428:4819) \u2014 20\u00D720 info-custom-fill\n       (rightIcon=true), un icono custom (rightIcon=\"nombre\"), o el contenido que\n       proyecte el consumer en [slot=right]. -->\n  @if (rightIconCfg(); as rightIconName) {\n    <span class=\"sui-tag-input__right\">\n      <ng-content select=\"[slot=right]\">\n        <sui-icon [name]=\"rightIconName\" [size]=\"20\" />\n      </ng-content>\n    </span>\n  }\n</div>\n\n<!-- Tags row (Figma frame \"Tags\") \u2014 fila aparte debajo del input, pt=4 gap=8, wrap. -->\n@if (hasTags()) {\n  <div class=\"sui-tag-input__tags\" role=\"list\">\n    @for (tag of value(); track $index) {\n      <sui-tag\n        role=\"listitem\"\n        tagStyle=\"stroke\"\n        [dismissible]=\"true\"\n        [disabled]=\"isDisabled()\"\n        [dismissLabel]=\"'Quitar ' + tag\"\n        (dismiss)=\"removeAt($index)\"\n      >\n        {{ tag }}\n      </sui-tag>\n    }\n  </div>\n}\n\n<!-- Hint / error message \u2014 delegado a sui-form-hint.\n     El hint neutral muestra el icono 16\u00D716 `information-fill` (Figma node\n     I428:4900;266:5272); el error conserva su icono default (error-warning-line). -->\n@if (error() ? errorMessage() : hint()) {\n  <sui-form-hint\n    [message]=\"error() ? errorMessage() : hint()\"\n    [variant]=\"error() ? 'error' : 'neutral'\"\n    [icon]=\"error() ? undefined : 'information-fill'\"\n    class=\"sui-tag-input__hint-host\"\n  />\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-tag-input__label-host{display:block;margin-bottom:4px}.sui-tag-input__field{display:flex;align-items:center;width:100%;box-sizing:border-box;overflow:hidden;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);cursor:text;transition:border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-size=xsmall]) .sui-tag-input__field{gap:6px;padding:5px 6px 5px 10px;border-radius:var(--sui-radius-8);min-height:32px}:host([data-sui-size=small]) .sui-tag-input__field{gap:8px;padding:7px 8px 7px 10px;border-radius:var(--sui-radius-8);min-height:36px}:host([data-sui-size=medium]) .sui-tag-input__field,:host(:not([data-sui-size])) .sui-tag-input__field{gap:8px;padding:9px 10px 9px 12px;border-radius:var(--sui-radius-10);min-height:40px}.sui-tag-input__control{flex:1 0 0;min-width:0;width:100%;margin:0;padding:0;border:0;outline:0;background:transparent;color:var(--sui-text-strong-950);font-family:inherit;font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-tag-input__control::placeholder{color:var(--sui-text-soft-400);opacity:1}.sui-tag-input__right{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-soft-400);pointer-events:none}:host([data-sui-disabled]) .sui-tag-input__right{color:var(--sui-icon-disabled-300)}:host(:not([data-sui-disabled]):not([data-sui-error])) .sui-tag-input__field:hover{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}:host(:not([data-sui-disabled]):not([data-sui-error])) .sui-tag-input__field:hover .sui-tag-input__control::placeholder{color:var(--sui-text-sub-600)}:host(:not([data-sui-disabled]):not([data-sui-error])) .sui-tag-input__field:focus-within{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}:host([data-sui-error]) .sui-tag-input__field,.sui-tag-input__field--error{border-color:var(--sui-state-error-base)}:host([data-sui-error]) .sui-tag-input__field:focus-within{border-color:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-red-alpha-16)}:host([data-sui-disabled]) .sui-tag-input__field,.sui-tag-input__field--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed}:host([data-sui-disabled]) .sui-tag-input__control{color:var(--sui-text-disabled-300);cursor:not-allowed}:host([data-sui-disabled]) .sui-tag-input__control::placeholder{color:var(--sui-text-disabled-300)}.sui-tag-input__tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:4px;width:100%}.sui-tag-input__hint-host{display:block;margin-top:4px}\n"] }]
+                    }, template: "<!-- Label (Figma \"Label [1.1]\" arriba del field) \u2014 delegado a sui-form-label. -->\n@if (label()) {\n  <sui-form-label\n    [label]=\"label()!\"\n    [sublabel]=\"sublabel()\"\n    [required]=\"required()\"\n    [tooltip]=\"tooltip()\"\n    [size]=\"labelSize()\"\n    class=\"sui-tag-input__label-host\"\n  />\n}\n\n<!-- Input box \"Basic\" \u2014 texto libre. Click en cualquier zona enfoca el input. -->\n<div\n  class=\"sui-tag-input__field\"\n  [class.sui-tag-input__field--error]=\"error()\"\n  [class.sui-tag-input__field--disabled]=\"isDisabled()\"\n  (mousedown)=\"onFieldPointerDown($event)\"\n>\n  <input\n    #inputEl\n    class=\"sui-tag-input__control\"\n    type=\"text\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    [value]=\"draft()\"\n    autocomplete=\"off\"\n    (input)=\"onInput($event)\"\n    (keydown)=\"onKeydown($event)\"\n    (blur)=\"onBlur()\"\n  />\n\n  <!-- Trailing icon (Figma rightIcon / pickRight, node 428:4819) \u2014 20\u00D720 info-custom-fill\n       (rightIcon=true), un icono custom (rightIcon=\"nombre\"), o el contenido que\n       proyecte el consumer en [slot=right]. -->\n  @if (rightIconCfg(); as rightIconName) {\n    <span class=\"sui-tag-input__right\">\n      <ng-content select=\"[slot=right]\">\n        <sui-icon [name]=\"rightIconName\" [size]=\"20\" />\n      </ng-content>\n    </span>\n  }\n</div>\n\n<!-- Tags row (Figma frame \"Tags\") \u2014 fila aparte debajo del input, pt=4 gap=8, wrap. -->\n@if (hasTags()) {\n  <div class=\"sui-tag-input__tags\" role=\"list\">\n    @for (tag of value(); track $index) {\n      <sui-tag\n        role=\"listitem\"\n        tagStyle=\"stroke\"\n        [dismissible]=\"true\"\n        [disabled]=\"isDisabled()\"\n        [dismissLabel]=\"'Quitar ' + tag\"\n        (dismiss)=\"removeAt($index)\"\n      >\n        {{ tag }}\n      </sui-tag>\n    }\n  </div>\n}\n\n<!-- Hint / error message \u2014 delegado a sui-form-hint.\n     El hint neutral muestra el icono 16\u00D716 `information-fill` (Figma node\n     I428:4900;266:5272); el error conserva su icono default (error-warning-line). -->\n@if (error() ? errorMessage() : hint()) {\n  <sui-form-hint\n    [message]=\"error() ? errorMessage() : hint()\"\n    [variant]=\"error() ? 'error' : 'neutral'\"\n    [icon]=\"error() ? undefined : 'information-fill'\"\n    class=\"sui-tag-input__hint-host\"\n  />\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-tag-input__label-host{display:block;margin-bottom:4px}.sui-tag-input__field{display:flex;align-items:center;width:100%;box-sizing:border-box;overflow:hidden;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);cursor:text;transition:border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-size=xsmall]) .sui-tag-input__field{gap:6px;padding:5px 6px 5px 10px;border-radius:var(--sui-radius-8);min-height:32px}:host([data-sui-size=small]) .sui-tag-input__field{gap:8px;padding:7px 8px 7px 10px;border-radius:var(--sui-radius-8);min-height:36px}:host([data-sui-size=medium]) .sui-tag-input__field,:host(:not([data-sui-size])) .sui-tag-input__field{gap:8px;padding:9px 10px 9px 12px;border-radius:var(--sui-radius-10);min-height:40px}:host([data-sui-size=large]) .sui-tag-input__field{gap:10px;padding:11px 12px 11px 14px;border-radius:var(--sui-radius-12);min-height:48px}:host([data-sui-size=xlarge]) .sui-tag-input__field{gap:10px;padding:13px 14px 13px 16px;border-radius:var(--sui-radius-12);min-height:52px}.sui-tag-input__control{flex:1 0 0;min-width:0;width:100%;margin:0;padding:0;border:0;outline:0;background:transparent;color:var(--sui-text-strong-950);font-family:inherit;font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}@media(max-width:767px){.sui-tag-input__control{font-size:16px}}.sui-tag-input__control::placeholder{color:var(--sui-text-soft-400);opacity:1}.sui-tag-input__right{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-soft-400);pointer-events:none}:host([data-sui-disabled]) .sui-tag-input__right{color:var(--sui-icon-disabled-300)}:host(:not([data-sui-disabled]):not([data-sui-error])) .sui-tag-input__field:hover{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}:host(:not([data-sui-disabled]):not([data-sui-error])) .sui-tag-input__field:hover .sui-tag-input__control::placeholder{color:var(--sui-text-sub-600)}:host(:not([data-sui-disabled]):not([data-sui-error])) .sui-tag-input__field:focus-within{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}:host([data-sui-error]) .sui-tag-input__field,.sui-tag-input__field--error{border-color:var(--sui-state-error-base)}:host([data-sui-error]) .sui-tag-input__field:focus-within{border-color:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-red-alpha-16)}:host([data-sui-disabled]) .sui-tag-input__field,.sui-tag-input__field--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed}:host([data-sui-disabled]) .sui-tag-input__control{color:var(--sui-text-disabled-300);cursor:not-allowed}:host([data-sui-disabled]) .sui-tag-input__control::placeholder{color:var(--sui-text-disabled-300)}.sui-tag-input__tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:4px;width:100%}.sui-tag-input__hint-host{display:block;margin-top:4px}\n"] }]
         }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], rightIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightIcon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], sublabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sublabel", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], commaSeparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "commaSeparator", required: false }] }], allowDuplicates: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowDuplicates", required: false }] }], maxTags: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxTags", required: false }] }], addOnBlur: [{ type: i0.Input, args: [{ isSignal: true, alias: "addOnBlur", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], tagAdded: [{ type: i0.Output, args: ["tagAdded"] }], tagRemoved: [{ type: i0.Output, args: ["tagRemoved"] }], inputEl: [{
                 type: ViewChild,
                 args: ['inputEl']