@kaufmann-lab/ui 0.1.26 → 0.1.27

package/fesm2022/kaufmann-lab-ui-core.mjs

@@ -1253,6 +1253,15 @@ const TONE_ICON = {
  * sobra.
  *
  *   <kf-alert variant="bar" tone="warn" title="Modo suplantación">Viendo como Ana Pérez.</kf-alert>
+ *
+ * Los elementos con el atributo `kfAlertActions` se proyectan en una fila
+ * propia bajo el mensaje (con salto de línea si no caben, también en la
+ * variante `bar`). Sin ellos la fila no existe y el aviso queda igual.
+ *
+ *   <kf-alert tone="warn" title="SOAT por vencer">
+ *     Vence el 15/08.
+ *     <div kfAlertActions><kf-button size="sm">Renovar</kf-button></div>
+ *   </kf-alert>
  */
 class Alert {
     tone = input('info', /* @ts-ignore */
@@ -1276,11 +1285,11 @@ class Alert {
     toneIcon = computed(() => TONE_ICON[this.tone()], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "toneIcon" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Alert, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Alert, isStandalone: true, selector: "kf-alert", inputs: { tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, ngImport: i0, template: "@if (open()) {\n  <div\n    class=\"kf-alert\"\n    [class]=\"'kf-alert--' + tone()\"\n    [class.kf-alert--bar]=\"variant() === 'bar'\"\n    [attr.role]=\"ariaRole()\"\n  >\n    <kf-icon class=\"kf-alert__icon\" [name]=\"toneIcon()\" size=\"sm\" />\n    <div class=\"kf-alert__body\">\n      @if (title()) {\n        <p class=\"kf-alert__title\">{{ title() }}</p>\n      }\n      <div class=\"kf-alert__message\"><ng-content /></div>\n    </div>\n    @if (dismissible()) {\n      <button\n        type=\"button\"\n        class=\"kf-alert__close\"\n        aria-label=\"Cerrar aviso\"\n        (click)=\"open.set(false)\"\n      >\n        <kf-icon name=\"x\" size=\"sm\" />\n      </button>\n    }\n  </div>\n}\n", styles: [":host{display:block;font-family:var(--kf-font-body)}.kf-alert{display:flex;align-items:flex-start;gap:var(--kf-space-sm);padding:var(--kf-space-sm) var(--kf-space-md);border:1px solid transparent;border-radius:var(--kf-radius-sm);font-size:.9rem}.kf-alert--info{background:var(--kf-color-info-soft);border-color:var(--kf-color-info);color:var(--kf-color-info-strong)}.kf-alert--ok{background:var(--kf-color-success-soft);border-color:var(--kf-color-success);color:var(--kf-color-success-strong)}.kf-alert--warn{background:var(--kf-color-warning-soft);border-color:var(--kf-color-warning);color:var(--kf-color-warning-strong)}.kf-alert--error{background:var(--kf-color-error-soft);border-color:var(--kf-color-error);color:var(--kf-color-error-strong)}.kf-alert__body{flex:1;min-width:0}.kf-alert__title{margin:0;font-family:var(--kf-font-title);font-weight:700}.kf-alert__message{color:inherit}.kf-alert__close{flex:none;display:inline-flex;padding:2px;border:none;background:transparent;color:inherit;border-radius:var(--kf-radius-xs);cursor:pointer;opacity:.7}.kf-alert__close:hover{opacity:1}.kf-alert__close:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-alert--bar{align-items:center;padding:var(--kf-space-xs) var(--kf-space-md);border-width:1px 0;border-radius:0;font-size:.875rem}.kf-alert--bar .kf-alert__body{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--kf-space-xs)}\n"], dependencies: [{ kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Alert, isStandalone: true, selector: "kf-alert", inputs: { tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, ngImport: i0, template: "@if (open()) {\n  <div\n    class=\"kf-alert\"\n    [class]=\"'kf-alert--' + tone()\"\n    [class.kf-alert--bar]=\"variant() === 'bar'\"\n    [attr.role]=\"ariaRole()\"\n  >\n    <kf-icon class=\"kf-alert__icon\" [name]=\"toneIcon()\" size=\"sm\" />\n    <div class=\"kf-alert__body\">\n      @if (title()) {\n        <p class=\"kf-alert__title\">{{ title() }}</p>\n      }\n      <div class=\"kf-alert__message\"><ng-content /></div>\n      <div class=\"kf-alert__actions\"><ng-content select=\"[kfAlertActions]\" /></div>\n    </div>\n    @if (dismissible()) {\n      <button\n        type=\"button\"\n        class=\"kf-alert__close\"\n        aria-label=\"Cerrar aviso\"\n        (click)=\"open.set(false)\"\n      >\n        <kf-icon name=\"x\" size=\"sm\" />\n      </button>\n    }\n  </div>\n}\n", styles: [":host{display:block;font-family:var(--kf-font-body)}.kf-alert{display:flex;align-items:flex-start;gap:var(--kf-space-sm);padding:var(--kf-space-sm) var(--kf-space-md);border:1px solid transparent;border-radius:var(--kf-radius-sm);font-size:.9rem}.kf-alert--info{background:var(--kf-color-info-soft);border-color:var(--kf-color-info);color:var(--kf-color-info-strong)}.kf-alert--ok{background:var(--kf-color-success-soft);border-color:var(--kf-color-success);color:var(--kf-color-success-strong)}.kf-alert--warn{background:var(--kf-color-warning-soft);border-color:var(--kf-color-warning);color:var(--kf-color-warning-strong)}.kf-alert--error{background:var(--kf-color-error-soft);border-color:var(--kf-color-error);color:var(--kf-color-error-strong)}.kf-alert__body{flex:1;min-width:0}.kf-alert__title{margin:0;font-family:var(--kf-font-title);font-weight:700}.kf-alert__message{color:inherit}.kf-alert__actions{display:flex;flex-wrap:wrap;gap:var(--kf-space-sm);min-width:0;padding-block-start:var(--kf-space-sm)}.kf-alert__actions:empty{display:none}.kf-alert__actions>*{max-width:100%;min-width:0}.kf-alert__close{position:relative;flex:none;display:inline-flex;padding:2px;border:none;background:transparent;color:inherit;border-radius:var(--kf-radius-xs);cursor:pointer;opacity:.7}.kf-alert__close:after{content:\"\";position:absolute;top:50%;left:calc(-1 * var(--kf-space-sm));width:44px;height:44px;transform:translateY(-50%)}.kf-alert__close:hover{opacity:1}.kf-alert__close:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-alert--bar{align-items:center;padding:var(--kf-space-xs) var(--kf-space-md);border-width:1px 0;border-radius:0;font-size:.875rem}.kf-alert--bar .kf-alert__body{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--kf-space-xs)}.kf-alert--bar .kf-alert__actions{flex-basis:100%}\n"], dependencies: [{ kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Alert, decorators: [{
             type: Component,
-            args: [{ selector: 'kf-alert', imports: [Icon], template: "@if (open()) {\n  <div\n    class=\"kf-alert\"\n    [class]=\"'kf-alert--' + tone()\"\n    [class.kf-alert--bar]=\"variant() === 'bar'\"\n    [attr.role]=\"ariaRole()\"\n  >\n    <kf-icon class=\"kf-alert__icon\" [name]=\"toneIcon()\" size=\"sm\" />\n    <div class=\"kf-alert__body\">\n      @if (title()) {\n        <p class=\"kf-alert__title\">{{ title() }}</p>\n      }\n      <div class=\"kf-alert__message\"><ng-content /></div>\n    </div>\n    @if (dismissible()) {\n      <button\n        type=\"button\"\n        class=\"kf-alert__close\"\n        aria-label=\"Cerrar aviso\"\n        (click)=\"open.set(false)\"\n      >\n        <kf-icon name=\"x\" size=\"sm\" />\n      </button>\n    }\n  </div>\n}\n", styles: [":host{display:block;font-family:var(--kf-font-body)}.kf-alert{display:flex;align-items:flex-start;gap:var(--kf-space-sm);padding:var(--kf-space-sm) var(--kf-space-md);border:1px solid transparent;border-radius:var(--kf-radius-sm);font-size:.9rem}.kf-alert--info{background:var(--kf-color-info-soft);border-color:var(--kf-color-info);color:var(--kf-color-info-strong)}.kf-alert--ok{background:var(--kf-color-success-soft);border-color:var(--kf-color-success);color:var(--kf-color-success-strong)}.kf-alert--warn{background:var(--kf-color-warning-soft);border-color:var(--kf-color-warning);color:var(--kf-color-warning-strong)}.kf-alert--error{background:var(--kf-color-error-soft);border-color:var(--kf-color-error);color:var(--kf-color-error-strong)}.kf-alert__body{flex:1;min-width:0}.kf-alert__title{margin:0;font-family:var(--kf-font-title);font-weight:700}.kf-alert__message{color:inherit}.kf-alert__close{flex:none;display:inline-flex;padding:2px;border:none;background:transparent;color:inherit;border-radius:var(--kf-radius-xs);cursor:pointer;opacity:.7}.kf-alert__close:hover{opacity:1}.kf-alert__close:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-alert--bar{align-items:center;padding:var(--kf-space-xs) var(--kf-space-md);border-width:1px 0;border-radius:0;font-size:.875rem}.kf-alert--bar .kf-alert__body{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--kf-space-xs)}\n"] }]
+            args: [{ selector: 'kf-alert', imports: [Icon], template: "@if (open()) {\n  <div\n    class=\"kf-alert\"\n    [class]=\"'kf-alert--' + tone()\"\n    [class.kf-alert--bar]=\"variant() === 'bar'\"\n    [attr.role]=\"ariaRole()\"\n  >\n    <kf-icon class=\"kf-alert__icon\" [name]=\"toneIcon()\" size=\"sm\" />\n    <div class=\"kf-alert__body\">\n      @if (title()) {\n        <p class=\"kf-alert__title\">{{ title() }}</p>\n      }\n      <div class=\"kf-alert__message\"><ng-content /></div>\n      <div class=\"kf-alert__actions\"><ng-content select=\"[kfAlertActions]\" /></div>\n    </div>\n    @if (dismissible()) {\n      <button\n        type=\"button\"\n        class=\"kf-alert__close\"\n        aria-label=\"Cerrar aviso\"\n        (click)=\"open.set(false)\"\n      >\n        <kf-icon name=\"x\" size=\"sm\" />\n      </button>\n    }\n  </div>\n}\n", styles: [":host{display:block;font-family:var(--kf-font-body)}.kf-alert{display:flex;align-items:flex-start;gap:var(--kf-space-sm);padding:var(--kf-space-sm) var(--kf-space-md);border:1px solid transparent;border-radius:var(--kf-radius-sm);font-size:.9rem}.kf-alert--info{background:var(--kf-color-info-soft);border-color:var(--kf-color-info);color:var(--kf-color-info-strong)}.kf-alert--ok{background:var(--kf-color-success-soft);border-color:var(--kf-color-success);color:var(--kf-color-success-strong)}.kf-alert--warn{background:var(--kf-color-warning-soft);border-color:var(--kf-color-warning);color:var(--kf-color-warning-strong)}.kf-alert--error{background:var(--kf-color-error-soft);border-color:var(--kf-color-error);color:var(--kf-color-error-strong)}.kf-alert__body{flex:1;min-width:0}.kf-alert__title{margin:0;font-family:var(--kf-font-title);font-weight:700}.kf-alert__message{color:inherit}.kf-alert__actions{display:flex;flex-wrap:wrap;gap:var(--kf-space-sm);min-width:0;padding-block-start:var(--kf-space-sm)}.kf-alert__actions:empty{display:none}.kf-alert__actions>*{max-width:100%;min-width:0}.kf-alert__close{position:relative;flex:none;display:inline-flex;padding:2px;border:none;background:transparent;color:inherit;border-radius:var(--kf-radius-xs);cursor:pointer;opacity:.7}.kf-alert__close:after{content:\"\";position:absolute;top:50%;left:calc(-1 * var(--kf-space-sm));width:44px;height:44px;transform:translateY(-50%)}.kf-alert__close:hover{opacity:1}.kf-alert__close:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-alert--bar{align-items:center;padding:var(--kf-space-xs) var(--kf-space-md);border-width:1px 0;border-radius:0;font-size:.875rem}.kf-alert--bar .kf-alert__body{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--kf-space-xs)}.kf-alert--bar .kf-alert__actions{flex-basis:100%}\n"] }]
         }], propDecorators: { tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }] } });
 
 /**
@@ -2050,7 +2059,7 @@ class Checkbox {
                 useExisting: forwardRef(() => Checkbox),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<label class=\"kf-checkbox\" [class.kf-checkbox--disabled]=\"disabled()\">\n  <input\n    #inputRef\n    type=\"checkbox\"\n    [checked]=\"checked()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-invalid]=\"invalid() ? true : null\"\n    (change)=\"onChange($event)\"\n    (blur)=\"onTouched()\"\n  />\n  <span\n    class=\"kf-checkbox__box kf-checkbox-box\"\n    [class.kf-checkbox__box--invalid]=\"invalid()\"\n  ></span>\n  @if (label()) {\n    <span class=\"kf-checkbox__label\">{{ label() }}</span>\n  }\n</label>\n", styles: [".kf-checkbox-box{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--kf-space-md);height:var(--kf-space-md);border:1px solid var(--kf-color-border-control);border-radius:var(--kf-radius-xs);background:var(--kf-color-white);transition:background .14s,border-color .14s;position:relative}.kf-checkbox-box--checked{background:var(--kf-color-primary);border-color:var(--kf-color-primary)}:host{display:inline-block}.kf-checkbox{display:inline-flex;align-items:center;gap:var(--kf-space-sm);cursor:pointer;font:inherit;font-family:var(--kf-font-body);color:var(--kf-color-text)}.kf-checkbox--disabled{cursor:not-allowed;color:var(--kf-color-text-muted)}.kf-checkbox input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.kf-checkbox__box{display:inline-flex;align-items:center;justify-content:center}.kf-checkbox input:checked+.kf-checkbox__box,.kf-checkbox input:indeterminate+.kf-checkbox__box{background:var(--kf-color-primary);border-color:var(--kf-color-primary)}.kf-checkbox input:checked+.kf-checkbox__box:after{content:\"\";width:var(--kf-checkbox-mark-width);height:var(--kf-checkbox-mark-height);border:var(--kf-checkbox-mark-border);border-width:var(--kf-checkbox-mark-border-width);transform:rotate(45deg) translate(-1px,-1px)}.kf-checkbox input:indeterminate+.kf-checkbox__box:after{content:\"\";width:var(--kf-checkbox-dash-width);height:var(--kf-checkbox-dash-height);background:var(--kf-color-white);border-radius:var(--kf-radius-xs)}.kf-checkbox input:focus-visible+.kf-checkbox__box{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-checkbox__box--invalid{border-color:var(--kf-color-error)}.kf-checkbox--disabled .kf-checkbox__box{opacity:.5}.kf-checkbox__label{-webkit-user-select:none;user-select:none}\n"] });
+        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<label class=\"kf-checkbox\" [class.kf-checkbox--disabled]=\"disabled()\">\n  <input\n    #inputRef\n    type=\"checkbox\"\n    [checked]=\"checked()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-invalid]=\"invalid() ? true : null\"\n    (change)=\"onChange($event)\"\n    (blur)=\"onTouched()\"\n  />\n  <span\n    class=\"kf-checkbox__box kf-checkbox-box\"\n    [class.kf-checkbox__box--invalid]=\"invalid()\"\n  ></span>\n  @if (label()) {\n    <span class=\"kf-checkbox__label\">{{ label() }}</span>\n  }\n</label>\n", styles: [".kf-checkbox-box{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--kf-space-md);height:var(--kf-space-md);border:1px solid var(--kf-color-border-control);border-radius:var(--kf-radius-xs);background:var(--kf-color-white);transition:background .14s,border-color .14s;position:relative}.kf-checkbox-box--checked{background:var(--kf-color-primary);border-color:var(--kf-color-primary)}:host{display:inline-flex}.kf-checkbox{display:inline-flex;align-items:center;gap:var(--kf-space-sm);cursor:pointer;font:inherit;font-family:var(--kf-font-body);color:var(--kf-color-text)}.kf-checkbox--disabled{cursor:not-allowed;color:var(--kf-color-text-muted)}.kf-checkbox input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.kf-checkbox__box{display:inline-flex;align-items:center;justify-content:center}.kf-checkbox input:checked+.kf-checkbox__box,.kf-checkbox input:indeterminate+.kf-checkbox__box{background:var(--kf-color-primary);border-color:var(--kf-color-primary)}.kf-checkbox input:checked+.kf-checkbox__box:after{content:\"\";position:absolute;inset:0;margin:auto;width:var(--kf-checkbox-mark-width);height:var(--kf-checkbox-mark-height);border:var(--kf-checkbox-mark-border);border-width:var(--kf-checkbox-mark-border-width);transform:rotate(45deg) translate(-1px,-1px)}.kf-checkbox input:indeterminate+.kf-checkbox__box:after{content:\"\";position:absolute;inset:0;margin:auto;width:var(--kf-checkbox-dash-width);height:var(--kf-checkbox-dash-height);background:var(--kf-color-white);border-radius:var(--kf-radius-xs)}.kf-checkbox input:focus-visible+.kf-checkbox__box{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-checkbox__box--invalid{border-color:var(--kf-color-error)}.kf-checkbox--disabled .kf-checkbox__box{opacity:.5}.kf-checkbox__label{-webkit-user-select:none;user-select:none}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Checkbox, decorators: [{
             type: Component,
@@ -2060,7 +2069,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                             useExisting: forwardRef(() => Checkbox),
                             multi: true,
                         },
-                    ], template: "<label class=\"kf-checkbox\" [class.kf-checkbox--disabled]=\"disabled()\">\n  <input\n    #inputRef\n    type=\"checkbox\"\n    [checked]=\"checked()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-invalid]=\"invalid() ? true : null\"\n    (change)=\"onChange($event)\"\n    (blur)=\"onTouched()\"\n  />\n  <span\n    class=\"kf-checkbox__box kf-checkbox-box\"\n    [class.kf-checkbox__box--invalid]=\"invalid()\"\n  ></span>\n  @if (label()) {\n    <span class=\"kf-checkbox__label\">{{ label() }}</span>\n  }\n</label>\n", styles: [".kf-checkbox-box{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--kf-space-md);height:var(--kf-space-md);border:1px solid var(--kf-color-border-control);border-radius:var(--kf-radius-xs);background:var(--kf-color-white);transition:background .14s,border-color .14s;position:relative}.kf-checkbox-box--checked{background:var(--kf-color-primary);border-color:var(--kf-color-primary)}:host{display:inline-block}.kf-checkbox{display:inline-flex;align-items:center;gap:var(--kf-space-sm);cursor:pointer;font:inherit;font-family:var(--kf-font-body);color:var(--kf-color-text)}.kf-checkbox--disabled{cursor:not-allowed;color:var(--kf-color-text-muted)}.kf-checkbox input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.kf-checkbox__box{display:inline-flex;align-items:center;justify-content:center}.kf-checkbox input:checked+.kf-checkbox__box,.kf-checkbox input:indeterminate+.kf-checkbox__box{background:var(--kf-color-primary);border-color:var(--kf-color-primary)}.kf-checkbox input:checked+.kf-checkbox__box:after{content:\"\";width:var(--kf-checkbox-mark-width);height:var(--kf-checkbox-mark-height);border:var(--kf-checkbox-mark-border);border-width:var(--kf-checkbox-mark-border-width);transform:rotate(45deg) translate(-1px,-1px)}.kf-checkbox input:indeterminate+.kf-checkbox__box:after{content:\"\";width:var(--kf-checkbox-dash-width);height:var(--kf-checkbox-dash-height);background:var(--kf-color-white);border-radius:var(--kf-radius-xs)}.kf-checkbox input:focus-visible+.kf-checkbox__box{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-checkbox__box--invalid{border-color:var(--kf-color-error)}.kf-checkbox--disabled .kf-checkbox__box{opacity:.5}.kf-checkbox__label{-webkit-user-select:none;user-select:none}\n"] }]
+                    ], template: "<label class=\"kf-checkbox\" [class.kf-checkbox--disabled]=\"disabled()\">\n  <input\n    #inputRef\n    type=\"checkbox\"\n    [checked]=\"checked()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-invalid]=\"invalid() ? true : null\"\n    (change)=\"onChange($event)\"\n    (blur)=\"onTouched()\"\n  />\n  <span\n    class=\"kf-checkbox__box kf-checkbox-box\"\n    [class.kf-checkbox__box--invalid]=\"invalid()\"\n  ></span>\n  @if (label()) {\n    <span class=\"kf-checkbox__label\">{{ label() }}</span>\n  }\n</label>\n", styles: [".kf-checkbox-box{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--kf-space-md);height:var(--kf-space-md);border:1px solid var(--kf-color-border-control);border-radius:var(--kf-radius-xs);background:var(--kf-color-white);transition:background .14s,border-color .14s;position:relative}.kf-checkbox-box--checked{background:var(--kf-color-primary);border-color:var(--kf-color-primary)}:host{display:inline-flex}.kf-checkbox{display:inline-flex;align-items:center;gap:var(--kf-space-sm);cursor:pointer;font:inherit;font-family:var(--kf-font-body);color:var(--kf-color-text)}.kf-checkbox--disabled{cursor:not-allowed;color:var(--kf-color-text-muted)}.kf-checkbox input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.kf-checkbox__box{display:inline-flex;align-items:center;justify-content:center}.kf-checkbox input:checked+.kf-checkbox__box,.kf-checkbox input:indeterminate+.kf-checkbox__box{background:var(--kf-color-primary);border-color:var(--kf-color-primary)}.kf-checkbox input:checked+.kf-checkbox__box:after{content:\"\";position:absolute;inset:0;margin:auto;width:var(--kf-checkbox-mark-width);height:var(--kf-checkbox-mark-height);border:var(--kf-checkbox-mark-border);border-width:var(--kf-checkbox-mark-border-width);transform:rotate(45deg) translate(-1px,-1px)}.kf-checkbox input:indeterminate+.kf-checkbox__box:after{content:\"\";position:absolute;inset:0;margin:auto;width:var(--kf-checkbox-dash-width);height:var(--kf-checkbox-dash-height);background:var(--kf-color-white);border-radius:var(--kf-radius-xs)}.kf-checkbox input:focus-visible+.kf-checkbox__box{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-checkbox__box--invalid{border-color:var(--kf-color-error)}.kf-checkbox--disabled .kf-checkbox__box{opacity:.5}.kf-checkbox__label{-webkit-user-select:none;user-select:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], checkedChange: [{ type: i0.Output, args: ["checkedChange"] }], inputRef: [{ type: i0.ViewChild, args: ['inputRef', { isSignal: true }] }] } });
 
 /**
@@ -2963,6 +2972,12 @@ class Select {
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Borde en rojo y `aria-invalid` en el trigger. Ver `errorMessage` para el mensaje asociado — mismo contrato que `kf-input`. */
     invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Pone el asterisco rojo en la etiqueta (igual que `kf-input`) y
+     * `aria-required="true"` en el trigger. Solo señaliza: la validación sigue
+     * en el formulario del consumidor.
+     */
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Mensaje de error con `role="alert"`, debajo del trigger. */
     errorMessage = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "errorMessage" }] : /* istanbul ignore next */ []));
@@ -3388,7 +3403,7 @@ class Select {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Select, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Select, isStandalone: true, selector: "kf-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchThreshold: { classPropertyName: "searchThreshold", publicName: "searchThreshold", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, panelTitle: { classPropertyName: "panelTitle", publicName: "panelTitle", isSignal: true, isRequired: false, transformFunction: null }, panelWidth: { classPropertyName: "panelWidth", publicName: "panelWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.kf-select--compact": "variant() === 'compact'", "class.kf-select--width-sm": "width() === 'sm'", "class.kf-select--width-lg": "width() === 'lg'", "class.kf-select--width-full": "width() === 'full'", "class.kf-select--width-fit": "width() === 'fit'", "class.kf-select--size-sm": "size() === 'sm'" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "panelTemplate", first: true, predicate: ["panelTemplate"], descendants: true, isSignal: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (label()) {\n  <kf-field-label [for]=\"triggerId\" [visuallyHidden]=\"hideLabel()\">{{ label() }}</kf-field-label>\n}\n<button\n  #trigger\n  type=\"button\"\n  [id]=\"triggerId\"\n  class=\"kf-select__trigger\"\n  [class.kf-select__trigger--disabled]=\"disabled()\"\n  [class.kf-select__trigger--invalid]=\"invalid()\"\n  [class.kf-select__trigger--with-icon]=\"!!icon()\"\n  [disabled]=\"disabled()\"\n  [attr.aria-haspopup]=\"'listbox'\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-controls]=\"isOpen() ? listboxId : null\"\n  [attr.aria-label]=\"triggerAriaLabel()\"\n  [attr.aria-describedby]=\"errorMessage() ? errorId : null\"\n  [attr.aria-invalid]=\"invalid() ? true : null\"\n  [class.kf-select__trigger--tagged]=\"!!selectedOption()?.tag\"\n  (click)=\"toggle()\"\n  (keydown)=\"onTriggerKeydown($event)\"\n>\n  @if (icon(); as iconName) {\n    <kf-icon class=\"kf-select__icon\" [name]=\"iconName\" size=\"sm\" />\n  }\n  @if (prefix(); as prefixText) {\n    <span class=\"kf-select__prefix\">{{ prefixText }}</span>\n  }\n  <span\n    class=\"kf-select__value\"\n    [class.kf-select__value--placeholder]=\"!selectedOption()\"\n    [class.kf-select__value--fit]=\"width() === 'fit'\"\n  >\n    @if (width() === 'fit') {\n      <span class=\"kf-select__value-text\">{{ triggerText() }}</span>\n      <!-- Reserva el ancho de la opci\u00F3n m\u00E1s larga: oculto a la vista y al\n        \u00E1rbol de accesibilidad, solo aporta tama\u00F1o. -->\n      <span class=\"kf-select__sizer\" aria-hidden=\"true\">\n        @for (text of fitTexts(); track text) {\n          <span>{{ text }}</span>\n        }\n      </span>\n    } @else {\n      {{ triggerText() }}\n    }\n  </span>\n  @if (width() === 'fit' && fitTags().length) {\n    <!-- Con `fit` el hueco del tag se reserva siempre con el m\u00E1s ancho: los\n      dem\u00E1s se apilan en la misma celda y solo el elegido se ve. -->\n    <span class=\"kf-select__tag-slot\">\n      @for (tag of fitTags(); track tag) {\n        <kf-badge\n          class=\"kf-select__tag\"\n          [class.kf-select__tag--reserved]=\"tag !== selectedOption()?.tag\"\n          [attr.aria-hidden]=\"tag !== selectedOption()?.tag ? 'true' : null\"\n          >{{ tag }}</kf-badge\n        >\n      }\n    </span>\n  } @else if (selectedOption()?.tag; as tag) {\n    <kf-badge class=\"kf-select__tag\">{{ tag }}</kf-badge>\n  }\n  <span\n    class=\"kf-select__caret kf-caret\"\n    [class.kf-select__caret--open]=\"isOpen()\"\n    [class.kf-caret--open]=\"isOpen()\"\n    aria-hidden=\"true\"\n  ></span>\n</button>\n@if (errorMessage(); as message) {\n  <span class=\"kf-select__error kf-field-error\" [id]=\"errorId\" role=\"alert\">{{ message }}</span>\n}\n<ng-template #panelTemplate>\n  <div #panel class=\"kf-select__panel\" [class.kf-select__panel--compact]=\"variant() === 'compact'\">\n    @if (panelTitle(); as title) {\n      <div class=\"kf-select__panel-title kf-overline-text\" aria-hidden=\"true\">{{ title }}</div>\n    }\n    @if (showSearch()) {\n      <input\n        #searchInput\n        type=\"text\"\n        class=\"kf-select__search\"\n        placeholder=\"Buscar\u2026\"\n        aria-label=\"Buscar opci\u00F3n\"\n        role=\"combobox\"\n        aria-autocomplete=\"list\"\n        aria-expanded=\"true\"\n        [attr.aria-controls]=\"listboxId\"\n        [attr.aria-activedescendant]=\"filteredOptions().length ? optionId(activeIndex()) : null\"\n        [value]=\"searchQuery()\"\n        (input)=\"onSearchInput($event)\"\n        (keydown.arrowdown)=\"$event.preventDefault(); moveActive(1)\"\n        (keydown.arrowup)=\"$event.preventDefault(); moveActive(-1)\"\n        (keydown.enter)=\"$event.preventDefault(); selectActive()\"\n        (keydown)=\"onSearchKeydown($event)\"\n      />\n    }\n    <ul\n      class=\"kf-select__list\"\n      [id]=\"listboxId\"\n      role=\"listbox\"\n      [attr.aria-label]=\"ariaLabel() || null\"\n      [attr.aria-labelledby]=\"ariaLabel() ? null : triggerId\"\n    >\n      @for (option of filteredOptions(); track option.value; let i = $index) {\n        <li\n          class=\"kf-select__option\"\n          [id]=\"optionId(i)\"\n          [class.kf-select__option--selected]=\"option.value === value()\"\n          [class.kf-select__option--active]=\"i === activeIndex()\"\n          role=\"option\"\n          tabindex=\"-1\"\n          [attr.aria-selected]=\"option.value === value()\"\n          [attr.aria-label]=\"optionAriaLabel(option)\"\n          [class.kf-select__option--rich]=\"!!(option.tag || option.detail)\"\n          (click)=\"select(option)\"\n          (mouseenter)=\"activeIndex.set(i)\"\n          (keydown)=\"onOptionKeydown($event, option, i)\"\n        >\n          @if (option.tag || option.detail) {\n            <span class=\"kf-select__option-main\">\n              <span class=\"kf-select__option-label\">{{ option.label }}</span>\n              @if (option.tag) {\n                <kf-badge class=\"kf-select__tag\">{{ option.tag }}</kf-badge>\n              }\n            </span>\n            @if (option.detail) {\n              <span class=\"kf-select__option-detail\">{{ option.detail }}</span>\n            }\n          } @else {\n            {{ option.label }}\n          }\n        </li>\n      } @empty {\n        <li class=\"kf-select__empty\">\n          {{ searchQuery() ? 'Sin resultados' : 'Sin opciones disponibles' }}\n        </li>\n      }\n    </ul>\n  </div>\n</ng-template>\n", styles: [".kf-caret{flex-shrink:0;width:8px;height:8px;border-right:2px solid var(--kf-color-text-muted);border-bottom:2px solid var(--kf-color-text-muted);transform:rotate(45deg);transition:transform .14s;margin-top:-4px}.kf-caret--open{transform:rotate(-135deg);margin-top:4px}.kf-field-hint{font-size:.75rem;color:var(--kf-color-text-muted)}.kf-field-error{display:flex;align-items:center;gap:var(--kf-space-xs);font-size:.75rem;font-weight:600;color:var(--kf-color-error-strong)}.kf-overline-text{font-family:var(--kf-font-title);font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-medium);letter-spacing:.04em;text-transform:uppercase;color:var(--kf-color-text-muted)}:host{display:flex;flex-direction:column;gap:var(--kf-space-xs);width:var(--kf-select-width-md);font-family:var(--kf-font-body)}:host(.kf-select--compact){width:max-content;max-width:160px}:host(.kf-select--width-sm){width:var(--kf-select-width-sm)}:host(.kf-select--width-lg){width:var(--kf-select-width-lg)}:host(.kf-select--width-full){width:100%}:host(.kf-select--width-fit){width:max-content;max-width:var(--kf-select-fit-max-width, 20rem)}:host(.kf-select--compact) .kf-select__trigger{padding:6px var(--kf-space-sm);font-size:.85rem;gap:var(--kf-space-xs)}:host(.kf-select--compact) .kf-select__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-select__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);width:100%;font:inherit;color:var(--kf-color-text);padding:var(--kf-space-sm) var(--kf-space-md);background:var(--kf-color-white);border:1px solid var(--kf-color-border-control);border-radius:var(--kf-radius-sm);cursor:pointer;transition:border-color .14s,box-shadow .14s}:host(.kf-select--size-sm){--kf-select-min-height: 2rem}:host(.kf-select--size-sm) .kf-select__trigger{box-sizing:border-box;min-height:var(--kf-select-min-height);padding-block:0}:host(.kf-select--size-sm:not(.kf-select--compact)) .kf-select__trigger{font-size:var(--kf-font-size-body-sm)}.kf-select__trigger:hover:not(:disabled){border-color:var(--kf-color-text-muted)}.kf-select__trigger:focus-visible{outline:none;border-color:var(--kf-color-primary);box-shadow:var(--kf-shadow-focus)}.kf-select__trigger--disabled{opacity:.5;cursor:not-allowed}.kf-select__trigger--invalid{border-color:var(--kf-color-error)}.kf-select__trigger--invalid:focus-visible{border-color:var(--kf-color-error);box-shadow:var(--kf-shadow-focus-error)}.kf-select__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-select__value--fit{display:grid;grid-template-columns:minmax(0,1fr);text-align:start}.kf-select__value-text{grid-area:1 / 1;overflow:hidden;text-overflow:ellipsis}.kf-select__sizer{grid-area:1 / 1;display:grid;height:0;overflow:hidden;visibility:hidden}.kf-select__sizer>span{grid-area:1 / 1;white-space:nowrap}.kf-select__icon{flex:none;color:var(--kf-color-text-muted)}.kf-select__trigger--with-icon .kf-select__value{flex:1 1 auto;min-width:0;text-align:start}:host(.kf-select--compact) .kf-select__trigger--with-icon .kf-select__value{color:var(--kf-color-ink);font-weight:600}.kf-select__trigger--tagged .kf-select__value{flex:1 1 auto;min-width:0;text-align:start}.kf-select__tag{flex:none}.kf-select__tag-slot{display:grid;flex:none;justify-items:end}.kf-select__tag-slot>.kf-select__tag{grid-area:1 / 1}.kf-select__tag--reserved{visibility:hidden}.kf-select__trigger .kf-select__tag{margin-block:-2px}.kf-select__prefix{flex:none;color:var(--kf-color-text-muted);white-space:nowrap}.kf-select__value--placeholder{color:var(--kf-color-text-muted)}.kf-select__panel{box-sizing:border-box;font-family:var(--kf-font-body);width:100%;background:var(--kf-color-white);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);box-shadow:var(--kf-shadow-md);overflow:hidden}.kf-select__panel-title{padding:var(--kf-space-sm) var(--kf-space-md) var(--kf-space-xs)}.kf-select__panel--compact .kf-select__panel-title{padding:var(--kf-space-xs) var(--kf-space-sm) 2px}.kf-select__search{box-sizing:border-box;width:100%;font:inherit;font-family:var(--kf-font-body);color:var(--kf-color-text);padding:var(--kf-space-sm) var(--kf-space-md);border:none;border-bottom:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm) var(--kf-radius-sm) 0 0;outline:none}.kf-select__search:focus-visible{box-shadow:inset 0 0 0 2px var(--kf-color-primary)}.kf-select__list{box-sizing:border-box;width:100%;margin:0;padding:var(--kf-space-xs) 0;list-style:none;max-height:240px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--kf-color-gray-400) transparent}.kf-select__list::-webkit-scrollbar{width:6px}.kf-select__list::-webkit-scrollbar-track{background:transparent}.kf-select__list::-webkit-scrollbar-thumb{background-color:var(--kf-color-gray-400);border-radius:var(--kf-radius-pill)}.kf-select__list::-webkit-scrollbar-thumb:hover{background-color:var(--kf-color-gray-500)}.kf-select__option{padding:var(--kf-space-sm) var(--kf-space-md);outline:none;color:var(--kf-color-text);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kf-select__option--rich{display:flex;flex-direction:column;gap:2px}.kf-select__option-main{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);min-width:0}.kf-select__option-label,.kf-select__option-detail{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.kf-select__option-detail{font-size:var(--kf-font-size-body-sm);font-weight:400;color:var(--kf-color-text-muted)}.kf-select__panel--compact .kf-select__option{padding:6px var(--kf-space-sm);font-size:.85rem}.kf-select__option:hover{background:var(--kf-color-primary-soft)}.kf-select__option--selected{background:var(--kf-color-primary-soft);color:var(--kf-color-primary);font-weight:600}.kf-select__option--active{background:var(--kf-color-primary-soft)}.kf-select__option:focus-visible{background:var(--kf-color-primary-soft);box-shadow:inset 0 0 0 2px var(--kf-color-primary)}.kf-select__empty{text-align:center;padding:var(--kf-space-sm) var(--kf-space-md);color:var(--kf-color-text-muted)}\n"], dependencies: [{ kind: "component", type: Badge, selector: "kf-badge", inputs: ["tone", "variant", "dot", "truncate"] }, { kind: "component", type: FieldLabel, selector: "kf-field-label", inputs: ["for", "required", "visuallyHidden"] }, { kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Select, isStandalone: true, selector: "kf-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchThreshold: { classPropertyName: "searchThreshold", publicName: "searchThreshold", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, panelTitle: { classPropertyName: "panelTitle", publicName: "panelTitle", isSignal: true, isRequired: false, transformFunction: null }, panelWidth: { classPropertyName: "panelWidth", publicName: "panelWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.kf-select--compact": "variant() === 'compact'", "class.kf-select--width-sm": "width() === 'sm'", "class.kf-select--width-lg": "width() === 'lg'", "class.kf-select--width-full": "width() === 'full'", "class.kf-select--width-fit": "width() === 'fit'", "class.kf-select--size-sm": "size() === 'sm'" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "panelTemplate", first: true, predicate: ["panelTemplate"], descendants: true, isSignal: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (label()) {\n  <kf-field-label [for]=\"triggerId\" [required]=\"required()\" [visuallyHidden]=\"hideLabel()\">{{\n    label()\n  }}</kf-field-label>\n}\n<button\n  #trigger\n  type=\"button\"\n  [id]=\"triggerId\"\n  class=\"kf-select__trigger\"\n  [class.kf-select__trigger--disabled]=\"disabled()\"\n  [class.kf-select__trigger--invalid]=\"invalid()\"\n  [class.kf-select__trigger--with-icon]=\"!!icon()\"\n  [disabled]=\"disabled()\"\n  [attr.aria-haspopup]=\"'listbox'\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-controls]=\"isOpen() ? listboxId : null\"\n  [attr.aria-label]=\"triggerAriaLabel()\"\n  [attr.aria-describedby]=\"errorMessage() ? errorId : null\"\n  [attr.aria-invalid]=\"invalid() ? true : null\"\n  [attr.aria-required]=\"required() ? true : null\"\n  [class.kf-select__trigger--tagged]=\"!!selectedOption()?.tag\"\n  (click)=\"toggle()\"\n  (keydown)=\"onTriggerKeydown($event)\"\n>\n  @if (icon(); as iconName) {\n    <kf-icon class=\"kf-select__icon\" [name]=\"iconName\" size=\"sm\" />\n  }\n  @if (prefix(); as prefixText) {\n    <span class=\"kf-select__prefix\">{{ prefixText }}</span>\n  }\n  <span\n    class=\"kf-select__value\"\n    [class.kf-select__value--placeholder]=\"!selectedOption()\"\n    [class.kf-select__value--fit]=\"width() === 'fit'\"\n  >\n    @if (width() === 'fit') {\n      <span class=\"kf-select__value-text\">{{ triggerText() }}</span>\n      <!-- Reserva el ancho de la opci\u00F3n m\u00E1s larga: oculto a la vista y al\n        \u00E1rbol de accesibilidad, solo aporta tama\u00F1o. -->\n      <span class=\"kf-select__sizer\" aria-hidden=\"true\">\n        @for (text of fitTexts(); track text) {\n          <span>{{ text }}</span>\n        }\n      </span>\n    } @else {\n      {{ triggerText() }}\n    }\n  </span>\n  @if (width() === 'fit' && fitTags().length) {\n    <!-- Con `fit` el hueco del tag se reserva siempre con el m\u00E1s ancho: los\n      dem\u00E1s se apilan en la misma celda y solo el elegido se ve. -->\n    <span class=\"kf-select__tag-slot\">\n      @for (tag of fitTags(); track tag) {\n        <kf-badge\n          class=\"kf-select__tag\"\n          [class.kf-select__tag--reserved]=\"tag !== selectedOption()?.tag\"\n          [attr.aria-hidden]=\"tag !== selectedOption()?.tag ? 'true' : null\"\n          >{{ tag }}</kf-badge\n        >\n      }\n    </span>\n  } @else if (selectedOption()?.tag; as tag) {\n    <kf-badge class=\"kf-select__tag\">{{ tag }}</kf-badge>\n  }\n  <span\n    class=\"kf-select__caret kf-caret\"\n    [class.kf-select__caret--open]=\"isOpen()\"\n    [class.kf-caret--open]=\"isOpen()\"\n    aria-hidden=\"true\"\n  ></span>\n</button>\n@if (errorMessage(); as message) {\n  <span class=\"kf-select__error kf-field-error\" [id]=\"errorId\" role=\"alert\">{{ message }}</span>\n}\n<ng-template #panelTemplate>\n  <div #panel class=\"kf-select__panel\" [class.kf-select__panel--compact]=\"variant() === 'compact'\">\n    @if (panelTitle(); as title) {\n      <div class=\"kf-select__panel-title kf-overline-text\" aria-hidden=\"true\">{{ title }}</div>\n    }\n    @if (showSearch()) {\n      <input\n        #searchInput\n        type=\"text\"\n        class=\"kf-select__search\"\n        placeholder=\"Buscar\u2026\"\n        aria-label=\"Buscar opci\u00F3n\"\n        role=\"combobox\"\n        aria-autocomplete=\"list\"\n        aria-expanded=\"true\"\n        [attr.aria-controls]=\"listboxId\"\n        [attr.aria-activedescendant]=\"filteredOptions().length ? optionId(activeIndex()) : null\"\n        [value]=\"searchQuery()\"\n        (input)=\"onSearchInput($event)\"\n        (keydown.arrowdown)=\"$event.preventDefault(); moveActive(1)\"\n        (keydown.arrowup)=\"$event.preventDefault(); moveActive(-1)\"\n        (keydown.enter)=\"$event.preventDefault(); selectActive()\"\n        (keydown)=\"onSearchKeydown($event)\"\n      />\n    }\n    <ul\n      class=\"kf-select__list\"\n      [id]=\"listboxId\"\n      role=\"listbox\"\n      [attr.aria-label]=\"ariaLabel() || null\"\n      [attr.aria-labelledby]=\"ariaLabel() ? null : triggerId\"\n    >\n      @for (option of filteredOptions(); track option.value; let i = $index) {\n        <li\n          class=\"kf-select__option\"\n          [id]=\"optionId(i)\"\n          [class.kf-select__option--selected]=\"option.value === value()\"\n          [class.kf-select__option--active]=\"i === activeIndex()\"\n          role=\"option\"\n          tabindex=\"-1\"\n          [attr.aria-selected]=\"option.value === value()\"\n          [attr.aria-label]=\"optionAriaLabel(option)\"\n          [class.kf-select__option--rich]=\"!!(option.tag || option.detail)\"\n          (click)=\"select(option)\"\n          (mouseenter)=\"activeIndex.set(i)\"\n          (keydown)=\"onOptionKeydown($event, option, i)\"\n        >\n          @if (option.tag || option.detail) {\n            <span class=\"kf-select__option-main\">\n              <span class=\"kf-select__option-label\">{{ option.label }}</span>\n              @if (option.tag) {\n                <kf-badge class=\"kf-select__tag\">{{ option.tag }}</kf-badge>\n              }\n            </span>\n            @if (option.detail) {\n              <span class=\"kf-select__option-detail\">{{ option.detail }}</span>\n            }\n          } @else {\n            {{ option.label }}\n          }\n        </li>\n      } @empty {\n        <li class=\"kf-select__empty\">\n          {{ searchQuery() ? 'Sin resultados' : 'Sin opciones disponibles' }}\n        </li>\n      }\n    </ul>\n  </div>\n</ng-template>\n", styles: [".kf-caret{flex-shrink:0;width:8px;height:8px;border-right:2px solid var(--kf-color-text-muted);border-bottom:2px solid var(--kf-color-text-muted);transform:rotate(45deg);transition:transform .14s;margin-top:-4px}.kf-caret--open{transform:rotate(-135deg);margin-top:4px}.kf-field-hint{font-size:.75rem;color:var(--kf-color-text-muted)}.kf-field-error{display:flex;align-items:center;gap:var(--kf-space-xs);font-size:.75rem;font-weight:600;color:var(--kf-color-error-strong)}.kf-overline-text{font-family:var(--kf-font-title);font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-medium);letter-spacing:.04em;text-transform:uppercase;color:var(--kf-color-text-muted)}:host{display:flex;flex-direction:column;gap:var(--kf-space-xs);width:var(--kf-select-width-md);font-family:var(--kf-font-body)}:host(.kf-select--compact){width:max-content;max-width:160px}:host(.kf-select--width-sm){width:var(--kf-select-width-sm)}:host(.kf-select--width-lg){width:var(--kf-select-width-lg)}:host(.kf-select--width-full){width:100%}:host(.kf-select--width-fit){width:max-content;max-width:var(--kf-select-fit-max-width, 20rem)}:host(.kf-select--compact) .kf-select__trigger{padding:6px var(--kf-space-sm);font-size:.85rem;gap:var(--kf-space-xs)}:host(.kf-select--compact) .kf-select__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-select__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);width:100%;font:inherit;color:var(--kf-color-text);padding:var(--kf-space-sm) var(--kf-space-md);background:var(--kf-color-white);border:1px solid var(--kf-color-border-control);border-radius:var(--kf-radius-sm);cursor:pointer;transition:border-color .14s,box-shadow .14s}:host(.kf-select--size-sm){--kf-select-min-height: 2rem}:host(.kf-select--size-sm) .kf-select__trigger{box-sizing:border-box;min-height:var(--kf-select-min-height);padding-block:0}:host(.kf-select--size-sm:not(.kf-select--compact)) .kf-select__trigger{font-size:var(--kf-font-size-body-sm)}.kf-select__trigger:hover:not(:disabled){border-color:var(--kf-color-text-muted)}.kf-select__trigger:focus-visible{outline:none;border-color:var(--kf-color-primary);box-shadow:var(--kf-shadow-focus)}.kf-select__trigger--disabled{opacity:.5;cursor:not-allowed}.kf-select__trigger--invalid{border-color:var(--kf-color-error)}.kf-select__trigger--invalid:focus-visible{border-color:var(--kf-color-error);box-shadow:var(--kf-shadow-focus-error)}.kf-select__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-select__value--fit{display:grid;grid-template-columns:minmax(0,1fr);text-align:start}.kf-select__value-text{grid-area:1 / 1;overflow:hidden;text-overflow:ellipsis}.kf-select__sizer{grid-area:1 / 1;display:grid;height:0;overflow:hidden;visibility:hidden}.kf-select__sizer>span{grid-area:1 / 1;white-space:nowrap}.kf-select__icon{flex:none;color:var(--kf-color-text-muted)}.kf-select__trigger--with-icon .kf-select__value{flex:1 1 auto;min-width:0;text-align:start}:host(.kf-select--compact) .kf-select__trigger--with-icon .kf-select__value{color:var(--kf-color-ink);font-weight:600}.kf-select__trigger--tagged .kf-select__value{flex:1 1 auto;min-width:0;text-align:start}.kf-select__tag{flex:none}.kf-select__tag-slot{display:grid;flex:none;justify-items:end}.kf-select__tag-slot>.kf-select__tag{grid-area:1 / 1}.kf-select__tag--reserved{visibility:hidden}.kf-select__trigger .kf-select__tag{margin-block:-2px}.kf-select__prefix{flex:none;color:var(--kf-color-text-muted);white-space:nowrap}.kf-select__value--placeholder{color:var(--kf-color-text-muted)}.kf-select__panel{box-sizing:border-box;font-family:var(--kf-font-body);width:100%;background:var(--kf-color-white);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);box-shadow:var(--kf-shadow-md);overflow:hidden}.kf-select__panel-title{padding:var(--kf-space-sm) var(--kf-space-md) var(--kf-space-xs)}.kf-select__panel--compact .kf-select__panel-title{padding:var(--kf-space-xs) var(--kf-space-sm) 2px}.kf-select__search{box-sizing:border-box;width:100%;font:inherit;font-family:var(--kf-font-body);color:var(--kf-color-text);padding:var(--kf-space-sm) var(--kf-space-md);border:none;border-bottom:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm) var(--kf-radius-sm) 0 0;outline:none}.kf-select__search:focus-visible{box-shadow:inset 0 0 0 2px var(--kf-color-primary)}.kf-select__list{box-sizing:border-box;width:100%;margin:0;padding:var(--kf-space-xs) 0;list-style:none;max-height:240px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--kf-color-gray-400) transparent}.kf-select__list::-webkit-scrollbar{width:6px}.kf-select__list::-webkit-scrollbar-track{background:transparent}.kf-select__list::-webkit-scrollbar-thumb{background-color:var(--kf-color-gray-400);border-radius:var(--kf-radius-pill)}.kf-select__list::-webkit-scrollbar-thumb:hover{background-color:var(--kf-color-gray-500)}.kf-select__option{padding:var(--kf-space-sm) var(--kf-space-md);outline:none;color:var(--kf-color-text);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kf-select__option--rich{display:flex;flex-direction:column;gap:2px}.kf-select__option-main{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);min-width:0}.kf-select__option-label,.kf-select__option-detail{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.kf-select__option-detail{font-size:var(--kf-font-size-body-sm);font-weight:400;color:var(--kf-color-text-muted)}.kf-select__panel--compact .kf-select__option{padding:6px var(--kf-space-sm);font-size:.85rem}.kf-select__option:hover{background:var(--kf-color-primary-soft)}.kf-select__option--selected{background:var(--kf-color-primary-soft);color:var(--kf-color-primary);font-weight:600}.kf-select__option--active{background:var(--kf-color-primary-soft)}.kf-select__option:focus-visible{background:var(--kf-color-primary-soft);box-shadow:inset 0 0 0 2px var(--kf-color-primary)}.kf-select__empty{text-align:center;padding:var(--kf-space-sm) var(--kf-space-md);color:var(--kf-color-text-muted)}\n"], dependencies: [{ kind: "component", type: Badge, selector: "kf-badge", inputs: ["tone", "variant", "dot", "truncate"] }, { kind: "component", type: FieldLabel, selector: "kf-field-label", inputs: ["for", "required", "visuallyHidden"] }, { kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Select, decorators: [{
             type: Component,
@@ -3399,8 +3414,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                         '[class.kf-select--width-full]': "width() === 'full'",
                         '[class.kf-select--width-fit]': "width() === 'fit'",
                         '[class.kf-select--size-sm]': "size() === 'sm'",
-                    }, template: "@if (label()) {\n  <kf-field-label [for]=\"triggerId\" [visuallyHidden]=\"hideLabel()\">{{ label() }}</kf-field-label>\n}\n<button\n  #trigger\n  type=\"button\"\n  [id]=\"triggerId\"\n  class=\"kf-select__trigger\"\n  [class.kf-select__trigger--disabled]=\"disabled()\"\n  [class.kf-select__trigger--invalid]=\"invalid()\"\n  [class.kf-select__trigger--with-icon]=\"!!icon()\"\n  [disabled]=\"disabled()\"\n  [attr.aria-haspopup]=\"'listbox'\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-controls]=\"isOpen() ? listboxId : null\"\n  [attr.aria-label]=\"triggerAriaLabel()\"\n  [attr.aria-describedby]=\"errorMessage() ? errorId : null\"\n  [attr.aria-invalid]=\"invalid() ? true : null\"\n  [class.kf-select__trigger--tagged]=\"!!selectedOption()?.tag\"\n  (click)=\"toggle()\"\n  (keydown)=\"onTriggerKeydown($event)\"\n>\n  @if (icon(); as iconName) {\n    <kf-icon class=\"kf-select__icon\" [name]=\"iconName\" size=\"sm\" />\n  }\n  @if (prefix(); as prefixText) {\n    <span class=\"kf-select__prefix\">{{ prefixText }}</span>\n  }\n  <span\n    class=\"kf-select__value\"\n    [class.kf-select__value--placeholder]=\"!selectedOption()\"\n    [class.kf-select__value--fit]=\"width() === 'fit'\"\n  >\n    @if (width() === 'fit') {\n      <span class=\"kf-select__value-text\">{{ triggerText() }}</span>\n      <!-- Reserva el ancho de la opci\u00F3n m\u00E1s larga: oculto a la vista y al\n        \u00E1rbol de accesibilidad, solo aporta tama\u00F1o. -->\n      <span class=\"kf-select__sizer\" aria-hidden=\"true\">\n        @for (text of fitTexts(); track text) {\n          <span>{{ text }}</span>\n        }\n      </span>\n    } @else {\n      {{ triggerText() }}\n    }\n  </span>\n  @if (width() === 'fit' && fitTags().length) {\n    <!-- Con `fit` el hueco del tag se reserva siempre con el m\u00E1s ancho: los\n      dem\u00E1s se apilan en la misma celda y solo el elegido se ve. -->\n    <span class=\"kf-select__tag-slot\">\n      @for (tag of fitTags(); track tag) {\n        <kf-badge\n          class=\"kf-select__tag\"\n          [class.kf-select__tag--reserved]=\"tag !== selectedOption()?.tag\"\n          [attr.aria-hidden]=\"tag !== selectedOption()?.tag ? 'true' : null\"\n          >{{ tag }}</kf-badge\n        >\n      }\n    </span>\n  } @else if (selectedOption()?.tag; as tag) {\n    <kf-badge class=\"kf-select__tag\">{{ tag }}</kf-badge>\n  }\n  <span\n    class=\"kf-select__caret kf-caret\"\n    [class.kf-select__caret--open]=\"isOpen()\"\n    [class.kf-caret--open]=\"isOpen()\"\n    aria-hidden=\"true\"\n  ></span>\n</button>\n@if (errorMessage(); as message) {\n  <span class=\"kf-select__error kf-field-error\" [id]=\"errorId\" role=\"alert\">{{ message }}</span>\n}\n<ng-template #panelTemplate>\n  <div #panel class=\"kf-select__panel\" [class.kf-select__panel--compact]=\"variant() === 'compact'\">\n    @if (panelTitle(); as title) {\n      <div class=\"kf-select__panel-title kf-overline-text\" aria-hidden=\"true\">{{ title }}</div>\n    }\n    @if (showSearch()) {\n      <input\n        #searchInput\n        type=\"text\"\n        class=\"kf-select__search\"\n        placeholder=\"Buscar\u2026\"\n        aria-label=\"Buscar opci\u00F3n\"\n        role=\"combobox\"\n        aria-autocomplete=\"list\"\n        aria-expanded=\"true\"\n        [attr.aria-controls]=\"listboxId\"\n        [attr.aria-activedescendant]=\"filteredOptions().length ? optionId(activeIndex()) : null\"\n        [value]=\"searchQuery()\"\n        (input)=\"onSearchInput($event)\"\n        (keydown.arrowdown)=\"$event.preventDefault(); moveActive(1)\"\n        (keydown.arrowup)=\"$event.preventDefault(); moveActive(-1)\"\n        (keydown.enter)=\"$event.preventDefault(); selectActive()\"\n        (keydown)=\"onSearchKeydown($event)\"\n      />\n    }\n    <ul\n      class=\"kf-select__list\"\n      [id]=\"listboxId\"\n      role=\"listbox\"\n      [attr.aria-label]=\"ariaLabel() || null\"\n      [attr.aria-labelledby]=\"ariaLabel() ? null : triggerId\"\n    >\n      @for (option of filteredOptions(); track option.value; let i = $index) {\n        <li\n          class=\"kf-select__option\"\n          [id]=\"optionId(i)\"\n          [class.kf-select__option--selected]=\"option.value === value()\"\n          [class.kf-select__option--active]=\"i === activeIndex()\"\n          role=\"option\"\n          tabindex=\"-1\"\n          [attr.aria-selected]=\"option.value === value()\"\n          [attr.aria-label]=\"optionAriaLabel(option)\"\n          [class.kf-select__option--rich]=\"!!(option.tag || option.detail)\"\n          (click)=\"select(option)\"\n          (mouseenter)=\"activeIndex.set(i)\"\n          (keydown)=\"onOptionKeydown($event, option, i)\"\n        >\n          @if (option.tag || option.detail) {\n            <span class=\"kf-select__option-main\">\n              <span class=\"kf-select__option-label\">{{ option.label }}</span>\n              @if (option.tag) {\n                <kf-badge class=\"kf-select__tag\">{{ option.tag }}</kf-badge>\n              }\n            </span>\n            @if (option.detail) {\n              <span class=\"kf-select__option-detail\">{{ option.detail }}</span>\n            }\n          } @else {\n            {{ option.label }}\n          }\n        </li>\n      } @empty {\n        <li class=\"kf-select__empty\">\n          {{ searchQuery() ? 'Sin resultados' : 'Sin opciones disponibles' }}\n        </li>\n      }\n    </ul>\n  </div>\n</ng-template>\n", styles: [".kf-caret{flex-shrink:0;width:8px;height:8px;border-right:2px solid var(--kf-color-text-muted);border-bottom:2px solid var(--kf-color-text-muted);transform:rotate(45deg);transition:transform .14s;margin-top:-4px}.kf-caret--open{transform:rotate(-135deg);margin-top:4px}.kf-field-hint{font-size:.75rem;color:var(--kf-color-text-muted)}.kf-field-error{display:flex;align-items:center;gap:var(--kf-space-xs);font-size:.75rem;font-weight:600;color:var(--kf-color-error-strong)}.kf-overline-text{font-family:var(--kf-font-title);font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-medium);letter-spacing:.04em;text-transform:uppercase;color:var(--kf-color-text-muted)}:host{display:flex;flex-direction:column;gap:var(--kf-space-xs);width:var(--kf-select-width-md);font-family:var(--kf-font-body)}:host(.kf-select--compact){width:max-content;max-width:160px}:host(.kf-select--width-sm){width:var(--kf-select-width-sm)}:host(.kf-select--width-lg){width:var(--kf-select-width-lg)}:host(.kf-select--width-full){width:100%}:host(.kf-select--width-fit){width:max-content;max-width:var(--kf-select-fit-max-width, 20rem)}:host(.kf-select--compact) .kf-select__trigger{padding:6px var(--kf-space-sm);font-size:.85rem;gap:var(--kf-space-xs)}:host(.kf-select--compact) .kf-select__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-select__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);width:100%;font:inherit;color:var(--kf-color-text);padding:var(--kf-space-sm) var(--kf-space-md);background:var(--kf-color-white);border:1px solid var(--kf-color-border-control);border-radius:var(--kf-radius-sm);cursor:pointer;transition:border-color .14s,box-shadow .14s}:host(.kf-select--size-sm){--kf-select-min-height: 2rem}:host(.kf-select--size-sm) .kf-select__trigger{box-sizing:border-box;min-height:var(--kf-select-min-height);padding-block:0}:host(.kf-select--size-sm:not(.kf-select--compact)) .kf-select__trigger{font-size:var(--kf-font-size-body-sm)}.kf-select__trigger:hover:not(:disabled){border-color:var(--kf-color-text-muted)}.kf-select__trigger:focus-visible{outline:none;border-color:var(--kf-color-primary);box-shadow:var(--kf-shadow-focus)}.kf-select__trigger--disabled{opacity:.5;cursor:not-allowed}.kf-select__trigger--invalid{border-color:var(--kf-color-error)}.kf-select__trigger--invalid:focus-visible{border-color:var(--kf-color-error);box-shadow:var(--kf-shadow-focus-error)}.kf-select__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-select__value--fit{display:grid;grid-template-columns:minmax(0,1fr);text-align:start}.kf-select__value-text{grid-area:1 / 1;overflow:hidden;text-overflow:ellipsis}.kf-select__sizer{grid-area:1 / 1;display:grid;height:0;overflow:hidden;visibility:hidden}.kf-select__sizer>span{grid-area:1 / 1;white-space:nowrap}.kf-select__icon{flex:none;color:var(--kf-color-text-muted)}.kf-select__trigger--with-icon .kf-select__value{flex:1 1 auto;min-width:0;text-align:start}:host(.kf-select--compact) .kf-select__trigger--with-icon .kf-select__value{color:var(--kf-color-ink);font-weight:600}.kf-select__trigger--tagged .kf-select__value{flex:1 1 auto;min-width:0;text-align:start}.kf-select__tag{flex:none}.kf-select__tag-slot{display:grid;flex:none;justify-items:end}.kf-select__tag-slot>.kf-select__tag{grid-area:1 / 1}.kf-select__tag--reserved{visibility:hidden}.kf-select__trigger .kf-select__tag{margin-block:-2px}.kf-select__prefix{flex:none;color:var(--kf-color-text-muted);white-space:nowrap}.kf-select__value--placeholder{color:var(--kf-color-text-muted)}.kf-select__panel{box-sizing:border-box;font-family:var(--kf-font-body);width:100%;background:var(--kf-color-white);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);box-shadow:var(--kf-shadow-md);overflow:hidden}.kf-select__panel-title{padding:var(--kf-space-sm) var(--kf-space-md) var(--kf-space-xs)}.kf-select__panel--compact .kf-select__panel-title{padding:var(--kf-space-xs) var(--kf-space-sm) 2px}.kf-select__search{box-sizing:border-box;width:100%;font:inherit;font-family:var(--kf-font-body);color:var(--kf-color-text);padding:var(--kf-space-sm) var(--kf-space-md);border:none;border-bottom:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm) var(--kf-radius-sm) 0 0;outline:none}.kf-select__search:focus-visible{box-shadow:inset 0 0 0 2px var(--kf-color-primary)}.kf-select__list{box-sizing:border-box;width:100%;margin:0;padding:var(--kf-space-xs) 0;list-style:none;max-height:240px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--kf-color-gray-400) transparent}.kf-select__list::-webkit-scrollbar{width:6px}.kf-select__list::-webkit-scrollbar-track{background:transparent}.kf-select__list::-webkit-scrollbar-thumb{background-color:var(--kf-color-gray-400);border-radius:var(--kf-radius-pill)}.kf-select__list::-webkit-scrollbar-thumb:hover{background-color:var(--kf-color-gray-500)}.kf-select__option{padding:var(--kf-space-sm) var(--kf-space-md);outline:none;color:var(--kf-color-text);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kf-select__option--rich{display:flex;flex-direction:column;gap:2px}.kf-select__option-main{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);min-width:0}.kf-select__option-label,.kf-select__option-detail{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.kf-select__option-detail{font-size:var(--kf-font-size-body-sm);font-weight:400;color:var(--kf-color-text-muted)}.kf-select__panel--compact .kf-select__option{padding:6px var(--kf-space-sm);font-size:.85rem}.kf-select__option:hover{background:var(--kf-color-primary-soft)}.kf-select__option--selected{background:var(--kf-color-primary-soft);color:var(--kf-color-primary);font-weight:600}.kf-select__option--active{background:var(--kf-color-primary-soft)}.kf-select__option:focus-visible{background:var(--kf-color-primary-soft);box-shadow:inset 0 0 0 2px var(--kf-color-primary)}.kf-select__empty{text-align:center;padding:var(--kf-space-sm) var(--kf-space-md);color:var(--kf-color-text-muted)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hideLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideLabel", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchThreshold", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], panelTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelTitle", required: false }] }], panelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelWidth", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], triggerRef: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], panelTemplate: [{ type: i0.ViewChild, args: ['panelTemplate', { isSignal: true }] }], searchInputRef: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }], panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }] } });
+                    }, template: "@if (label()) {\n  <kf-field-label [for]=\"triggerId\" [required]=\"required()\" [visuallyHidden]=\"hideLabel()\">{{\n    label()\n  }}</kf-field-label>\n}\n<button\n  #trigger\n  type=\"button\"\n  [id]=\"triggerId\"\n  class=\"kf-select__trigger\"\n  [class.kf-select__trigger--disabled]=\"disabled()\"\n  [class.kf-select__trigger--invalid]=\"invalid()\"\n  [class.kf-select__trigger--with-icon]=\"!!icon()\"\n  [disabled]=\"disabled()\"\n  [attr.aria-haspopup]=\"'listbox'\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-controls]=\"isOpen() ? listboxId : null\"\n  [attr.aria-label]=\"triggerAriaLabel()\"\n  [attr.aria-describedby]=\"errorMessage() ? errorId : null\"\n  [attr.aria-invalid]=\"invalid() ? true : null\"\n  [attr.aria-required]=\"required() ? true : null\"\n  [class.kf-select__trigger--tagged]=\"!!selectedOption()?.tag\"\n  (click)=\"toggle()\"\n  (keydown)=\"onTriggerKeydown($event)\"\n>\n  @if (icon(); as iconName) {\n    <kf-icon class=\"kf-select__icon\" [name]=\"iconName\" size=\"sm\" />\n  }\n  @if (prefix(); as prefixText) {\n    <span class=\"kf-select__prefix\">{{ prefixText }}</span>\n  }\n  <span\n    class=\"kf-select__value\"\n    [class.kf-select__value--placeholder]=\"!selectedOption()\"\n    [class.kf-select__value--fit]=\"width() === 'fit'\"\n  >\n    @if (width() === 'fit') {\n      <span class=\"kf-select__value-text\">{{ triggerText() }}</span>\n      <!-- Reserva el ancho de la opci\u00F3n m\u00E1s larga: oculto a la vista y al\n        \u00E1rbol de accesibilidad, solo aporta tama\u00F1o. -->\n      <span class=\"kf-select__sizer\" aria-hidden=\"true\">\n        @for (text of fitTexts(); track text) {\n          <span>{{ text }}</span>\n        }\n      </span>\n    } @else {\n      {{ triggerText() }}\n    }\n  </span>\n  @if (width() === 'fit' && fitTags().length) {\n    <!-- Con `fit` el hueco del tag se reserva siempre con el m\u00E1s ancho: los\n      dem\u00E1s se apilan en la misma celda y solo el elegido se ve. -->\n    <span class=\"kf-select__tag-slot\">\n      @for (tag of fitTags(); track tag) {\n        <kf-badge\n          class=\"kf-select__tag\"\n          [class.kf-select__tag--reserved]=\"tag !== selectedOption()?.tag\"\n          [attr.aria-hidden]=\"tag !== selectedOption()?.tag ? 'true' : null\"\n          >{{ tag }}</kf-badge\n        >\n      }\n    </span>\n  } @else if (selectedOption()?.tag; as tag) {\n    <kf-badge class=\"kf-select__tag\">{{ tag }}</kf-badge>\n  }\n  <span\n    class=\"kf-select__caret kf-caret\"\n    [class.kf-select__caret--open]=\"isOpen()\"\n    [class.kf-caret--open]=\"isOpen()\"\n    aria-hidden=\"true\"\n  ></span>\n</button>\n@if (errorMessage(); as message) {\n  <span class=\"kf-select__error kf-field-error\" [id]=\"errorId\" role=\"alert\">{{ message }}</span>\n}\n<ng-template #panelTemplate>\n  <div #panel class=\"kf-select__panel\" [class.kf-select__panel--compact]=\"variant() === 'compact'\">\n    @if (panelTitle(); as title) {\n      <div class=\"kf-select__panel-title kf-overline-text\" aria-hidden=\"true\">{{ title }}</div>\n    }\n    @if (showSearch()) {\n      <input\n        #searchInput\n        type=\"text\"\n        class=\"kf-select__search\"\n        placeholder=\"Buscar\u2026\"\n        aria-label=\"Buscar opci\u00F3n\"\n        role=\"combobox\"\n        aria-autocomplete=\"list\"\n        aria-expanded=\"true\"\n        [attr.aria-controls]=\"listboxId\"\n        [attr.aria-activedescendant]=\"filteredOptions().length ? optionId(activeIndex()) : null\"\n        [value]=\"searchQuery()\"\n        (input)=\"onSearchInput($event)\"\n        (keydown.arrowdown)=\"$event.preventDefault(); moveActive(1)\"\n        (keydown.arrowup)=\"$event.preventDefault(); moveActive(-1)\"\n        (keydown.enter)=\"$event.preventDefault(); selectActive()\"\n        (keydown)=\"onSearchKeydown($event)\"\n      />\n    }\n    <ul\n      class=\"kf-select__list\"\n      [id]=\"listboxId\"\n      role=\"listbox\"\n      [attr.aria-label]=\"ariaLabel() || null\"\n      [attr.aria-labelledby]=\"ariaLabel() ? null : triggerId\"\n    >\n      @for (option of filteredOptions(); track option.value; let i = $index) {\n        <li\n          class=\"kf-select__option\"\n          [id]=\"optionId(i)\"\n          [class.kf-select__option--selected]=\"option.value === value()\"\n          [class.kf-select__option--active]=\"i === activeIndex()\"\n          role=\"option\"\n          tabindex=\"-1\"\n          [attr.aria-selected]=\"option.value === value()\"\n          [attr.aria-label]=\"optionAriaLabel(option)\"\n          [class.kf-select__option--rich]=\"!!(option.tag || option.detail)\"\n          (click)=\"select(option)\"\n          (mouseenter)=\"activeIndex.set(i)\"\n          (keydown)=\"onOptionKeydown($event, option, i)\"\n        >\n          @if (option.tag || option.detail) {\n            <span class=\"kf-select__option-main\">\n              <span class=\"kf-select__option-label\">{{ option.label }}</span>\n              @if (option.tag) {\n                <kf-badge class=\"kf-select__tag\">{{ option.tag }}</kf-badge>\n              }\n            </span>\n            @if (option.detail) {\n              <span class=\"kf-select__option-detail\">{{ option.detail }}</span>\n            }\n          } @else {\n            {{ option.label }}\n          }\n        </li>\n      } @empty {\n        <li class=\"kf-select__empty\">\n          {{ searchQuery() ? 'Sin resultados' : 'Sin opciones disponibles' }}\n        </li>\n      }\n    </ul>\n  </div>\n</ng-template>\n", styles: [".kf-caret{flex-shrink:0;width:8px;height:8px;border-right:2px solid var(--kf-color-text-muted);border-bottom:2px solid var(--kf-color-text-muted);transform:rotate(45deg);transition:transform .14s;margin-top:-4px}.kf-caret--open{transform:rotate(-135deg);margin-top:4px}.kf-field-hint{font-size:.75rem;color:var(--kf-color-text-muted)}.kf-field-error{display:flex;align-items:center;gap:var(--kf-space-xs);font-size:.75rem;font-weight:600;color:var(--kf-color-error-strong)}.kf-overline-text{font-family:var(--kf-font-title);font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-medium);letter-spacing:.04em;text-transform:uppercase;color:var(--kf-color-text-muted)}:host{display:flex;flex-direction:column;gap:var(--kf-space-xs);width:var(--kf-select-width-md);font-family:var(--kf-font-body)}:host(.kf-select--compact){width:max-content;max-width:160px}:host(.kf-select--width-sm){width:var(--kf-select-width-sm)}:host(.kf-select--width-lg){width:var(--kf-select-width-lg)}:host(.kf-select--width-full){width:100%}:host(.kf-select--width-fit){width:max-content;max-width:var(--kf-select-fit-max-width, 20rem)}:host(.kf-select--compact) .kf-select__trigger{padding:6px var(--kf-space-sm);font-size:.85rem;gap:var(--kf-space-xs)}:host(.kf-select--compact) .kf-select__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-select__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);width:100%;font:inherit;color:var(--kf-color-text);padding:var(--kf-space-sm) var(--kf-space-md);background:var(--kf-color-white);border:1px solid var(--kf-color-border-control);border-radius:var(--kf-radius-sm);cursor:pointer;transition:border-color .14s,box-shadow .14s}:host(.kf-select--size-sm){--kf-select-min-height: 2rem}:host(.kf-select--size-sm) .kf-select__trigger{box-sizing:border-box;min-height:var(--kf-select-min-height);padding-block:0}:host(.kf-select--size-sm:not(.kf-select--compact)) .kf-select__trigger{font-size:var(--kf-font-size-body-sm)}.kf-select__trigger:hover:not(:disabled){border-color:var(--kf-color-text-muted)}.kf-select__trigger:focus-visible{outline:none;border-color:var(--kf-color-primary);box-shadow:var(--kf-shadow-focus)}.kf-select__trigger--disabled{opacity:.5;cursor:not-allowed}.kf-select__trigger--invalid{border-color:var(--kf-color-error)}.kf-select__trigger--invalid:focus-visible{border-color:var(--kf-color-error);box-shadow:var(--kf-shadow-focus-error)}.kf-select__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-select__value--fit{display:grid;grid-template-columns:minmax(0,1fr);text-align:start}.kf-select__value-text{grid-area:1 / 1;overflow:hidden;text-overflow:ellipsis}.kf-select__sizer{grid-area:1 / 1;display:grid;height:0;overflow:hidden;visibility:hidden}.kf-select__sizer>span{grid-area:1 / 1;white-space:nowrap}.kf-select__icon{flex:none;color:var(--kf-color-text-muted)}.kf-select__trigger--with-icon .kf-select__value{flex:1 1 auto;min-width:0;text-align:start}:host(.kf-select--compact) .kf-select__trigger--with-icon .kf-select__value{color:var(--kf-color-ink);font-weight:600}.kf-select__trigger--tagged .kf-select__value{flex:1 1 auto;min-width:0;text-align:start}.kf-select__tag{flex:none}.kf-select__tag-slot{display:grid;flex:none;justify-items:end}.kf-select__tag-slot>.kf-select__tag{grid-area:1 / 1}.kf-select__tag--reserved{visibility:hidden}.kf-select__trigger .kf-select__tag{margin-block:-2px}.kf-select__prefix{flex:none;color:var(--kf-color-text-muted);white-space:nowrap}.kf-select__value--placeholder{color:var(--kf-color-text-muted)}.kf-select__panel{box-sizing:border-box;font-family:var(--kf-font-body);width:100%;background:var(--kf-color-white);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);box-shadow:var(--kf-shadow-md);overflow:hidden}.kf-select__panel-title{padding:var(--kf-space-sm) var(--kf-space-md) var(--kf-space-xs)}.kf-select__panel--compact .kf-select__panel-title{padding:var(--kf-space-xs) var(--kf-space-sm) 2px}.kf-select__search{box-sizing:border-box;width:100%;font:inherit;font-family:var(--kf-font-body);color:var(--kf-color-text);padding:var(--kf-space-sm) var(--kf-space-md);border:none;border-bottom:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm) var(--kf-radius-sm) 0 0;outline:none}.kf-select__search:focus-visible{box-shadow:inset 0 0 0 2px var(--kf-color-primary)}.kf-select__list{box-sizing:border-box;width:100%;margin:0;padding:var(--kf-space-xs) 0;list-style:none;max-height:240px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--kf-color-gray-400) transparent}.kf-select__list::-webkit-scrollbar{width:6px}.kf-select__list::-webkit-scrollbar-track{background:transparent}.kf-select__list::-webkit-scrollbar-thumb{background-color:var(--kf-color-gray-400);border-radius:var(--kf-radius-pill)}.kf-select__list::-webkit-scrollbar-thumb:hover{background-color:var(--kf-color-gray-500)}.kf-select__option{padding:var(--kf-space-sm) var(--kf-space-md);outline:none;color:var(--kf-color-text);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kf-select__option--rich{display:flex;flex-direction:column;gap:2px}.kf-select__option-main{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);min-width:0}.kf-select__option-label,.kf-select__option-detail{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.kf-select__option-detail{font-size:var(--kf-font-size-body-sm);font-weight:400;color:var(--kf-color-text-muted)}.kf-select__panel--compact .kf-select__option{padding:6px var(--kf-space-sm);font-size:.85rem}.kf-select__option:hover{background:var(--kf-color-primary-soft)}.kf-select__option--selected{background:var(--kf-color-primary-soft);color:var(--kf-color-primary);font-weight:600}.kf-select__option--active{background:var(--kf-color-primary-soft)}.kf-select__option:focus-visible{background:var(--kf-color-primary-soft);box-shadow:inset 0 0 0 2px var(--kf-color-primary)}.kf-select__empty{text-align:center;padding:var(--kf-space-sm) var(--kf-space-md);color:var(--kf-color-text-muted)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hideLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideLabel", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchThreshold", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], panelTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelTitle", required: false }] }], panelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelWidth", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], triggerRef: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], panelTemplate: [{ type: i0.ViewChild, args: ['panelTemplate', { isSignal: true }] }], searchInputRef: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }], panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }] } });
 
 const SIBLINGS = 1;
 /**
@@ -3474,7 +3489,7 @@ class Pagination {
         this.pageChange.emit(clamped);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Pagination, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Pagination, isStandalone: true, selector: "kf-pagination", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, pages: { classPropertyName: "pages", publicName: "pages", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", pageSize: "pageSizeChange" }, ngImport: i0, template: "<div class=\"kf-pagination\">\n  <div class=\"kf-pagination__info kf-caption-text\" aria-live=\"polite\">\n    <ng-content />\n  </div>\n\n  <div class=\"kf-pagination__controls\">\n    @if (pageSizeOptions().length > 0) {\n      <div class=\"kf-pagination__size\">\n        <span class=\"kf-pagination__size-label kf-caption-text\">Filas</span>\n        <kf-select\n          variant=\"compact\"\n          ariaLabel=\"Filas por p\u00E1gina\"\n          [options]=\"pageSizeSelectOptions()\"\n          [value]=\"pageSizeValue()\"\n          (valueChange)=\"setPageSize($event)\"\n        />\n      </div>\n      @if (hasNav()) {\n        <div class=\"kf-pagination__divider\" aria-hidden=\"true\"></div>\n      }\n    }\n\n    @if (hasNav()) {\n      <nav class=\"kf-pagination__nav\" aria-label=\"Paginaci\u00F3n\">\n        <button\n          type=\"button\"\n          class=\"kf-pagination__control\"\n          [disabled]=\"page() <= 1\"\n          aria-label=\"P\u00E1gina anterior\"\n          (click)=\"goTo(page() - 1)\"\n        >\n          \u2039\n        </button>\n\n        @for (item of items(); track $index) {\n          @if (item.type === 'page') {\n            <button\n              type=\"button\"\n              class=\"kf-pagination__page\"\n              [class.kf-pagination__page--active]=\"item.page === page()\"\n              [attr.aria-current]=\"item.page === page() ? 'page' : null\"\n              [attr.aria-label]=\"'Ir a la p\u00E1gina ' + item.page\"\n              (click)=\"goTo(item.page)\"\n            >\n              {{ item.page }}\n            </button>\n          } @else {\n            <span class=\"kf-pagination__ellipsis\" aria-hidden=\"true\">\u2026</span>\n          }\n        }\n\n        <button\n          type=\"button\"\n          class=\"kf-pagination__control\"\n          [disabled]=\"page() >= pages()\"\n          aria-label=\"P\u00E1gina siguiente\"\n          (click)=\"goTo(page() + 1)\"\n        >\n          \u203A\n        </button>\n      </nav>\n    }\n  </div>\n</div>\n", styles: [".kf-caption-text{font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-body);color:var(--kf-color-text-muted)}:host{display:block;font-family:var(--kf-font-body)}.kf-pagination{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-md);flex-wrap:wrap}.kf-pagination__info:empty{display:none}.kf-pagination__controls{display:flex;flex-wrap:wrap;align-items:center;gap:var(--kf-space-sm) var(--kf-space-md)}.kf-pagination__size{display:flex;align-items:center;gap:var(--kf-space-sm)}.kf-pagination__size-label{white-space:nowrap}.kf-pagination__divider{width:1px;height:1.25rem;background:var(--kf-color-border)}.kf-pagination__nav{display:flex;align-items:center;gap:var(--kf-space-xs)}.kf-pagination__control,.kf-pagination__page{display:inline-flex;align-items:center;justify-content:center;min-width:2rem;height:2rem;padding:0 var(--kf-space-xs);font:inherit;font-size:.85rem;color:var(--kf-color-text);background:var(--kf-color-white);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);cursor:pointer;transition:background .14s,border-color .14s,color .14s}.kf-pagination__control:hover:not(:disabled),.kf-pagination__page:hover:not(.kf-pagination__page--active){background:var(--kf-color-surface);border-color:var(--kf-color-border-strong)}.kf-pagination__control:focus-visible,.kf-pagination__page:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-pagination__control:disabled{opacity:.5;cursor:not-allowed}.kf-pagination__page--active{color:var(--kf-color-white);background:var(--kf-color-primary);border-color:var(--kf-color-primary);cursor:default}.kf-pagination__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:2rem;height:2rem;color:var(--kf-color-text-muted)}@media(max-width:480px){.kf-pagination__controls{width:100%}.kf-pagination__divider{display:none}}\n"], dependencies: [{ kind: "component", type: Select, selector: "kf-select", inputs: ["label", "hideLabel", "prefix", "options", "value", "placeholder", "disabled", "invalid", "errorMessage", "variant", "width", "size", "searchable", "searchThreshold", "ariaLabel", "icon", "panelTitle", "panelWidth"], outputs: ["valueChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Pagination, isStandalone: true, selector: "kf-pagination", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, pages: { classPropertyName: "pages", publicName: "pages", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", pageSize: "pageSizeChange" }, ngImport: i0, template: "<div class=\"kf-pagination\">\n  <div class=\"kf-pagination__info kf-caption-text\" aria-live=\"polite\">\n    <ng-content />\n  </div>\n\n  <div class=\"kf-pagination__controls\">\n    @if (pageSizeOptions().length > 0) {\n      <div class=\"kf-pagination__size\">\n        <span class=\"kf-pagination__size-label kf-caption-text\">Filas</span>\n        <kf-select\n          variant=\"compact\"\n          ariaLabel=\"Filas por p\u00E1gina\"\n          [options]=\"pageSizeSelectOptions()\"\n          [value]=\"pageSizeValue()\"\n          (valueChange)=\"setPageSize($event)\"\n        />\n      </div>\n      @if (hasNav()) {\n        <div class=\"kf-pagination__divider\" aria-hidden=\"true\"></div>\n      }\n    }\n\n    @if (hasNav()) {\n      <nav class=\"kf-pagination__nav\" aria-label=\"Paginaci\u00F3n\">\n        <button\n          type=\"button\"\n          class=\"kf-pagination__control\"\n          [disabled]=\"page() <= 1\"\n          aria-label=\"P\u00E1gina anterior\"\n          (click)=\"goTo(page() - 1)\"\n        >\n          \u2039\n        </button>\n\n        @for (item of items(); track $index) {\n          @if (item.type === 'page') {\n            <button\n              type=\"button\"\n              class=\"kf-pagination__page\"\n              [class.kf-pagination__page--active]=\"item.page === page()\"\n              [attr.aria-current]=\"item.page === page() ? 'page' : null\"\n              [attr.aria-label]=\"'Ir a la p\u00E1gina ' + item.page\"\n              (click)=\"goTo(item.page)\"\n            >\n              {{ item.page }}\n            </button>\n          } @else {\n            <span class=\"kf-pagination__ellipsis\" aria-hidden=\"true\">\u2026</span>\n          }\n        }\n\n        <button\n          type=\"button\"\n          class=\"kf-pagination__control\"\n          [disabled]=\"page() >= pages()\"\n          aria-label=\"P\u00E1gina siguiente\"\n          (click)=\"goTo(page() + 1)\"\n        >\n          \u203A\n        </button>\n      </nav>\n    }\n  </div>\n</div>\n", styles: [".kf-caption-text{font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-body);color:var(--kf-color-text-muted)}:host{display:block;font-family:var(--kf-font-body)}.kf-pagination{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-md);flex-wrap:wrap}.kf-pagination__info:empty{display:none}.kf-pagination__controls{display:flex;flex-wrap:wrap;align-items:center;gap:var(--kf-space-sm) var(--kf-space-md)}.kf-pagination__size{display:flex;align-items:center;gap:var(--kf-space-sm)}.kf-pagination__size-label{white-space:nowrap}.kf-pagination__divider{width:1px;height:1.25rem;background:var(--kf-color-border)}.kf-pagination__nav{display:flex;align-items:center;gap:var(--kf-space-xs)}.kf-pagination__control,.kf-pagination__page{display:inline-flex;align-items:center;justify-content:center;min-width:2rem;height:2rem;padding:0 var(--kf-space-xs);font:inherit;font-size:.85rem;color:var(--kf-color-text);background:var(--kf-color-white);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);cursor:pointer;transition:background .14s,border-color .14s,color .14s}.kf-pagination__control:hover:not(:disabled),.kf-pagination__page:hover:not(.kf-pagination__page--active){background:var(--kf-color-surface);border-color:var(--kf-color-border-strong)}.kf-pagination__control:focus-visible,.kf-pagination__page:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-pagination__control:disabled{opacity:.5;cursor:not-allowed}.kf-pagination__page--active{color:var(--kf-color-white);background:var(--kf-color-primary);border-color:var(--kf-color-primary);cursor:default}.kf-pagination__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:2rem;height:2rem;color:var(--kf-color-text-muted)}@media(max-width:480px){.kf-pagination__controls{width:100%}.kf-pagination__divider{display:none}}\n"], dependencies: [{ kind: "component", type: Select, selector: "kf-select", inputs: ["label", "hideLabel", "prefix", "options", "value", "placeholder", "disabled", "invalid", "required", "errorMessage", "variant", "width", "size", "searchable", "searchThreshold", "ariaLabel", "icon", "panelTitle", "panelWidth"], outputs: ["valueChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Pagination, decorators: [{
             type: Component,
@@ -3651,9 +3666,11 @@ const DEFAULT_PAGE_SIZE_OPTIONS = [10, 25, 50];
  * por página" viene activo por defecto con `DEFAULT_PAGE_SIZE_OPTIONS`
  * ([10, 25, 50], estándar del portal) — pasar `pageSizeOptions` propio lo
  * pisa, y pasar `[]` lo desactiva (paginación sin selector). `itemLabel`
- * completa el texto informativo ("1–10 de 42 beneficios").
+ * completa el texto informativo ("1–10 de 42 beneficios"); con
+ * `{ one, other }` usa el singular cuando el total es 1 ("1–1 de 1 beneficio").
  *
  *   <kf-data-table [columns]="columns" [rows]="rows" [pageSize]="25" itemLabel="beneficios" />
+ *   <kf-data-table [columns]="columns" [rows]="rows" [pageSize]="25" [itemLabel]="{ one: 'unidad', other: 'unidades' }" />
  *   <kf-data-table [columns]="columns" [rows]="rows" [pageSize]="25" [pageSizeOptions]="[]" />
  *
  * La página es `[(page)]` (el consumidor puede llevarla a la URL) y se
@@ -3962,9 +3979,12 @@ class DataTable {
     pageSizeChange = output();
     /** Nombre de la entidad listada (ej. "beneficios", "facturas"), en
      * plural — se agrega al final del texto informativo de la paginación
-     * interna ("1–5 de 7 beneficios"). Sin esto, el texto queda solo con
-     * números ("1–5 de 7"): la librería no impone un idioma ni un nombre
-     * fijo, cada consumidor decide el suyo. */
+     * interna ("1–5 de 7 beneficios"). Acepta `{ one, other }` para usar el
+     * singular cuando el total es 1 ("1–1 de 1 beneficio"); un `string`
+     * conserva el comportamiento de siempre (mismo texto para cualquier
+     * total). Sin esto, el texto queda solo con números ("1–5 de 7"): la
+     * librería no impone un idioma ni un nombre fijo, cada consumidor decide
+     * el suyo. */
     itemLabel = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "itemLabel" }] : /* istanbul ignore next */ []));
     internalPageSize = signal(null, /* @ts-ignore */
@@ -4029,7 +4049,8 @@ class DataTable {
         }
         const start = (this.page() - 1) * size + 1;
         const end = Math.min(start + size - 1, total);
-        const label = this.itemLabel();
+        const itemLabel = this.itemLabel();
+        const label = typeof itemLabel === 'string' ? itemLabel : total === 1 ? itemLabel.one : itemLabel.other;
         return label ? `${start}–${end} de ${total} ${label}` : `${start}–${end} de ${total}`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "paginationSummary" }] : /* istanbul ignore next */ []));
