valtech-components 4.0.24 → 4.0.26

package/fesm2022/valtech-components.mjs

@@ -25,7 +25,7 @@ import { getApps, getApp, initializeApp as initializeApp$1 } from 'firebase/app'
 import * as i2$1 from '@ionic/angular/standalone';
 import { AlertController, IonAvatar, IonCard, IonIcon, IonButton, IonSpinner, IonText, IonModal, IonHeader, IonToolbar, IonContent, IonButtons, IonTitle, IonProgressBar, IonSkeletonText, IonFab, IonFabButton, IonFabList, IonLabel, IonCardContent, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCheckbox, IonRadio, IonRadioGroup, IonTextarea, IonDatetime, IonSelect, IonSelectOption, IonPopover, IonList, IonItem, IonInput, IonRange, IonSearchbar, IonSegment, IonSegmentButton, IonToggle, IonRippleEffect, IonAccordion, IonAccordionGroup, IonTabBar, IonTabButton, IonBadge, IonBreadcrumb, IonBreadcrumbs, IonChip, IonNote, IonDatetimeButton, ToastController as ToastController$1, IonCol, IonRow, IonRefresher, IonRefresherContent, IonMenuButton, IonFooter, IonListHeader, IonInfiniteScroll, IonInfiniteScrollContent, IonGrid, MenuController, IonMenu, IonMenuToggle, IonSplitPane } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
-import { addOutline, addCircleOutline, alertOutline, alertCircleOutline, arrowBackOutline, arrowForwardOutline, arrowDownOutline, settings, settingsOutline, checkmarkCircleOutline, ellipsisHorizontalOutline, notifications, notificationsOutline, openOutline, closeOutline, chatbubblesOutline, shareOutline, heart, heartOutline, home, homeOutline, eyeOffOutline, eyeOutline, scanOutline, chevronDownOutline, chevronForwardOutline, checkmarkOutline, clipboardOutline, copyOutline, filterOutline, locationOutline, calendarOutline, businessOutline, logoTwitter, logoInstagram, logoLinkedin, logoYoutube, logoTiktok, logoFacebook, logoGoogle, createOutline, trashOutline, playOutline, peopleOutline, phonePortraitOutline, refreshOutline, documentTextOutline, lockClosedOutline, cloudUploadOutline, informationCircleOutline, logoNpm, removeOutline, optionsOutline, personOutline, shieldCheckmarkOutline, keyOutline, desktopOutline, logOutOutline, cloudDownloadOutline, cloudOutline, gitBranchOutline, layersOutline, serverOutline, warningOutline, bulbOutline, lockOpenOutline, diamondOutline, add, close, share, create, trash, star, camera, mic, send, downloadOutline, chevronDown, language, globeOutline, checkmark, list, grid, apps, menu, search, person, helpCircle, informationCircle, documentText, mail, calendar, folder, chevronForward, ellipsisHorizontal, chevronBack, playBack, playForward, ellipse, starOutline, starHalf, heartHalf, checkmarkCircle, timeOutline, flag, trendingUp, trendingDown, remove, analytics, people, cash, cart, eye, chatbubbleOutline, thumbsUpOutline, thumbsUp, happyOutline, happy, sadOutline, sad, chevronUp, pin, pencil, callOutline, logoWhatsapp, paperPlaneOutline, mailOutline, chevronDownCircleOutline, closeCircle, alertCircle, logoApple, logoMicrosoft, linkOutline, unlinkOutline, cloudOfflineOutline, documentOutline, attachOutline, cameraOutline, closeCircleOutline, imageOutline, chevronBackOutline, sendOutline, chatbubbleEllipsesOutline, swapVerticalOutline, chevronUpOutline, searchOutline, cartOutline, chatbubble, compass, compassOutline, gridOutline, listOutline, folderOutline, documents, documentsOutline, statsChart, statsChartOutline, laptopOutline, swapHorizontalOutline, notificationsOffOutline, alarmOutline, chatboxEllipsesOutline, checkmarkDoneOutline, cogOutline, shareSocialOutline, helpCircleOutline, menuOutline, stopCircleOutline, videocamOffOutline } from 'ionicons/icons';
+import { addOutline, addCircleOutline, alertOutline, alertCircleOutline, arrowBackOutline, arrowForwardOutline, arrowDownOutline, settings, settingsOutline, checkmarkCircleOutline, ellipsisHorizontalOutline, notifications, notificationsOutline, openOutline, closeOutline, chatbubblesOutline, shareOutline, heart, heartOutline, home, homeOutline, eyeOffOutline, eyeOutline, scanOutline, chevronDownOutline, chevronForwardOutline, checkmarkOutline, clipboardOutline, copyOutline, filterOutline, locationOutline, calendarOutline, businessOutline, logoTwitter, logoInstagram, logoLinkedin, logoYoutube, logoTiktok, logoFacebook, logoGoogle, createOutline, trashOutline, playOutline, peopleOutline, phonePortraitOutline, refreshOutline, documentTextOutline, lockClosedOutline, cloudUploadOutline, informationCircleOutline, logoNpm, removeOutline, optionsOutline, personOutline, shieldCheckmarkOutline, keyOutline, desktopOutline, logOutOutline, cloudDownloadOutline, cloudOutline, gitBranchOutline, layersOutline, serverOutline, warningOutline, bulbOutline, lockOpenOutline, diamondOutline, add, close, share, create, trash, star, camera, mic, send, downloadOutline, chevronDown, language, globeOutline, checkmark, list, grid, apps, menu, search, person, helpCircle, informationCircle, documentText, mail, calendar, folder, chevronForward, ellipsisHorizontal, chevronBack, playBack, playForward, ellipse, starOutline, starHalf, heartHalf, checkmarkCircle, timeOutline, flag, trendingUp, trendingDown, remove, analytics, people, cash, cart, eye, chatbubbleOutline, thumbsUpOutline, thumbsUp, happyOutline, happy, sadOutline, sad, chevronUp, pin, pencil, callOutline, logoWhatsapp, paperPlaneOutline, mailOutline, chevronDownCircleOutline, closeCircle, alertCircle, logoApple, logoMicrosoft, linkOutline, unlinkOutline, cloudOfflineOutline, documentOutline, attachOutline, cameraOutline, closeCircleOutline, imageOutline, chevronBackOutline, sendOutline, chatbubbleEllipsesOutline, swapVerticalOutline, chevronUpOutline, searchOutline, cartOutline, chatbubble, compass, compassOutline, gridOutline, listOutline, folderOutline, documents, documentsOutline, statsChart, statsChartOutline, laptopOutline, swapHorizontalOutline, codeSlashOutline, notificationsOffOutline, alarmOutline, chatboxEllipsesOutline, checkmarkDoneOutline, cogOutline, shareSocialOutline, helpCircleOutline, menuOutline, stopCircleOutline, videocamOffOutline } from 'ionicons/icons';
 import { Browser } from '@capacitor/browser';
 import * as i1$6 from '@angular/platform-browser';
 import { DomSanitizer, Meta, Title } from '@angular/platform-browser';
