@lumston/ds-angular 0.0.6 → 0.0.8

package/fesm2022/lumston-ds-angular.mjs

@@ -3175,18 +3175,18 @@ class ModalComponent {
               class="modal-close-btn"
               type="button"
               (click)="onCloseButtonClick()">
-              <ls-icon name="x" />
+              <i class="ls-icon ls-x ls-icon-sm"></i>
             </button>
           }
           <ng-content />
         </div>
       </div>
     }
-  `, isInline: true, styles: [":host{display:contents}.modal-overlay{align-items:center;background-color:var(--ls-modal-backdrop-bg);display:flex;inset:0;justify-content:center;padding:1rem;position:fixed;z-index:var(--ls-modal-z-index)}.modal-overlay-body{align-items:flex-start;overflow-y:auto}.modal-panel{background-color:var(--ls-color-white);border-radius:var(--ls-border-radius-lg);box-shadow:0 20px 60px #0000004d;display:flex;flex-direction:column;max-height:calc(100vh - 2rem);outline:none;position:relative;width:100%}.modal-max-sm{max-width:24rem}.modal-max-md{max-width:32rem}.modal-max-lg{max-width:48rem}.modal-max-xl{max-width:64rem}.modal-max-full{max-width:100%}.modal-full-screen{border-radius:0;height:100vh;max-height:100vh;max-width:100vw;width:100vw}.modal-full-width{max-width:100%}.modal-scroll-dialog{max-height:calc(100vh - 2rem);overflow:hidden}.modal-scroll-body{max-height:none}.modal-close-btn{align-items:center;background:transparent;border:none;border-radius:.25rem;color:inherit;cursor:pointer;display:flex;justify-content:center;padding:.25rem;position:absolute;right:.75rem;top:.75rem;transition:background-color .15s}.modal-close-btn:hover{background-color:var(--ls-color-dark-light)}.modal-has-close-btn .modal-title{padding-right:3rem}.modal-title{border-bottom:1px solid var(--ls-color-dark-light);font-family:var(--ls-font-family);font-size:1.125rem;font-weight:700;padding:1.25rem 1.5rem}.modal-content{flex:1;overflow-y:auto;padding:1.5rem}.modal-actions{border-top:1px solid var(--ls-color-dark-light);display:flex;gap:.75rem;justify-content:flex-end;padding:1rem 1.5rem}body.dark .modal-panel{background-color:#1b2e4b;box-shadow:0 20px 60px #0009}body.dark .modal-title{border-bottom-color:#253958}body.dark .modal-actions{border-top-color:#253958}body.dark .modal-close-btn:hover{background-color:#253958}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ls-icon", inputs: ["name", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:contents}.modal-overlay{align-items:center;background-color:var(--ls-modal-backdrop-bg);display:flex;inset:0;justify-content:center;padding:1rem;position:fixed;z-index:var(--ls-modal-z-index)}.modal-overlay-body{align-items:flex-start;overflow-y:auto}.modal-panel{background-color:var(--ls-color-white);border-radius:var(--ls-border-radius-lg);box-shadow:0 20px 60px #0000004d;display:flex;flex-direction:column;max-height:calc(100vh - 2rem);outline:none;position:relative;width:100%}.modal-max-sm{max-width:24rem}.modal-max-md{max-width:32rem}.modal-max-lg{max-width:48rem}.modal-max-xl{max-width:64rem}.modal-max-full{max-width:100%}.modal-full-screen{border-radius:0;height:100vh;max-height:100vh;max-width:100vw;width:100vw}.modal-full-width{max-width:100%}.modal-scroll-dialog{max-height:calc(100vh - 2rem);overflow:hidden}.modal-scroll-body{max-height:none}.modal-close-btn{align-items:center;background:transparent;border:none;border-radius:.25rem;color:inherit;cursor:pointer;display:flex;justify-content:center;padding:.25rem;position:absolute;right:.75rem;top:.75rem;transition:background-color .15s}.modal-close-btn:hover{background-color:var(--ls-color-dark-light)}.modal-has-close-btn .modal-title{padding-right:3rem}.modal-title{border-bottom:1px solid var(--ls-color-dark-light);font-family:var(--ls-font-family);font-size:1.125rem;font-weight:700;padding:1.25rem 1.5rem}.modal-content{flex:1;overflow-y:auto;padding:1.5rem}.modal-actions{border-top:1px solid var(--ls-color-dark-light);display:flex;gap:.75rem;justify-content:flex-end;padding:1rem 1.5rem}body.dark .modal-panel{background-color:#1b2e4b;box-shadow:0 20px 60px #0009}body.dark .modal-title{border-bottom-color:#253958}body.dark .modal-actions{border-top-color:#253958}body.dark .modal-close-btn:hover{background-color:#253958}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ModalComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent], selector: 'ls-modal', standalone: true, template: `
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [], selector: 'ls-modal', standalone: true, template: `
     @if (open()) {
       <div [class]="overlayClasses()" (click)="onBackdropClick()">
         <div
@@ -3203,7 +3203,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
               class="modal-close-btn"
               type="button"
               (click)="onCloseButtonClick()">
-              <ls-icon name="x" />
+              <i class="ls-icon ls-x ls-icon-sm"></i>
             </button>
           }
           <ng-content />
@@ -3673,11 +3673,9 @@ class PaginationComponent {
               aria-label="first"
               [class]="navClasses(isFirstPage())"
               [disabled]="isFirstPage() || disabled()"
-              [attr.aria-disabled]="
-                isFirstPage() || disabled() ? 'true' : null
-              "
+              [attr.aria-disabled]="isFirstPage() || disabled() ? 'true' : null"
               (click)="goToPage(1)">
-              <ls-icon class="pg-icon-left" name="carets-down" />
+              <i class="ls-icon ls-chevron-left-double ls-icon-sm"></i>
             </button>
           </li>
         }
@@ -3688,11 +3686,9 @@ class PaginationComponent {
               aria-label="prev"
               [class]="navClasses(isFirstPage())"
               [disabled]="isFirstPage() || disabled()"
-              [attr.aria-disabled]="
-                isFirstPage() || disabled() ? 'true' : null
-              "
+              [attr.aria-disabled]="isFirstPage() || disabled() ? 'true' : null"
               (click)="goToPage(activePage() - 1)">
-              <ls-icon class="pg-icon-left" name="caret-down" />
+              <i class="ls-icon ls-chevron-left ls-icon-sm"></i>
             </button>
           </li>
         }
@@ -3716,11 +3712,9 @@ class PaginationComponent {
               aria-label="next"
               [class]="navClasses(isLastPage())"
               [disabled]="isLastPage() || disabled()"
-              [attr.aria-disabled]="
-                isLastPage() || disabled() ? 'true' : null
-              "
+              [attr.aria-disabled]="isLastPage() || disabled() ? 'true' : null"
               (click)="goToPage(activePage() + 1)">
-              <ls-icon class="pg-icon-right" name="caret-down" />
+              <i class="ls-icon ls-chevron-right ls-icon-sm"></i>
             </button>
           </li>
         }
@@ -3731,21 +3725,19 @@ class PaginationComponent {
               aria-label="last"
               [class]="navClasses(isLastPage())"
               [disabled]="isLastPage() || disabled()"
-              [attr.aria-disabled]="
-                isLastPage() || disabled() ? 'true' : null
-              "
+              [attr.aria-disabled]="isLastPage() || disabled() ? 'true' : null"
               (click)="goToPage(count())">
-              <ls-icon class="pg-icon-right" name="carets-down" />
+              <i class="ls-icon ls-chevron-right-double ls-icon-sm"></i>
             </button>
           </li>
         }
       </ul>
     </nav>
-  `, isInline: true, styles: [":host{display:contents}.pg-icon-left{transform:rotate(90deg)}.pg-icon-right{transform:rotate(-90deg)}.pg-list{display:inline-flex;align-items:center;gap:.25rem;list-style:none;margin:0;padding:0}.pg-item{display:inline-flex;align-items:center;justify-content:center;font-weight:600;cursor:pointer;transition:all var(--ls-transition-duration) ease;border:2px solid transparent;background:none;outline:none;font-family:var(--ls-font-family);line-height:1;-webkit-user-select:none;user-select:none}.pg-item-sm{padding:.375rem .625rem;font-size:.75rem;min-width:1.75rem;height:1.75rem}.pg-item-md{padding:.5rem .875rem;font-size:.875rem;min-width:2.25rem;height:2.25rem}.pg-item-lg{padding:.625rem 1.25rem;font-size:1rem;min-width:2.75rem;height:2.75rem}.pg-item-rounded{border-radius:var(--ls-border-radius-md)}.pg-item-circular{border-radius:var(--ls-border-radius-full);padding-inline:0}.pg-item-circular.pg-item-sm{width:1.75rem}.pg-item-circular.pg-item-md{width:2.25rem}.pg-item-circular.pg-item-lg{width:2.75rem}.pg-item-disabled,.pg-item[disabled]{cursor:not-allowed;opacity:.6}.pg-item-solid-primary{background-color:var(--ls-color-white-light);color:var(--ls-color-dark)}.pg-item-solid-primary:not([disabled]):hover{background-color:var(--ls-color-primary);color:var(--ls-color-white)}.pg-item-solid-primary.pg-item-active{background-color:var(--ls-color-primary);color:var(--ls-color-white)}.pg-item-solid-secondary{background-color:var(--ls-color-white-light);color:var(--ls-color-dark)}.pg-item-solid-secondary:not([disabled]):hover{background-color:var(--ls-color-secondary);color:var(--ls-color-white)}.pg-item-solid-secondary.pg-item-active{background-color:var(--ls-color-secondary);color:var(--ls-color-white)}.pg-item-solid-default{background-color:var(--ls-color-white-light);color:var(--ls-color-dark)}.pg-item-solid-default:not([disabled]):hover{background-color:var(--ls-color-dark);color:var(--ls-color-white)}.pg-item-solid-default.pg-item-active{background-color:var(--ls-color-dark);color:var(--ls-color-white)}.pg-item-outlined-primary{background-color:transparent;border-color:var(--ls-color-white-light);color:var(--ls-color-dark)}.pg-item-outlined-primary:not([disabled]):hover{border-color:var(--ls-color-primary);color:var(--ls-color-primary)}.pg-item-outlined-primary.pg-item-active{border-color:var(--ls-color-primary);color:var(--ls-color-primary)}.pg-item-outlined-secondary{background-color:transparent;border-color:var(--ls-color-white-light);color:var(--ls-color-dark)}.pg-item-outlined-secondary:not([disabled]):hover{border-color:var(--ls-color-secondary);color:var(--ls-color-secondary)}.pg-item-outlined-secondary.pg-item-active{border-color:var(--ls-color-secondary);color:var(--ls-color-secondary)}.pg-item-outlined-default{background-color:transparent;border-color:var(--ls-color-white-light);color:var(--ls-color-dark)}.pg-item-outlined-default:not([disabled]):hover{border-color:var(--ls-color-dark);color:var(--ls-color-dark)}.pg-item-outlined-default.pg-item-active{border-color:var(--ls-color-dark);color:var(--ls-color-dark)}.pg-item-text-primary{background-color:transparent;border-color:transparent;color:var(--ls-color-white-dark)}.pg-item-text-primary:not([disabled]):hover{background-color:#4361ee1a;color:var(--ls-color-primary)}.pg-item-text-primary.pg-item-active{color:var(--ls-color-primary)}.pg-item-text-secondary{background-color:transparent;border-color:transparent;color:var(--ls-color-white-dark)}.pg-item-text-secondary:not([disabled]):hover{background-color:#805dca1a;color:var(--ls-color-secondary)}.pg-item-text-secondary.pg-item-active{color:var(--ls-color-secondary)}.pg-item-text-default{background-color:transparent;border-color:transparent;color:var(--ls-color-white-dark)}.pg-item-text-default:not([disabled]):hover{background-color:#3b3f5c1a;color:var(--ls-color-dark)}.pg-item-text-default.pg-item-active{color:var(--ls-color-dark)}body.dark .pg-item-solid-primary,body.dark .pg-item-solid-secondary,body.dark .pg-item-solid-default{background-color:#191e3a;color:var(--ls-color-white-light)}body.dark .pg-item-solid-primary:not([disabled]):hover,body.dark .pg-item-solid-primary.pg-item-active{background-color:var(--ls-color-primary);color:var(--ls-color-white-light)}body.dark .pg-item-solid-secondary:not([disabled]):hover,body.dark .pg-item-solid-secondary.pg-item-active{background-color:var(--ls-color-secondary);color:var(--ls-color-white-light)}body.dark .pg-item-solid-default:not([disabled]):hover,body.dark .pg-item-solid-default.pg-item-active{background-color:var(--ls-color-dark);color:var(--ls-color-white-light)}body.dark .pg-item-outlined-primary,body.dark .pg-item-outlined-secondary,body.dark .pg-item-outlined-default{border-color:#191e3a;color:var(--ls-color-white-light)}body.dark .pg-item-outlined-primary:not([disabled]):hover,body.dark .pg-item-outlined-primary.pg-item-active{border-color:var(--ls-color-primary);color:var(--ls-color-white-light)}body.dark .pg-item-outlined-secondary:not([disabled]):hover,body.dark .pg-item-outlined-secondary.pg-item-active{border-color:var(--ls-color-secondary);color:var(--ls-color-white-light)}body.dark .pg-item-outlined-default:not([disabled]):hover,body.dark .pg-item-outlined-default.pg-item-active{border-color:var(--ls-color-dark);color:var(--ls-color-white-light)}body.dark .pg-item-text-primary,body.dark .pg-item-text-secondary,body.dark .pg-item-text-default{color:var(--ls-color-white-dark)}body.dark .pg-item-text-primary:not([disabled]):hover,body.dark .pg-item-text-primary.pg-item-active{color:var(--ls-color-primary)}body.dark .pg-item-text-secondary:not([disabled]):hover,body.dark .pg-item-text-secondary.pg-item-active{color:var(--ls-color-secondary)}body.dark .pg-item-text-default:not([disabled]):hover,body.dark .pg-item-text-default.pg-item-active{color:var(--ls-color-white-light)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ls-icon", inputs: ["name", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:contents}.pg-icon-left{transform:rotate(90deg)}.pg-icon-right{transform:rotate(-90deg)}.pg-list{display:inline-flex;align-items:center;gap:.25rem;list-style:none;margin:0;padding:0}.pg-item{display:inline-flex;align-items:center;justify-content:center;font-weight:600;cursor:pointer;transition:all var(--ls-transition-duration) ease;border:2px solid transparent;background:none;outline:none;font-family:var(--ls-font-family);line-height:1;-webkit-user-select:none;user-select:none}.pg-item-sm{padding:.375rem .625rem;font-size:.75rem;min-width:1.75rem;height:1.75rem}.pg-item-md{padding:.5rem .875rem;font-size:.875rem;min-width:2.25rem;height:2.25rem}.pg-item-lg{padding:.625rem 1.25rem;font-size:1rem;min-width:2.75rem;height:2.75rem}.pg-item-rounded{border-radius:var(--ls-border-radius-md)}.pg-item-circular{border-radius:var(--ls-border-radius-full);padding-inline:0}.pg-item-circular.pg-item-sm{width:1.75rem}.pg-item-circular.pg-item-md{width:2.25rem}.pg-item-circular.pg-item-lg{width:2.75rem}.pg-item-disabled,.pg-item[disabled]{cursor:not-allowed;opacity:.6}.pg-item-solid-primary{background-color:var(--ls-color-white-light);color:var(--ls-color-dark)}.pg-item-solid-primary:not([disabled]):hover{background-color:var(--ls-color-primary);color:var(--ls-color-white)}.pg-item-solid-primary.pg-item-active{background-color:var(--ls-color-primary);color:var(--ls-color-white)}.pg-item-solid-secondary{background-color:var(--ls-color-white-light);color:var(--ls-color-dark)}.pg-item-solid-secondary:not([disabled]):hover{background-color:var(--ls-color-secondary);color:var(--ls-color-white)}.pg-item-solid-secondary.pg-item-active{background-color:var(--ls-color-secondary);color:var(--ls-color-white)}.pg-item-solid-default{background-color:var(--ls-color-white-light);color:var(--ls-color-dark)}.pg-item-solid-default:not([disabled]):hover{background-color:var(--ls-color-dark);color:var(--ls-color-white)}.pg-item-solid-default.pg-item-active{background-color:var(--ls-color-dark);color:var(--ls-color-white)}.pg-item-outlined-primary{background-color:transparent;border-color:var(--ls-color-white-light);color:var(--ls-color-dark)}.pg-item-outlined-primary:not([disabled]):hover{border-color:var(--ls-color-primary);color:var(--ls-color-primary)}.pg-item-outlined-primary.pg-item-active{border-color:var(--ls-color-primary);color:var(--ls-color-primary)}.pg-item-outlined-secondary{background-color:transparent;border-color:var(--ls-color-white-light);color:var(--ls-color-dark)}.pg-item-outlined-secondary:not([disabled]):hover{border-color:var(--ls-color-secondary);color:var(--ls-color-secondary)}.pg-item-outlined-secondary.pg-item-active{border-color:var(--ls-color-secondary);color:var(--ls-color-secondary)}.pg-item-outlined-default{background-color:transparent;border-color:var(--ls-color-white-light);color:var(--ls-color-dark)}.pg-item-outlined-default:not([disabled]):hover{border-color:var(--ls-color-dark);color:var(--ls-color-dark)}.pg-item-outlined-default.pg-item-active{border-color:var(--ls-color-dark);color:var(--ls-color-dark)}.pg-item-text-primary{background-color:transparent;border-color:transparent;color:var(--ls-color-white-dark)}.pg-item-text-primary:not([disabled]):hover{background-color:#4361ee1a;color:var(--ls-color-primary)}.pg-item-text-primary.pg-item-active{color:var(--ls-color-primary)}.pg-item-text-secondary{background-color:transparent;border-color:transparent;color:var(--ls-color-white-dark)}.pg-item-text-secondary:not([disabled]):hover{background-color:#805dca1a;color:var(--ls-color-secondary)}.pg-item-text-secondary.pg-item-active{color:var(--ls-color-secondary)}.pg-item-text-default{background-color:transparent;border-color:transparent;color:var(--ls-color-white-dark)}.pg-item-text-default:not([disabled]):hover{background-color:#3b3f5c1a;color:var(--ls-color-dark)}.pg-item-text-default.pg-item-active{color:var(--ls-color-dark)}body.dark .pg-item-solid-primary,body.dark .pg-item-solid-secondary,body.dark .pg-item-solid-default{background-color:#191e3a;color:var(--ls-color-white-light)}body.dark .pg-item-solid-primary:not([disabled]):hover,body.dark .pg-item-solid-primary.pg-item-active{background-color:var(--ls-color-primary);color:var(--ls-color-white-light)}body.dark .pg-item-solid-secondary:not([disabled]):hover,body.dark .pg-item-solid-secondary.pg-item-active{background-color:var(--ls-color-secondary);color:var(--ls-color-white-light)}body.dark .pg-item-solid-default:not([disabled]):hover,body.dark .pg-item-solid-default.pg-item-active{background-color:var(--ls-color-dark);color:var(--ls-color-white-light)}body.dark .pg-item-outlined-primary,body.dark .pg-item-outlined-secondary,body.dark .pg-item-outlined-default{border-color:#191e3a;color:var(--ls-color-white-light)}body.dark .pg-item-outlined-primary:not([disabled]):hover,body.dark .pg-item-outlined-primary.pg-item-active{border-color:var(--ls-color-primary);color:var(--ls-color-white-light)}body.dark .pg-item-outlined-secondary:not([disabled]):hover,body.dark .pg-item-outlined-secondary.pg-item-active{border-color:var(--ls-color-secondary);color:var(--ls-color-white-light)}body.dark .pg-item-outlined-default:not([disabled]):hover,body.dark .pg-item-outlined-default.pg-item-active{border-color:var(--ls-color-dark);color:var(--ls-color-white-light)}body.dark .pg-item-text-primary,body.dark .pg-item-text-secondary,body.dark .pg-item-text-default{color:var(--ls-color-white-dark)}body.dark .pg-item-text-primary:not([disabled]):hover,body.dark .pg-item-text-primary.pg-item-active{color:var(--ls-color-primary)}body.dark .pg-item-text-secondary:not([disabled]):hover,body.dark .pg-item-text-secondary.pg-item-active{color:var(--ls-color-secondary)}body.dark .pg-item-text-default:not([disabled]):hover,body.dark .pg-item-text-default.pg-item-active{color:var(--ls-color-white-light)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: PaginationComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent], selector: 'ls-pagination', standalone: true, template: `
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [], selector: 'ls-pagination', standalone: true, template: `
     <nav aria-label="pagination">
       <ul class="pg-list">
         @if (showFirstButton()) {
@@ -3755,11 +3747,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
               aria-label="first"
               [class]="navClasses(isFirstPage())"
               [disabled]="isFirstPage() || disabled()"
-              [attr.aria-disabled]="
-                isFirstPage() || disabled() ? 'true' : null
-              "
+              [attr.aria-disabled]="isFirstPage() || disabled() ? 'true' : null"
               (click)="goToPage(1)">
-              <ls-icon class="pg-icon-left" name="carets-down" />
+              <i class="ls-icon ls-chevron-left-double ls-icon-sm"></i>
             </button>
           </li>
         }
@@ -3770,11 +3760,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
               aria-label="prev"
               [class]="navClasses(isFirstPage())"
               [disabled]="isFirstPage() || disabled()"
-              [attr.aria-disabled]="
-                isFirstPage() || disabled() ? 'true' : null
-              "
+              [attr.aria-disabled]="isFirstPage() || disabled() ? 'true' : null"
               (click)="goToPage(activePage() - 1)">
-              <ls-icon class="pg-icon-left" name="caret-down" />
+              <i class="ls-icon ls-chevron-left ls-icon-sm"></i>
             </button>
           </li>
         }
@@ -3798,11 +3786,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
               aria-label="next"
               [class]="navClasses(isLastPage())"
               [disabled]="isLastPage() || disabled()"
-              [attr.aria-disabled]="
-                isLastPage() || disabled() ? 'true' : null
-              "
+              [attr.aria-disabled]="isLastPage() || disabled() ? 'true' : null"
               (click)="goToPage(activePage() + 1)">
-              <ls-icon class="pg-icon-right" name="caret-down" />
+              <i class="ls-icon ls-chevron-right ls-icon-sm"></i>
             </button>
           </li>
         }
@@ -3813,11 +3799,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
               aria-label="last"
               [class]="navClasses(isLastPage())"
               [disabled]="isLastPage() || disabled()"
-              [attr.aria-disabled]="
-                isLastPage() || disabled() ? 'true' : null
-              "
+              [attr.aria-disabled]="isLastPage() || disabled() ? 'true' : null"
               (click)="goToPage(count())">
-              <ls-icon class="pg-icon-right" name="carets-down" />
+              <i class="ls-icon ls-chevron-right-double ls-icon-sm"></i>
             </button>
           </li>
         }
@@ -3835,8 +3819,11 @@ class BreadcrumbComponent {
         // Lógica para el color dinámico
         this._colorStyle = computed(() => {
             const c = this.color();
-            const value = c === 'primary' ? 'var(--ls-color-primary)' :
-                c === 'secondary' ? 'var(--ls-color-secondary)' : c;
+            const value = c === 'primary'
+                ? 'var(--ls-color-primary)'
+                : c === 'secondary'
+                    ? 'var(--ls-color-secondary)'
+                    : c;
             return { '--ls-breadcrumb-main-color': value };
         }, ...(ngDevMode ? [{ debugName: "_colorStyle" }] : []));
         this._classes = computed(() => {
@@ -3851,20 +3838,39 @@ class BreadcrumbComponent {
     <nav aria-label="Breadcrumb" [style]="_colorStyle()">
       <ol [class]="_classes()">
         @for (item of items(); track item.label; let isLast = $last) {
-          <li class="ls-breadcrumb-item" [class.ls-breadcrumb-item--active]="isLast">
-
-            @if (item.icon) {
-              <ls-icon
-                [name]="$any(item.icon)"
-                iconClass="ls-breadcrumb-icon" />
-            }
-
+          <li
+            class="ls-breadcrumb-item"
+            [class.ls-breadcrumb-item--active]="isLast">
             @if (isLast) {
-              <span aria-current="page">{{ item.label }}</span>
+              <span aria-current="page">
+                @if (item.icon) {
+                  <i
+                    [class]="
+                      'ls-icon ls-' + item.icon + ' ls-breadcrumb-icon'
+                    "></i>
+                }
+                {{ item.label }}
+              </span>
             } @else if (item.url) {
-              <a [href]="item.url">{{ item.label }}</a>
+              <a [href]="item.url">
+                @if (item.icon) {
+                  <i
+                    [class]="
+                      'ls-icon ls-' + item.icon + ' ls-breadcrumb-icon'
+                    "></i>
+                }
+                {{ item.label }}
+              </a>
             } @else {
-              <span>{{ item.label }}</span>
+              <span>
+                @if (item.icon) {
+                  <i
+                    [class]="
+                      'ls-icon ls-' + item.icon + ' ls-breadcrumb-icon'
+                    "></i>
+                }
+                {{ item.label }}
+              </span>
             }
           </li>
 
@@ -3880,28 +3886,47 @@ class BreadcrumbComponent {
         }
       </ol>
     </nav>
-  `, isInline: true, styles: [":host{display:block;--ls-breadcrumb-main-color: #4361ee}.ls-breadcrumb{display:flex;align-items:center;flex-wrap:wrap;list-style:none;margin:0;padding:0;font-family:var(--ls-font-family, sans-serif);font-size:.875rem}.ls-breadcrumb-item{display:inline-flex;align-items:center;gap:.5rem;color:#6c757d}.ls-breadcrumb-item a{color:inherit;text-decoration:none!important;transition:color .2s;border:none}.ls-breadcrumb-item a:hover{text-decoration:none!important;color:var(--ls-breadcrumb-main-color)}.ls-breadcrumb-icon{width:1.15rem;height:1.15rem;display:flex;align-items:center;justify-content:center;color:currentColor}.ls-breadcrumb-icon svg{width:100%;height:100%;display:block}.ls-breadcrumb-separator{margin:0 .5rem;color:#888ea8;-webkit-user-select:none;user-select:none}.ls-breadcrumb--default .ls-breadcrumb-item--active{color:#000;font-weight:600}.ls-breadcrumb--dotted .ls-breadcrumb-separator{font-size:0;display:flex;align-items:center}.ls-breadcrumb--dotted .ls-breadcrumb-separator:before{content:\"\";width:6px;height:6px;background:var(--ls-breadcrumb-main-color);border-radius:50%;display:inline-block}.ls-breadcrumb--dotted .ls-breadcrumb-item--active{color:#000;font-weight:600}.ls-breadcrumb--arrowed{gap:0}.ls-breadcrumb--arrowed .ls-breadcrumb-item{position:relative;background:#e9ecef;padding:.5rem 1rem .5rem 1.5rem;margin-left:-10px;clip-path:polygon(calc(100% - 12px) 0%,100% 50%,calc(100% - 12px) 100%,0% 100%,12px 50%,0% 0%);filter:drop-shadow(1px 0 1px rgba(0,0,0,.08));color:#515365}.ls-breadcrumb--arrowed .ls-breadcrumb-item:first-child{margin-left:0;padding-left:.75rem;clip-path:polygon(calc(100% - 12px) 0%,100% 50%,calc(100% - 12px) 100%,0% 100%,0% 0%);border-radius:4px 0 0 4px}.ls-breadcrumb--arrowed .ls-breadcrumb-item:last-child{padding-right:1.25rem;clip-path:polygon(100% 0%,100% 100%,0% 100%,12px 50%,0% 0%);border-radius:0 4px 4px 0}.ls-breadcrumb--arrowed .ls-breadcrumb-item--active{background:var(--ls-breadcrumb-main-color)!important;color:#fff!important;z-index:10!important}.ls-breadcrumb--arrowed .ls-breadcrumb-item:nth-child(1){z-index:5}.ls-breadcrumb--arrowed .ls-breadcrumb-item:nth-child(2){z-index:4}.ls-breadcrumb--arrowed .ls-breadcrumb-item:nth-child(3){z-index:3}body.dark .ls-breadcrumb-item{color:#bfc9d4}body.dark .ls-breadcrumb--default .ls-breadcrumb-item--active,body.dark .ls-breadcrumb--dotted .ls-breadcrumb-item--active{color:#fff!important}body.dark .ls-breadcrumb--arrowed .ls-breadcrumb-item:not(.ls-breadcrumb-item--active){background:#1b2e4b!important;color:#e0e6ed!important}body.dark .ls-breadcrumb-separator{color:#3b3f5c}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "ls-icon", inputs: ["name", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:block;--ls-breadcrumb-main-color: #4361ee}.ls-breadcrumb{display:flex;align-items:center;flex-wrap:wrap;list-style:none;margin:0;padding:0;font-family:var(--ls-font-family, sans-serif);font-size:.875rem}.ls-breadcrumb-item{display:inline-flex;align-items:center;color:#6c757d}.ls-breadcrumb-item a,.ls-breadcrumb-item span{display:inline-flex;align-items:center;gap:.5rem}.ls-breadcrumb-item a:hover{text-decoration:none!important;color:var(--ls-breadcrumb-main-color)}.ls-breadcrumb-icon{width:1.15rem;height:1.15rem;display:inline-flex;align-items:center;justify-content:center;color:currentColor;flex-shrink:0;vertical-align:middle}.ls-breadcrumb-item .ls-breadcrumb-icon *{vertical-align:middle}.ls-breadcrumb-separator{margin:0 .5rem;color:#888ea8;-webkit-user-select:none;user-select:none}.ls-breadcrumb--default .ls-breadcrumb-item--active{color:#000;font-weight:600}.ls-breadcrumb--dotted .ls-breadcrumb-separator{font-size:0;display:flex;align-items:center}.ls-breadcrumb--dotted .ls-breadcrumb-separator:before{content:\"\";width:6px;height:6px;background:var(--ls-breadcrumb-main-color);border-radius:50%;display:inline-block}.ls-breadcrumb--dotted .ls-breadcrumb-item--active{color:#000;font-weight:600}.ls-breadcrumb--arrowed{gap:0}.ls-breadcrumb--arrowed .ls-breadcrumb-item{position:relative;background:#e9ecef;padding:.5rem 1rem .5rem 1.5rem;margin-left:-10px;clip-path:polygon(calc(100% - 12px) 0%,100% 50%,calc(100% - 12px) 100%,0% 100%,12px 50%,0% 0%);filter:drop-shadow(1px 0 1px rgba(0,0,0,.08));color:#515365}.ls-breadcrumb--arrowed .ls-breadcrumb-item:first-child{margin-left:0;padding-left:.75rem;clip-path:polygon(calc(100% - 12px) 0%,100% 50%,calc(100% - 12px) 100%,0% 100%,0% 0%);border-radius:4px 0 0 4px}.ls-breadcrumb--arrowed .ls-breadcrumb-item:last-child{padding-right:1.25rem;clip-path:polygon(100% 0%,100% 100%,0% 100%,12px 50%,0% 0%);border-radius:0 4px 4px 0}.ls-breadcrumb--arrowed .ls-breadcrumb-item--active{background:var(--ls-breadcrumb-main-color)!important;color:#fff!important;z-index:10!important}.ls-breadcrumb--arrowed .ls-breadcrumb-item:nth-child(1){z-index:5}.ls-breadcrumb--arrowed .ls-breadcrumb-item:nth-child(2){z-index:4}.ls-breadcrumb--arrowed .ls-breadcrumb-item:nth-child(3){z-index:3}body.dark .ls-breadcrumb-item{color:#bfc9d4}body.dark .ls-breadcrumb--default .ls-breadcrumb-item--active,body.dark .ls-breadcrumb--dotted .ls-breadcrumb-item--active{color:#fff!important}body.dark .ls-breadcrumb--arrowed .ls-breadcrumb-item:not(.ls-breadcrumb-item--active){background:#1b2e4b!important;color:#e0e6ed!important}body.dark .ls-breadcrumb-separator{color:#3b3f5c}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: BreadcrumbComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, IconComponent], selector: 'ls-breadcrumb', standalone: true, template: `
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], selector: 'ls-breadcrumb', standalone: true, template: `
     <nav aria-label="Breadcrumb" [style]="_colorStyle()">
       <ol [class]="_classes()">
         @for (item of items(); track item.label; let isLast = $last) {
-          <li class="ls-breadcrumb-item" [class.ls-breadcrumb-item--active]="isLast">
-
-            @if (item.icon) {
-              <ls-icon
-                [name]="$any(item.icon)"
-                iconClass="ls-breadcrumb-icon" />
-            }
-
+          <li
+            class="ls-breadcrumb-item"
+            [class.ls-breadcrumb-item--active]="isLast">
             @if (isLast) {
-              <span aria-current="page">{{ item.label }}</span>
+              <span aria-current="page">
+                @if (item.icon) {
+                  <i
+                    [class]="
+                      'ls-icon ls-' + item.icon + ' ls-breadcrumb-icon'
+                    "></i>
+                }
+                {{ item.label }}
+              </span>
             } @else if (item.url) {
-              <a [href]="item.url">{{ item.label }}</a>
+              <a [href]="item.url">
+                @if (item.icon) {
+                  <i
+                    [class]="
+                      'ls-icon ls-' + item.icon + ' ls-breadcrumb-icon'
+                    "></i>
+                }
+                {{ item.label }}
+              </a>
             } @else {
-              <span>{{ item.label }}</span>
+              <span>
+                @if (item.icon) {
+                  <i
+                    [class]="
+                      'ls-icon ls-' + item.icon + ' ls-breadcrumb-icon'
+                    "></i>
+                }
+                {{ item.label }}
+              </span>
             }
           </li>
 
@@ -3917,7 +3942,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
         }
       </ol>
     </nav>
-  `, styles: [":host{display:block;--ls-breadcrumb-main-color: #4361ee}.ls-breadcrumb{display:flex;align-items:center;flex-wrap:wrap;list-style:none;margin:0;padding:0;font-family:var(--ls-font-family, sans-serif);font-size:.875rem}.ls-breadcrumb-item{display:inline-flex;align-items:center;gap:.5rem;color:#6c757d}.ls-breadcrumb-item a{color:inherit;text-decoration:none!important;transition:color .2s;border:none}.ls-breadcrumb-item a:hover{text-decoration:none!important;color:var(--ls-breadcrumb-main-color)}.ls-breadcrumb-icon{width:1.15rem;height:1.15rem;display:flex;align-items:center;justify-content:center;color:currentColor}.ls-breadcrumb-icon svg{width:100%;height:100%;display:block}.ls-breadcrumb-separator{margin:0 .5rem;color:#888ea8;-webkit-user-select:none;user-select:none}.ls-breadcrumb--default .ls-breadcrumb-item--active{color:#000;font-weight:600}.ls-breadcrumb--dotted .ls-breadcrumb-separator{font-size:0;display:flex;align-items:center}.ls-breadcrumb--dotted .ls-breadcrumb-separator:before{content:\"\";width:6px;height:6px;background:var(--ls-breadcrumb-main-color);border-radius:50%;display:inline-block}.ls-breadcrumb--dotted .ls-breadcrumb-item--active{color:#000;font-weight:600}.ls-breadcrumb--arrowed{gap:0}.ls-breadcrumb--arrowed .ls-breadcrumb-item{position:relative;background:#e9ecef;padding:.5rem 1rem .5rem 1.5rem;margin-left:-10px;clip-path:polygon(calc(100% - 12px) 0%,100% 50%,calc(100% - 12px) 100%,0% 100%,12px 50%,0% 0%);filter:drop-shadow(1px 0 1px rgba(0,0,0,.08));color:#515365}.ls-breadcrumb--arrowed .ls-breadcrumb-item:first-child{margin-left:0;padding-left:.75rem;clip-path:polygon(calc(100% - 12px) 0%,100% 50%,calc(100% - 12px) 100%,0% 100%,0% 0%);border-radius:4px 0 0 4px}.ls-breadcrumb--arrowed .ls-breadcrumb-item:last-child{padding-right:1.25rem;clip-path:polygon(100% 0%,100% 100%,0% 100%,12px 50%,0% 0%);border-radius:0 4px 4px 0}.ls-breadcrumb--arrowed .ls-breadcrumb-item--active{background:var(--ls-breadcrumb-main-color)!important;color:#fff!important;z-index:10!important}.ls-breadcrumb--arrowed .ls-breadcrumb-item:nth-child(1){z-index:5}.ls-breadcrumb--arrowed .ls-breadcrumb-item:nth-child(2){z-index:4}.ls-breadcrumb--arrowed .ls-breadcrumb-item:nth-child(3){z-index:3}body.dark .ls-breadcrumb-item{color:#bfc9d4}body.dark .ls-breadcrumb--default .ls-breadcrumb-item--active,body.dark .ls-breadcrumb--dotted .ls-breadcrumb-item--active{color:#fff!important}body.dark .ls-breadcrumb--arrowed .ls-breadcrumb-item:not(.ls-breadcrumb-item--active){background:#1b2e4b!important;color:#e0e6ed!important}body.dark .ls-breadcrumb-separator{color:#3b3f5c}\n"] }]
+  `, styles: [":host{display:block;--ls-breadcrumb-main-color: #4361ee}.ls-breadcrumb{display:flex;align-items:center;flex-wrap:wrap;list-style:none;margin:0;padding:0;font-family:var(--ls-font-family, sans-serif);font-size:.875rem}.ls-breadcrumb-item{display:inline-flex;align-items:center;color:#6c757d}.ls-breadcrumb-item a,.ls-breadcrumb-item span{display:inline-flex;align-items:center;gap:.5rem}.ls-breadcrumb-item a:hover{text-decoration:none!important;color:var(--ls-breadcrumb-main-color)}.ls-breadcrumb-icon{width:1.15rem;height:1.15rem;display:inline-flex;align-items:center;justify-content:center;color:currentColor;flex-shrink:0;vertical-align:middle}.ls-breadcrumb-item .ls-breadcrumb-icon *{vertical-align:middle}.ls-breadcrumb-separator{margin:0 .5rem;color:#888ea8;-webkit-user-select:none;user-select:none}.ls-breadcrumb--default .ls-breadcrumb-item--active{color:#000;font-weight:600}.ls-breadcrumb--dotted .ls-breadcrumb-separator{font-size:0;display:flex;align-items:center}.ls-breadcrumb--dotted .ls-breadcrumb-separator:before{content:\"\";width:6px;height:6px;background:var(--ls-breadcrumb-main-color);border-radius:50%;display:inline-block}.ls-breadcrumb--dotted .ls-breadcrumb-item--active{color:#000;font-weight:600}.ls-breadcrumb--arrowed{gap:0}.ls-breadcrumb--arrowed .ls-breadcrumb-item{position:relative;background:#e9ecef;padding:.5rem 1rem .5rem 1.5rem;margin-left:-10px;clip-path:polygon(calc(100% - 12px) 0%,100% 50%,calc(100% - 12px) 100%,0% 100%,12px 50%,0% 0%);filter:drop-shadow(1px 0 1px rgba(0,0,0,.08));color:#515365}.ls-breadcrumb--arrowed .ls-breadcrumb-item:first-child{margin-left:0;padding-left:.75rem;clip-path:polygon(calc(100% - 12px) 0%,100% 50%,calc(100% - 12px) 100%,0% 100%,0% 0%);border-radius:4px 0 0 4px}.ls-breadcrumb--arrowed .ls-breadcrumb-item:last-child{padding-right:1.25rem;clip-path:polygon(100% 0%,100% 100%,0% 100%,12px 50%,0% 0%);border-radius:0 4px 4px 0}.ls-breadcrumb--arrowed .ls-breadcrumb-item--active{background:var(--ls-breadcrumb-main-color)!important;color:#fff!important;z-index:10!important}.ls-breadcrumb--arrowed .ls-breadcrumb-item:nth-child(1){z-index:5}.ls-breadcrumb--arrowed .ls-breadcrumb-item:nth-child(2){z-index:4}.ls-breadcrumb--arrowed .ls-breadcrumb-item:nth-child(3){z-index:3}body.dark .ls-breadcrumb-item{color:#bfc9d4}body.dark .ls-breadcrumb--default .ls-breadcrumb-item--active,body.dark .ls-breadcrumb--dotted .ls-breadcrumb-item--active{color:#fff!important}body.dark .ls-breadcrumb--arrowed .ls-breadcrumb-item:not(.ls-breadcrumb-item--active){background:#1b2e4b!important;color:#e0e6ed!important}body.dark .ls-breadcrumb-separator{color:#3b3f5c}\n"] }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
 
 // @lumston/ds-angular — public API surface