@@ -4954,7 +4975,7 @@ class CursorPager {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CursorPager, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: CursorPager, isStandalone: true, selector: "kf-cursor-pager", inputs: { summary: { classPropertyName: "summary", publicName: "summary", isSignal: true, isRequired: false, transformFunction: null }, hasPrevious: { classPropertyName: "hasPrevious", publicName: "hasPrevious", isSignal: true, isRequired: false, transformFunction: null }, hasNext: { classPropertyName: "hasNext", publicName: "hasNext", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { previous: "previous", next: "next", pageSizeChange: "pageSizeChange" }, ngImport: i0, template: "<div class=\"kf-cursor-pager\">\n  <div class=\"kf-cursor-pager__summary\" role=\"status\" aria-live=\"polite\">{{ summary() }}</div>\n\n  <div class=\"kf-cursor-pager__controls\">\n    @if (sizeOptions().length > 0) {\n      <div class=\"kf-cursor-pager__size\">\n        <span class=\"kf-cursor-pager__size-label\" aria-hidden=\"true\">Filas</span>\n        <kf-select\n          variant=\"compact\"\n          label=\"Filas por p\u00E1gina\"\n          hideLabel\n          [options]=\"sizeOptions()\"\n          [value]=\"sizeValue()\"\n          (valueChange)=\"onPageSize($event)\"\n        />\n      </div>\n      <span class=\"kf-cursor-pager__divider\" aria-hidden=\"true\"></span>\n    }\n\n    <nav class=\"kf-cursor-pager__nav\" [attr.aria-label]=\"ariaLabel()\">\n      <button\n        type=\"button\"\n        class=\"kf-cursor-pager__button\"\n        [attr.aria-disabled]=\"!hasPrevious()\"\n        (click)=\"onPrevious()\"\n      >\n        <kf-icon name=\"chevron-left\" size=\"sm\" />\n        Anterior\n      </button>\n      <button\n        type=\"button\"\n        class=\"kf-cursor-pager__button kf-cursor-pager__button--next\"\n        [attr.aria-disabled]=\"!hasNext()\"\n        (click)=\"onNext()\"\n      >\n        Siguiente\n        <kf-icon name=\"chevron-right\" size=\"sm\" />\n      </button>\n    </nav>\n  </div>\n</div>\n", styles: [":host{display:block;font-family:var(--kf-font-body)}.kf-cursor-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--kf-space-md)}.kf-cursor-pager__summary{font-size:var(--kf-font-size-body-sm);font-weight:var(--kf-font-weight-medium);color:var(--kf-color-text)}.kf-cursor-pager__summary:empty{display:none}.kf-cursor-pager__controls{display:flex;flex-wrap:wrap;align-items:center;gap:var(--kf-space-sm) var(--kf-space-md)}.kf-cursor-pager__size{display:flex;align-items:center;gap:var(--kf-space-sm)}.kf-cursor-pager__size-label{font-size:var(--kf-font-size-body-sm);color:var(--kf-color-text);white-space:nowrap}.kf-cursor-pager__divider{width:1px;height:1.25rem;background:var(--kf-color-border)}.kf-cursor-pager__nav{display:flex;align-items:center;gap:var(--kf-space-sm)}.kf-cursor-pager__button{display:inline-flex;align-items:center;justify-content:center;gap:var(--kf-space-xs);min-height:32px;padding:0 var(--kf-space-sm);font:inherit;font-size:var(--kf-font-size-body-sm);font-weight:var(--kf-font-weight-medium);color:var(--kf-color-text);background:transparent;border:1px solid var(--kf-color-border-strong);border-radius:var(--kf-radius-sm);cursor:pointer}.kf-cursor-pager__button:hover:not([aria-disabled=true]){background:var(--kf-color-white);border-color:var(--kf-color-text-muted)}.kf-cursor-pager__button:focus-visible{outline:2px solid transparent;box-shadow:var(--kf-shadow-focus)}.kf-cursor-pager__button[aria-disabled=true]{opacity:.5;cursor:not-allowed}@media(max-width:599.98px){.kf-cursor-pager__controls{width:100%}.kf-cursor-pager__divider{display:none}.kf-cursor-pager__nav{width:100%}.kf-cursor-pager__button{flex:1 1 0;min-height:36px}}\n"], dependencies: [{ kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }, { kind: "component", type: Select, selector: "kf-select", inputs: ["label", "hideLabel", "prefix", "options", "value", "placeholder", "disabled", "invalid", "errorMessage", "variant", "width", "size", "searchable", "searchThreshold", "ariaLabel", "icon", "panelTitle", "panelWidth"], outputs: ["valueChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: CursorPager, isStandalone: true, selector: "kf-cursor-pager", inputs: { summary: { classPropertyName: "summary", publicName: "summary", isSignal: true, isRequired: false, transformFunction: null }, hasPrevious: { classPropertyName: "hasPrevious", publicName: "hasPrevious", isSignal: true, isRequired: false, transformFunction: null }, hasNext: { classPropertyName: "hasNext", publicName: "hasNext", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { previous: "previous", next: "next", pageSizeChange: "pageSizeChange" }, ngImport: i0, template: "<div class=\"kf-cursor-pager\">\n  <div class=\"kf-cursor-pager__summary\" role=\"status\" aria-live=\"polite\">{{ summary() }}</div>\n\n  <div class=\"kf-cursor-pager__controls\">\n    @if (sizeOptions().length > 0) {\n      <div class=\"kf-cursor-pager__size\">\n        <span class=\"kf-cursor-pager__size-label\" aria-hidden=\"true\">Filas</span>\n        <kf-select\n          variant=\"compact\"\n          label=\"Filas por p\u00E1gina\"\n          hideLabel\n          [options]=\"sizeOptions()\"\n          [value]=\"sizeValue()\"\n          (valueChange)=\"onPageSize($event)\"\n        />\n      </div>\n      <span class=\"kf-cursor-pager__divider\" aria-hidden=\"true\"></span>\n    }\n\n    <nav class=\"kf-cursor-pager__nav\" [attr.aria-label]=\"ariaLabel()\">\n      <button\n        type=\"button\"\n        class=\"kf-cursor-pager__button\"\n        [attr.aria-disabled]=\"!hasPrevious()\"\n        (click)=\"onPrevious()\"\n      >\n        <kf-icon name=\"chevron-left\" size=\"sm\" />\n        Anterior\n      </button>\n      <button\n        type=\"button\"\n        class=\"kf-cursor-pager__button kf-cursor-pager__button--next\"\n        [attr.aria-disabled]=\"!hasNext()\"\n        (click)=\"onNext()\"\n      >\n        Siguiente\n        <kf-icon name=\"chevron-right\" size=\"sm\" />\n      </button>\n    </nav>\n  </div>\n</div>\n", styles: [":host{display:block;font-family:var(--kf-font-body)}.kf-cursor-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--kf-space-md)}.kf-cursor-pager__summary{font-size:var(--kf-font-size-body-sm);font-weight:var(--kf-font-weight-medium);color:var(--kf-color-text)}.kf-cursor-pager__summary:empty{display:none}.kf-cursor-pager__controls{display:flex;flex-wrap:wrap;align-items:center;gap:var(--kf-space-sm) var(--kf-space-md)}.kf-cursor-pager__size{display:flex;align-items:center;gap:var(--kf-space-sm)}.kf-cursor-pager__size-label{font-size:var(--kf-font-size-body-sm);color:var(--kf-color-text);white-space:nowrap}.kf-cursor-pager__divider{width:1px;height:1.25rem;background:var(--kf-color-border)}.kf-cursor-pager__nav{display:flex;align-items:center;gap:var(--kf-space-sm)}.kf-cursor-pager__button{display:inline-flex;align-items:center;justify-content:center;gap:var(--kf-space-xs);min-height:32px;padding:0 var(--kf-space-sm);font:inherit;font-size:var(--kf-font-size-body-sm);font-weight:var(--kf-font-weight-medium);color:var(--kf-color-text);background:transparent;border:1px solid var(--kf-color-border-strong);border-radius:var(--kf-radius-sm);cursor:pointer}.kf-cursor-pager__button:hover:not([aria-disabled=true]){background:var(--kf-color-white);border-color:var(--kf-color-text-muted)}.kf-cursor-pager__button:focus-visible{outline:2px solid transparent;box-shadow:var(--kf-shadow-focus)}.kf-cursor-pager__button[aria-disabled=true]{opacity:.5;cursor:not-allowed}@media(max-width:599.98px){.kf-cursor-pager__controls{width:100%}.kf-cursor-pager__divider{display:none}.kf-cursor-pager__nav{width:100%}.kf-cursor-pager__button{flex:1 1 0;min-height:36px}}\n"], dependencies: [{ kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }, { kind: "component", type: Select, selector: "kf-select", inputs: ["label", "hideLabel", "prefix", "options", "value", "placeholder", "disabled", "invalid", "required", "errorMessage", "variant", "width", "size", "searchable", "searchThreshold", "ariaLabel", "icon", "panelTitle", "panelWidth"], outputs: ["valueChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CursorPager, decorators: [{
             type: Component,
@@ -5766,15 +5787,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                     ], template: "@if (label()) {\n  <kf-field-label [for]=\"inputId\" [required]=\"required()\">{{ label() }}</kf-field-label>\n}\n<div\n  class=\"kf-file-input__area\"\n  [class.kf-file-input__area--dropzone]=\"dropzone()\"\n  [class.kf-file-input__area--dragging]=\"dragging()\"\n  [class.kf-file-input__area--invalid]=\"isInvalid()\"\n  [class.kf-file-input__area--disabled]=\"isDisabled()\"\n  (dragover)=\"dropzone() ? onDragOver($event) : null\"\n  (dragleave)=\"dropzone() ? onDragLeave() : null\"\n  (drop)=\"dropzone() ? onDrop($event) : null\"\n>\n  <input\n    #nativeInput\n    type=\"file\"\n    class=\"kf-file-input__native\"\n    [id]=\"inputId\"\n    [attr.accept]=\"accept() || null\"\n    [multiple]=\"multiple()\"\n    [disabled]=\"isDisabled()\"\n    [required]=\"required() && !files().length\"\n    [attr.aria-describedby]=\"describedBy()\"\n    [attr.aria-invalid]=\"isInvalid() ? true : null\"\n    [attr.aria-label]=\"label() ? null : ariaLabel() || null\"\n    (change)=\"onPick($event)\"\n  />\n  <label class=\"kf-file-input__button\" [for]=\"inputId\" aria-hidden=\"true\">\n    <kf-icon name=\"upload-cloud\" size=\"sm\" />\n    {{ triggerText() }}\n  </label>\n  @if (dropzone()) {\n    <span class=\"kf-file-input__drop-text\" aria-hidden=\"true\">{{ dropzoneText() }}</span>\n  }\n</div>\n@if (files().length) {\n  <ul class=\"kf-file-input__files\" [id]=\"filesId\">\n    @for (file of files(); track $index) {\n      <li class=\"kf-file-input__file\">\n        <kf-icon class=\"kf-file-input__file-icon\" name=\"file\" size=\"sm\" />\n        <span class=\"kf-file-input__file-name\">{{ file.name }}</span>\n        <span class=\"kf-file-input__file-size\">{{ formatSize(file) }}</span>\n        <button\n          type=\"button\"\n          class=\"kf-file-input__remove\"\n          [attr.aria-label]=\"removeLabel() + ' ' + file.name\"\n          [disabled]=\"isDisabled()\"\n          (click)=\"remove($index)\"\n        >\n          <kf-icon name=\"x\" size=\"sm\" />\n        </button>\n      </li>\n    }\n  </ul>\n}\n@if (message(); as text) {\n  <span class=\"kf-file-input__error kf-field-error\" [id]=\"errorId\" role=\"alert\">{{ text }}</span>\n}\n@if (effectiveHint() && !error()) {\n  <span class=\"kf-file-input__hint kf-field-hint\" [id]=\"hintId\">{{ effectiveHint() }}</span>\n}\n", styles: [".kf-field-hint{font-size:.75rem;color:var(--kf-color-text-muted)}.kf-field-error{display:flex;align-items:center;gap:var(--kf-space-xs);font-size:.75rem;font-weight:600;color:var(--kf-color-error-strong)}:host{display:flex;flex-direction:column;gap:var(--kf-space-xs);font-family:var(--kf-font-body)}.kf-file-input__area{position:relative;display:flex;align-items:center;gap:var(--kf-space-sm)}.kf-file-input__native{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}.kf-file-input__native:disabled{cursor:not-allowed}.kf-file-input__button{display:inline-flex;align-items:center;justify-content:center;gap:var(--kf-space-xs);min-height:2.25rem;padding:var(--kf-space-sm) var(--kf-space-md);box-sizing:border-box;border:1px solid var(--kf-color-primary);border-radius:var(--kf-radius-sm);background:var(--kf-color-white);color:var(--kf-color-primary-active);font:inherit;font-weight:600;pointer-events:none;transition:background .14s,box-shadow .14s}.kf-file-input__area:hover .kf-file-input__native:not(:disabled)+.kf-file-input__button{background:var(--kf-color-primary-soft)}.kf-file-input__native:focus-visible+.kf-file-input__button{box-shadow:var(--kf-shadow-focus);outline:2px solid transparent}.kf-file-input__area--invalid .kf-file-input__button{border-color:var(--kf-color-error);color:var(--kf-color-error-strong)}.kf-file-input__area--invalid .kf-file-input__native:focus-visible+.kf-file-input__button{box-shadow:var(--kf-shadow-focus-error)}.kf-file-input__area--disabled{opacity:.5}.kf-file-input__area--dropzone{flex-direction:column;justify-content:center;gap:var(--kf-space-xs);padding:var(--kf-space-lg) var(--kf-space-md);border:1px dashed var(--kf-color-border-strong);border-radius:var(--kf-radius-sm);background:var(--kf-color-surface);transition:background .14s,border-color .14s}.kf-file-input__area--dragging{border-color:var(--kf-color-primary);background:var(--kf-color-primary-soft)}.kf-file-input__area--dropzone.kf-file-input__area--invalid{border-color:var(--kf-color-error)}.kf-file-input__drop-text{font-size:.875rem;color:var(--kf-color-text);pointer-events:none}.kf-file-input__files{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--kf-space-xs)}.kf-file-input__file{display:flex;align-items:center;gap:var(--kf-space-sm);padding:var(--kf-space-xs) var(--kf-space-sm);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);background:var(--kf-color-white);min-width:0}.kf-file-input__file-icon{flex:none;color:var(--kf-color-text-muted)}.kf-file-input__file-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--kf-color-ink);font-weight:600}.kf-file-input__file-size{flex:none;font-size:.75rem;color:var(--kf-color-text)}.kf-file-input__remove{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:2rem;min-height:2rem;padding:0;border:none;border-radius:var(--kf-radius-xs);background:transparent;color:var(--kf-color-text);cursor:pointer}.kf-file-input__remove:hover:not(:disabled){background:var(--kf-color-surface);color:var(--kf-color-ink)}.kf-file-input__remove:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-file-input__hint{color:var(--kf-color-text)}@media(pointer:coarse),(max-width:760px){.kf-file-input__button{min-height:44px}.kf-file-input__remove{min-width:44px;min-height:44px}}\n"] }]
         }], propDecorators: { nativeInput: [{ type: i0.ViewChild, args: ['nativeInput', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], dropzone: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropzone", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], buttonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonLabel", required: false }] }], changeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "changeLabel", required: false }] }], removeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeLabel", required: false }] }], dropzoneText: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropzoneText", required: false }] }], rejectedTypeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "rejectedTypeText", required: false }] }], rejectedSizeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "rejectedSizeText", required: false }] }], fileChange: [{ type: i0.Output, args: ["fileChange"] }], fileRejected: [{ type: i0.Output, args: ["fileRejected"] }] } });
 