@@ -56,7 +56,7 @@ import { BrowserMultiFormatReader } from '@zxing/browser';
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-const VERSION = '4.0.24';
+const VERSION = '4.0.26';
 
 // Control de estado de refresco (singleton a nivel de módulo)
 let isRefreshing = false;
@@ -5499,7 +5499,7 @@ class MessagingService {
             const token = await this.requestPermission();
             if (!token) {
                 // requestPermission devuelve null tanto por permiso denegado como por
-                // fallo al obtener el token. Distinguimos por el estado del permiso.
+                // fallo al obtener el token. Distivdsmos por el estado del permiso.
                 const permission = this.getPermissionState();
                 if (permission === 'denied' || permission === 'default') {
                     return { status: 'denied', reason: 'Permiso de notificaciones denegado' };
@@ -18493,7 +18493,7 @@ class SearchSelectorComponent {
         <ion-select-option [value]="o.id">{{ o.name }}</ion-select-option>
       }
     </ion-select>
-  `, isInline: true, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-padding: 16px;--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}ion-select{--padding-top: 0;--padding-bottom: 0;--padding-start: 0;--padding-end: 0;min-height:auto;border:.0625rem solid var(--ion-color-medium);border-radius:.625rem;margin-top:.375rem;padding-top:.5rem!important;padding-bottom:.5rem!important;padding-inline-start:1rem!important;padding-inline-end:.625rem!important}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }] }); }
+  `, isInline: true, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-padding: 16px;--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}ion-select{--padding-top: 0;--padding-bottom: 0;--padding-start: 0;--padding-end: 0;min-height:auto;border:.0625rem solid var(--ion-color-medium);border-radius:1.5rem;margin-top:.375rem;padding-top:.5rem!important;padding-bottom:.5rem!important;padding-inline-start:1rem!important;padding-inline-end:.625rem!important}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SearchSelectorComponent, decorators: [{
             type: Component,
@@ -18511,7 +18511,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         <ion-select-option [value]="o.id">{{ o.name }}</ion-select-option>
       }
     </ion-select>
-  `, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-padding: 16px;--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}ion-select{--padding-top: 0;--padding-bottom: 0;--padding-start: 0;--padding-end: 0;min-height:auto;border:.0625rem solid var(--ion-color-medium);border-radius:.625rem;margin-top:.375rem;padding-top:.5rem!important;padding-bottom:.5rem!important;padding-inline-start:1rem!important;padding-inline-end:.625rem!important}\n"] }]
+  `, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-padding: 16px;--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}ion-select{--padding-top: 0;--padding-bottom: 0;--padding-start: 0;--padding-end: 0;min-height:auto;border:.0625rem solid var(--ion-color-medium);border-radius:1.5rem;margin-top:.375rem;padding-top:.5rem!important;padding-bottom:.5rem!important;padding-inline-start:1rem!important;padding-inline-end:.625rem!important}\n"] }]
         }], propDecorators: { preset: [{
                 type: Input
             }], props: [{
@@ -29795,7 +29795,7 @@ class ModalShellComponent {
       <ion-toolbar>
         @if (showClose()) {
           <ion-buttons slot="end">
-            <ion-button fill="clear" color="dark" (click)="onClose()">
+            <ion-button fill="clear" color="dark" shape="round" (click)="onClose()">
               <strong>{{ resolvedCloseLabel() }}</strong>
             </ion-button>
           </ion-buttons>
@@ -29820,7 +29820,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       <ion-toolbar>
         @if (showClose()) {
           <ion-buttons slot="end">
-            <ion-button fill="clear" color="dark" (click)="onClose()">
+            <ion-button fill="clear" color="dark" shape="round" (click)="onClose()">
               <strong>{{ resolvedCloseLabel() }}</strong>
             </ion-button>
           </ion-buttons>
@@ -33391,7 +33391,7 @@ class ChangePasswordModalComponent {
                         },
                     ],
                     actions: {
-                        ...button({ text: '', type: 'submit', fill: 'solid', expand: 'block' }),
+                        ...button({ text: '', type: 'submit', fill: 'solid', expand: 'block', shape: 'round' }),
                         token: 'set-submit',
                         textKey: 'setPasswordSubmit',
                     },
@@ -33425,7 +33425,7 @@ class ChangePasswordModalComponent {
                     },
                 ],
                 actions: {
-                    ...button({ text: '', type: 'submit', fill: 'solid', expand: 'block' }),
+                    ...button({ text: '', type: 'submit', fill: 'solid', expand: 'block', shape: 'round' }),
                     token: 'change-submit',
                     textKey: 'changePasswordSubmit',
                 },
@@ -33564,11 +33564,11 @@ class ChangePasswordModalComponent {
         this.toast.show({ message, duration: 3500 });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChangePasswordModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ChangePasswordModalComponent, isStandalone: true, selector: "val-change-password-modal", inputs: { isOpen: "isOpen" }, outputs: { changed: "changed", dismissed: "dismissed" }, ngImport: i0, template: "<ion-modal [isOpen]=\"isOpen\" (didDismiss)=\"close()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" color=\"dark\" (click)=\"close()\">\n            <strong>{{ t('close') }}</strong>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        @if (mode() === 'loading') {\n        <div class=\"modal-loading\">\n          <ion-spinner name=\"crescent\"></ion-spinner>\n        </div>\n        } @else {\n        <val-form [props]=\"formProps()\" (onSubmit)=\"submitHandler($event)\" />\n        }\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".modal-form-section{display:flex;flex-direction:column;gap:16px;max-width:420px;margin:0 auto;padding-top:8px}.modal-loading{display:flex;justify-content:center;padding:40px 0}\n"], dependencies: [{ kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonModal, selector: "ion-modal" }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: FormComponent, selector: "val-form", inputs: ["props"], outputs: ["onSubmit", "onInvalid", "onSelectChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ChangePasswordModalComponent, isStandalone: true, selector: "val-change-password-modal", inputs: { isOpen: "isOpen" }, outputs: { changed: "changed", dismissed: "dismissed" }, ngImport: i0, template: "<ion-modal [isOpen]=\"isOpen\" (didDismiss)=\"close()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" color=\"dark\" shape=\"round\" (click)=\"close()\">\n            <strong>{{ t('close') }}</strong>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        @if (mode() === 'loading') {\n        <div class=\"modal-loading\">\n          <ion-spinner name=\"crescent\"></ion-spinner>\n        </div>\n        } @else {\n        <val-form [props]=\"formProps()\" (onSubmit)=\"submitHandler($event)\" />\n        }\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".modal-form-section{display:flex;flex-direction:column;gap:16px;max-width:420px;margin:0 auto;padding-top:8px}.modal-loading{display:flex;justify-content:center;padding:40px 0}\n"], dependencies: [{ kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonModal, selector: "ion-modal" }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: FormComponent, selector: "val-form", inputs: ["props"], outputs: ["onSubmit", "onInvalid", "onSelectChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChangePasswordModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-change-password-modal', standalone: true, imports: [IonButton, IonButtons, IonContent, IonHeader, IonModal, IonSpinner, IonToolbar, FormComponent], template: "<ion-modal [isOpen]=\"isOpen\" (didDismiss)=\"close()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" color=\"dark\" (click)=\"close()\">\n            <strong>{{ t('close') }}</strong>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        @if (mode() === 'loading') {\n        <div class=\"modal-loading\">\n          <ion-spinner name=\"crescent\"></ion-spinner>\n        </div>\n        } @else {\n        <val-form [props]=\"formProps()\" (onSubmit)=\"submitHandler($event)\" />\n        }\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".modal-form-section{display:flex;flex-direction:column;gap:16px;max-width:420px;margin:0 auto;padding-top:8px}.modal-loading{display:flex;justify-content:center;padding:40px 0}\n"] }]
+            args: [{ selector: 'val-change-password-modal', standalone: true, imports: [IonButton, IonButtons, IonContent, IonHeader, IonModal, IonSpinner, IonToolbar, FormComponent], template: "<ion-modal [isOpen]=\"isOpen\" (didDismiss)=\"close()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" color=\"dark\" shape=\"round\" (click)=\"close()\">\n            <strong>{{ t('close') }}</strong>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        @if (mode() === 'loading') {\n        <div class=\"modal-loading\">\n          <ion-spinner name=\"crescent\"></ion-spinner>\n        </div>\n        } @else {\n        <val-form [props]=\"formProps()\" (onSubmit)=\"submitHandler($event)\" />\n        }\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".modal-form-section{display:flex;flex-direction:column;gap:16px;max-width:420px;margin:0 auto;padding-top:8px}.modal-loading{display:flex;justify-content:center;padding:40px 0}\n"] }]
         }], propDecorators: { isOpen: [{
                 type: Input
             }], changed: [{
@@ -46822,7 +46822,7 @@ class CreateOrgModalComponent {
     <ion-header>
       <ion-toolbar>
         <ion-buttons slot="end">
-          <ion-button fill="clear" color="dark" (click)="dismiss()">
+          <ion-button fill="clear" color="dark" shape="round" (click)="dismiss()">
             <strong>{{ t('close') }}</strong>
           </ion-button>
         </ion-buttons>
@@ -46840,7 +46840,7 @@ class CreateOrgModalComponent {
       />
       <val-form [props]="formMeta()" (onSubmit)="onSubmit($event)" />
       <div class="modal-close-bottom">
-        <ion-button expand="block" fill="outline" color="dark" (click)="dismiss()">
+        <ion-button expand="block" fill="outline" color="dark" shape="round" (click)="dismiss()">
           {{ t('close') }}
         </ion-button>
       </div>
@@ -46853,7 +46853,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
     <ion-header>
       <ion-toolbar>
         <ion-buttons slot="end">
-          <ion-button fill="clear" color="dark" (click)="dismiss()">
+          <ion-button fill="clear" color="dark" shape="round" (click)="dismiss()">
             <strong>{{ t('close') }}</strong>
           </ion-button>
         </ion-buttons>
@@ -46871,7 +46871,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       />
       <val-form [props]="formMeta()" (onSubmit)="onSubmit($event)" />
       <div class="modal-close-bottom">
-        <ion-button expand="block" fill="outline" color="dark" (click)="dismiss()">
+        <ion-button expand="block" fill="outline" color="dark" shape="round" (click)="dismiss()">
           {{ t('close') }}
         </ion-button>
       </div>
@@ -47035,6 +47035,7 @@ class DeleteAccountModalComponent {
             fill: 'solid',
             color: 'dark',
             size: 'default',
+            shape: 'round',
             token,
             state: ComponentStates.ENABLED,
         };
@@ -47104,7 +47105,7 @@ class DeleteAccountModalComponent {
     <ion-header>
       <ion-toolbar>
         <ion-buttons slot="end">
-          <ion-button fill="clear" color="dark" (click)="close()">
+          <ion-button fill="clear" color="dark" shape="round" (click)="close()">
             <strong>{{ t('close') }}</strong>
           </ion-button>
         </ion-buttons>
@@ -47145,7 +47146,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
     <ion-header>
       <ion-toolbar>
         <ion-buttons slot="end">
-          <ion-button fill="clear" color="dark" (click)="close()">
+          <ion-button fill="clear" color="dark" shape="round" (click)="close()">
             <strong>{{ t('close') }}</strong>
           </ion-button>
         </ion-buttons>
@@ -47270,7 +47271,18 @@ class OrgInfoSheetComponent {
             ...this.closeProps,
             text: this.closeProps.text || this.resolvedCloseLabel(),
         }));
-        addIcons({ peopleOutline, swapHorizontalOutline, mailOutline });
+        this.resolvedFeatures = computed(() => {
+            if (this.features?.length)
+                return this.features;
+            if (!this.showFeatures)
+                return [];
+            return [
+                { icon: 'people-outline', title: this.tt('featureCollabTitle'), desc: this.tt('featureCollabDesc') },
+                { icon: 'swap-horizontal-outline', title: this.tt('featureSwitchTitle'), desc: this.tt('featureSwitchDesc') },
+                { icon: 'mail-outline', title: this.tt('featureInviteTitle'), desc: this.tt('featureInviteDesc') },
+            ];
+        });
+        addIcons({ peopleOutline, swapHorizontalOutline, mailOutline, codeSlashOutline, shieldCheckmarkOutline, warningOutline });
         if (!this.i18n.hasNamespace(DEFAULT_NAMESPACE$f)) {
             this.i18n.registerContent(DEFAULT_NAMESPACE$f, ORG_INFO_SHEET_I18N);
         }
@@ -47282,11 +47294,11 @@ class OrgInfoSheetComponent {
         return this.i18n.t(key, DEFAULT_NAMESPACE$f);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: OrgInfoSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: OrgInfoSheetComponent, isStandalone: true, selector: "val-org-info-sheet", inputs: { title: "title", subtitle: "subtitle", body: "body", closeLabel: "closeLabel", showFeatures: "showFeatures", closeProps: "closeProps", _modalRef: "_modalRef" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: OrgInfoSheetComponent, isStandalone: true, selector: "val-org-info-sheet", inputs: { title: "title", subtitle: "subtitle", body: "body", closeLabel: "closeLabel", showFeatures: "showFeatures", features: "features", closeProps: "closeProps", _modalRef: "_modalRef" }, ngImport: i0, template: `
     <ion-header>
       <ion-toolbar>
         <ion-buttons slot="end">
-          <ion-button fill="clear" color="dark" (click)="dismiss()">
+          <ion-button fill="clear" color="dark" shape="round" (click)="dismiss()">
             <strong>{{ resolvedCloseLabel() }}</strong>
           </ion-button>
         </ion-buttons>
@@ -47297,29 +47309,17 @@ class OrgInfoSheetComponent {
       <val-display [props]="{ content: resolvedTitle(), size: 'small', color: 'dark' }" />
       <val-title [props]="{ content: resolvedSubtitle(), size: 'large', color: '', bold: false }" />
 
-      @if (showFeatures) {
+      @if (resolvedFeatures().length > 0) {
         <div class="info-features">
-          <div class="info-feature">
-            <ion-icon name="people-outline" class="info-feature__icon" />
-            <div>
-              <div class="info-feature__title">{{ tt('featureCollabTitle') }}</div>
-              <div class="info-feature__desc">{{ tt('featureCollabDesc') }}</div>
-            </div>
-          </div>
-          <div class="info-feature">
-            <ion-icon name="swap-horizontal-outline" class="info-feature__icon" />
-            <div>
-              <div class="info-feature__title">{{ tt('featureSwitchTitle') }}</div>
-              <div class="info-feature__desc">{{ tt('featureSwitchDesc') }}</div>
-            </div>
-          </div>
-          <div class="info-feature">
-            <ion-icon name="mail-outline" class="info-feature__icon" />
-            <div>
-              <div class="info-feature__title">{{ tt('featureInviteTitle') }}</div>
-              <div class="info-feature__desc">{{ tt('featureInviteDesc') }}</div>
+          @for (f of resolvedFeatures(); track $index) {
+            <div class="info-feature">
+              <ion-icon [name]="f.icon" class="info-feature__icon" />
+              <div>
+                <div class="info-feature__title">{{ f.title }}</div>
+                <div class="info-feature__desc">{{ f.desc }}</div>
+              </div>
             </div>
-          </div>
+          }
         </div>
       }
 
@@ -47357,7 +47357,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
     <ion-header>
       <ion-toolbar>
         <ion-buttons slot="end">
-          <ion-button fill="clear" color="dark" (click)="dismiss()">
+          <ion-button fill="clear" color="dark" shape="round" (click)="dismiss()">
             <strong>{{ resolvedCloseLabel() }}</strong>
           </ion-button>
         </ion-buttons>
@@ -47368,29 +47368,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       <val-display [props]="{ content: resolvedTitle(), size: 'small', color: 'dark' }" />
       <val-title [props]="{ content: resolvedSubtitle(), size: 'large', color: '', bold: false }" />
 
-      @if (showFeatures) {
+      @if (resolvedFeatures().length > 0) {
         <div class="info-features">
-          <div class="info-feature">
-            <ion-icon name="people-outline" class="info-feature__icon" />
-            <div>
-              <div class="info-feature__title">{{ tt('featureCollabTitle') }}</div>
-              <div class="info-feature__desc">{{ tt('featureCollabDesc') }}</div>
-            </div>
-          </div>
-          <div class="info-feature">
-            <ion-icon name="swap-horizontal-outline" class="info-feature__icon" />
-            <div>
-              <div class="info-feature__title">{{ tt('featureSwitchTitle') }}</div>
-              <div class="info-feature__desc">{{ tt('featureSwitchDesc') }}</div>
-            </div>
-          </div>
-          <div class="info-feature">
-            <ion-icon name="mail-outline" class="info-feature__icon" />
-            <div>
-              <div class="info-feature__title">{{ tt('featureInviteTitle') }}</div>
-              <div class="info-feature__desc">{{ tt('featureInviteDesc') }}</div>
+          @for (f of resolvedFeatures(); track $index) {
+            <div class="info-feature">
+              <ion-icon [name]="f.icon" class="info-feature__icon" />
+              <div>
+                <div class="info-feature__title">{{ f.title }}</div>
+                <div class="info-feature__desc">{{ f.desc }}</div>
+              </div>
             </div>
-          </div>
+          }
         </div>
       }
 
@@ -47420,6 +47408,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], showFeatures: [{
                 type: Input
+            }], features: [{
+                type: Input
             }], closeProps: [{
                 type: Input
             }], _modalRef: [{
@@ -47545,7 +47535,7 @@ class SwitchOrgModalComponent {
     <ion-header>
       <ion-toolbar>
         <ion-buttons slot="end">
-          <ion-button fill="clear" color="dark" (click)="dismiss()">
+          <ion-button fill="clear" color="dark" shape="round" (click)="dismiss()">
             <strong>{{ t('close') }}</strong>
           </ion-button>
         </ion-buttons>
@@ -47636,7 +47626,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
     <ion-header>
       <ion-toolbar>
         <ion-buttons slot="end">
-          <ion-button fill="clear" color="dark" (click)="dismiss()">
+          <ion-button fill="clear" color="dark" shape="round" (click)="dismiss()">
             <strong>{{ t('close') }}</strong>
           </ion-button>
         </ion-buttons>
@@ -48803,7 +48793,7 @@ class EditOrgModalComponent {
     <ion-header>
       <ion-toolbar>
         <ion-buttons slot="end">
-          <ion-button fill="clear" color="dark" (click)="dismiss()">
+          <ion-button fill="clear" color="dark" shape="round" (click)="dismiss()">
             <strong>{{ t('close') }}</strong>
           </ion-button>
         </ion-buttons>
@@ -48821,7 +48811,7 @@ class EditOrgModalComponent {
       />
       <val-form [props]="formMeta()" (onSubmit)="onFormSubmit($event)" />
       <div class="modal-close-bottom">
-        <ion-button expand="block" fill="outline" color="dark" (click)="dismiss()">
+        <ion-button expand="block" fill="outline" color="dark" shape="round" (click)="dismiss()">
           {{ t('close') }}
         </ion-button>
       </div>
@@ -48834,7 +48824,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
     <ion-header>
       <ion-toolbar>
         <ion-buttons slot="end">
-          <ion-button fill="clear" color="dark" (click)="dismiss()">
+          <ion-button fill="clear" color="dark" shape="round" (click)="dismiss()">
             <strong>{{ t('close') }}</strong>
           </ion-button>
         </ion-buttons>
@@ -48852,7 +48842,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       />
       <val-form [props]="formMeta()" (onSubmit)="onFormSubmit($event)" />
       <div class="modal-close-bottom">
-        <ion-button expand="block" fill="outline" color="dark" (click)="dismiss()">
+        <ion-button expand="block" fill="outline" color="dark" shape="round" (click)="dismiss()">
           {{ t('close') }}
         </ion-button>
       </div>
@@ -48982,6 +48972,7 @@ class InviteMemberModalComponent {
             fill: 'solid',
             expand: 'block',
             size: 'default',
+            shape: 'round',
             type: 'button',
             state: this.sending() ? ComponentStates.WORKING : ComponentStates.ENABLED,
         }));
@@ -48992,6 +48983,7 @@ class InviteMemberModalComponent {
             fill: 'solid',
             expand: 'block',
             size: 'default',
+            shape: 'round',
             type: 'button',
             state: this.sending() ? ComponentStates.WORKING : ComponentStates.ENABLED,
         }));
@@ -49164,7 +49156,7 @@ class InviteMemberModalComponent {
     <ion-header>
       <ion-toolbar>
         <ion-buttons slot="end">
-          <ion-button fill="clear" color="dark" (click)="dismiss()">
+          <ion-button fill="clear" color="dark" shape="round" (click)="dismiss()">
             <strong>{{ t('close') }}</strong>
           </ion-button>
         </ion-buttons>
@@ -49276,7 +49268,7 @@ class InviteMemberModalComponent {
       </div>
 
       <div class="modal-close-bottom">
-        <ion-button expand="block" fill="outline" color="dark" (click)="dismiss()">
+        <ion-button expand="block" fill="outline" color="dark" shape="round" (click)="dismiss()">
           {{ t('close') }}
         </ion-button>
       </div>
@@ -49305,7 +49297,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
     <ion-header>
       <ion-toolbar>
         <ion-buttons slot="end">
-          <ion-button fill="clear" color="dark" (click)="dismiss()">
+          <ion-button fill="clear" color="dark" shape="round" (click)="dismiss()">
             <strong>{{ t('close') }}</strong>
           </ion-button>
         </ion-buttons>
@@ -49417,7 +49409,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       </div>
 
       <div class="modal-close-bottom">
-        <ion-button expand="block" fill="outline" color="dark" (click)="dismiss()">
+        <ion-button expand="block" fill="outline" color="dark" shape="round" (click)="dismiss()">
           {{ t('close') }}
         </ion-button>
       </div>
@@ -49697,6 +49689,7 @@ class MemberDetailModalComponent {
             fill: 'outline',
             expand: 'block',
             size: 'default',
+            shape: 'round',
             type: 'button',
             state: this.working() ? ComponentStates.WORKING : ComponentStates.ENABLED,
         }));
@@ -49814,7 +49807,7 @@ class MemberDetailModalComponent {
     <ion-header>
       <ion-toolbar>
         <ion-buttons slot="end">
-          <ion-button fill="clear" color="dark" (click)="dismiss()">
+          <ion-button fill="clear" color="dark" shape="round" (click)="dismiss()">
             <strong>{{ t('close') }}</strong>
           </ion-button>
         </ion-buttons>
@@ -49885,7 +49878,7 @@ class MemberDetailModalComponent {
       }
 
       <div class="modal-close-bottom">
-        <ion-button expand="block" fill="outline" color="dark" (click)="dismiss()">
+        <ion-button expand="block" fill="outline" color="dark" shape="round" (click)="dismiss()">
           {{ t('close') }}
         </ion-button>
       </div>
@@ -49911,7 +49904,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
     <ion-header>
       <ion-toolbar>
         <ion-buttons slot="end">
-          <ion-button fill="clear" color="dark" (click)="dismiss()">
+          <ion-button fill="clear" color="dark" shape="round" (click)="dismiss()">
             <strong>{{ t('close') }}</strong>
           </ion-button>
         </ion-buttons>
@@ -49982,7 +49975,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       }
 
       <div class="modal-close-bottom">
-        <ion-button expand="block" fill="outline" color="dark" (click)="dismiss()">
+        <ion-button expand="block" fill="outline" color="dark" shape="round" (click)="dismiss()">
           {{ t('close') }}
         </ion-button>
       </div>
@@ -50094,7 +50087,7 @@ class TransferOwnershipModalComponent {
     <ion-header>
       <ion-toolbar>
         <ion-buttons slot="end">
-          <ion-button fill="clear" color="dark" (click)="dismiss()">
+          <ion-button fill="clear" color="dark" shape="round" (click)="dismiss()">
             <strong>{{ t('close') }}</strong>
           </ion-button>
         </ion-buttons>
@@ -50154,13 +50147,13 @@ class TransferOwnershipModalComponent {
       }
 
       <div class="transfer-confirm-row">
-        <ion-button expand="block" color="dark" [disabled]="!selectedId()" (click)="confirm()">
+        <ion-button expand="block" color="dark" shape="round" [disabled]="!selectedId()" (click)="confirm()">
           {{ t('confirmCta') }}
         </ion-button>
       </div>
 
       <div class="modal-close-bottom">
-        <ion-button expand="block" fill="outline" color="dark" (click)="dismiss()">
+        <ion-button expand="block" fill="outline" color="dark" shape="round" (click)="dismiss()">
           {{ t('close') }}
         </ion-button>
       </div>
@@ -50183,7 +50176,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
     <ion-header>
       <ion-toolbar>
         <ion-buttons slot="end">
-          <ion-button fill="clear" color="dark" (click)="dismiss()">
+          <ion-button fill="clear" color="dark" shape="round" (click)="dismiss()">
             <strong>{{ t('close') }}</strong>
           </ion-button>
         </ion-buttons>
@@ -50243,13 +50236,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       }
 
       <div class="transfer-confirm-row">
-        <ion-button expand="block" color="dark" [disabled]="!selectedId()" (click)="confirm()">
+        <ion-button expand="block" color="dark" shape="round" [disabled]="!selectedId()" (click)="confirm()">
           {{ t('confirmCta') }}
         </ion-button>
       </div>
 
       <div class="modal-close-bottom">
-        <ion-button expand="block" fill="outline" color="dark" (click)="dismiss()">
+        <ion-button expand="block" fill="outline" color="dark" shape="round" (click)="dismiss()">
           {{ t('close') }}
         </ion-button>
       </div>
@@ -50873,8 +50866,14 @@ const ORGANIZATION_VIEW_I18N = {
         apiKeysMoreInfo: 'Más información',
         apiKeysInfoTitle: 'Integraciones por API',
         apiKeysInfoSubtitle: '¿Qué puedes hacer con una API Key?',
-        apiKeysInfoContent: 'Una API Key te permite automatizar operaciones en tu organización desde tus propios sistemas, sin abrir la app. Es ideal para integraciones máquina-a-máquina: sincronizar usuarios desde tu ERP, asignar roles en masa o consultar datos desde tus reportes internos.\n\nCon una key puedes dar de alta y gestionar miembros, asignar roles y permisos, leer datos de la organización y conectar flujos de trabajo existentes.\n\nCada key lleva solo los permisos que tú le asignes — concede el mínimo necesario y revócala en cualquier momento desde la sección Integraciones.\n\nImportante: el secreto se muestra una sola vez al crear la key. Guárdalo en un lugar seguro (gestor de secretos, variable de entorno). Si lo pierdes, genera una nueva key y revoca la anterior.',
+        apiKeysInfoContent: 'Revoca cualquier key en cualquier momento desde la sección Integraciones.',
         apiKeysInfoClose: 'Cerrar',
+        apiKeysFeatureAutoTitle: 'Automatización',
+        apiKeysFeatureAutoDesc: 'Conecta tus sistemas externos directamente, sin abrir la app.',
+        apiKeysFeaturePermsTitle: 'Permisos a medida',
+        apiKeysFeaturePermsDesc: 'Cada key lleva solo los permisos que tú le asignes — concede el mínimo.',
+        apiKeysFeatureSecretTitle: 'Secreto único',
+        apiKeysFeatureSecretDesc: 'El secreto se muestra una sola vez. Guárdalo en un gestor de secretos.',
         orgsMoreInfo: 'Aprender más sobre organizaciones',
         orgsInfoTitle: '¿Qué son las organizaciones?',
         orgsInfoSubtitle: 'Todo lo que necesitas saber',
@@ -50956,8 +50955,14 @@ const ORGANIZATION_VIEW_I18N = {
         apiKeysMoreInfo: 'More information',
         apiKeysInfoTitle: 'API integrations',
         apiKeysInfoSubtitle: 'What can you do with an API Key?',
-        apiKeysInfoContent: 'An API Key lets you automate operations in your organization from your own systems, without opening the app. It is ideal for machine-to-machine integrations: sync users from your ERP, bulk-assign roles, or query data for your internal reports.\n\nWith a key you can provision and manage members, assign roles and permissions, read organization data, and connect existing workflows.\n\nEach key carries only the permissions you assign — grant the minimum needed and revoke it at any time from the Integrations section.\n\nImportant: the secret is shown only once when the key is created. Store it somewhere safe (secret manager, environment variable). If you lose it, create a new key and revoke the old one.',
+        apiKeysInfoContent: 'Revoke any key at any time from the Integrations section.',
         apiKeysInfoClose: 'Close',
+        apiKeysFeatureAutoTitle: 'Automation',
+        apiKeysFeatureAutoDesc: 'Connect your external systems directly, without opening the app.',
+        apiKeysFeaturePermsTitle: 'Custom permissions',
+        apiKeysFeaturePermsDesc: 'Each key carries only the permissions you assign — grant the minimum.',
+        apiKeysFeatureSecretTitle: 'One-time secret',
+        apiKeysFeatureSecretDesc: 'The secret is shown only once. Store it in a secret manager.',
         orgsMoreInfo: 'Learn more about organizations',
         orgsInfoTitle: 'What are organizations?',
         orgsInfoSubtitle: 'Everything you need to know',
@@ -51187,7 +51192,7 @@ class OrganizationViewComponent {
         this.openApiKeysButtonProps = computed(() => ({
             text: this.tt('apiKeysOpen'),
             color: 'dark',
-            fill: 'clear',
+            fill: 'outline',
             size: 'default',
             shape: 'round',
             type: 'button',
@@ -51332,6 +51337,11 @@ class OrganizationViewComponent {
             component: OrgInfoSheetComponent,
             componentProps: {
                 showFeatures: false,
+                features: [
+                    { icon: 'code-slash-outline', title: this.tt('apiKeysFeatureAutoTitle'), desc: this.tt('apiKeysFeatureAutoDesc') },
+                    { icon: 'shield-checkmark-outline', title: this.tt('apiKeysFeaturePermsTitle'), desc: this.tt('apiKeysFeaturePermsDesc') },
+                    { icon: 'warning-outline', title: this.tt('apiKeysFeatureSecretTitle'), desc: this.tt('apiKeysFeatureSecretDesc') },
+                ],
                 title: this.tt('apiKeysInfoTitle'),
                 subtitle: this.tt('apiKeysInfoSubtitle'),
                 body: this.tt('apiKeysInfoContent'),
@@ -51343,6 +51353,7 @@ class OrganizationViewComponent {
                     size: 'default',
                     expand: 'block',
                     type: 'button',
+                    shape: 'round',
                 },
             },
             breakpoints: { breakpoints: [0, 0.92], initialBreakpoint: 0.92, showHandle: true },
@@ -54458,7 +54469,7 @@ function createRefreshableStream(factory, options) {
     // sesión NUNCA se establece (token inválido, signInWithFirebase falló), el
     // gate igual se libera tras `authGateTimeoutMs` y la factory procede: si no
     // hay permiso terminará en estado `error`, jamás en skeleton infinito.
-    // Tag los dos inputs del `race` para distinguir en logs cuál ganó: la sesión
+    // Tag los dos inputs del `race` para distivdsr en logs cuál ganó: la sesión
     // de Firebase Auth (`auth-ready`) o el timeout de seguridad (`timeout`).
     const authGate$ = firebase
         ? race(firebase.firebaseAuthReady$.pipe(map$1(() => 'auth-ready')), timer(authGateTimeoutMs).pipe(map$1(() => 'timeout'))).pipe(take(1), tap(winner => {