-/** Vacío o `undefined` no emiten el atributo; `0` sí es un límite válido. */
-function normalizeBound(value) {
-    return value === undefined || value === '' ? null : value;
-}
 /** `maxlength` como entero positivo; cualquier otra cosa (vacío, NaN, 0, negativo) no se emite. */
 function toMaxLength(value) {
     const parsed = typeof value === 'string' ? Number.parseInt(value, 10) : value;
     return typeof parsed === 'number' && Number.isInteger(parsed) && parsed > 0 ? parsed : null;
 }
+
+/** Vacío o `undefined` no emiten el atributo; `0` sí es un límite válido. */
+function normalizeBound(value) {
+    return value === undefined || value === '' ? null : value;
+}
 /**
  * Input de formulario apilado: label arriba (en mayúsculas vía CSS), campo con
  * fondo gris que pasa a blanco con anillo de foco azul al enfocar.
@@ -6304,7 +6326,7 @@ class Filter {
         this.fieldChange.emit({ key, value });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Filter, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Filter, isStandalone: true, selector: "kf-filter", inputs: { fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, mobileTitle: { classPropertyName: "mobileTitle", publicName: "mobileTitle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fieldChange: "fieldChange" }, ngImport: i0, template: "<ng-template #fieldsTpl let-stacked=\"stacked\">\n  @for (field of fields(); track field.key) {\n    @switch (field.type) {\n      @case ('select') {\n        <kf-select\n          [label]=\"field.label ?? ''\"\n          [options]=\"optionsFor(field.key)\"\n          [value]=\"singleValueFor(field.key)\"\n          [placeholder]=\"field.placeholder ?? ''\"\n          [style.width]=\"stacked ? '100%' : fieldWidth(field)\"\n          (valueChange)=\"onFieldChange(field.key, $event)\"\n        />\n      }\n      @case ('multi-select') {\n        <kf-multi-select\n          [label]=\"field.label ?? ''\"\n          [options]=\"multiOptionsFor(field.key)\"\n          [values]=\"multiValueFor(field.key)\"\n          [placeholder]=\"field.placeholder ?? ''\"\n          [style.width]=\"stacked ? '100%' : fieldWidth(field)\"\n          (valuesChange)=\"onFieldChange(field.key, $event)\"\n        />\n      }\n      @case ('search') {\n        <kf-input\n          [label]=\"field.label ?? ''\"\n          [icon]=\"field.icon ?? 'search'\"\n          [placeholder]=\"field.placeholder ?? ''\"\n          [style.width]=\"stacked ? '100%' : fieldWidth(field)\"\n          [ngModel]=\"singleValueFor(field.key)\"\n          (ngModelChange)=\"onFieldChange(field.key, $event)\"\n        />\n      }\n    }\n    @if (!stacked && field.showDivider) {\n      <kf-divider orientation=\"vertical\" />\n    }\n  }\n</ng-template>\n\n<div class=\"kf-filter kf-filter--row\">\n  <ng-container [ngTemplateOutlet]=\"fieldsTpl\" [ngTemplateOutletContext]=\"{ stacked: false }\" />\n</div>\n\n<kf-collapsible class=\"kf-filter__collapsible\" [title]=\"mobileTitle()\">\n  <div class=\"kf-filter kf-filter--stack\">\n    <ng-container [ngTemplateOutlet]=\"fieldsTpl\" [ngTemplateOutletContext]=\"{ stacked: true }\" />\n  </div>\n</kf-collapsible>\n", styles: ["@charset \"UTF-8\";:host{display:block}.kf-filter--row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--kf-space-md)}.kf-filter--stack{display:flex;flex-direction:column;gap:var(--kf-space-md)}.kf-filter__collapsible{display:none}@media(max-width:768px){.kf-filter--row{display:none}.kf-filter__collapsible{display:block}}\n"], dependencies: [{ kind: "component", type: Collapsible, selector: "kf-collapsible", inputs: ["title", "expanded"], outputs: ["expandedChange"] }, { kind: "component", type: Divider, selector: "kf-divider", inputs: ["orientation"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Input, selector: "kf-input", inputs: ["label", "hideLabel", "required", "icon", "suffix", "hint", "invalid", "errorMessage", "disabled", "readonly", "type", "placeholder", "autocomplete", "name", "inputmode", "min", "max", "step", "maxlength", "toggleable", "ariaLabel", "clearable", "clearLabel"], outputs: ["cleared"] }, { kind: "component", type: MultiSelect, selector: "kf-multi-select", inputs: ["label", "options", "values", "placeholder", "disabled", "width", "searchable", "searchThreshold"], outputs: ["valuesChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Select, selector: "kf-select", inputs: ["label", "hideLabel", "prefix", "options", "value", "placeholder", "disabled", "invalid", "errorMessage", "variant", "width", "size", "searchable", "searchThreshold", "ariaLabel", "icon", "panelTitle", "panelWidth"], outputs: ["valueChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Filter, isStandalone: true, selector: "kf-filter", inputs: { fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, mobileTitle: { classPropertyName: "mobileTitle", publicName: "mobileTitle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fieldChange: "fieldChange" }, ngImport: i0, template: "<ng-template #fieldsTpl let-stacked=\"stacked\">\n  @for (field of fields(); track field.key) {\n    @switch (field.type) {\n      @case ('select') {\n        <kf-select\n          [label]=\"field.label ?? ''\"\n          [options]=\"optionsFor(field.key)\"\n          [value]=\"singleValueFor(field.key)\"\n          [placeholder]=\"field.placeholder ?? ''\"\n          [style.width]=\"stacked ? '100%' : fieldWidth(field)\"\n          (valueChange)=\"onFieldChange(field.key, $event)\"\n        />\n      }\n      @case ('multi-select') {\n        <kf-multi-select\n          [label]=\"field.label ?? ''\"\n          [options]=\"multiOptionsFor(field.key)\"\n          [values]=\"multiValueFor(field.key)\"\n          [placeholder]=\"field.placeholder ?? ''\"\n          [style.width]=\"stacked ? '100%' : fieldWidth(field)\"\n          (valuesChange)=\"onFieldChange(field.key, $event)\"\n        />\n      }\n      @case ('search') {\n        <kf-input\n          [label]=\"field.label ?? ''\"\n          [icon]=\"field.icon ?? 'search'\"\n          [placeholder]=\"field.placeholder ?? ''\"\n          [style.width]=\"stacked ? '100%' : fieldWidth(field)\"\n          [ngModel]=\"singleValueFor(field.key)\"\n          (ngModelChange)=\"onFieldChange(field.key, $event)\"\n        />\n      }\n    }\n    @if (!stacked && field.showDivider) {\n      <kf-divider orientation=\"vertical\" />\n    }\n  }\n</ng-template>\n\n<div class=\"kf-filter kf-filter--row\">\n  <ng-container [ngTemplateOutlet]=\"fieldsTpl\" [ngTemplateOutletContext]=\"{ stacked: false }\" />\n</div>\n\n<kf-collapsible class=\"kf-filter__collapsible\" [title]=\"mobileTitle()\">\n  <div class=\"kf-filter kf-filter--stack\">\n    <ng-container [ngTemplateOutlet]=\"fieldsTpl\" [ngTemplateOutletContext]=\"{ stacked: true }\" />\n  </div>\n</kf-collapsible>\n", styles: ["@charset \"UTF-8\";:host{display:block}.kf-filter--row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--kf-space-md)}.kf-filter--stack{display:flex;flex-direction:column;gap:var(--kf-space-md)}.kf-filter__collapsible{display:none}@media(max-width:768px){.kf-filter--row{display:none}.kf-filter__collapsible{display:block}}\n"], dependencies: [{ kind: "component", type: Collapsible, selector: "kf-collapsible", inputs: ["title", "expanded"], outputs: ["expandedChange"] }, { kind: "component", type: Divider, selector: "kf-divider", inputs: ["orientation"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Input, selector: "kf-input", inputs: ["label", "hideLabel", "required", "icon", "suffix", "hint", "invalid", "errorMessage", "disabled", "readonly", "type", "placeholder", "autocomplete", "name", "inputmode", "min", "max", "step", "maxlength", "toggleable", "ariaLabel", "clearable", "clearLabel"], outputs: ["cleared"] }, { kind: "component", type: MultiSelect, selector: "kf-multi-select", inputs: ["label", "options", "values", "placeholder", "disabled", "width", "searchable", "searchThreshold"], outputs: ["valuesChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Select, selector: "kf-select", inputs: ["label", "hideLabel", "prefix", "options", "value", "placeholder", "disabled", "invalid", "required", "errorMessage", "variant", "width", "size", "searchable", "searchThreshold", "ariaLabel", "icon", "panelTitle", "panelWidth"], outputs: ["valueChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Filter, decorators: [{
             type: Component,
@@ -7456,11 +7478,11 @@ class Modal {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Modal, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Modal, isStandalone: true, selector: "kf-modal", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, dividers: { classPropertyName: "dividers", publicName: "dividers", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, fullscreenOnMobile: { classPropertyName: "fullscreenOnMobile", publicName: "fullscreenOnMobile", isSignal: true, isRequired: false, transformFunction: null }, initialFocus: { classPropertyName: "initialFocus", publicName: "initialFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { listeners: { "click": "onHostClick($event)" } }, viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true, isSignal: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "<dialog\n  #dialog\n  class=\"kf-modal\"\n  [class.kf-modal--bounded]=\"!!maxHeight()\"\n  [class.kf-modal--fullscreen-mobile]=\"fullscreenOnMobile()\"\n  [class.kf-modal--dividers]=\"dividers()\"\n  [attr.data-size]=\"size()\"\n  [style.--kf-modal-width]=\"width()\"\n  [style.--kf-modal-max-height]=\"maxHeight()\"\n  [attr.aria-labelledby]=\"title() ? titleId : null\"\n  (cancel)=\"onCancel($event)\"\n  (close)=\"open.set(false)\"\n>\n  @if (open()) {\n    <div #panel class=\"kf-modal__panel\">\n      <div class=\"kf-modal__head\">\n        <div class=\"kf-modal__heading\">\n          @if (title()) {\n            <h2 class=\"kf-modal__title\" [id]=\"titleId\">{{ title() }}</h2>\n          }\n          <ng-content select=\"[kf-modal-meta]\" />\n        </div>\n        @if (dismissible()) {\n          <button\n            type=\"button\"\n            class=\"kf-modal__close\"\n            aria-label=\"Cerrar di\u00E1logo\"\n            (click)=\"open.set(false)\"\n          >\n            <kf-icon name=\"x\" size=\"sm\" />\n          </button>\n        }\n      </div>\n      <div class=\"kf-modal__toolbar\"><ng-content select=\"[kf-modal-toolbar]\" /></div>\n      <div class=\"kf-modal__body\"><ng-content /></div>\n      <div class=\"kf-modal__footer\"><ng-content select=\"[footer]\" /></div>\n    </div>\n  }\n</dialog>\n", styles: [".kf-modal{width:min(var(--kf-modal-width, 480px),calc(100vw - 2 * var(--kf-space-md)));max-height:calc(100vh - 2 * var(--kf-space-xl));padding:0;border:none;background:transparent;overflow:visible;font-family:var(--kf-font-body)}.kf-modal::backdrop{background:#171d2573}.kf-modal__panel{display:flex;flex-direction:column;gap:var(--kf-space-md);padding:var(--kf-space-lg);background:var(--kf-color-white);border-radius:var(--kf-radius-md);box-shadow:var(--kf-shadow-lg)}.kf-modal__head{display:flex;align-items:flex-start;gap:var(--kf-space-sm)}.kf-modal__heading{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--kf-space-sm);row-gap:var(--kf-space-xs)}.kf-modal__title{margin:0;font-family:var(--kf-font-title);font-size:1.375rem;font-weight:700;color:var(--kf-color-ink)}.kf-modal__close{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:32px;margin:-4px -6px 0 0;padding:2px;border:none;background:transparent;color:var(--kf-color-text-muted);border-radius:var(--kf-radius-xs);cursor:pointer}.kf-modal__close:hover{color:var(--kf-color-ink);background:var(--kf-color-surface)}.kf-modal__close:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-modal__toolbar:empty{display:none}.kf-modal__body{color:var(--kf-color-text);overflow-y:auto}.kf-modal__footer:empty{display:none}.kf-modal__footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--kf-space-sm)}.kf-modal__footer-start{margin-right:auto}.kf-modal[data-size=sm]{--kf-modal-width: 480px}.kf-modal[data-size=md]{--kf-modal-width: 640px}.kf-modal[data-size=lg]{--kf-modal-width: 880px}.kf-modal[data-size=xl]{--kf-modal-width: 1120px}.kf-modal--dividers .kf-modal__head{padding-bottom:var(--kf-space-md);border-bottom:1px solid var(--kf-color-border)}.kf-modal--dividers .kf-modal__footer{padding-top:var(--kf-space-md);border-top:1px solid var(--kf-color-border)}.kf-modal--bounded{max-height:min(var(--kf-modal-max-height),calc(100dvh - 2 * var(--kf-space-md)))}.kf-modal--bounded .kf-modal__panel{box-sizing:border-box;max-height:inherit}.kf-modal--bounded .kf-modal__body{flex:1 1 auto;min-height:0;overscroll-behavior:contain}@media(max-width:640px){.kf-modal--fullscreen-mobile{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0}.kf-modal--fullscreen-mobile .kf-modal__panel{box-sizing:border-box;height:100%;max-height:100%;padding:var(--kf-space-md);gap:var(--kf-space-sm);border-radius:0;box-shadow:none}.kf-modal--fullscreen-mobile .kf-modal__body{flex:1 1 auto;min-height:0}.kf-modal--fullscreen-mobile .kf-modal__title{font-size:var(--kf-font-size-title-sm)}}\n"], dependencies: [{ kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Modal, isStandalone: true, selector: "kf-modal", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, dividers: { classPropertyName: "dividers", publicName: "dividers", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, fullscreenOnMobile: { classPropertyName: "fullscreenOnMobile", publicName: "fullscreenOnMobile", isSignal: true, isRequired: false, transformFunction: null }, initialFocus: { classPropertyName: "initialFocus", publicName: "initialFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { listeners: { "click": "onHostClick($event)" } }, viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true, isSignal: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "<dialog\n  #dialog\n  class=\"kf-modal\"\n  [class.kf-modal--bounded]=\"!!maxHeight()\"\n  [class.kf-modal--fullscreen-mobile]=\"fullscreenOnMobile()\"\n  [class.kf-modal--dividers]=\"dividers()\"\n  [attr.data-size]=\"size()\"\n  [style.--kf-modal-width]=\"width()\"\n  [style.--kf-modal-max-height]=\"maxHeight()\"\n  [attr.aria-labelledby]=\"title() ? titleId : null\"\n  (cancel)=\"onCancel($event)\"\n  (close)=\"open.set(false)\"\n>\n  @if (open()) {\n    <div #panel class=\"kf-modal__panel\">\n      <div class=\"kf-modal__head\">\n        <div class=\"kf-modal__heading\">\n          @if (title()) {\n            <h2 class=\"kf-modal__title\" [id]=\"titleId\">{{ title() }}</h2>\n          }\n          <ng-content select=\"[kf-modal-meta]\" />\n        </div>\n        @if (dismissible()) {\n          <button\n            type=\"button\"\n            class=\"kf-modal__close\"\n            aria-label=\"Cerrar di\u00E1logo\"\n            (click)=\"open.set(false)\"\n          >\n            <kf-icon name=\"x\" size=\"sm\" />\n          </button>\n        }\n      </div>\n      <div class=\"kf-modal__toolbar\"><ng-content select=\"[kf-modal-toolbar]\" /></div>\n      <div class=\"kf-modal__body\"><ng-content /></div>\n      <div class=\"kf-modal__footer\"><ng-content select=\"[footer]\" /></div>\n    </div>\n  }\n</dialog>\n", styles: [".kf-modal{width:min(var(--kf-modal-width, 480px),calc(100vw - 2 * var(--kf-space-md)));max-height:calc(100vh - 2 * var(--kf-space-xl));padding:0;border:none;background:transparent;overflow:visible;font-family:var(--kf-font-body)}.kf-modal::backdrop{background:#171d2573}.kf-modal__panel{display:flex;flex-direction:column;gap:var(--kf-space-md);padding:var(--kf-space-lg);background:var(--kf-color-white);border-radius:var(--kf-radius-md);box-shadow:var(--kf-shadow-lg)}.kf-modal__head{display:flex;align-items:flex-start;gap:var(--kf-space-sm)}.kf-modal__heading{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--kf-space-sm);row-gap:var(--kf-space-xs)}.kf-modal__title{margin:0;font-family:var(--kf-font-title);font-size:1.375rem;font-weight:700;color:var(--kf-color-ink)}.kf-modal__close{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:32px;margin:-4px -6px 0 0;padding:2px;border:none;background:transparent;color:var(--kf-color-text-muted);border-radius:var(--kf-radius-xs);cursor:pointer}.kf-modal__close:after{content:\"\";position:absolute;top:50%;left:50%;width:44px;height:44px;transform:translate(-50%,-50%)}.kf-modal__close:hover{color:var(--kf-color-ink);background:var(--kf-color-surface)}.kf-modal__close:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-modal__toolbar:empty{display:none}.kf-modal__body{margin:calc(-1 * var(--kf-space-xs));padding:var(--kf-space-xs);color:var(--kf-color-text);overflow-y:auto}.kf-modal__footer:empty{display:none}.kf-modal__footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--kf-space-sm)}.kf-modal__footer-start{margin-right:auto}.kf-modal[data-size=sm]{--kf-modal-width: 480px}.kf-modal[data-size=md]{--kf-modal-width: 640px}.kf-modal[data-size=lg]{--kf-modal-width: 880px}.kf-modal[data-size=xl]{--kf-modal-width: 1120px}.kf-modal--dividers .kf-modal__head{padding-bottom:var(--kf-space-md);border-bottom:1px solid var(--kf-color-border)}.kf-modal--dividers .kf-modal__footer{padding-top:var(--kf-space-md);border-top:1px solid var(--kf-color-border)}.kf-modal--bounded{max-height:min(var(--kf-modal-max-height),calc(100dvh - 2 * var(--kf-space-md)))}.kf-modal--bounded .kf-modal__panel{box-sizing:border-box;max-height:inherit}.kf-modal--bounded .kf-modal__body{flex:1 1 auto;min-height:0;overscroll-behavior:contain}@media(max-width:640px){.kf-modal--fullscreen-mobile{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0}.kf-modal--fullscreen-mobile .kf-modal__panel{box-sizing:border-box;height:100%;max-height:100%;padding:var(--kf-space-md);gap:var(--kf-space-sm);border-radius:0;box-shadow:none}.kf-modal--fullscreen-mobile .kf-modal__body{flex:1 1 auto;min-height:0}.kf-modal--fullscreen-mobile .kf-modal__title{font-size:var(--kf-font-size-title-sm)}}\n"], dependencies: [{ kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Modal, decorators: [{
             type: Component,
-            args: [{ selector: 'kf-modal', imports: [Icon], template: "<dialog\n  #dialog\n  class=\"kf-modal\"\n  [class.kf-modal--bounded]=\"!!maxHeight()\"\n  [class.kf-modal--fullscreen-mobile]=\"fullscreenOnMobile()\"\n  [class.kf-modal--dividers]=\"dividers()\"\n  [attr.data-size]=\"size()\"\n  [style.--kf-modal-width]=\"width()\"\n  [style.--kf-modal-max-height]=\"maxHeight()\"\n  [attr.aria-labelledby]=\"title() ? titleId : null\"\n  (cancel)=\"onCancel($event)\"\n  (close)=\"open.set(false)\"\n>\n  @if (open()) {\n    <div #panel class=\"kf-modal__panel\">\n      <div class=\"kf-modal__head\">\n        <div class=\"kf-modal__heading\">\n          @if (title()) {\n            <h2 class=\"kf-modal__title\" [id]=\"titleId\">{{ title() }}</h2>\n          }\n          <ng-content select=\"[kf-modal-meta]\" />\n        </div>\n        @if (dismissible()) {\n          <button\n            type=\"button\"\n            class=\"kf-modal__close\"\n            aria-label=\"Cerrar di\u00E1logo\"\n            (click)=\"open.set(false)\"\n          >\n            <kf-icon name=\"x\" size=\"sm\" />\n          </button>\n        }\n      </div>\n      <div class=\"kf-modal__toolbar\"><ng-content select=\"[kf-modal-toolbar]\" /></div>\n      <div class=\"kf-modal__body\"><ng-content /></div>\n      <div class=\"kf-modal__footer\"><ng-content select=\"[footer]\" /></div>\n    </div>\n  }\n</dialog>\n", styles: [".kf-modal{width:min(var(--kf-modal-width, 480px),calc(100vw - 2 * var(--kf-space-md)));max-height:calc(100vh - 2 * var(--kf-space-xl));padding:0;border:none;background:transparent;overflow:visible;font-family:var(--kf-font-body)}.kf-modal::backdrop{background:#171d2573}.kf-modal__panel{display:flex;flex-direction:column;gap:var(--kf-space-md);padding:var(--kf-space-lg);background:var(--kf-color-white);border-radius:var(--kf-radius-md);box-shadow:var(--kf-shadow-lg)}.kf-modal__head{display:flex;align-items:flex-start;gap:var(--kf-space-sm)}.kf-modal__heading{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--kf-space-sm);row-gap:var(--kf-space-xs)}.kf-modal__title{margin:0;font-family:var(--kf-font-title);font-size:1.375rem;font-weight:700;color:var(--kf-color-ink)}.kf-modal__close{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:32px;margin:-4px -6px 0 0;padding:2px;border:none;background:transparent;color:var(--kf-color-text-muted);border-radius:var(--kf-radius-xs);cursor:pointer}.kf-modal__close:hover{color:var(--kf-color-ink);background:var(--kf-color-surface)}.kf-modal__close:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-modal__toolbar:empty{display:none}.kf-modal__body{color:var(--kf-color-text);overflow-y:auto}.kf-modal__footer:empty{display:none}.kf-modal__footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--kf-space-sm)}.kf-modal__footer-start{margin-right:auto}.kf-modal[data-size=sm]{--kf-modal-width: 480px}.kf-modal[data-size=md]{--kf-modal-width: 640px}.kf-modal[data-size=lg]{--kf-modal-width: 880px}.kf-modal[data-size=xl]{--kf-modal-width: 1120px}.kf-modal--dividers .kf-modal__head{padding-bottom:var(--kf-space-md);border-bottom:1px solid var(--kf-color-border)}.kf-modal--dividers .kf-modal__footer{padding-top:var(--kf-space-md);border-top:1px solid var(--kf-color-border)}.kf-modal--bounded{max-height:min(var(--kf-modal-max-height),calc(100dvh - 2 * var(--kf-space-md)))}.kf-modal--bounded .kf-modal__panel{box-sizing:border-box;max-height:inherit}.kf-modal--bounded .kf-modal__body{flex:1 1 auto;min-height:0;overscroll-behavior:contain}@media(max-width:640px){.kf-modal--fullscreen-mobile{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0}.kf-modal--fullscreen-mobile .kf-modal__panel{box-sizing:border-box;height:100%;max-height:100%;padding:var(--kf-space-md);gap:var(--kf-space-sm);border-radius:0;box-shadow:none}.kf-modal--fullscreen-mobile .kf-modal__body{flex:1 1 auto;min-height:0}.kf-modal--fullscreen-mobile .kf-modal__title{font-size:var(--kf-font-size-title-sm)}}\n"] }]
+            args: [{ selector: 'kf-modal', imports: [Icon], template: "<dialog\n  #dialog\n  class=\"kf-modal\"\n  [class.kf-modal--bounded]=\"!!maxHeight()\"\n  [class.kf-modal--fullscreen-mobile]=\"fullscreenOnMobile()\"\n  [class.kf-modal--dividers]=\"dividers()\"\n  [attr.data-size]=\"size()\"\n  [style.--kf-modal-width]=\"width()\"\n  [style.--kf-modal-max-height]=\"maxHeight()\"\n  [attr.aria-labelledby]=\"title() ? titleId : null\"\n  (cancel)=\"onCancel($event)\"\n  (close)=\"open.set(false)\"\n>\n  @if (open()) {\n    <div #panel class=\"kf-modal__panel\">\n      <div class=\"kf-modal__head\">\n        <div class=\"kf-modal__heading\">\n          @if (title()) {\n            <h2 class=\"kf-modal__title\" [id]=\"titleId\">{{ title() }}</h2>\n          }\n          <ng-content select=\"[kf-modal-meta]\" />\n        </div>\n        @if (dismissible()) {\n          <button\n            type=\"button\"\n            class=\"kf-modal__close\"\n            aria-label=\"Cerrar di\u00E1logo\"\n            (click)=\"open.set(false)\"\n          >\n            <kf-icon name=\"x\" size=\"sm\" />\n          </button>\n        }\n      </div>\n      <div class=\"kf-modal__toolbar\"><ng-content select=\"[kf-modal-toolbar]\" /></div>\n      <div class=\"kf-modal__body\"><ng-content /></div>\n      <div class=\"kf-modal__footer\"><ng-content select=\"[footer]\" /></div>\n    </div>\n  }\n</dialog>\n", styles: [".kf-modal{width:min(var(--kf-modal-width, 480px),calc(100vw - 2 * var(--kf-space-md)));max-height:calc(100vh - 2 * var(--kf-space-xl));padding:0;border:none;background:transparent;overflow:visible;font-family:var(--kf-font-body)}.kf-modal::backdrop{background:#171d2573}.kf-modal__panel{display:flex;flex-direction:column;gap:var(--kf-space-md);padding:var(--kf-space-lg);background:var(--kf-color-white);border-radius:var(--kf-radius-md);box-shadow:var(--kf-shadow-lg)}.kf-modal__head{display:flex;align-items:flex-start;gap:var(--kf-space-sm)}.kf-modal__heading{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--kf-space-sm);row-gap:var(--kf-space-xs)}.kf-modal__title{margin:0;font-family:var(--kf-font-title);font-size:1.375rem;font-weight:700;color:var(--kf-color-ink)}.kf-modal__close{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:32px;margin:-4px -6px 0 0;padding:2px;border:none;background:transparent;color:var(--kf-color-text-muted);border-radius:var(--kf-radius-xs);cursor:pointer}.kf-modal__close:after{content:\"\";position:absolute;top:50%;left:50%;width:44px;height:44px;transform:translate(-50%,-50%)}.kf-modal__close:hover{color:var(--kf-color-ink);background:var(--kf-color-surface)}.kf-modal__close:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-modal__toolbar:empty{display:none}.kf-modal__body{margin:calc(-1 * var(--kf-space-xs));padding:var(--kf-space-xs);color:var(--kf-color-text);overflow-y:auto}.kf-modal__footer:empty{display:none}.kf-modal__footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--kf-space-sm)}.kf-modal__footer-start{margin-right:auto}.kf-modal[data-size=sm]{--kf-modal-width: 480px}.kf-modal[data-size=md]{--kf-modal-width: 640px}.kf-modal[data-size=lg]{--kf-modal-width: 880px}.kf-modal[data-size=xl]{--kf-modal-width: 1120px}.kf-modal--dividers .kf-modal__head{padding-bottom:var(--kf-space-md);border-bottom:1px solid var(--kf-color-border)}.kf-modal--dividers .kf-modal__footer{padding-top:var(--kf-space-md);border-top:1px solid var(--kf-color-border)}.kf-modal--bounded{max-height:min(var(--kf-modal-max-height),calc(100dvh - 2 * var(--kf-space-md)))}.kf-modal--bounded .kf-modal__panel{box-sizing:border-box;max-height:inherit}.kf-modal--bounded .kf-modal__body{flex:1 1 auto;min-height:0;overscroll-behavior:contain}@media(max-width:640px){.kf-modal--fullscreen-mobile{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0}.kf-modal--fullscreen-mobile .kf-modal__panel{box-sizing:border-box;height:100%;max-height:100%;padding:var(--kf-space-md);gap:var(--kf-space-sm);border-radius:0;box-shadow:none}.kf-modal--fullscreen-mobile .kf-modal__body{flex:1 1 auto;min-height:0}.kf-modal--fullscreen-mobile .kf-modal__title{font-size:var(--kf-font-size-title-sm)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], dividers: [{ type: i0.Input, args: [{ isSignal: true, alias: "dividers", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], fullscreenOnMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullscreenOnMobile", required: false }] }], initialFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialFocus", required: false }] }], dialog: [{ type: i0.ViewChild, args: ['dialog', { isSignal: true }] }], panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], onHostClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
@@ -9009,8 +9031,16 @@ class SidebarShell {
      */
     itemsCollapsed = computed(() => this.collapsed() && !this.isMobileViewport(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "itemsCollapsed" }] : /* istanbul ignore next */ []));
-    /** Cierra el panel mobile con Escape — mismo criterio que `Dropdown`/`Modal`/`Drawer`. */
-    onEscape() {
+    /**
+     * Cierra el panel mobile con Escape — mismo criterio que `Drawer`: si un
+     * panel flotante de adentro (`kf-dropdown`, `kf-select`) ya consumió la
+     * tecla en captura (`defaultPrevented`), el panel mobile sigue abierto y
+     * solo cierra la capa superior.
+     */
+    onEscape(event) {
+        if (!this.mobileOpen() || event.defaultPrevented) {
+            return;
+        }
         this.mobileOpen.set(false);
     }
     onNavItemClick(event, item) {
@@ -9019,14 +9049,14 @@ class SidebarShell {
         this.navItemClick.emit(item);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: SidebarShell, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: SidebarShell, isStandalone: true, selector: "kf-sidebar-shell", inputs: { navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, mobileOpen: { classPropertyName: "mobileOpen", publicName: "mobileOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", mobileOpen: "mobileOpenChange", navItemClick: "navItemClick" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "@if (mobileOpen()) {\n  <button\n    type=\"button\"\n    class=\"kf-sidebar-shell__backdrop\"\n    aria-label=\"Cerrar men\u00FA\"\n    (click)=\"mobileOpen.set(false)\"\n  ></button>\n}\n\n<aside\n  class=\"kf-sidebar-shell__rail\"\n  [class.kf-sidebar-shell__rail--collapsed]=\"itemsCollapsed()\"\n  [class.kf-sidebar-shell__rail--mobile-open]=\"mobileOpen()\"\n>\n  <div class=\"kf-sidebar-shell__brand\">\n    <div class=\"kf-sidebar-shell__brand-full\">\n      <ng-content select=\"[kf-sidebar-brand]\" />\n    </div>\n    <div class=\"kf-sidebar-shell__brand-collapsed\">\n      <ng-content select=\"[kf-sidebar-brand-collapsed]\" />\n    </div>\n\n    <button\n      type=\"button\"\n      class=\"kf-sidebar-shell__mobile-close\"\n      aria-label=\"Cerrar men\u00FA\"\n      (click)=\"mobileOpen.set(false)\"\n    >\n      <kf-icon name=\"x\" size=\"md\" />\n    </button>\n  </div>\n\n  <nav class=\"kf-sidebar-shell__nav\">\n    @for (entry of itemsWithGroupHeader(); track entry.item.href) {\n      @if (entry.showGroupLabel && !itemsCollapsed()) {\n        <div class=\"kf-sidebar-shell__group-label\">{{ entry.item.groupLabel }}</div>\n      }\n      <kf-sidebar-nav-item\n        [icon]=\"entry.item.icon\"\n        [label]=\"entry.item.label\"\n        [href]=\"entry.item.href\"\n        [active]=\"!!entry.item.active\"\n        [collapsed]=\"itemsCollapsed()\"\n        (click)=\"onNavItemClick($event, entry.item)\"\n      />\n    }\n  </nav>\n\n  <div class=\"kf-sidebar-shell__bottom\">\n    <button\n      type=\"button\"\n      class=\"kf-sidebar-shell__collapse-toggle\"\n      [class.kf-sidebar-shell__collapse-toggle--collapsed]=\"itemsCollapsed()\"\n      [attr.aria-expanded]=\"!collapsed()\"\n      [attr.aria-label]=\"collapsed() ? 'Expandir men\u00FA' : 'Colapsar men\u00FA'\"\n      [kfTooltip]=\"itemsCollapsed() ? (collapsed() ? 'Expandir men\u00FA' : 'Colapsar men\u00FA') : ''\"\n      (click)=\"collapsed.set(!collapsed())\"\n    >\n      <kf-icon [name]=\"collapsed() ? 'chevron-right' : 'chevron-left'\" size=\"sm\" />\n      @if (!itemsCollapsed()) {\n        <span class=\"kf-sidebar-shell__collapse-toggle-label\">\n          {{ collapsed() ? 'Expandir men\u00FA' : 'Colapsar men\u00FA' }}\n        </span>\n      }\n    </button>\n\n    <div class=\"kf-sidebar-shell__footer\">\n      <ng-content select=\"[kf-sidebar-footer]\" />\n    </div>\n  </div>\n</aside>\n\n<div class=\"kf-sidebar-shell__topbar\">\n  <button\n    type=\"button\"\n    class=\"kf-sidebar-shell__menu-toggle\"\n    aria-label=\"Abrir men\u00FA de navegaci\u00F3n\"\n    (click)=\"mobileOpen.set(true)\"\n  >\n    <kf-icon name=\"menu\" size=\"md\" />\n  </button>\n  <div class=\"kf-sidebar-shell__topbar-brand\">\n    <ng-content select=\"[kf-sidebar-brand-mobile]\" />\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:contents}.kf-sidebar-shell__backdrop{display:none}.kf-sidebar-shell__rail{box-sizing:border-box;display:flex;flex-direction:column;position:sticky;top:0;height:100dvh;width:268px;flex:none;padding:var(--kf-space-lg) var(--kf-space-md);background:linear-gradient(190deg,var(--kf-color-sidebar-gradient-from) 0%,var(--kf-color-sidebar-gradient-to) 60%);transition:width .18s ease,padding-inline .18s ease}.kf-sidebar-shell__rail--collapsed{width:56px;padding-inline:var(--kf-space-sm)}.kf-sidebar-shell__brand{display:flex;align-items:center;justify-content:center;margin-bottom:var(--kf-space-xl)}.kf-sidebar-shell__brand-full{display:flex;justify-content:center;min-width:0}.kf-sidebar-shell__brand-full ::ng-deep img{display:block;height:1.5rem}.kf-sidebar-shell__brand-collapsed{display:none;justify-content:center;min-width:0}.kf-sidebar-shell__brand-collapsed ::ng-deep img{display:block;height:1.75rem}.kf-sidebar-shell__rail--collapsed .kf-sidebar-shell__brand-full{display:none}.kf-sidebar-shell__rail--collapsed .kf-sidebar-shell__brand-collapsed{display:flex}.kf-sidebar-shell__mobile-close{display:none;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;border-radius:var(--kf-radius-sm);background:#ffffff14;color:#fffc;cursor:pointer}.kf-sidebar-shell__mobile-close:hover{background:#ffffff29;color:var(--kf-color-white)}.kf-sidebar-shell__nav{flex:1 1 auto;display:flex;flex-direction:column;gap:var(--kf-space-xs);overflow-y:auto}.kf-sidebar-shell__group-label{margin-top:var(--kf-space-sm);padding:0 var(--kf-space-md);font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#fff6;white-space:nowrap;overflow:hidden}.kf-sidebar-shell__nav>.kf-sidebar-shell__group-label:first-child{margin-top:0}.kf-sidebar-shell__bottom{display:flex;flex-direction:column;margin-top:var(--kf-space-sm);padding-top:var(--kf-space-sm);border-top:1px solid rgba(255,255,255,.12)}.kf-sidebar-shell__footer{margin-top:var(--kf-space-sm)}.kf-sidebar-shell__footer:empty{display:none}.kf-sidebar-shell__collapse-toggle{box-sizing:border-box;display:flex;align-items:center;gap:var(--kf-space-sm);width:100%;padding:var(--kf-space-sm) var(--kf-space-md);border:none;border-radius:var(--kf-radius-sm);background:#ffffff0f;color:#ffffffb3;font-family:var(--kf-font-body);font-size:.8125rem;font-weight:600;cursor:pointer;transition:background .14s,color .14s}.kf-sidebar-shell__collapse-toggle:hover{background:#ffffff1f;color:var(--kf-color-white)}.kf-sidebar-shell__collapse-toggle--collapsed{justify-content:center;width:40px;height:40px;padding-inline:0}.kf-sidebar-shell__collapse-toggle-label{flex:1 1 auto;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-sidebar-shell__topbar{display:none}@media(max-width:900px){.kf-sidebar-shell__rail{position:fixed;inset:0 auto 0 0;z-index:100;width:284px;max-width:86vw;transform:translate(-100%);transition:transform .26s cubic-bezier(.4,0,.2,1),box-shadow .26s cubic-bezier(.4,0,.2,1);box-shadow:none}.kf-sidebar-shell__rail--mobile-open{transform:translate(0);box-shadow:var(--kf-shadow-lg)}.kf-sidebar-shell__rail--collapsed{width:284px;max-width:86vw;padding-inline:var(--kf-space-md)}.kf-sidebar-shell__brand{display:grid;grid-template-columns:1fr 2rem;align-items:center}.kf-sidebar-shell__brand-full{grid-column:1;justify-content:flex-start}.kf-sidebar-shell__mobile-close{grid-column:2;display:flex}.kf-sidebar-shell__collapse-toggle{display:none}.kf-sidebar-shell__backdrop{display:block;position:fixed;inset:0;z-index:90;border:none;padding:0;cursor:pointer;background:#0a0e1480}.kf-sidebar-shell__topbar{display:flex;align-items:center;gap:var(--kf-space-md);padding:var(--kf-space-sm) var(--kf-space-lg);background:var(--kf-color-white);border-bottom:1px solid var(--kf-color-border)}.kf-sidebar-shell__menu-toggle{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;border-radius:var(--kf-radius-sm);background:transparent;color:var(--kf-color-ink);cursor:pointer;flex:none}.kf-sidebar-shell__menu-toggle:hover{background:var(--kf-color-surface)}.kf-sidebar-shell__topbar-brand ::ng-deep img{display:block;height:1.25rem}}\n"], dependencies: [{ kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }, { kind: "component", type: SidebarNavItem, selector: "kf-sidebar-nav-item", inputs: ["icon", "label", "href", "active", "collapsed"] }, { kind: "directive", type: TooltipDirective, selector: "[kfTooltip]", inputs: ["kfTooltip", "kfTooltipPosition"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: SidebarShell, isStandalone: true, selector: "kf-sidebar-shell", inputs: { navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, mobileOpen: { classPropertyName: "mobileOpen", publicName: "mobileOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", mobileOpen: "mobileOpenChange", navItemClick: "navItemClick" }, host: { listeners: { "document:keydown.escape": "onEscape($event)" } }, ngImport: i0, template: "@if (mobileOpen()) {\n  <button\n    type=\"button\"\n    class=\"kf-sidebar-shell__backdrop\"\n    aria-label=\"Cerrar men\u00FA\"\n    (click)=\"mobileOpen.set(false)\"\n  ></button>\n}\n\n<aside\n  class=\"kf-sidebar-shell__rail\"\n  [class.kf-sidebar-shell__rail--collapsed]=\"itemsCollapsed()\"\n  [class.kf-sidebar-shell__rail--mobile-open]=\"mobileOpen()\"\n>\n  <div class=\"kf-sidebar-shell__brand\">\n    <div class=\"kf-sidebar-shell__brand-full\">\n      <ng-content select=\"[kf-sidebar-brand]\" />\n    </div>\n    <div class=\"kf-sidebar-shell__brand-collapsed\">\n      <ng-content select=\"[kf-sidebar-brand-collapsed]\" />\n    </div>\n\n    <button\n      type=\"button\"\n      class=\"kf-sidebar-shell__mobile-close\"\n      aria-label=\"Cerrar men\u00FA\"\n      (click)=\"mobileOpen.set(false)\"\n    >\n      <kf-icon name=\"x\" size=\"md\" />\n    </button>\n  </div>\n\n  <nav class=\"kf-sidebar-shell__nav\">\n    @for (entry of itemsWithGroupHeader(); track entry.item.href) {\n      @if (entry.showGroupLabel && !itemsCollapsed()) {\n        <div class=\"kf-sidebar-shell__group-label\">{{ entry.item.groupLabel }}</div>\n      }\n      <kf-sidebar-nav-item\n        [icon]=\"entry.item.icon\"\n        [label]=\"entry.item.label\"\n        [href]=\"entry.item.href\"\n        [active]=\"!!entry.item.active\"\n        [collapsed]=\"itemsCollapsed()\"\n        (click)=\"onNavItemClick($event, entry.item)\"\n      />\n    }\n  </nav>\n\n  <div class=\"kf-sidebar-shell__bottom\">\n    <button\n      type=\"button\"\n      class=\"kf-sidebar-shell__collapse-toggle\"\n      [class.kf-sidebar-shell__collapse-toggle--collapsed]=\"itemsCollapsed()\"\n      [attr.aria-expanded]=\"!collapsed()\"\n      [attr.aria-label]=\"collapsed() ? 'Expandir men\u00FA' : 'Colapsar men\u00FA'\"\n      [kfTooltip]=\"itemsCollapsed() ? (collapsed() ? 'Expandir men\u00FA' : 'Colapsar men\u00FA') : ''\"\n      (click)=\"collapsed.set(!collapsed())\"\n    >\n      <kf-icon [name]=\"collapsed() ? 'chevron-right' : 'chevron-left'\" size=\"sm\" />\n      @if (!itemsCollapsed()) {\n        <span class=\"kf-sidebar-shell__collapse-toggle-label\">\n          {{ collapsed() ? 'Expandir men\u00FA' : 'Colapsar men\u00FA' }}\n        </span>\n      }\n    </button>\n\n    <div class=\"kf-sidebar-shell__footer\">\n      <ng-content select=\"[kf-sidebar-footer]\" />\n    </div>\n  </div>\n</aside>\n\n<div class=\"kf-sidebar-shell__topbar\">\n  <button\n    type=\"button\"\n    class=\"kf-sidebar-shell__menu-toggle\"\n    aria-label=\"Abrir men\u00FA de navegaci\u00F3n\"\n    (click)=\"mobileOpen.set(true)\"\n  >\n    <kf-icon name=\"menu\" size=\"md\" />\n  </button>\n  <div class=\"kf-sidebar-shell__topbar-brand\">\n    <ng-content select=\"[kf-sidebar-brand-mobile]\" />\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:contents}.kf-sidebar-shell__backdrop{display:none}.kf-sidebar-shell__rail{box-sizing:border-box;display:flex;flex-direction:column;position:sticky;top:0;height:100dvh;width:268px;flex:none;padding:var(--kf-space-lg) var(--kf-space-md);background:linear-gradient(190deg,var(--kf-color-sidebar-gradient-from) 0%,var(--kf-color-sidebar-gradient-to) 60%);transition:width .18s ease,padding-inline .18s ease}.kf-sidebar-shell__rail--collapsed{width:56px;padding-inline:var(--kf-space-sm)}.kf-sidebar-shell__brand{display:flex;align-items:center;justify-content:center;margin-bottom:var(--kf-space-xl)}.kf-sidebar-shell__brand-full{display:flex;justify-content:center;min-width:0}.kf-sidebar-shell__brand-full ::ng-deep img{display:block;height:1.5rem}.kf-sidebar-shell__brand-collapsed{display:none;justify-content:center;min-width:0}.kf-sidebar-shell__brand-collapsed ::ng-deep img{display:block;height:1.75rem}.kf-sidebar-shell__rail--collapsed .kf-sidebar-shell__brand-full{display:none}.kf-sidebar-shell__rail--collapsed .kf-sidebar-shell__brand-collapsed{display:flex}.kf-sidebar-shell__mobile-close{display:none;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;border-radius:var(--kf-radius-sm);background:#ffffff14;color:#fffc;cursor:pointer}.kf-sidebar-shell__mobile-close:hover{background:#ffffff29;color:var(--kf-color-white)}.kf-sidebar-shell__nav{flex:1 1 auto;display:flex;flex-direction:column;gap:var(--kf-space-xs);overflow-y:auto}.kf-sidebar-shell__group-label{margin-top:var(--kf-space-sm);padding:0 var(--kf-space-md);font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#fff6;white-space:nowrap;overflow:hidden}.kf-sidebar-shell__nav>.kf-sidebar-shell__group-label:first-child{margin-top:0}.kf-sidebar-shell__bottom{display:flex;flex-direction:column;margin-top:var(--kf-space-sm);padding-top:var(--kf-space-sm);border-top:1px solid rgba(255,255,255,.12)}.kf-sidebar-shell__footer{margin-top:var(--kf-space-sm)}.kf-sidebar-shell__footer:empty{display:none}.kf-sidebar-shell__collapse-toggle{box-sizing:border-box;display:flex;align-items:center;gap:var(--kf-space-sm);width:100%;padding:var(--kf-space-sm) var(--kf-space-md);border:none;border-radius:var(--kf-radius-sm);background:#ffffff0f;color:#ffffffb3;font-family:var(--kf-font-body);font-size:.8125rem;font-weight:600;cursor:pointer;transition:background .14s,color .14s}.kf-sidebar-shell__collapse-toggle:hover{background:#ffffff1f;color:var(--kf-color-white)}.kf-sidebar-shell__collapse-toggle--collapsed{justify-content:center;width:40px;height:40px;padding-inline:0}.kf-sidebar-shell__collapse-toggle-label{flex:1 1 auto;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-sidebar-shell__topbar{display:none}@media(max-width:900px){.kf-sidebar-shell__rail{position:fixed;inset:0 auto 0 0;z-index:100;width:284px;max-width:86vw;transform:translate(-100%);transition:transform .26s cubic-bezier(.4,0,.2,1),box-shadow .26s cubic-bezier(.4,0,.2,1);box-shadow:none}.kf-sidebar-shell__rail--mobile-open{transform:translate(0);box-shadow:var(--kf-shadow-lg)}.kf-sidebar-shell__rail--collapsed{width:284px;max-width:86vw;padding-inline:var(--kf-space-md)}.kf-sidebar-shell__brand{display:grid;grid-template-columns:1fr 2rem;align-items:center}.kf-sidebar-shell__brand-full{grid-column:1;justify-content:flex-start}.kf-sidebar-shell__mobile-close{grid-column:2;display:flex}.kf-sidebar-shell__collapse-toggle{display:none}.kf-sidebar-shell__backdrop{display:block;position:fixed;inset:0;z-index:90;border:none;padding:0;cursor:pointer;background:#0a0e1480}.kf-sidebar-shell__topbar{display:flex;align-items:center;gap:var(--kf-space-md);padding:var(--kf-space-sm) var(--kf-space-lg);background:var(--kf-color-white);border-bottom:1px solid var(--kf-color-border)}.kf-sidebar-shell__menu-toggle{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;border-radius:var(--kf-radius-sm);background:transparent;color:var(--kf-color-ink);cursor:pointer;flex:none}.kf-sidebar-shell__menu-toggle:hover{background:var(--kf-color-surface)}.kf-sidebar-shell__topbar-brand ::ng-deep img{display:block;height:1.25rem}}\n"], dependencies: [{ kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }, { kind: "component", type: SidebarNavItem, selector: "kf-sidebar-nav-item", inputs: ["icon", "label", "href", "active", "collapsed"] }, { kind: "directive", type: TooltipDirective, selector: "[kfTooltip]", inputs: ["kfTooltip", "kfTooltipPosition"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: SidebarShell, decorators: [{
             type: Component,
             args: [{ selector: 'kf-sidebar-shell', imports: [Icon, SidebarNavItem, TooltipDirective], template: "@if (mobileOpen()) {\n  <button\n    type=\"button\"\n    class=\"kf-sidebar-shell__backdrop\"\n    aria-label=\"Cerrar men\u00FA\"\n    (click)=\"mobileOpen.set(false)\"\n  ></button>\n}\n\n<aside\n  class=\"kf-sidebar-shell__rail\"\n  [class.kf-sidebar-shell__rail--collapsed]=\"itemsCollapsed()\"\n  [class.kf-sidebar-shell__rail--mobile-open]=\"mobileOpen()\"\n>\n  <div class=\"kf-sidebar-shell__brand\">\n    <div class=\"kf-sidebar-shell__brand-full\">\n      <ng-content select=\"[kf-sidebar-brand]\" />\n    </div>\n    <div class=\"kf-sidebar-shell__brand-collapsed\">\n      <ng-content select=\"[kf-sidebar-brand-collapsed]\" />\n    </div>\n\n    <button\n      type=\"button\"\n      class=\"kf-sidebar-shell__mobile-close\"\n      aria-label=\"Cerrar men\u00FA\"\n      (click)=\"mobileOpen.set(false)\"\n    >\n      <kf-icon name=\"x\" size=\"md\" />\n    </button>\n  </div>\n\n  <nav class=\"kf-sidebar-shell__nav\">\n    @for (entry of itemsWithGroupHeader(); track entry.item.href) {\n      @if (entry.showGroupLabel && !itemsCollapsed()) {\n        <div class=\"kf-sidebar-shell__group-label\">{{ entry.item.groupLabel }}</div>\n      }\n      <kf-sidebar-nav-item\n        [icon]=\"entry.item.icon\"\n        [label]=\"entry.item.label\"\n        [href]=\"entry.item.href\"\n        [active]=\"!!entry.item.active\"\n        [collapsed]=\"itemsCollapsed()\"\n        (click)=\"onNavItemClick($event, entry.item)\"\n      />\n    }\n  </nav>\n\n  <div class=\"kf-sidebar-shell__bottom\">\n    <button\n      type=\"button\"\n      class=\"kf-sidebar-shell__collapse-toggle\"\n      [class.kf-sidebar-shell__collapse-toggle--collapsed]=\"itemsCollapsed()\"\n      [attr.aria-expanded]=\"!collapsed()\"\n      [attr.aria-label]=\"collapsed() ? 'Expandir men\u00FA' : 'Colapsar men\u00FA'\"\n      [kfTooltip]=\"itemsCollapsed() ? (collapsed() ? 'Expandir men\u00FA' : 'Colapsar men\u00FA') : ''\"\n      (click)=\"collapsed.set(!collapsed())\"\n    >\n      <kf-icon [name]=\"collapsed() ? 'chevron-right' : 'chevron-left'\" size=\"sm\" />\n      @if (!itemsCollapsed()) {\n        <span class=\"kf-sidebar-shell__collapse-toggle-label\">\n          {{ collapsed() ? 'Expandir men\u00FA' : 'Colapsar men\u00FA' }}\n        </span>\n      }\n    </button>\n\n    <div class=\"kf-sidebar-shell__footer\">\n      <ng-content select=\"[kf-sidebar-footer]\" />\n    </div>\n  </div>\n</aside>\n\n<div class=\"kf-sidebar-shell__topbar\">\n  <button\n    type=\"button\"\n    class=\"kf-sidebar-shell__menu-toggle\"\n    aria-label=\"Abrir men\u00FA de navegaci\u00F3n\"\n    (click)=\"mobileOpen.set(true)\"\n  >\n    <kf-icon name=\"menu\" size=\"md\" />\n  </button>\n  <div class=\"kf-sidebar-shell__topbar-brand\">\n    <ng-content select=\"[kf-sidebar-brand-mobile]\" />\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:contents}.kf-sidebar-shell__backdrop{display:none}.kf-sidebar-shell__rail{box-sizing:border-box;display:flex;flex-direction:column;position:sticky;top:0;height:100dvh;width:268px;flex:none;padding:var(--kf-space-lg) var(--kf-space-md);background:linear-gradient(190deg,var(--kf-color-sidebar-gradient-from) 0%,var(--kf-color-sidebar-gradient-to) 60%);transition:width .18s ease,padding-inline .18s ease}.kf-sidebar-shell__rail--collapsed{width:56px;padding-inline:var(--kf-space-sm)}.kf-sidebar-shell__brand{display:flex;align-items:center;justify-content:center;margin-bottom:var(--kf-space-xl)}.kf-sidebar-shell__brand-full{display:flex;justify-content:center;min-width:0}.kf-sidebar-shell__brand-full ::ng-deep img{display:block;height:1.5rem}.kf-sidebar-shell__brand-collapsed{display:none;justify-content:center;min-width:0}.kf-sidebar-shell__brand-collapsed ::ng-deep img{display:block;height:1.75rem}.kf-sidebar-shell__rail--collapsed .kf-sidebar-shell__brand-full{display:none}.kf-sidebar-shell__rail--collapsed .kf-sidebar-shell__brand-collapsed{display:flex}.kf-sidebar-shell__mobile-close{display:none;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;border-radius:var(--kf-radius-sm);background:#ffffff14;color:#fffc;cursor:pointer}.kf-sidebar-shell__mobile-close:hover{background:#ffffff29;color:var(--kf-color-white)}.kf-sidebar-shell__nav{flex:1 1 auto;display:flex;flex-direction:column;gap:var(--kf-space-xs);overflow-y:auto}.kf-sidebar-shell__group-label{margin-top:var(--kf-space-sm);padding:0 var(--kf-space-md);font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#fff6;white-space:nowrap;overflow:hidden}.kf-sidebar-shell__nav>.kf-sidebar-shell__group-label:first-child{margin-top:0}.kf-sidebar-shell__bottom{display:flex;flex-direction:column;margin-top:var(--kf-space-sm);padding-top:var(--kf-space-sm);border-top:1px solid rgba(255,255,255,.12)}.kf-sidebar-shell__footer{margin-top:var(--kf-space-sm)}.kf-sidebar-shell__footer:empty{display:none}.kf-sidebar-shell__collapse-toggle{box-sizing:border-box;display:flex;align-items:center;gap:var(--kf-space-sm);width:100%;padding:var(--kf-space-sm) var(--kf-space-md);border:none;border-radius:var(--kf-radius-sm);background:#ffffff0f;color:#ffffffb3;font-family:var(--kf-font-body);font-size:.8125rem;font-weight:600;cursor:pointer;transition:background .14s,color .14s}.kf-sidebar-shell__collapse-toggle:hover{background:#ffffff1f;color:var(--kf-color-white)}.kf-sidebar-shell__collapse-toggle--collapsed{justify-content:center;width:40px;height:40px;padding-inline:0}.kf-sidebar-shell__collapse-toggle-label{flex:1 1 auto;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-sidebar-shell__topbar{display:none}@media(max-width:900px){.kf-sidebar-shell__rail{position:fixed;inset:0 auto 0 0;z-index:100;width:284px;max-width:86vw;transform:translate(-100%);transition:transform .26s cubic-bezier(.4,0,.2,1),box-shadow .26s cubic-bezier(.4,0,.2,1);box-shadow:none}.kf-sidebar-shell__rail--mobile-open{transform:translate(0);box-shadow:var(--kf-shadow-lg)}.kf-sidebar-shell__rail--collapsed{width:284px;max-width:86vw;padding-inline:var(--kf-space-md)}.kf-sidebar-shell__brand{display:grid;grid-template-columns:1fr 2rem;align-items:center}.kf-sidebar-shell__brand-full{grid-column:1;justify-content:flex-start}.kf-sidebar-shell__mobile-close{grid-column:2;display:flex}.kf-sidebar-shell__collapse-toggle{display:none}.kf-sidebar-shell__backdrop{display:block;position:fixed;inset:0;z-index:90;border:none;padding:0;cursor:pointer;background:#0a0e1480}.kf-sidebar-shell__topbar{display:flex;align-items:center;gap:var(--kf-space-md);padding:var(--kf-space-sm) var(--kf-space-lg);background:var(--kf-color-white);border-bottom:1px solid var(--kf-color-border)}.kf-sidebar-shell__menu-toggle{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;border-radius:var(--kf-radius-sm);background:transparent;color:var(--kf-color-ink);cursor:pointer;flex:none}.kf-sidebar-shell__menu-toggle:hover{background:var(--kf-color-surface)}.kf-sidebar-shell__topbar-brand ::ng-deep img{display:block;height:1.25rem}}\n"] }]
         }], propDecorators: { navItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "navItems", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], mobileOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileOpen", required: false }] }, { type: i0.Output, args: ["mobileOpenChange"] }], navItemClick: [{ type: i0.Output, args: ["navItemClick"] }], onEscape: [{
                 type: HostListener,
-                args: ['document:keydown.escape']
+                args: ['document:keydown.escape', ['$event']]
             }] } });
 
 const INTERACTIVE_CONTENT = 'a, button, input, select, textarea, label, [tabindex], ' +
@@ -9081,6 +9111,11 @@ class StatTile {
     /** Tercera línea bajo el valor. Vacía cae en `notePlaceholder`. */
     note = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "note" }] : /* istanbul ignore next */ []));
+    /** Máximo de líneas visibles de la nota antes de la elipsis (`…`); el texto
+     * completo sigue en el DOM y en el `title`. Default 2, como siempre. Un
+     * valor menor a 1 o no numérico no limita la altura: la nota se muestra
+     * entera. */
+    noteLines = input(2, { ...(ngDevMode ? { debugName: "noteLines" } : /* istanbul ignore next */ {}), transform: numberAttribute });
     /** Qué dice la tercera línea cuando no hay nota. Cada consumidor debería
      * pasar el motivo real de SU dato ausente, no un texto genérico. */
     notePlaceholder = input(/* @ts-ignore */
@@ -9165,10 +9200,16 @@ class StatTile {
             this.tileClick.emit();
         }
     }
+    /** Valor de `line-clamp`: entero ≥ 1, o `none` para mostrar la nota entera. */
+    noteClamp = computed(() => {
+        const lines = Math.floor(this.noteLines());
+        return lines >= 1 ? String(lines) : 'none';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "noteClamp" }] : /* istanbul ignore next */ []));
     noteIsPlaceholder = computed(() => !this.note() && !!this.notePlaceholder(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "noteIsPlaceholder" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: StatTile, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: StatTile, isStandalone: true, selector: "kf-stat-tile", inputs: { cta: { classPropertyName: "cta", publicName: "cta", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, note: { classPropertyName: "note", publicName: "note", isSignal: true, isRequired: false, transformFunction: null }, notePlaceholder: { classPropertyName: "notePlaceholder", publicName: "notePlaceholder", isSignal: true, isRequired: false, transformFunction: null }, valueMissing: { classPropertyName: "valueMissing", publicName: "valueMissing", isSignal: true, isRequired: false, transformFunction: null }, hasProjectedValue: { classPropertyName: "hasProjectedValue", publicName: "hasProjectedValue", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null }, actionHref: { classPropertyName: "actionHref", publicName: "actionHref", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, pressed: { classPropertyName: "pressed", publicName: "pressed", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionClick: "actionClick", tileClick: "tileClick" }, host: { listeners: { "click": "onActivate($event)", "keydown": "onKeydown($event)", "keyup": "onKeyup($event)" }, properties: { "class.kf-stat-tile--cta": "cta()", "class.kf-stat-tile--inline": "!cta() && variant() === \"inline\"", "class.kf-stat-tile--interactive": "isInteractive()", "attr.role": "isInteractive() ? \"button\" : null", "attr.tabindex": "isInteractive() ? 0 : null", "attr.aria-pressed": "isInteractive() ? pressed() : null", "attr.aria-expanded": "isInteractive() ? expanded() : null" } }, ngImport: i0, template: "@if (cta()) {\n  <span class=\"kf-stat-tile__cta-title\">{{ title() }}</span>\n  @if (description()) {\n    <span class=\"kf-stat-tile__cta-description\">{{ description() }}</span>\n  }\n  @if (actionLabel()) {\n    <kf-link\n      class=\"kf-stat-tile__cta-action\"\n      [href]=\"actionHref() || '#'\"\n      showArrow\n      (click)=\"actionClick.emit($event)\"\n    >\n      {{ actionLabel() }}\n    </kf-link>\n  }\n} @else {\n  <div class=\"kf-stat-tile__head\">\n    <!-- El label recibe la clase de tone adem\u00E1s del value: juntos forman\n      una sola unidad de lectura, y pintar solo el n\u00FAmero la romper\u00EDa. -->\n    <span\n      class=\"kf-stat-tile__label\"\n      [class.kf-stat-tile__label--ok]=\"tone() === 'ok'\"\n      [class.kf-stat-tile__label--warn]=\"tone() === 'warn'\"\n      [class.kf-stat-tile__label--error]=\"tone() === 'error'\"\n      [class.kf-stat-tile__label--info]=\"tone() === 'info'\"\n      >{{ label() }}</span\n    >\n    @if (icon(); as iconName) {\n      <span class=\"kf-stat-tile__icon\">\n        <kf-icon [name]=\"iconName\" size=\"sm\" />\n      </span>\n    }\n  </div>\n  @if (hasProjectedValue()) {\n    <!-- Slot para un valor que no es texto medido (ej. un `kf-badge` de\n      estado) \u2014 mismo bloque `__value`, sin las clases de tono, que en ese\n      caso las resuelve el propio contenido proyectado (el badge trae su\n      tono). -->\n    <span class=\"kf-stat-tile__value kf-stat-tile__value--projected\">\n      <ng-content select=\"[valueContent]\" />\n    </span>\n  } @else {\n    <span\n      class=\"kf-stat-tile__value\"\n      [class.kf-stat-tile__value--ok]=\"tone() === 'ok'\"\n      [class.kf-stat-tile__value--warn]=\"tone() === 'warn'\"\n      [class.kf-stat-tile__value--error]=\"tone() === 'error'\"\n      [class.kf-stat-tile__value--info]=\"tone() === 'info'\"\n      [class.kf-stat-tile__value--missing]=\"valueMissing()\"\n      >{{ value() }}</span\n    >\n  }\n\n  <!-- La l\u00EDnea se reserva con o sin nota: un tile m\u00E1s corto desalinea la\n    fila. El `title` deja disponible el texto completo, recortado a 2 l\u00EDneas. -->\n  @if (noteText(); as note) {\n    <span\n      class=\"kf-stat-tile__note\"\n      [class.kf-stat-tile__note--empty]=\"noteIsPlaceholder()\"\n      [title]=\"note\"\n      >{{ note }}</span\n    >\n  }\n}\n", styles: [":host{display:flex;flex-direction:column;gap:var(--kf-space-xs);padding:var(--kf-space-md);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);background:var(--kf-color-white);height:100%;min-width:0}:host(.kf-stat-tile--cta){background:var(--kf-color-surface);gap:2px}:host(.kf-stat-tile--inline){flex-direction:row-reverse;align-items:baseline;height:auto;gap:6px;padding:0;border:none;border-radius:0;background:transparent}:host(.kf-stat-tile--inline) .kf-stat-tile__head{width:auto}.kf-stat-tile__head{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-xs)}.kf-stat-tile__label{font-size:var(--kf-font-size-label);color:var(--kf-color-text-muted)}.kf-stat-tile__icon{display:inline-flex;color:var(--kf-color-primary)}.kf-stat-tile__value{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-md);font-weight:700;color:var(--kf-color-ink)}.kf-stat-tile__value--projected{display:flex;align-items:center;font-size:initial;font-weight:initial;color:initial}.kf-stat-tile__value--ok,.kf-stat-tile__label--ok{color:var(--kf-color-success-strong)}.kf-stat-tile__value--warn,.kf-stat-tile__label--warn{color:var(--kf-color-warning-strong)}.kf-stat-tile__value--error,.kf-stat-tile__label--error{color:var(--kf-color-error-strong)}.kf-stat-tile__value--info,.kf-stat-tile__label--info{color:var(--kf-color-info-strong)}.kf-stat-tile__value--missing{font-family:var(--kf-font-body);font-size:var(--kf-font-size-body);font-weight:var(--kf-font-weight-body);font-style:italic;color:var(--kf-color-text-muted)}.kf-stat-tile__note{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:var(--kf-font-size-caption);color:var(--kf-color-text-muted);margin-top:auto}.kf-stat-tile__note--empty{font-style:italic;opacity:.75}.kf-stat-tile__cta-title{font-family:var(--kf-font-title);font-weight:700;color:var(--kf-color-ink)}.kf-stat-tile__cta-description{font-size:var(--kf-font-size-label);color:var(--kf-color-text-muted)}.kf-stat-tile__cta-action{margin-top:var(--kf-space-xs);font-size:var(--kf-font-size-label);font-weight:600}:host(.kf-stat-tile--interactive){cursor:pointer;text-align:start;transition:border-color .14s,background-color .14s,box-shadow .14s}@media(hover:hover){:host(.kf-stat-tile--interactive:hover){border-color:var(--kf-color-border-strong);background:var(--kf-color-primary-soft)}}:host(.kf-stat-tile--interactive[aria-pressed=\"true\"]){border-color:var(--kf-color-primary);box-shadow:var(--kf-stat-tile-ring)}:host(.kf-stat-tile--interactive:focus-visible){outline:none;box-shadow:var(--kf-shadow-focus)}@media(prefers-reduced-motion:reduce){:host(.kf-stat-tile--interactive){transition:none}}\n"], dependencies: [{ kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }, { kind: "component", type: Link, selector: "kf-link", inputs: ["variant", "disabled", "href", "showArrow"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: StatTile, isStandalone: true, selector: "kf-stat-tile", inputs: { cta: { classPropertyName: "cta", publicName: "cta", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, note: { classPropertyName: "note", publicName: "note", isSignal: true, isRequired: false, transformFunction: null }, noteLines: { classPropertyName: "noteLines", publicName: "noteLines", isSignal: true, isRequired: false, transformFunction: null }, notePlaceholder: { classPropertyName: "notePlaceholder", publicName: "notePlaceholder", isSignal: true, isRequired: false, transformFunction: null }, valueMissing: { classPropertyName: "valueMissing", publicName: "valueMissing", isSignal: true, isRequired: false, transformFunction: null }, hasProjectedValue: { classPropertyName: "hasProjectedValue", publicName: "hasProjectedValue", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null }, actionHref: { classPropertyName: "actionHref", publicName: "actionHref", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, pressed: { classPropertyName: "pressed", publicName: "pressed", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionClick: "actionClick", tileClick: "tileClick" }, host: { listeners: { "click": "onActivate($event)", "keydown": "onKeydown($event)", "keyup": "onKeyup($event)" }, properties: { "class.kf-stat-tile--cta": "cta()", "class.kf-stat-tile--inline": "!cta() && variant() === \"inline\"", "class.kf-stat-tile--interactive": "isInteractive()", "attr.role": "isInteractive() ? \"button\" : null", "attr.tabindex": "isInteractive() ? 0 : null", "attr.aria-pressed": "isInteractive() ? pressed() : null", "attr.aria-expanded": "isInteractive() ? expanded() : null" } }, ngImport: i0, template: "@if (cta()) {\n  <span class=\"kf-stat-tile__cta-title\">{{ title() }}</span>\n  @if (description()) {\n    <span class=\"kf-stat-tile__cta-description\">{{ description() }}</span>\n  }\n  @if (actionLabel()) {\n    <kf-link\n      class=\"kf-stat-tile__cta-action\"\n      [href]=\"actionHref() || '#'\"\n      showArrow\n      (click)=\"actionClick.emit($event)\"\n    >\n      {{ actionLabel() }}\n    </kf-link>\n  }\n} @else {\n  <div class=\"kf-stat-tile__head\">\n    <!-- El label recibe la clase de tone adem\u00E1s del value: juntos forman\n      una sola unidad de lectura, y pintar solo el n\u00FAmero la romper\u00EDa. -->\n    <span\n      class=\"kf-stat-tile__label\"\n      [class.kf-stat-tile__label--ok]=\"tone() === 'ok'\"\n      [class.kf-stat-tile__label--warn]=\"tone() === 'warn'\"\n      [class.kf-stat-tile__label--error]=\"tone() === 'error'\"\n      [class.kf-stat-tile__label--info]=\"tone() === 'info'\"\n      >{{ label() }}</span\n    >\n    @if (icon(); as iconName) {\n      <span class=\"kf-stat-tile__icon\">\n        <kf-icon [name]=\"iconName\" size=\"sm\" />\n      </span>\n    }\n  </div>\n  @if (hasProjectedValue()) {\n    <!-- Slot para un valor que no es texto medido (ej. un `kf-badge` de\n      estado) \u2014 mismo bloque `__value`, sin las clases de tono, que en ese\n      caso las resuelve el propio contenido proyectado (el badge trae su\n      tono). -->\n    <span class=\"kf-stat-tile__value kf-stat-tile__value--projected\">\n      <ng-content select=\"[valueContent]\" />\n    </span>\n  } @else {\n    <span\n      class=\"kf-stat-tile__value\"\n      [class.kf-stat-tile__value--ok]=\"tone() === 'ok'\"\n      [class.kf-stat-tile__value--warn]=\"tone() === 'warn'\"\n      [class.kf-stat-tile__value--error]=\"tone() === 'error'\"\n      [class.kf-stat-tile__value--info]=\"tone() === 'info'\"\n      [class.kf-stat-tile__value--missing]=\"valueMissing()\"\n      >{{ value() }}</span\n    >\n  }\n\n  <!-- La l\u00EDnea se reserva con o sin nota: un tile m\u00E1s corto desalinea la\n    fila. El `title` deja disponible el texto completo, recortado a `noteLines`\n    l\u00EDneas (2 por defecto). -->\n  @if (noteText(); as note) {\n    <span\n      class=\"kf-stat-tile__note\"\n      [class.kf-stat-tile__note--empty]=\"noteIsPlaceholder()\"\n      [style.--kf-stat-tile-note-lines]=\"noteClamp()\"\n      [title]=\"note\"\n      >{{ note }}</span\n    >\n  }\n}\n", styles: [":host{display:flex;flex-direction:column;gap:var(--kf-space-xs);padding:var(--kf-space-md);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);background:var(--kf-color-white);height:100%;min-width:0}:host(.kf-stat-tile--cta){background:var(--kf-color-surface);gap:2px}:host(.kf-stat-tile--inline){flex-direction:row-reverse;align-items:baseline;height:auto;gap:6px;padding:0;border:none;border-radius:0;background:transparent}:host(.kf-stat-tile--inline) .kf-stat-tile__head{width:auto}.kf-stat-tile__head{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-xs)}.kf-stat-tile__label{font-size:var(--kf-font-size-label);color:var(--kf-color-text-muted)}.kf-stat-tile__icon{display:inline-flex;color:var(--kf-color-primary)}.kf-stat-tile__value{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-md);font-weight:700;color:var(--kf-color-ink)}.kf-stat-tile__value--projected{display:flex;align-items:center;font-size:initial;font-weight:initial;color:initial}.kf-stat-tile__value--ok,.kf-stat-tile__label--ok{color:var(--kf-color-success-strong)}.kf-stat-tile__value--warn,.kf-stat-tile__label--warn{color:var(--kf-color-warning-strong)}.kf-stat-tile__value--error,.kf-stat-tile__label--error{color:var(--kf-color-error-strong)}.kf-stat-tile__value--info,.kf-stat-tile__label--info{color:var(--kf-color-info-strong)}.kf-stat-tile__value--missing{font-family:var(--kf-font-body);font-size:var(--kf-font-size-body);font-weight:var(--kf-font-weight-body);font-style:italic;color:var(--kf-color-text-muted)}.kf-stat-tile__note{display:-webkit-box;-webkit-line-clamp:var(--kf-stat-tile-note-lines, 2);line-clamp:var(--kf-stat-tile-note-lines, 2);-webkit-box-orient:vertical;overflow:hidden;font-size:var(--kf-font-size-caption);color:var(--kf-color-text-muted);margin-top:auto}.kf-stat-tile__note--empty{font-style:italic;opacity:.75}.kf-stat-tile__cta-title{font-family:var(--kf-font-title);font-weight:700;color:var(--kf-color-ink)}.kf-stat-tile__cta-description{font-size:var(--kf-font-size-label);color:var(--kf-color-text-muted)}.kf-stat-tile__cta-action{margin-top:var(--kf-space-xs);font-size:var(--kf-font-size-label);font-weight:600}:host(.kf-stat-tile--interactive){cursor:pointer;text-align:start;transition:border-color .14s,background-color .14s,box-shadow .14s}@media(hover:hover){:host(.kf-stat-tile--interactive:hover){border-color:var(--kf-color-border-strong);background:var(--kf-color-primary-soft)}}:host(.kf-stat-tile--interactive[aria-pressed=\"true\"]){border-color:var(--kf-color-primary);box-shadow:var(--kf-stat-tile-ring)}:host(.kf-stat-tile--interactive:focus-visible){outline:none;box-shadow:var(--kf-shadow-focus)}@media(prefers-reduced-motion:reduce){:host(.kf-stat-tile--interactive){transition:none}}\n"], dependencies: [{ kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }, { kind: "component", type: Link, selector: "kf-link", inputs: ["variant", "disabled", "href", "showArrow"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: StatTile, decorators: [{
             type: Component,
@@ -9183,8 +9224,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                         '(click)': 'onActivate($event)',
                         '(keydown)': 'onKeydown($event)',
                         '(keyup)': 'onKeyup($event)',
-                    }, template: "@if (cta()) {\n  <span class=\"kf-stat-tile__cta-title\">{{ title() }}</span>\n  @if (description()) {\n    <span class=\"kf-stat-tile__cta-description\">{{ description() }}</span>\n  }\n  @if (actionLabel()) {\n    <kf-link\n      class=\"kf-stat-tile__cta-action\"\n      [href]=\"actionHref() || '#'\"\n      showArrow\n      (click)=\"actionClick.emit($event)\"\n    >\n      {{ actionLabel() }}\n    </kf-link>\n  }\n} @else {\n  <div class=\"kf-stat-tile__head\">\n    <!-- El label recibe la clase de tone adem\u00E1s del value: juntos forman\n      una sola unidad de lectura, y pintar solo el n\u00FAmero la romper\u00EDa. -->\n    <span\n      class=\"kf-stat-tile__label\"\n      [class.kf-stat-tile__label--ok]=\"tone() === 'ok'\"\n      [class.kf-stat-tile__label--warn]=\"tone() === 'warn'\"\n      [class.kf-stat-tile__label--error]=\"tone() === 'error'\"\n      [class.kf-stat-tile__label--info]=\"tone() === 'info'\"\n      >{{ label() }}</span\n    >\n    @if (icon(); as iconName) {\n      <span class=\"kf-stat-tile__icon\">\n        <kf-icon [name]=\"iconName\" size=\"sm\" />\n      </span>\n    }\n  </div>\n  @if (hasProjectedValue()) {\n    <!-- Slot para un valor que no es texto medido (ej. un `kf-badge` de\n      estado) \u2014 mismo bloque `__value`, sin las clases de tono, que en ese\n      caso las resuelve el propio contenido proyectado (el badge trae su\n      tono). -->\n    <span class=\"kf-stat-tile__value kf-stat-tile__value--projected\">\n      <ng-content select=\"[valueContent]\" />\n    </span>\n  } @else {\n    <span\n      class=\"kf-stat-tile__value\"\n      [class.kf-stat-tile__value--ok]=\"tone() === 'ok'\"\n      [class.kf-stat-tile__value--warn]=\"tone() === 'warn'\"\n      [class.kf-stat-tile__value--error]=\"tone() === 'error'\"\n      [class.kf-stat-tile__value--info]=\"tone() === 'info'\"\n      [class.kf-stat-tile__value--missing]=\"valueMissing()\"\n      >{{ value() }}</span\n    >\n  }\n\n  <!-- La l\u00EDnea se reserva con o sin nota: un tile m\u00E1s corto desalinea la\n    fila. El `title` deja disponible el texto completo, recortado a 2 l\u00EDneas. -->\n  @if (noteText(); as note) {\n    <span\n      class=\"kf-stat-tile__note\"\n      [class.kf-stat-tile__note--empty]=\"noteIsPlaceholder()\"\n      [title]=\"note\"\n      >{{ note }}</span\n    >\n  }\n}\n", styles: [":host{display:flex;flex-direction:column;gap:var(--kf-space-xs);padding:var(--kf-space-md);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);background:var(--kf-color-white);height:100%;min-width:0}:host(.kf-stat-tile--cta){background:var(--kf-color-surface);gap:2px}:host(.kf-stat-tile--inline){flex-direction:row-reverse;align-items:baseline;height:auto;gap:6px;padding:0;border:none;border-radius:0;background:transparent}:host(.kf-stat-tile--inline) .kf-stat-tile__head{width:auto}.kf-stat-tile__head{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-xs)}.kf-stat-tile__label{font-size:var(--kf-font-size-label);color:var(--kf-color-text-muted)}.kf-stat-tile__icon{display:inline-flex;color:var(--kf-color-primary)}.kf-stat-tile__value{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-md);font-weight:700;color:var(--kf-color-ink)}.kf-stat-tile__value--projected{display:flex;align-items:center;font-size:initial;font-weight:initial;color:initial}.kf-stat-tile__value--ok,.kf-stat-tile__label--ok{color:var(--kf-color-success-strong)}.kf-stat-tile__value--warn,.kf-stat-tile__label--warn{color:var(--kf-color-warning-strong)}.kf-stat-tile__value--error,.kf-stat-tile__label--error{color:var(--kf-color-error-strong)}.kf-stat-tile__value--info,.kf-stat-tile__label--info{color:var(--kf-color-info-strong)}.kf-stat-tile__value--missing{font-family:var(--kf-font-body);font-size:var(--kf-font-size-body);font-weight:var(--kf-font-weight-body);font-style:italic;color:var(--kf-color-text-muted)}.kf-stat-tile__note{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:var(--kf-font-size-caption);color:var(--kf-color-text-muted);margin-top:auto}.kf-stat-tile__note--empty{font-style:italic;opacity:.75}.kf-stat-tile__cta-title{font-family:var(--kf-font-title);font-weight:700;color:var(--kf-color-ink)}.kf-stat-tile__cta-description{font-size:var(--kf-font-size-label);color:var(--kf-color-text-muted)}.kf-stat-tile__cta-action{margin-top:var(--kf-space-xs);font-size:var(--kf-font-size-label);font-weight:600}:host(.kf-stat-tile--interactive){cursor:pointer;text-align:start;transition:border-color .14s,background-color .14s,box-shadow .14s}@media(hover:hover){:host(.kf-stat-tile--interactive:hover){border-color:var(--kf-color-border-strong);background:var(--kf-color-primary-soft)}}:host(.kf-stat-tile--interactive[aria-pressed=\"true\"]){border-color:var(--kf-color-primary);box-shadow:var(--kf-stat-tile-ring)}:host(.kf-stat-tile--interactive:focus-visible){outline:none;box-shadow:var(--kf-shadow-focus)}@media(prefers-reduced-motion:reduce){:host(.kf-stat-tile--interactive){transition:none}}\n"] }]
-        }], propDecorators: { cta: [{ type: i0.Input, args: [{ isSignal: true, alias: "cta", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], note: [{ type: i0.Input, args: [{ isSignal: true, alias: "note", required: false }] }], notePlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "notePlaceholder", required: false }] }], valueMissing: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueMissing", required: false }] }], hasProjectedValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasProjectedValue", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], actionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionLabel", required: false }] }], actionHref: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionHref", required: false }] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], pressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "pressed", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }], tileClick: [{ type: i0.Output, args: ["tileClick"] }] } });
+                    }, template: "@if (cta()) {\n  <span class=\"kf-stat-tile__cta-title\">{{ title() }}</span>\n  @if (description()) {\n    <span class=\"kf-stat-tile__cta-description\">{{ description() }}</span>\n  }\n  @if (actionLabel()) {\n    <kf-link\n      class=\"kf-stat-tile__cta-action\"\n      [href]=\"actionHref() || '#'\"\n      showArrow\n      (click)=\"actionClick.emit($event)\"\n    >\n      {{ actionLabel() }}\n    </kf-link>\n  }\n} @else {\n  <div class=\"kf-stat-tile__head\">\n    <!-- El label recibe la clase de tone adem\u00E1s del value: juntos forman\n      una sola unidad de lectura, y pintar solo el n\u00FAmero la romper\u00EDa. -->\n    <span\n      class=\"kf-stat-tile__label\"\n      [class.kf-stat-tile__label--ok]=\"tone() === 'ok'\"\n      [class.kf-stat-tile__label--warn]=\"tone() === 'warn'\"\n      [class.kf-stat-tile__label--error]=\"tone() === 'error'\"\n      [class.kf-stat-tile__label--info]=\"tone() === 'info'\"\n      >{{ label() }}</span\n    >\n    @if (icon(); as iconName) {\n      <span class=\"kf-stat-tile__icon\">\n        <kf-icon [name]=\"iconName\" size=\"sm\" />\n      </span>\n    }\n  </div>\n  @if (hasProjectedValue()) {\n    <!-- Slot para un valor que no es texto medido (ej. un `kf-badge` de\n      estado) \u2014 mismo bloque `__value`, sin las clases de tono, que en ese\n      caso las resuelve el propio contenido proyectado (el badge trae su\n      tono). -->\n    <span class=\"kf-stat-tile__value kf-stat-tile__value--projected\">\n      <ng-content select=\"[valueContent]\" />\n    </span>\n  } @else {\n    <span\n      class=\"kf-stat-tile__value\"\n      [class.kf-stat-tile__value--ok]=\"tone() === 'ok'\"\n      [class.kf-stat-tile__value--warn]=\"tone() === 'warn'\"\n      [class.kf-stat-tile__value--error]=\"tone() === 'error'\"\n      [class.kf-stat-tile__value--info]=\"tone() === 'info'\"\n      [class.kf-stat-tile__value--missing]=\"valueMissing()\"\n      >{{ value() }}</span\n    >\n  }\n\n  <!-- La l\u00EDnea se reserva con o sin nota: un tile m\u00E1s corto desalinea la\n    fila. El `title` deja disponible el texto completo, recortado a `noteLines`\n    l\u00EDneas (2 por defecto). -->\n  @if (noteText(); as note) {\n    <span\n      class=\"kf-stat-tile__note\"\n      [class.kf-stat-tile__note--empty]=\"noteIsPlaceholder()\"\n      [style.--kf-stat-tile-note-lines]=\"noteClamp()\"\n      [title]=\"note\"\n      >{{ note }}</span\n    >\n  }\n}\n", styles: [":host{display:flex;flex-direction:column;gap:var(--kf-space-xs);padding:var(--kf-space-md);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);background:var(--kf-color-white);height:100%;min-width:0}:host(.kf-stat-tile--cta){background:var(--kf-color-surface);gap:2px}:host(.kf-stat-tile--inline){flex-direction:row-reverse;align-items:baseline;height:auto;gap:6px;padding:0;border:none;border-radius:0;background:transparent}:host(.kf-stat-tile--inline) .kf-stat-tile__head{width:auto}.kf-stat-tile__head{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-xs)}.kf-stat-tile__label{font-size:var(--kf-font-size-label);color:var(--kf-color-text-muted)}.kf-stat-tile__icon{display:inline-flex;color:var(--kf-color-primary)}.kf-stat-tile__value{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-md);font-weight:700;color:var(--kf-color-ink)}.kf-stat-tile__value--projected{display:flex;align-items:center;font-size:initial;font-weight:initial;color:initial}.kf-stat-tile__value--ok,.kf-stat-tile__label--ok{color:var(--kf-color-success-strong)}.kf-stat-tile__value--warn,.kf-stat-tile__label--warn{color:var(--kf-color-warning-strong)}.kf-stat-tile__value--error,.kf-stat-tile__label--error{color:var(--kf-color-error-strong)}.kf-stat-tile__value--info,.kf-stat-tile__label--info{color:var(--kf-color-info-strong)}.kf-stat-tile__value--missing{font-family:var(--kf-font-body);font-size:var(--kf-font-size-body);font-weight:var(--kf-font-weight-body);font-style:italic;color:var(--kf-color-text-muted)}.kf-stat-tile__note{display:-webkit-box;-webkit-line-clamp:var(--kf-stat-tile-note-lines, 2);line-clamp:var(--kf-stat-tile-note-lines, 2);-webkit-box-orient:vertical;overflow:hidden;font-size:var(--kf-font-size-caption);color:var(--kf-color-text-muted);margin-top:auto}.kf-stat-tile__note--empty{font-style:italic;opacity:.75}.kf-stat-tile__cta-title{font-family:var(--kf-font-title);font-weight:700;color:var(--kf-color-ink)}.kf-stat-tile__cta-description{font-size:var(--kf-font-size-label);color:var(--kf-color-text-muted)}.kf-stat-tile__cta-action{margin-top:var(--kf-space-xs);font-size:var(--kf-font-size-label);font-weight:600}:host(.kf-stat-tile--interactive){cursor:pointer;text-align:start;transition:border-color .14s,background-color .14s,box-shadow .14s}@media(hover:hover){:host(.kf-stat-tile--interactive:hover){border-color:var(--kf-color-border-strong);background:var(--kf-color-primary-soft)}}:host(.kf-stat-tile--interactive[aria-pressed=\"true\"]){border-color:var(--kf-color-primary);box-shadow:var(--kf-stat-tile-ring)}:host(.kf-stat-tile--interactive:focus-visible){outline:none;box-shadow:var(--kf-shadow-focus)}@media(prefers-reduced-motion:reduce){:host(.kf-stat-tile--interactive){transition:none}}\n"] }]
+        }], propDecorators: { cta: [{ type: i0.Input, args: [{ isSignal: true, alias: "cta", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], note: [{ type: i0.Input, args: [{ isSignal: true, alias: "note", required: false }] }], noteLines: [{ type: i0.Input, args: [{ isSignal: true, alias: "noteLines", required: false }] }], notePlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "notePlaceholder", required: false }] }], valueMissing: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueMissing", required: false }] }], hasProjectedValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasProjectedValue", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], actionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionLabel", required: false }] }], actionHref: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionHref", required: false }] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], pressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "pressed", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }], tileClick: [{ type: i0.Output, args: ["tileClick"] }] } });
 
 /**
  * Pill con borde, en mayúsculas y con letter-spacing, pensada para indicadores
@@ -9230,12 +9271,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
  * switch hace que el valor llegue dos veces al consumidor: usar una sola de
  * las dos vías, o ignorar en el handler el eco que no cambia el valor.
  *
+ * `describedBy` recibe el `id` de un texto de ayuda externo (ej. el `<p>` de
+ * una fila de preferencias) y lo enlaza con `aria-describedby` del botón, para
+ * que el lector de pantalla lo anuncie junto al nombre y el estado. Sin valor,
+ * el atributo no se renderiza.
+ *
  * El color sale de roles (`--kf-color-primary` encendido,
  * `--kf-color-border-control` apagado) y el foco de `--kf-shadow-focus`; no
  * recibe colores.
  *
  *   <kf-switch label="Fijar indicadores" [(checked)]="pinned" />
  *   <kf-switch label="Mapa junto a la tabla" hideLabel size="sm" formControlName="splitMap" />
+ *   <kf-switch label="Alertas por correo" describedBy="mail-hint" [(checked)]="mail" />
+ *   <p id="mail-hint">Se envía un resumen cada hora.</p>
  */
 class Switch {
     /** Nombre accesible y texto visible (salvo con `hideLabel`). */
@@ -9246,6 +9294,9 @@ class Switch {
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     size = input('md', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** `id` del texto de ayuda que describe al interruptor (`aria-describedby`). */
+    describedBy = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
     /** Estado encendido, two-way: `[(checked)]="pinned"`. */
     checked = model(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
@@ -9279,13 +9330,13 @@ class Switch {
         this.disabledByForm.set(isDisabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Switch, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Switch, isStandalone: true, selector: "kf-switch", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Switch, isStandalone: true, selector: "kf-switch", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, describedBy: { classPropertyName: "describedBy", publicName: "describedBy", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => Switch),
                 multi: true,
             },
-        ], ngImport: i0, template: "<button\n  type=\"button\"\n  role=\"switch\"\n  class=\"kf-switch\"\n  [class.kf-switch--sm]=\"size() === 'sm'\"\n  [attr.aria-checked]=\"checked()\"\n  [attr.aria-label]=\"hideLabel() ? label() : null\"\n  [disabled]=\"isDisabled()\"\n  (click)=\"toggle()\"\n  (blur)=\"onBlur()\"\n>\n  <span class=\"kf-switch__track\" aria-hidden=\"true\">\n    <span class=\"kf-switch__thumb\"></span>\n  </span>\n  @if (!hideLabel()) {\n    <span class=\"kf-switch__label\">{{ label() }}</span>\n  }\n</button>\n", styles: [":host{display:inline-flex}.kf-switch{--kf-switch-track-width: 36px;--kf-switch-track-height: 20px;--kf-switch-thumb-size: 16px;--kf-switch-gap: 2px;display:inline-flex;align-items:center;gap:var(--kf-space-sm);margin:0;padding:0;border:none;background:transparent;font-family:var(--kf-font-body);font-size:var(--kf-font-size-body);color:var(--kf-color-text);text-align:start;cursor:pointer}.kf-switch--sm{--kf-switch-track-width: 28px;--kf-switch-track-height: 16px;--kf-switch-thumb-size: 12px;font-size:var(--kf-font-size-body-sm)}.kf-switch__track{position:relative;flex:none;box-sizing:border-box;width:var(--kf-switch-track-width);height:var(--kf-switch-track-height);border-radius:var(--kf-radius-pill);background:var(--kf-color-border-control);transition:background-color .14s}.kf-switch__thumb{position:absolute;top:var(--kf-switch-gap);left:var(--kf-switch-gap);width:var(--kf-switch-thumb-size);height:var(--kf-switch-thumb-size);border-radius:var(--kf-radius-pill);background:var(--kf-color-white);box-shadow:var(--kf-shadow-xs);transition:transform .14s}.kf-switch[aria-checked=true] .kf-switch__track{background:var(--kf-color-primary)}.kf-switch[aria-checked=true] .kf-switch__thumb{transform:translate(calc(var(--kf-switch-track-width) - var(--kf-switch-thumb-size) - 2 * var(--kf-switch-gap)))}.kf-switch:focus-visible{outline:none}.kf-switch:focus-visible .kf-switch__track{box-shadow:var(--kf-shadow-focus)}.kf-switch:disabled{cursor:not-allowed;color:var(--kf-color-text-muted)}.kf-switch:disabled .kf-switch__track{opacity:.5}.kf-switch__label{-webkit-user-select:none;user-select:none}@media(prefers-reduced-motion:reduce){.kf-switch__track,.kf-switch__thumb{transition:none}}@media(forced-colors:active){.kf-switch__track{background:ButtonText}.kf-switch[aria-checked=true] .kf-switch__track{background:Highlight}.kf-switch__thumb{background:ButtonFace;border:1px solid ButtonText}}\n"] });
+        ], ngImport: i0, template: "<button\n  type=\"button\"\n  role=\"switch\"\n  class=\"kf-switch\"\n  [class.kf-switch--sm]=\"size() === 'sm'\"\n  [attr.aria-checked]=\"checked()\"\n  [attr.aria-label]=\"hideLabel() ? label() : null\"\n  [attr.aria-describedby]=\"describedBy() || null\"\n  [disabled]=\"isDisabled()\"\n  (click)=\"toggle()\"\n  (blur)=\"onBlur()\"\n>\n  <span class=\"kf-switch__track\" aria-hidden=\"true\">\n    <span class=\"kf-switch__thumb\"></span>\n  </span>\n  @if (!hideLabel()) {\n    <span class=\"kf-switch__label\">{{ label() }}</span>\n  }\n</button>\n", styles: [":host{display:inline-flex}.kf-switch{--kf-switch-track-width: 36px;--kf-switch-track-height: 20px;--kf-switch-thumb-size: 16px;--kf-switch-gap: 2px;display:inline-flex;align-items:center;gap:var(--kf-space-sm);margin:0;padding:0;border:none;background:transparent;font-family:var(--kf-font-body);font-size:var(--kf-font-size-body);color:var(--kf-color-text);text-align:start;cursor:pointer}.kf-switch--sm{--kf-switch-track-width: 28px;--kf-switch-track-height: 16px;--kf-switch-thumb-size: 12px;font-size:var(--kf-font-size-body-sm)}.kf-switch__track{position:relative;flex:none;box-sizing:border-box;width:var(--kf-switch-track-width);height:var(--kf-switch-track-height);border-radius:var(--kf-radius-pill);background:var(--kf-color-border-control);transition:background-color .14s}.kf-switch__thumb{position:absolute;top:var(--kf-switch-gap);left:var(--kf-switch-gap);width:var(--kf-switch-thumb-size);height:var(--kf-switch-thumb-size);border-radius:var(--kf-radius-pill);background:var(--kf-color-white);box-shadow:var(--kf-shadow-xs);transition:transform .14s}.kf-switch[aria-checked=true] .kf-switch__track{background:var(--kf-color-primary)}.kf-switch[aria-checked=true] .kf-switch__thumb{transform:translate(calc(var(--kf-switch-track-width) - var(--kf-switch-thumb-size) - 2 * var(--kf-switch-gap)))}.kf-switch:focus-visible{outline:none}.kf-switch:focus-visible .kf-switch__track{box-shadow:var(--kf-shadow-focus)}.kf-switch:disabled{cursor:not-allowed;color:var(--kf-color-text-muted)}.kf-switch:disabled .kf-switch__track{opacity:.5}.kf-switch__label{-webkit-user-select:none;user-select:none}@media(prefers-reduced-motion:reduce){.kf-switch__track,.kf-switch__thumb{transition:none}}@media(forced-colors:active){.kf-switch__track{background:ButtonText}.kf-switch[aria-checked=true] .kf-switch__track{background:Highlight}.kf-switch__thumb{background:ButtonFace;border:1px solid ButtonText}}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Switch, decorators: [{
             type: Component,
@@ -9295,8 +9346,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                             useExisting: forwardRef(() => Switch),
                             multi: true,
                         },
-                    ], template: "<button\n  type=\"button\"\n  role=\"switch\"\n  class=\"kf-switch\"\n  [class.kf-switch--sm]=\"size() === 'sm'\"\n  [attr.aria-checked]=\"checked()\"\n  [attr.aria-label]=\"hideLabel() ? label() : null\"\n  [disabled]=\"isDisabled()\"\n  (click)=\"toggle()\"\n  (blur)=\"onBlur()\"\n>\n  <span class=\"kf-switch__track\" aria-hidden=\"true\">\n    <span class=\"kf-switch__thumb\"></span>\n  </span>\n  @if (!hideLabel()) {\n    <span class=\"kf-switch__label\">{{ label() }}</span>\n  }\n</button>\n", styles: [":host{display:inline-flex}.kf-switch{--kf-switch-track-width: 36px;--kf-switch-track-height: 20px;--kf-switch-thumb-size: 16px;--kf-switch-gap: 2px;display:inline-flex;align-items:center;gap:var(--kf-space-sm);margin:0;padding:0;border:none;background:transparent;font-family:var(--kf-font-body);font-size:var(--kf-font-size-body);color:var(--kf-color-text);text-align:start;cursor:pointer}.kf-switch--sm{--kf-switch-track-width: 28px;--kf-switch-track-height: 16px;--kf-switch-thumb-size: 12px;font-size:var(--kf-font-size-body-sm)}.kf-switch__track{position:relative;flex:none;box-sizing:border-box;width:var(--kf-switch-track-width);height:var(--kf-switch-track-height);border-radius:var(--kf-radius-pill);background:var(--kf-color-border-control);transition:background-color .14s}.kf-switch__thumb{position:absolute;top:var(--kf-switch-gap);left:var(--kf-switch-gap);width:var(--kf-switch-thumb-size);height:var(--kf-switch-thumb-size);border-radius:var(--kf-radius-pill);background:var(--kf-color-white);box-shadow:var(--kf-shadow-xs);transition:transform .14s}.kf-switch[aria-checked=true] .kf-switch__track{background:var(--kf-color-primary)}.kf-switch[aria-checked=true] .kf-switch__thumb{transform:translate(calc(var(--kf-switch-track-width) - var(--kf-switch-thumb-size) - 2 * var(--kf-switch-gap)))}.kf-switch:focus-visible{outline:none}.kf-switch:focus-visible .kf-switch__track{box-shadow:var(--kf-shadow-focus)}.kf-switch:disabled{cursor:not-allowed;color:var(--kf-color-text-muted)}.kf-switch:disabled .kf-switch__track{opacity:.5}.kf-switch__label{-webkit-user-select:none;user-select:none}@media(prefers-reduced-motion:reduce){.kf-switch__track,.kf-switch__thumb{transition:none}}@media(forced-colors:active){.kf-switch__track{background:ButtonText}.kf-switch[aria-checked=true] .kf-switch__track{background:Highlight}.kf-switch__thumb{background:ButtonFace;border:1px solid ButtonText}}\n"] }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], hideLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }] } });
+                    ], template: "<button\n  type=\"button\"\n  role=\"switch\"\n  class=\"kf-switch\"\n  [class.kf-switch--sm]=\"size() === 'sm'\"\n  [attr.aria-checked]=\"checked()\"\n  [attr.aria-label]=\"hideLabel() ? label() : null\"\n  [attr.aria-describedby]=\"describedBy() || null\"\n  [disabled]=\"isDisabled()\"\n  (click)=\"toggle()\"\n  (blur)=\"onBlur()\"\n>\n  <span class=\"kf-switch__track\" aria-hidden=\"true\">\n    <span class=\"kf-switch__thumb\"></span>\n  </span>\n  @if (!hideLabel()) {\n    <span class=\"kf-switch__label\">{{ label() }}</span>\n  }\n</button>\n", styles: [":host{display:inline-flex}.kf-switch{--kf-switch-track-width: 36px;--kf-switch-track-height: 20px;--kf-switch-thumb-size: 16px;--kf-switch-gap: 2px;display:inline-flex;align-items:center;gap:var(--kf-space-sm);margin:0;padding:0;border:none;background:transparent;font-family:var(--kf-font-body);font-size:var(--kf-font-size-body);color:var(--kf-color-text);text-align:start;cursor:pointer}.kf-switch--sm{--kf-switch-track-width: 28px;--kf-switch-track-height: 16px;--kf-switch-thumb-size: 12px;font-size:var(--kf-font-size-body-sm)}.kf-switch__track{position:relative;flex:none;box-sizing:border-box;width:var(--kf-switch-track-width);height:var(--kf-switch-track-height);border-radius:var(--kf-radius-pill);background:var(--kf-color-border-control);transition:background-color .14s}.kf-switch__thumb{position:absolute;top:var(--kf-switch-gap);left:var(--kf-switch-gap);width:var(--kf-switch-thumb-size);height:var(--kf-switch-thumb-size);border-radius:var(--kf-radius-pill);background:var(--kf-color-white);box-shadow:var(--kf-shadow-xs);transition:transform .14s}.kf-switch[aria-checked=true] .kf-switch__track{background:var(--kf-color-primary)}.kf-switch[aria-checked=true] .kf-switch__thumb{transform:translate(calc(var(--kf-switch-track-width) - var(--kf-switch-thumb-size) - 2 * var(--kf-switch-gap)))}.kf-switch:focus-visible{outline:none}.kf-switch:focus-visible .kf-switch__track{box-shadow:var(--kf-shadow-focus)}.kf-switch:disabled{cursor:not-allowed;color:var(--kf-color-text-muted)}.kf-switch:disabled .kf-switch__track{opacity:.5}.kf-switch__label{-webkit-user-select:none;user-select:none}@media(prefers-reduced-motion:reduce){.kf-switch__track,.kf-switch__thumb{transition:none}}@media(forced-colors:active){.kf-switch__track{background:ButtonText}.kf-switch[aria-checked=true] .kf-switch__track{background:Highlight}.kf-switch__thumb{background:ButtonFace;border:1px solid ButtonText}}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], hideLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], describedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "describedBy", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }] } });
 
 /**
  * Barra de tabs subrayada: un indicador se desliza hasta la pestaña activa.
@@ -9428,6 +9479,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
  *
  *   <kf-textarea label="Detalle" formControlName="detail" [maxRows]="12" />
  *
+ * `maxlength` limita el texto (`maxlength` nativo, entero positivo) y
+ * `showCounter` agrega el contador «0 / 500» pegado bajo el campo, en la misma
+ * fila que el `hint`/`errorMessage`. Ambos son opt-in: sin ellos el campo no
+ * cambia. El contador sin `maxlength` no se muestra (no hay tope que contar).
+ * Visualmente pasa a rojo al llegar al tope; para lectores de pantalla solo
+ * anuncia (`aria-live="polite"`) al cruzar el 90 % y al llegar al límite, no
+ * en cada tecla.
+ *
+ *   <kf-textarea label="Motivo" formControlName="reason" [maxlength]="500" showCounter />
+ *
  * `invalid` + `errorMessage` y `readonly`/`disabled` siguen el mismo
  * contrato que `kf-input` — ver su JSDoc para la diferencia entre ambos
  * estados.
@@ -9461,9 +9522,14 @@ class Textarea {
     /** Filas máximas antes de que el contenido pase a scroll interno en vez de seguir creciendo. */
     maxRows = input(6, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "maxRows" }] : /* istanbul ignore next */ []));
+    /** Largo máximo del texto (`maxlength` nativo), entero positivo. */
+    maxlength = input(null, { ...(ngDevMode ? { debugName: "maxlength" } : /* istanbul ignore next */ {}), transform: toMaxLength });
+    /** Muestra el contador «n / maxlength» bajo el campo. Requiere `maxlength`. */
+    showCounter = input(false, { ...(ngDevMode ? { debugName: "showCounter" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     textareaId = `kf-textarea-${Textarea.nextId++}`;
     hintId = `${this.textareaId}-hint`;
     errorId = `${this.textareaId}-error`;
+    counterId = `${this.textareaId}-counter`;
     value = signal('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     focused = signal(false, /* @ts-ignore */
@@ -9474,6 +9540,38 @@ class Textarea {
     /** Disabled real: por input() directo o por el FormControl asociado. */
     isDisabled = computed(() => this.disabled() || this.disabledByForm(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    counterVisible = computed(() => this.showCounter() && this.maxlength() !== null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "counterVisible" }] : /* istanbul ignore next */ []));
+    atLimit = computed(() => {
+        const max = this.maxlength();
+        return max !== null && this.value().length >= max;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "atLimit" }] : /* istanbul ignore next */ []));
+    /**
+     * Texto del `aria-live`: cambia solo al cruzar un umbral (90 % y tope), así
+     * el lector no lee cada carácter escrito cerca del límite.
+     */
+    counterAnnouncement = computed(() => {
+        const max = this.maxlength();
+        if (max === null) {
+            return '';
+        }
+        const length = this.value().length;
+        if (length >= max) {
+            return `Límite de ${max} caracteres alcanzado.`;
+        }
+        return length >= Math.ceil(max * 0.9) ? 'Queda menos del 10 % de caracteres disponibles.' : '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "counterAnnouncement" }] : /* istanbul ignore next */ []));
+    /** Hint o error, más el contador cuando se muestra. */
+    describedBy = computed(() => {
+        const ids = [
+            this.errorMessage() ? this.errorId : this.hint() ? this.hintId : null,
+            this.counterVisible() ? this.counterId : null,
+        ].filter((id) => id !== null);
+        return ids.length ? ids.join(' ') : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
     onChange = () => { };
     onTouched = () => { };
     ngAfterViewInit() {
@@ -9536,24 +9634,24 @@ class Textarea {
         el.style.overflowY = el.scrollHeight > maxHeight ? 'auto' : 'hidden';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Textarea, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Textarea, isStandalone: true, selector: "kf-textarea", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, minRows: { classPropertyName: "minRows", publicName: "minRows", isSignal: true, isRequired: false, transformFunction: null }, maxRows: { classPropertyName: "maxRows", publicName: "maxRows", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Textarea, isStandalone: true, selector: "kf-textarea", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, minRows: { classPropertyName: "minRows", publicName: "minRows", isSignal: true, isRequired: false, transformFunction: null }, maxRows: { classPropertyName: "maxRows", publicName: "maxRows", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, showCounter: { classPropertyName: "showCounter", publicName: "showCounter", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => Textarea),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "nativeTextarea", first: true, predicate: ["nativeTextarea"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (label()) {\n  <kf-field-label [for]=\"textareaId\" [required]=\"required()\">{{ label() }}</kf-field-label>\n}\n<textarea\n  #nativeTextarea\n  [id]=\"textareaId\"\n  class=\"kf-textarea__control\"\n  [class.kf-textarea__control--focused]=\"focused()\"\n  [class.kf-textarea__control--invalid]=\"invalid()\"\n  [class.kf-textarea__control--readonly]=\"readonly()\"\n  [placeholder]=\"placeholder()\"\n  [disabled]=\"isDisabled()\"\n  [required]=\"required()\"\n  [attr.readonly]=\"readonly() ? true : null\"\n  [attr.aria-describedby]=\"errorMessage() ? errorId : hint() ? hintId : null\"\n  [attr.aria-invalid]=\"invalid() ? true : null\"\n  [value]=\"value()\"\n  (input)=\"onInput(nativeTextarea.value)\"\n  (blur)=\"onBlur()\"\n  (focus)=\"focused.set(true)\"\n></textarea>\n@if (errorMessage(); as message) {\n  <span class=\"kf-textarea__error kf-field-error\" [id]=\"errorId\" role=\"alert\">{{ message }}</span>\n} @else if (hint()) {\n  <span class=\"kf-textarea__hint kf-field-hint\" [id]=\"hintId\">{{ hint() }}</span>\n}\n", styles: [".kf-field-hint{font-size:.75rem;color:var(--kf-color-text-muted)}.kf-field-error{display:flex;align-items:center;gap:var(--kf-space-xs);font-size:.75rem;font-weight:600;color:var(--kf-color-error-strong)}:host{display:flex;flex-direction:column;gap:var(--kf-space-xs);font-family:var(--kf-font-body)}.kf-textarea__control{resize:none;width:100%;min-width:0;box-sizing:border-box;border:1px solid var(--kf-color-border-control);border-radius:var(--kf-radius-sm);background:var(--kf-color-surface);color:var(--kf-color-text);font:inherit;padding:var(--kf-space-sm);transition:background .14s,border-color .14s,box-shadow .14s}.kf-textarea__control::placeholder{color:var(--kf-color-text-muted)}.kf-textarea__control--focused{background:var(--kf-color-white);border-color:var(--kf-color-primary);box-shadow:var(--kf-shadow-focus);outline:none}.kf-textarea__control--invalid{border-color:var(--kf-color-error)}.kf-textarea__control--invalid.kf-textarea__control--focused{box-shadow:var(--kf-shadow-focus-error)}.kf-textarea__control:disabled{opacity:.5;cursor:not-allowed}.kf-textarea__control--readonly{background:var(--kf-color-gray-100);cursor:default}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: FieldLabel, selector: "kf-field-label", inputs: ["for", "required", "visuallyHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "nativeTextarea", first: true, predicate: ["nativeTextarea"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (label()) {\n  <kf-field-label [for]=\"textareaId\" [required]=\"required()\">{{ label() }}</kf-field-label>\n}\n<textarea\n  #nativeTextarea\n  [id]=\"textareaId\"\n  class=\"kf-textarea__control\"\n  [class.kf-textarea__control--focused]=\"focused()\"\n  [class.kf-textarea__control--invalid]=\"invalid()\"\n  [class.kf-textarea__control--readonly]=\"readonly()\"\n  [placeholder]=\"placeholder()\"\n  [disabled]=\"isDisabled()\"\n  [required]=\"required()\"\n  [attr.readonly]=\"readonly() ? true : null\"\n  [attr.maxlength]=\"maxlength()\"\n  [attr.aria-describedby]=\"describedBy()\"\n  [attr.aria-invalid]=\"invalid() ? true : null\"\n  [value]=\"value()\"\n  (input)=\"onInput(nativeTextarea.value)\"\n  (blur)=\"onBlur()\"\n  (focus)=\"focused.set(true)\"\n></textarea>\n<ng-template #feedback>\n  @if (errorMessage(); as message) {\n    <span class=\"kf-textarea__error kf-field-error\" [id]=\"errorId\" role=\"alert\">{{ message }}</span>\n  } @else if (hint()) {\n    <span class=\"kf-textarea__hint kf-field-hint\" [id]=\"hintId\">{{ hint() }}</span>\n  }\n</ng-template>\n@if (counterVisible()) {\n  <div class=\"kf-textarea__footer\">\n    <ng-container [ngTemplateOutlet]=\"feedback\" />\n    <span\n      class=\"kf-textarea__counter kf-field-hint\"\n      [class.kf-textarea__counter--limit]=\"atLimit()\"\n      [id]=\"counterId\"\n      >{{ value().length }} / {{ maxlength() }}</span\n    >\n  </div>\n  <span class=\"kf-sr-only\" aria-live=\"polite\" aria-atomic=\"true\">{{ counterAnnouncement() }}</span>\n} @else {\n  <ng-container [ngTemplateOutlet]=\"feedback\" />\n}\n", styles: [".kf-field-hint{font-size:.75rem;color:var(--kf-color-text-muted)}.kf-field-error{display:flex;align-items:center;gap:var(--kf-space-xs);font-size:.75rem;font-weight:600;color:var(--kf-color-error-strong)}.kf-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}:host{display:flex;flex-direction:column;gap:var(--kf-space-xs);font-family:var(--kf-font-body)}.kf-textarea__control{resize:none;width:100%;min-width:0;box-sizing:border-box;border:1px solid var(--kf-color-border-control);border-radius:var(--kf-radius-sm);background:var(--kf-color-surface);color:var(--kf-color-text);font:inherit;padding:var(--kf-space-sm);transition:background .14s,border-color .14s,box-shadow .14s}.kf-textarea__control::placeholder{color:var(--kf-color-text-muted)}.kf-textarea__control--focused{background:var(--kf-color-white);border-color:var(--kf-color-primary);box-shadow:var(--kf-shadow-focus);outline:none}.kf-textarea__control--invalid{border-color:var(--kf-color-error)}.kf-textarea__control--invalid.kf-textarea__control--focused{box-shadow:var(--kf-shadow-focus-error)}.kf-textarea__control:disabled{opacity:.5;cursor:not-allowed}.kf-textarea__control--readonly{background:var(--kf-color-gray-100);cursor:default}.kf-textarea__footer{display:flex;align-items:flex-start;gap:var(--kf-space-sm)}.kf-textarea__footer>.kf-textarea__hint,.kf-textarea__footer>.kf-textarea__error{flex:1 1 auto;min-width:0}.kf-textarea__counter{flex:none;margin-inline-start:auto;white-space:nowrap;font-variant-numeric:tabular-nums}.kf-textarea__counter--limit{font-weight:600;color:var(--kf-color-error-strong)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: FieldLabel, selector: "kf-field-label", inputs: ["for", "required", "visuallyHidden"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Textarea, decorators: [{
             type: Component,
-            args: [{ selector: 'kf-textarea', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, FieldLabel], providers: [
+            args: [{ selector: 'kf-textarea', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, FieldLabel, NgTemplateOutlet], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => Textarea),
                             multi: true,
                         },
-                    ], template: "@if (label()) {\n  <kf-field-label [for]=\"textareaId\" [required]=\"required()\">{{ label() }}</kf-field-label>\n}\n<textarea\n  #nativeTextarea\n  [id]=\"textareaId\"\n  class=\"kf-textarea__control\"\n  [class.kf-textarea__control--focused]=\"focused()\"\n  [class.kf-textarea__control--invalid]=\"invalid()\"\n  [class.kf-textarea__control--readonly]=\"readonly()\"\n  [placeholder]=\"placeholder()\"\n  [disabled]=\"isDisabled()\"\n  [required]=\"required()\"\n  [attr.readonly]=\"readonly() ? true : null\"\n  [attr.aria-describedby]=\"errorMessage() ? errorId : hint() ? hintId : null\"\n  [attr.aria-invalid]=\"invalid() ? true : null\"\n  [value]=\"value()\"\n  (input)=\"onInput(nativeTextarea.value)\"\n  (blur)=\"onBlur()\"\n  (focus)=\"focused.set(true)\"\n></textarea>\n@if (errorMessage(); as message) {\n  <span class=\"kf-textarea__error kf-field-error\" [id]=\"errorId\" role=\"alert\">{{ message }}</span>\n} @else if (hint()) {\n  <span class=\"kf-textarea__hint kf-field-hint\" [id]=\"hintId\">{{ hint() }}</span>\n}\n", styles: [".kf-field-hint{font-size:.75rem;color:var(--kf-color-text-muted)}.kf-field-error{display:flex;align-items:center;gap:var(--kf-space-xs);font-size:.75rem;font-weight:600;color:var(--kf-color-error-strong)}:host{display:flex;flex-direction:column;gap:var(--kf-space-xs);font-family:var(--kf-font-body)}.kf-textarea__control{resize:none;width:100%;min-width:0;box-sizing:border-box;border:1px solid var(--kf-color-border-control);border-radius:var(--kf-radius-sm);background:var(--kf-color-surface);color:var(--kf-color-text);font:inherit;padding:var(--kf-space-sm);transition:background .14s,border-color .14s,box-shadow .14s}.kf-textarea__control::placeholder{color:var(--kf-color-text-muted)}.kf-textarea__control--focused{background:var(--kf-color-white);border-color:var(--kf-color-primary);box-shadow:var(--kf-shadow-focus);outline:none}.kf-textarea__control--invalid{border-color:var(--kf-color-error)}.kf-textarea__control--invalid.kf-textarea__control--focused{box-shadow:var(--kf-shadow-focus-error)}.kf-textarea__control:disabled{opacity:.5;cursor:not-allowed}.kf-textarea__control--readonly{background:var(--kf-color-gray-100);cursor:default}\n"] }]
-        }], propDecorators: { nativeTextarea: [{ type: i0.ViewChild, args: ['nativeTextarea', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], minRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "minRows", required: false }] }], maxRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRows", required: false }] }] } });
+                    ], template: "@if (label()) {\n  <kf-field-label [for]=\"textareaId\" [required]=\"required()\">{{ label() }}</kf-field-label>\n}\n<textarea\n  #nativeTextarea\n  [id]=\"textareaId\"\n  class=\"kf-textarea__control\"\n  [class.kf-textarea__control--focused]=\"focused()\"\n  [class.kf-textarea__control--invalid]=\"invalid()\"\n  [class.kf-textarea__control--readonly]=\"readonly()\"\n  [placeholder]=\"placeholder()\"\n  [disabled]=\"isDisabled()\"\n  [required]=\"required()\"\n  [attr.readonly]=\"readonly() ? true : null\"\n  [attr.maxlength]=\"maxlength()\"\n  [attr.aria-describedby]=\"describedBy()\"\n  [attr.aria-invalid]=\"invalid() ? true : null\"\n  [value]=\"value()\"\n  (input)=\"onInput(nativeTextarea.value)\"\n  (blur)=\"onBlur()\"\n  (focus)=\"focused.set(true)\"\n></textarea>\n<ng-template #feedback>\n  @if (errorMessage(); as message) {\n    <span class=\"kf-textarea__error kf-field-error\" [id]=\"errorId\" role=\"alert\">{{ message }}</span>\n  } @else if (hint()) {\n    <span class=\"kf-textarea__hint kf-field-hint\" [id]=\"hintId\">{{ hint() }}</span>\n  }\n</ng-template>\n@if (counterVisible()) {\n  <div class=\"kf-textarea__footer\">\n    <ng-container [ngTemplateOutlet]=\"feedback\" />\n    <span\n      class=\"kf-textarea__counter kf-field-hint\"\n      [class.kf-textarea__counter--limit]=\"atLimit()\"\n      [id]=\"counterId\"\n      >{{ value().length }} / {{ maxlength() }}</span\n    >\n  </div>\n  <span class=\"kf-sr-only\" aria-live=\"polite\" aria-atomic=\"true\">{{ counterAnnouncement() }}</span>\n} @else {\n  <ng-container [ngTemplateOutlet]=\"feedback\" />\n}\n", styles: [".kf-field-hint{font-size:.75rem;color:var(--kf-color-text-muted)}.kf-field-error{display:flex;align-items:center;gap:var(--kf-space-xs);font-size:.75rem;font-weight:600;color:var(--kf-color-error-strong)}.kf-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}:host{display:flex;flex-direction:column;gap:var(--kf-space-xs);font-family:var(--kf-font-body)}.kf-textarea__control{resize:none;width:100%;min-width:0;box-sizing:border-box;border:1px solid var(--kf-color-border-control);border-radius:var(--kf-radius-sm);background:var(--kf-color-surface);color:var(--kf-color-text);font:inherit;padding:var(--kf-space-sm);transition:background .14s,border-color .14s,box-shadow .14s}.kf-textarea__control::placeholder{color:var(--kf-color-text-muted)}.kf-textarea__control--focused{background:var(--kf-color-white);border-color:var(--kf-color-primary);box-shadow:var(--kf-shadow-focus);outline:none}.kf-textarea__control--invalid{border-color:var(--kf-color-error)}.kf-textarea__control--invalid.kf-textarea__control--focused{box-shadow:var(--kf-shadow-focus-error)}.kf-textarea__control:disabled{opacity:.5;cursor:not-allowed}.kf-textarea__control--readonly{background:var(--kf-color-gray-100);cursor:default}.kf-textarea__footer{display:flex;align-items:flex-start;gap:var(--kf-space-sm)}.kf-textarea__footer>.kf-textarea__hint,.kf-textarea__footer>.kf-textarea__error{flex:1 1 auto;min-width:0}.kf-textarea__counter{flex:none;margin-inline-start:auto;white-space:nowrap;font-variant-numeric:tabular-nums}.kf-textarea__counter--limit{font-weight:600;color:var(--kf-color-error-strong)}\n"] }]
+        }], propDecorators: { nativeTextarea: [{ type: i0.ViewChild, args: ['nativeTextarea', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], minRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "minRows", required: false }] }], maxRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRows", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], showCounter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCounter", required: false }] }] } });
 
 /**
  * Da forma al valor de un campo MIENTRAS el usuario escribe — ej.