@lumston/ds-angular 0.0.1

package/fesm2022/lumston-ds-angular.mjs

@@ -0,0 +1,3219 @@
+import * as i0 from '@angular/core';
+import { inject, input, computed, ChangeDetectionStrategy, Component, HostListener, ViewChild, Input, TemplateRef, Directive, output, signal, effect, forwardRef, Renderer2, DestroyRef, ElementRef, model, viewChild, ViewEncapsulation, Injectable, contentChild, untracked } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import * as i1 from '@angular/common';
+import { CommonModule, NgTemplateOutlet, DOCUMENT } from '@angular/common';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+/**
+ * SVG icon registry.
+ * Maps icon names to raw SVG strings.
+ */
+const ICON_REGISTRY = {
+    // UI Icons
+    'caret-down': `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M19 9L12 15L5 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+    </svg>`,
+    'carets-down': `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M19 11L12 17L5 11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+        <path opacity="0.5" d="M19 7L12 13L5 7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+    </svg>`,
+    'laptop': `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M3 9C3 6.17157 3 4.75736 3.87868 3.87868C4.75736 3 6.17157 3 9 3H15C17.8284 3 19.2426 3 20.1213 3.87868C21 4.75736 21 6.17157 21 9V14C21 15.8856 21 16.8284 20.4142 17.4142C19.8284 18 18.8856 18 17 18H7C5.11438 18 4.17157 18 3.58579 17.4142C3 16.8284 3 15.8856 3 14V9Z" stroke="currentColor" stroke-width="1.5" />
+        <path opacity="0.5" d="M22 21H2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+        <path opacity="0.5" d="M15 15H9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+    </svg>`,
+    'menu': `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M20 7L4 7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+        <path opacity="0.5" d="M20 12L4 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+        <path d="M20 17L4 17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+    </svg>`,
+    'minus': `<svg width="16" height="20" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round">
+        <line x1="5" y1="12" x2="19" y2="12"></line>
+    </svg>`,
+    'moon': `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M21.0672 11.8568L20.4253 11.469L21.0672 11.8568ZM12.1432 2.93276L11.7553 2.29085V2.29085L12.1432 2.93276ZM21.25 12C21.25 17.1086 17.1086 21.25 12 21.25V22.75C17.9371 22.75 22.75 17.9371 22.75 12H21.25ZM12 21.25C6.89137 21.25 2.75 17.1086 2.75 12H1.25C1.25 17.9371 6.06294 22.75 12 22.75V21.25ZM2.75 12C2.75 6.89137 6.89137 2.75 12 2.75V1.25C6.06294 1.25 1.25 6.06294 1.25 12H2.75ZM15.5 14.25C12.3244 14.25 9.75 11.6756 9.75 8.5H8.25C8.25 12.5041 11.4959 15.75 15.5 15.75V14.25ZM20.4253 11.469C19.4172 13.1373 17.5882 14.25 15.5 14.25V15.75C18.1349 15.75 20.4407 14.3439 21.7092 12.2447L20.4253 11.469ZM9.75 8.5C9.75 6.41182 10.8627 4.5828 12.531 3.57467L11.7553 2.29085C9.65609 3.5593 8.25 5.86509 8.25 8.5H9.75ZM12 2.75C11.9115 2.75 11.8077 2.71008 11.7324 2.63168C11.6686 2.56527 11.6538 2.50244 11.6503 2.47703C11.6461 2.44587 11.6482 2.35557 11.7553 2.29085L12.531 3.57467C13.0342 3.27065 13.196 2.71398 13.1368 2.27627C13.0754 1.82126 12.7166 1.25 12 1.25V2.75ZM21.7092 12.2447C21.6444 12.3518 21.5541 12.3539 21.523 12.3497C21.4976 12.3462 21.4347 12.3314 21.3683 12.2676C21.2899 12.1923 21.25 12.0885 21.25 12H22.75C22.75 11.2834 22.1787 10.9246 21.7237 10.8632C21.286 10.804 20.7293 10.9658 20.4253 11.469L21.7092 12.2447Z" fill="currentColor" />
+    </svg>`,
+    'search': `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="11.5" cy="11.5" r="9.5" stroke="currentColor" stroke-width="1.5" opacity="0.5" />
+        <path d="M18.5 18.5L22 22" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+    </svg>`,
+    'settings': `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="1.5" />
+        <path opacity="0.5" d="M13.7654 2.15224C13.3978 2 12.9319 2 12 2C11.0681 2 10.6022 2 10.2346 2.15224C9.74457 2.35523 9.35522 2.74458 9.15223 3.23463C9.05957 3.45834 9.0233 3.7185 9.00911 4.09799C8.98826 4.65568 8.70226 5.17189 8.21894 5.45093C7.73564 5.72996 7.14559 5.71954 6.65219 5.45876C6.31645 5.2813 6.07301 5.18262 5.83294 5.15102C5.30704 5.08178 4.77518 5.22429 4.35436 5.5472C4.03874 5.78938 3.80577 6.1929 3.33983 6.99993C2.87389 7.80697 2.64092 8.21048 2.58899 8.60491C2.51976 9.1308 2.66227 9.66266 2.98518 10.0835C3.13256 10.2756 3.3397 10.437 3.66119 10.639C4.1338 10.936 4.43789 11.4419 4.43786 12C4.43783 12.5581 4.13375 13.0639 3.66118 13.3608C3.33965 13.5629 3.13248 13.7244 2.98508 13.9165C2.66217 14.3373 2.51966 14.8691 2.5889 15.395C2.64082 15.7894 2.87379 16.193 3.33973 17C3.80568 17.807 4.03865 18.2106 4.35426 18.4527C4.77508 18.7756 5.30694 18.9181 5.83284 18.8489C6.07289 18.8173 6.31632 18.7186 6.65204 18.5412C7.14547 18.2804 7.73556 18.27 8.2189 18.549C8.70224 18.8281 8.98826 19.3443 9.00911 19.9021C9.02331 20.2815 9.05957 20.5417 9.15223 20.7654C9.35522 21.2554 9.74457 21.6448 10.2346 21.8478C10.6022 22 11.0681 22 12 22C12.9319 22 13.3978 22 13.7654 21.8478C14.2554 21.6448 14.6448 21.2554 14.8477 20.7654C14.9404 20.5417 14.9767 20.2815 14.9909 19.902C15.0117 19.3443 15.2977 18.8281 15.781 18.549C16.2643 18.2699 16.8544 18.2804 17.3479 18.5412C17.6836 18.7186 17.927 18.8172 18.167 18.8488C18.6929 18.9181 19.2248 18.7756 19.6456 18.4527C19.9612 18.2105 20.1942 17.807 20.6601 16.9999C21.1261 16.1929 21.3591 15.7894 21.411 15.395C21.4802 14.8691 21.3377 14.3372 21.0148 13.9164C20.8674 13.7243 20.6602 13.5628 20.3387 13.3608C19.8662 13.0639 19.5621 12.558 19.5621 11.9999C19.5621 11.4418 19.8662 10.9361 20.3387 10.6392C20.6603 10.4371 20.8675 10.2757 21.0149 10.0835C21.3378 9.66273 21.4803 9.13087 21.4111 8.60497C21.3592 8.21055 21.1262 7.80703 20.6602 7C20.1943 6.19297 19.9613 5.78945 19.6457 5.54727C19.2249 5.22436 18.693 5.08185 18.1671 5.15109C17.9271 5.18269 17.6837 5.28136 17.3479 5.4588C16.8545 5.71959 16.2644 5.73002 15.7811 5.45096C15.2977 5.17191 15.0117 4.65566 14.9909 4.09794C14.9767 3.71848 14.9404 3.45833 14.8477 3.23463C14.6448 2.74458 14.2554 2.35523 13.7654 2.15224Z" stroke="currentColor" stroke-width="1.5" />
+    </svg>`,
+    'sun': `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="12" cy="12" r="5" stroke="currentColor" stroke-width="1.5" />
+        <path d="M12 2V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+        <path d="M12 20V22" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+        <path d="M4 12L2 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+        <path d="M22 12L20 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+        <path opacity="0.5" d="M19.7778 4.22266L17.5558 6.25424" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+        <path opacity="0.5" d="M4.22217 4.22266L6.44418 6.25424" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+        <path opacity="0.5" d="M6.44434 17.5557L4.22211 19.7779" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+        <path opacity="0.5" d="M19.7778 19.7773L17.5558 17.5551" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+    </svg>`,
+    'x': `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+        <line x1="18" y1="6" x2="6" y2="18"></line>
+        <line x1="6" y1="6" x2="18" y2="18"></line>
+    </svg>`,
+    'x-circle': `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <circle opacity="0.5" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5" />
+        <path d="M14.5 9.50002L9.5 14.5M9.49998 9.5L14.5 14.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+    </svg>`,
+    // Menu Icons
+    'menu-apps': `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <g opacity="0.5">
+            <path d="M14 2.75C15.9068 2.75 17.2615 2.75159 18.2892 2.88976C19.2952 3.02503 19.8749 3.27869 20.2981 3.7019C20.7213 4.12511 20.975 4.70476 21.1102 5.71085C21.2484 6.73851 21.25 8.09318 21.25 10C21.25 10.4142 21.5858 10.75 22 10.75C22.4142 10.75 22.75 10.4142 22.75 10V9.94359C22.75 8.10583 22.75 6.65019 22.5969 5.51098C22.4392 4.33856 22.1071 3.38961 21.3588 2.64124C20.6104 1.89288 19.6614 1.56076 18.489 1.40314C17.3498 1.24997 15.8942 1.24998 14.0564 1.25H14C13.5858 1.25 13.25 1.58579 13.25 2C13.25 2.41421 13.5858 2.75 14 2.75Z" fill="currentColor" />
+            <path d="M9.94358 1.25H10C10.4142 1.25 10.75 1.58579 10.75 2C10.75 2.41421 10.4142 2.75 10 2.75C8.09318 2.75 6.73851 2.75159 5.71085 2.88976C4.70476 3.02503 4.12511 3.27869 3.7019 3.7019C3.27869 4.12511 3.02503 4.70476 2.88976 5.71085C2.75159 6.73851 2.75 8.09318 2.75 10C2.75 10.4142 2.41421 10.75 2 10.75C1.58579 10.75 1.25 10.4142 1.25 10V9.94358C1.24998 8.10583 1.24997 6.65019 1.40314 5.51098C1.56076 4.33856 1.89288 3.38961 2.64124 2.64124C3.38961 1.89288 4.33856 1.56076 5.51098 1.40314C6.65019 1.24997 8.10583 1.24998 9.94358 1.25Z" fill="currentColor" />
+            <path d="M22 13.25C22.4142 13.25 22.75 13.5858 22.75 14V14.0564C22.75 15.8942 22.75 17.3498 22.5969 18.489C22.4392 19.6614 22.1071 20.6104 21.3588 21.3588C20.6104 22.1071 19.6614 22.4392 18.489 22.5969C17.3498 22.75 15.8942 22.75 14.0564 22.75H14C13.5858 22.75 13.25 22.4142 13.25 22C13.25 21.5858 13.5858 21.25 14 21.25C15.9068 21.25 17.2615 21.2484 18.2892 21.1102C19.2952 20.975 19.8749 20.7213 20.2981 20.2981C20.7213 19.8749 20.975 19.2952 21.1102 18.2892C21.2484 17.2615 21.25 15.9068 21.25 14C21.25 13.5858 21.5858 13.25 22 13.25Z" fill="currentColor" />
+            <path d="M2.75 14C2.75 13.5858 2.41421 13.25 2 13.25C1.58579 13.25 1.25 13.5858 1.25 14V14.0564C1.24998 15.8942 1.24997 17.3498 1.40314 18.489C1.56076 19.6614 1.89288 20.6104 2.64124 21.3588C3.38961 22.1071 4.33856 22.4392 5.51098 22.5969C6.65019 22.75 8.10583 22.75 9.94359 22.75H10C10.4142 22.75 10.75 22.4142 10.75 22C10.75 21.5858 10.4142 21.25 10 21.25C8.09318 21.25 6.73851 21.2484 5.71085 21.1102C4.70476 20.975 4.12511 20.7213 3.7019 20.2981C3.27869 19.8749 3.02503 19.2952 2.88976 18.2892C2.75159 17.2615 2.75 15.9068 2.75 14Z" fill="currentColor" />
+        </g>
+        <path d="M5.52721 5.52721C5 6.05442 5 6.90294 5 8.6C5 9.73137 5 10.2971 5.35147 10.6485C5.70294 11 6.26863 11 7.4 11H8.6C9.73137 11 10.2971 11 10.6485 10.6485C11 10.2971 11 9.73137 11 8.6V7.4C11 6.26863 11 5.70294 10.6485 5.35147C10.2971 5 9.73137 5 8.6 5C6.90294 5 6.05442 5 5.52721 5.52721Z" fill="currentColor" />
+        <path d="M5.52721 18.4728C5 17.9456 5 17.0971 5 15.4C5 14.2686 5 13.7029 5.35147 13.3515C5.70294 13 6.26863 13 7.4 13H8.6C9.73137 13 10.2971 13 10.6485 13.3515C11 13.7029 11 14.2686 11 15.4V16.6C11 17.7314 11 18.2971 10.6485 18.6485C10.2971 19 9.73138 19 8.60002 19C6.90298 19 6.05441 19 5.52721 18.4728Z" fill="currentColor" />
+        <path d="M13 7.4C13 6.26863 13 5.70294 13.3515 5.35147C13.7029 5 14.2686 5 15.4 5C17.0971 5 17.9456 5 18.4728 5.52721C19 6.05442 19 6.90294 19 8.6C19 9.73137 19 10.2971 18.6485 10.6485C18.2971 11 17.7314 11 16.6 11H15.4C14.2686 11 13.7029 11 13.3515 10.6485C13 10.2971 13 9.73137 13 8.6V7.4Z" fill="currentColor" />
+        <path d="M13.3515 18.6485C13 18.2971 13 17.7314 13 16.6V15.4C13 14.2686 13 13.7029 13.3515 13.3515C13.7029 13 14.2686 13 15.4 13H16.6C17.7314 13 18.2971 13 18.6485 13.3515C19 13.7029 19 14.2686 19 15.4C19 17.097 19 17.9456 18.4728 18.4728C17.9456 19 17.0971 19 15.4 19C14.2687 19 13.7029 19 13.3515 18.6485Z" fill="currentColor" />
+    </svg>`,
+    'menu-components': `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M8.42229 20.6181C10.1779 21.5395 11.0557 22.0001 12 22.0001V12.0001L2.63802 7.07275C2.62423 7.09491 2.6107 7.11727 2.5974 7.13986C2 8.15436 2 9.41678 2 11.9416V12.0586C2 14.5834 2 15.8459 2.5974 16.8604C3.19479 17.8749 4.27063 18.4395 6.42229 19.5686L8.42229 20.6181Z" fill="currentColor" />
+        <path opacity="0.7" d="M17.5774 4.43152L15.5774 3.38197C13.8218 2.46066 12.944 2 11.9997 2C11.0554 2 10.1776 2.46066 8.42197 3.38197L6.42197 4.43152C4.31821 5.53552 3.24291 6.09982 2.6377 7.07264L11.9997 12L21.3617 7.07264C20.7564 6.09982 19.6811 5.53552 17.5774 4.43152Z" fill="currentColor" />
+        <path opacity="0.5" d="M21.4026 7.13986C21.3893 7.11727 21.3758 7.09491 21.362 7.07275L12 12.0001V22.0001C12.9443 22.0001 13.8221 21.5395 15.5777 20.6181L17.5777 19.5686C19.7294 18.4395 20.8052 17.8749 21.4026 16.8604C22 15.8459 22 14.5834 22 12.0586V11.9416C22 9.41678 22 8.15436 21.4026 7.13986Z" fill="currentColor" />
+    </svg>`,
+    'menu-dashboard': `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path opacity="0.5" d="M2 12.2039C2 9.91549 2 8.77128 2.5192 7.82274C3.0384 6.87421 3.98695 6.28551 5.88403 5.10813L7.88403 3.86687C9.88939 2.62229 10.8921 2 12 2C13.1079 2 14.1106 2.62229 16.116 3.86687L18.116 5.10812C20.0131 6.28551 20.9616 6.87421 21.4808 7.82274C22 8.77128 22 9.91549 22 12.2039V13.725C22 17.6258 22 19.5763 20.8284 20.7881C19.6569 22 17.7712 22 14 22H10C6.22876 22 4.34315 22 3.17157 20.7881C2 19.5763 2 17.6258 2 13.725V12.2039Z" fill="currentColor" />
+        <path d="M9 17.25C8.58579 17.25 8.25 17.5858 8.25 18C8.25 18.4142 8.58579 18.75 9 18.75H15C15.4142 18.75 15.75 18.4142 15.75 18C15.75 17.5858 15.4142 17.25 15 17.25H9Z" fill="currentColor" />
+    </svg>`,
+    'menu-datatables': `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M4.97883 9.68508C2.99294 8.89073 2 8.49355 2 8C2 7.50645 2.99294 7.10927 4.97883 6.31492L7.7873 5.19153C9.77318 4.39718 10.7661 4 12 4C13.2339 4 14.2268 4.39718 16.2127 5.19153L19.0212 6.31492C21.0071 7.10927 22 7.50645 22 8C22 8.49355 21.0071 8.89073 19.0212 9.68508L16.2127 10.8085C14.2268 11.6028 13.2339 12 12 12C10.7661 12 9.77318 11.6028 7.7873 10.8085L4.97883 9.68508Z" fill="currentColor" />
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M2 8C2 8.49355 2.99294 8.89073 4.97883 9.68508L7.7873 10.8085C9.77318 11.6028 10.7661 12 12 12C13.2339 12 14.2268 11.6028 16.2127 10.8085L19.0212 9.68508C21.0071 8.89073 22 8.49355 22 8C22 7.50645 21.0071 7.10927 19.0212 6.31492L16.2127 5.19153C14.2268 4.39718 13.2339 4 12 4C10.7661 4 9.77318 4.39718 7.7873 5.19153L4.97883 6.31492C2.99294 7.10927 2 7.50645 2 8Z" fill="currentColor" />
+        <path opacity="0.7" d="M5.76613 10L4.97883 10.3149C2.99294 11.1093 2 11.5065 2 12C2 12.4935 2.99294 12.8907 4.97883 13.6851L7.7873 14.8085C9.77318 15.6028 10.7661 16 12 16C13.2339 16 14.2268 15.6028 16.2127 14.8085L19.0212 13.6851C21.0071 12.8907 22 12.4935 22 12C22 11.5065 21.0071 11.1093 19.0212 10.3149L18.2339 10L16.2127 10.8085C14.2268 11.6028 13.2339 12 12 12C10.7661 12 9.77318 11.6028 7.7873 10.8085L5.76613 10Z" fill="currentColor" />
+        <path opacity="0.4" d="M5.76613 14L4.97883 14.3149C2.99294 15.1093 2 15.5065 2 16C2 16.4935 2.99294 16.8907 4.97883 17.6851L7.7873 18.8085C9.77318 19.6028 10.7661 20 12 20C13.2339 20 14.2268 19.6028 16.2127 18.8085L19.0212 17.6851C21.0071 16.8907 22 16.4935 22 16C22 15.5065 21.0071 15.1093 19.0212 14.3149L18.2339 14L16.2127 14.8085C14.2268 15.6028 13.2339 16 12 16C10.7661 16 9.77318 15.6028 7.7873 14.8085L5.76613 14Z" fill="currentColor" />
+    </svg>`,
+    'menu-documentation': `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M4 4.69434V18.6943C4 20.3512 5.34315 21.6943 7 21.6943H17C18.6569 21.6943 20 20.3512 20 18.6943V8.69434C20 7.03748 18.6569 5.69434 17 5.69434H5C4.44772 5.69434 4 5.24662 4 4.69434ZM7.25 11.6943C7.25 11.2801 7.58579 10.9443 8 10.9443H16C16.4142 10.9443 16.75 11.2801 16.75 11.6943C16.75 12.1085 16.4142 12.4443 16 12.4443H8C7.58579 12.4443 7.25 12.1085 7.25 11.6943ZM7.25 15.1943C7.25 14.7801 7.58579 14.4443 8 14.4443H13.5C13.9142 14.4443 14.25 14.7801 14.25 15.1943C14.25 15.6085 13.9142 15.9443 13.5 15.9443H8C7.58579 15.9443 7.25 15.6085 7.25 15.1943Z" fill="currentColor" />
+        <path opacity="0.5" d="M18 4.00038V5.86504C17.6872 5.75449 17.3506 5.69434 17 5.69434H5C4.44772 5.69434 4 5.24662 4 4.69434V4.62329C4 4.09027 4.39193 3.63837 4.91959 3.56299L15.7172 2.02048C16.922 1.84835 18 2.78328 18 4.00038Z" fill="currentColor" />
+    </svg>`,
+    'menu-elements': `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M8.73167 5.77133L5.66953 9.91436C4.3848 11.6526 3.74244 12.5217 4.09639 13.205C4.10225 13.2164 4.10829 13.2276 4.1145 13.2387C4.48945 13.9117 5.59888 13.9117 7.81775 13.9117C9.05079 13.9117 9.6673 13.9117 10.054 14.2754L10.074 14.2946L13.946 9.72466L13.926 9.70541C13.5474 9.33386 13.5474 8.74151 13.5474 7.55682V7.24712C13.5474 3.96249 13.5474 2.32018 12.6241 2.03721C11.7007 1.75425 10.711 3.09327 8.73167 5.77133Z" fill="currentColor" />
+        <path opacity="0.5" d="M10.4527 16.4432L10.4527 16.7528C10.4527 20.0374 10.4527 21.6798 11.376 21.9627C12.2994 22.2457 13.2891 20.9067 15.2685 18.2286L18.3306 14.0856C19.6154 12.3474 20.2577 11.4783 19.9038 10.7949C19.8979 10.7836 19.8919 10.7724 19.8857 10.7613C19.5107 10.0883 18.4013 10.0883 16.1824 10.0883C14.9494 10.0883 14.3329 10.0883 13.9462 9.72461L10.0742 14.2946C10.4528 14.6661 10.4527 15.2585 10.4527 16.4432Z" fill="currentColor" />
+    </svg>`,
+    'menu-forms': `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path opacity="0.5" d="M3 10C3 6.22876 3 4.34315 4.17157 3.17157C5.34315 2 7.22876 2 11 2H13C16.7712 2 18.6569 2 19.8284 3.17157C21 4.34315 21 6.22876 21 10V14C21 17.7712 21 19.6569 19.8284 20.8284C18.6569 22 16.7712 22 13 22H11C7.22876 22 5.34315 22 4.17157 20.8284C3 19.6569 3 17.7712 3 14V10Z" fill="currentColor" />
+        <path d="M16.5189 16.5013C16.6939 16.3648 16.8526 16.2061 17.1701 15.8886L21.1275 11.9312C21.2231 11.8356 21.1793 11.6708 21.0515 11.6264C20.5844 11.4644 19.9767 11.1601 19.4083 10.5917C18.8399 10.0233 18.5356 9.41561 18.3736 8.94849C18.3292 8.82066 18.1644 8.77687 18.0688 8.87254L14.1114 12.8299C13.7939 13.1474 13.6352 13.3061 13.4987 13.4811C13.3377 13.6876 13.1996 13.9109 13.087 14.1473C12.9915 14.3476 12.9205 14.5606 12.7786 14.9865L12.5951 15.5368L12.3034 16.4118L12.0299 17.2323C11.9601 17.4419 12.0146 17.6729 12.1708 17.8292C12.3271 17.9854 12.5581 18.0399 12.7677 17.9701L13.5882 17.6966L14.4632 17.4049L15.0135 17.2214L15.0136 17.2214C15.4394 17.0795 15.6524 17.0085 15.8527 16.913C16.0891 16.8004 16.3124 16.6623 16.5189 16.5013Z" fill="currentColor" />
+        <path d="M22.3665 10.6922C23.2112 9.84754 23.2112 8.47812 22.3665 7.63348C21.5219 6.78884 20.1525 6.78884 19.3078 7.63348L19.1806 7.76071C19.0578 7.88348 19.0022 8.05496 19.0329 8.22586C19.0522 8.33336 19.0879 8.49053 19.153 8.67807C19.2831 9.05314 19.5288 9.54549 19.9917 10.0083C20.4545 10.4712 20.9469 10.7169 21.3219 10.847C21.5095 10.9121 21.6666 10.9478 21.7741 10.9671C21.945 10.9978 22.1165 10.9422 22.2393 10.8194L22.3665 10.6922Z" fill="currentColor" />
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M7.25 9C7.25 8.58579 7.58579 8.25 8 8.25H14.5C14.9142 8.25 15.25 8.58579 15.25 9C15.25 9.41421 14.9142 9.75 14.5 9.75H8C7.58579 9.75 7.25 9.41421 7.25 9ZM7.25 13C7.25 12.5858 7.58579 12.25 8 12.25H11C11.4142 12.25 11.75 12.5858 11.75 13C11.75 13.4142 11.4142 13.75 11 13.75H8C7.58579 13.75 7.25 13.4142 7.25 13ZM7.25 17C7.25 16.5858 7.58579 16.25 8 16.25H9.5C9.91421 16.25 10.25 16.5858 10.25 17C10.25 17.4142 9.91421 17.75 9.5 17.75H8C7.58579 17.75 7.25 17.4142 7.25 17Z" fill="currentColor" />
+    </svg>`,
+    'menu-more': `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path opacity="0.5" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" fill="currentColor" />
+        <path d="M12.75 9C12.75 8.58579 12.4142 8.25 12 8.25C11.5858 8.25 11.25 8.58579 11.25 9L11.25 11.25H9C8.58579 11.25 8.25 11.5858 8.25 12C8.25 12.4142 8.58579 12.75 9 12.75H11.25V15C11.25 15.4142 11.5858 15.75 12 15.75C12.4142 15.75 12.75 15.4142 12.75 15L12.75 12.75H15C15.4142 12.75 15.75 12.4142 15.75 12C15.75 11.5858 15.4142 11.25 15 11.25H12.75V9Z" fill="currentColor" />
+    </svg>`,
+    'menu-pages': `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M14 22H10C6.22876 22 4.34315 22 3.17157 20.8284C2 19.6569 2 17.7712 2 14V10C2 6.22876 2 4.34315 3.17157 3.17157C4.34315 2 6.23869 2 10.0298 2C10.6358 2 11.1214 2 11.53 2.01666C11.5166 2.09659 11.5095 2.17813 11.5092 2.26057L11.5 5.09497C11.4999 6.19207 11.4998 7.16164 11.6049 7.94316C11.7188 8.79028 11.9803 9.63726 12.6716 10.3285C13.3628 11.0198 14.2098 11.2813 15.0569 11.3952C15.8385 11.5003 16.808 11.5002 17.9051 11.5001L18 11.5001H21.9574C22 12.0344 22 12.6901 22 13.5629V14C22 17.7712 22 19.6569 20.8284 20.8284C19.6569 22 17.7712 22 14 22Z" fill="currentColor" />
+        <path d="M6 13.75C5.58579 13.75 5.25 14.0858 5.25 14.5C5.25 14.9142 5.58579 15.25 6 15.25H14C14.4142 15.25 14.75 14.9142 14.75 14.5C14.75 14.0858 14.4142 13.75 14 13.75H6Z" fill="currentColor" />
+        <path d="M6 17.25C5.58579 17.25 5.25 17.5858 5.25 18C5.25 18.4142 5.58579 18.75 6 18.75H11.5C11.9142 18.75 12.25 18.4142 12.25 18C12.25 17.5858 11.9142 17.25 11.5 17.25H6Z" fill="currentColor" />
+        <path d="M11.5092 2.2601L11.5 5.0945C11.4999 6.1916 11.4998 7.16117 11.6049 7.94269C11.7188 8.78981 11.9803 9.6368 12.6716 10.3281C13.3629 11.0193 14.2098 11.2808 15.057 11.3947C15.8385 11.4998 16.808 11.4997 17.9051 11.4996L21.9574 11.4996C21.9698 11.6552 21.9786 11.821 21.9848 11.9995H22C22 11.732 22 11.5983 21.9901 11.4408C21.9335 10.5463 21.5617 9.52125 21.0315 8.79853C20.9382 8.6713 20.8743 8.59493 20.7467 8.44218C19.9542 7.49359 18.911 6.31193 18 5.49953C17.1892 4.77645 16.0787 3.98536 15.1101 3.3385C14.2781 2.78275 13.862 2.50487 13.2915 2.29834C13.1403 2.24359 12.9408 2.18311 12.7846 2.14466C12.4006 2.05013 12.0268 2.01725 11.5 2.00586L11.5092 2.2601Z" fill="currentColor" />
+    </svg>`,
+    'menu-scrumboard': `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path opacity="0.5" d="M21 15.9983V9.99826C21 7.16983 21 5.75562 20.1213 4.87694C19.3529 4.10856 18.175 4.01211 16 4H8C5.82497 4.01211 4.64706 4.10856 3.87868 4.87694C3 5.75562 3 7.16983 3 9.99826V15.9983C3 18.8267 3 20.2409 3.87868 21.1196C4.75736 21.9983 6.17157 21.9983 9 21.9983H15C17.8284 21.9983 19.2426 21.9983 20.1213 21.1196C21 20.2409 21 18.8267 21 15.9983Z" fill="currentColor" />
+        <path d="M8 3.5C8 2.67157 8.67157 2 9.5 2H14.5C15.3284 2 16 2.67157 16 3.5V4.5C16 5.32843 15.3284 6 14.5 6H9.5C8.67157 6 8 5.32843 8 4.5V3.5Z" fill="currentColor" />
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M12 9.25C12.4142 9.25 12.75 9.58579 12.75 10V12.25L15 12.25C15.4142 12.25 15.75 12.5858 15.75 13C15.75 13.4142 15.4142 13.75 15 13.75L12.75 13.75L12.75 16C12.75 16.4142 12.4142 16.75 12 16.75C11.5858 16.75 11.25 16.4142 11.25 16L11.25 13.75H9C8.58579 13.75 8.25 13.4142 8.25 13C8.25 12.5858 8.58579 12.25 9 12.25L11.25 12.25L11.25 10C11.25 9.58579 11.5858 9.25 12 9.25Z" fill="currentColor" />
+    </svg>`,
+};
+
+class IconComponent {
+    constructor() {
+        this.sanitizer = inject(DomSanitizer);
+        this.name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
+        this.iconClass = input('', ...(ngDevMode ? [{ debugName: "iconClass" }] : []));
+        this.svgHtml = computed(() => {
+            const iconName = this.name();
+            const svg = ICON_REGISTRY[iconName];
+            if (!svg) {
+                console.warn(`Icon "${iconName}" not found in registry`);
+                return '';
+            }
+            return this.sanitizer.bypassSecurityTrustHtml(svg);
+        }, ...(ngDevMode ? [{ debugName: "svgHtml" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.2", type: IconComponent, isStandalone: true, selector: "ls-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, iconClass: { classPropertyName: "iconClass", publicName: "iconClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `<span [innerHTML]="svgHtml()" [class]="iconClass()"></span>`, isInline: true, styles: [":host{display:inline-flex;align-items:center;justify-content:center}span{display:contents}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: IconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ls-icon', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `<span [innerHTML]="svgHtml()" [class]="iconClass()"></span>`, styles: [":host{display:inline-flex;align-items:center;justify-content:center}span{display:contents}\n"] }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], iconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconClass", required: false }] }] } });
+
+class DropdownComponent {
+    constructor() {
+        this.contentClass = '';
+        this.isOpen = false;
+        this.isAnimating = false;
+    }
+    toggle() {
+        if (this.isOpen) {
+            this.isAnimating = true;
+            this.isOpen = false;
+        }
+        else {
+            this.isOpen = true;
+        }
+    }
+    close() {
+        if (this.isOpen) {
+            this.isAnimating = true;
+            this.isOpen = false;
+        }
+    }
+    onAnimationEnd() {
+        this.isAnimating = false;
+    }
+    onDocumentClick(event) {
+        if (this.dropdown && !this.dropdown.nativeElement.contains(event.target)) {
+            this.close();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: DropdownComponent, isStandalone: true, selector: "ls-dropdown", inputs: { contentClass: "contentClass" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: `
+        <div class="dropdown" #dropdown>
+            <div (click)="toggle()">
+                <ng-content select="[dropdownButton]"></ng-content>
+            </div>
+            @if (isOpen || isAnimating) {
+                <div class="dropdown-content"
+                     [ngClass]="[contentClass, isOpen ? 'toggle-enter' : 'toggle-leave']"
+                     (animationend)="onAnimationEnd()">
+                    <ng-content select="[dropdownContent]"></ng-content>
+                </div>
+            }
+        </div>
+    `, isInline: true, styles: [":host{display:block}.dropdown{position:relative}.dropdown-content{position:absolute;z-index:50}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: DropdownComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [CommonModule], selector: 'ls-dropdown', template: `
+        <div class="dropdown" #dropdown>
+            <div (click)="toggle()">
+                <ng-content select="[dropdownButton]"></ng-content>
+            </div>
+            @if (isOpen || isAnimating) {
+                <div class="dropdown-content"
+                     [ngClass]="[contentClass, isOpen ? 'toggle-enter' : 'toggle-leave']"
+                     (animationend)="onAnimationEnd()">
+                    <ng-content select="[dropdownContent]"></ng-content>
+                </div>
+            }
+        </div>
+    `, styles: [":host{display:block}.dropdown{position:relative}.dropdown-content{position:absolute;z-index:50}\n"] }]
+        }], propDecorators: { contentClass: [{
+                type: Input
+            }], dropdown: [{
+                type: ViewChild,
+                args: ['dropdown']
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+class LsDropdownContentDirective {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: LsDropdownContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.2", type: LsDropdownContentDirective, isStandalone: true, selector: "[lsDropdownContent]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: LsDropdownContentDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[lsDropdownContent]', standalone: true }]
+        }] });
+
+class ButtonComponent {
+    constructor() {
+        this.sanitizer = inject(DomSanitizer);
+        this.variant = input('contained', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+        this.color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
+        this.size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : []));
+        this.type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : []));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        this.fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
+        this.startIcon = input(...(ngDevMode ? [undefined, { debugName: "startIcon" }] : []));
+        this.endIcon = input(...(ngDevMode ? [undefined, { debugName: "endIcon" }] : []));
+        this.loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+        this.loadingIndicator = input('spinner', ...(ngDevMode ? [{ debugName: "loadingIndicator" }] : []));
+        this.loadingPosition = input('center', ...(ngDevMode ? [{ debugName: "loadingPosition" }] : []));
+        this.rounded = input(false, ...(ngDevMode ? [{ debugName: "rounded" }] : []));
+        this.clicked = output();
+    }
+    get isCustomText() {
+        return this.loadingIndicator() !== 'spinner';
+    }
+    get iconSizeClass() {
+        switch (this.size()) {
+            case 'small':
+                return 'btn-icon--sm';
+            case 'large':
+                return 'btn-icon--lg';
+            default:
+                return 'btn-icon--md';
+        }
+    }
+    get showStartIcon() {
+        if (!this.startIcon())
+            return false;
+        if (!this.loading())
+            return true;
+        return this.loadingPosition() === 'end' && !this.isCustomText;
+    }
+    get showEndIcon() {
+        if (!this.endIcon())
+            return false;
+        if (!this.loading())
+            return true;
+        return this.loadingPosition() === 'start' && !this.isCustomText;
+    }
+    get sanitizedStartIcon() {
+        return this.sanitizer.bypassSecurityTrustHtml(this.startIcon() ?? '');
+    }
+    get sanitizedEndIcon() {
+        return this.sanitizer.bypassSecurityTrustHtml(this.endIcon() ?? '');
+    }
+    get buttonClasses() {
+        const classes = ['btn'];
+        const variant = this.variant();
+        const color = this.color();
+        // Variant + color mapping
+        if (variant === 'contained') {
+            classes.push(`btn-${color}`);
+        }
+        if (variant === 'outline') {
+            classes.push(`btn-outline-${color}`);
+        }
+        if (variant === 'text') {
+            classes.push(`btn-text-${color}`);
+        }
+        // Size
+        switch (this.size()) {
+            case 'small':
+                classes.push('btn-sm');
+                break;
+            case 'large':
+                classes.push('btn-lg');
+                break;
+            default:
+                classes.push('btn-md');
+        }
+        if (this.fullWidth()) {
+            classes.push('btn-full-width');
+        }
+        if (this.rounded()) {
+            classes.push('btn-rounded');
+        }
+        return classes.join(' ');
+    }
+    onClick(event) {
+        if (!this.disabled() && !this.loading()) {
+            this.clicked.emit(event);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ButtonComponent, isStandalone: true, selector: "ls-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, startIcon: { classPropertyName: "startIcon", publicName: "startIcon", isSignal: true, isRequired: false, transformFunction: null }, endIcon: { classPropertyName: "endIcon", publicName: "endIcon", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingIndicator: { classPropertyName: "loadingIndicator", publicName: "loadingIndicator", isSignal: true, isRequired: false, transformFunction: null }, loadingPosition: { classPropertyName: "loadingPosition", publicName: "loadingPosition", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: `
+    <button
+      [type]="type()"
+      [disabled]="disabled() || loading()"
+      [class]="buttonClasses"
+      (click)="onClick($event)">
+      <ng-template #spinner>
+        <svg class="btn-spinner" viewBox="0 0 24 24" fill="none">
+          <circle
+            class="btn-spinner-circle"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            stroke-width="4" />
+          <path
+            class="btn-spinner-path"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+        </svg>
+      </ng-template>
+
+      @if (showStartIcon) {
+        <span
+          class="btn-icon btn-icon--start"
+          [class]="iconSizeClass"
+          [innerHTML]="sanitizedStartIcon"></span>
+      }
+
+      @if (loading() && isCustomText) {
+        <span class="btn-loading-overlay">
+          {{ loadingIndicator() }}
+        </span>
+      }
+
+      @if (loading() && !isCustomText && loadingPosition() === 'start') {
+        <span class="btn-loading-inline btn-loading-inline--start">
+          <ng-container *ngTemplateOutlet="spinner" />
+        </span>
+      }
+
+      @if (loading() && !isCustomText && loadingPosition() === 'center') {
+        <span class="btn-loading-overlay">
+          <ng-container *ngTemplateOutlet="spinner" />
+        </span>
+      }
+
+      <span
+        [class]="
+          loading() && (isCustomText || loadingPosition() === 'center')
+            ? 'btn-content--hidden'
+            : ''
+        ">
+        <ng-content />
+      </span>
+
+      @if (loading() && !isCustomText && loadingPosition() === 'end') {
+        <span class="btn-loading-inline btn-loading-inline--end">
+          <ng-container *ngTemplateOutlet="spinner" />
+        </span>
+      }
+      @if (showEndIcon) {
+        <span
+          class="btn-icon btn-icon--end"
+          [class]="iconSizeClass"
+          [innerHTML]="sanitizedEndIcon"></span>
+      }
+    </button>
+  `, isInline: true, styles: [":host{display:contents}.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--ls-border-radius-md);border:1px solid;padding:.5rem 1.25rem;font-size:.875rem;line-height:1.25rem;font-weight:600;box-shadow:0 10px 20px -10px;outline:none;transition:all var(--ls-transition-duration) ease;cursor:pointer}.btn-lg{padding:.625rem 1.75rem;font-size:1rem;line-height:1.5rem}.btn-sm{padding:.375rem .625rem;font-size:.75rem;line-height:1rem}.btn[disabled]{cursor:not-allowed;opacity:.6}.btn-primary{border-color:var(--ls-color-primary);background-color:var(--ls-color-primary);color:var(--ls-color-white);box-shadow:0 10px 20px -10px #4361ee99}.btn-primary:hover{filter:brightness(.9)}.btn-secondary{border-color:var(--ls-color-secondary);background-color:var(--ls-color-secondary);color:var(--ls-color-white);box-shadow:0 10px 20px -10px #805dca99}.btn-secondary:hover{filter:brightness(.9)}.btn-success{border-color:var(--ls-color-success);background-color:var(--ls-color-success);color:var(--ls-color-white);box-shadow:0 10px 20px -10px #00ab5599}.btn-success:hover{filter:brightness(.9)}.btn-error{border-color:var(--ls-color-danger);background-color:var(--ls-color-danger);color:var(--ls-color-white);box-shadow:0 10px 20px -10px #e7515a99}.btn-error:hover{filter:brightness(.9)}.btn-warning{border-color:var(--ls-color-warning);background-color:var(--ls-color-warning);color:var(--ls-color-white);box-shadow:0 10px 20px -10px #e2a03f99}.btn-warning:hover{filter:brightness(.9)}.btn-info{border-color:var(--ls-color-info);background-color:var(--ls-color-info);color:var(--ls-color-white);box-shadow:0 10px 20px -10px #2196f399}.btn-info:hover{filter:brightness(.9)}.btn-dark{border-color:var(--ls-color-dark);background-color:var(--ls-color-dark);color:var(--ls-color-white);box-shadow:0 10px 20px -10px #3b3f5c99}.btn-dark:hover{filter:brightness(.9)}.btn-outline-primary{border-color:var(--ls-color-primary);color:var(--ls-color-primary);background-color:transparent;box-shadow:none}.btn-outline-primary:hover{background-color:var(--ls-color-primary);color:var(--ls-color-white)}.btn-outline-secondary{border-color:var(--ls-color-secondary);color:var(--ls-color-secondary);background-color:transparent;box-shadow:none}.btn-outline-secondary:hover{background-color:var(--ls-color-secondary);color:var(--ls-color-white)}.btn-outline-success{border-color:var(--ls-color-success);color:var(--ls-color-success);background-color:transparent;box-shadow:none}.btn-outline-success:hover{background-color:var(--ls-color-success);color:var(--ls-color-white)}.btn-outline-error{border-color:var(--ls-color-danger);color:var(--ls-color-danger);background-color:transparent;box-shadow:none}.btn-outline-error:hover{background-color:var(--ls-color-danger);color:var(--ls-color-white)}.btn-outline-warning{border-color:var(--ls-color-warning);color:var(--ls-color-warning);background-color:transparent;box-shadow:none}.btn-outline-warning:hover{background-color:var(--ls-color-warning);color:var(--ls-color-white)}.btn-outline-info{border-color:var(--ls-color-info);color:var(--ls-color-info);background-color:transparent;box-shadow:none}.btn-outline-info:hover{background-color:var(--ls-color-info);color:var(--ls-color-white)}.btn-outline-dark{border-color:var(--ls-color-dark);color:var(--ls-color-dark);background-color:transparent;box-shadow:none}.btn-outline-dark:hover{background-color:var(--ls-color-dark);color:var(--ls-color-white)}.btn-text-primary{border-color:transparent;background-color:transparent;color:var(--ls-color-primary);box-shadow:none}.btn-text-primary:hover{background-color:#4361ee1a}.btn-text-secondary{border-color:transparent;background-color:transparent;color:var(--ls-color-secondary);box-shadow:none}.btn-text-secondary:hover{background-color:#805dca1a}.btn-text-success{border-color:transparent;background-color:transparent;color:var(--ls-color-success);box-shadow:none}.btn-text-success:hover{background-color:#00ab551a}.btn-text-error{border-color:transparent;background-color:transparent;color:var(--ls-color-danger);box-shadow:none}.btn-text-error:hover{background-color:#e7515a1a}.btn-text-warning{border-color:transparent;background-color:transparent;color:var(--ls-color-warning);box-shadow:none}.btn-text-warning:hover{background-color:#e2a03f1a}.btn-text-info{border-color:transparent;background-color:transparent;color:var(--ls-color-info);box-shadow:none}.btn-text-info:hover{background-color:#2196f31a}.btn-text-dark{border-color:transparent;background-color:transparent;color:var(--ls-color-dark);box-shadow:none}.btn-text-dark:hover{background-color:#3b3f5c1a}.btn-gradient{background:linear-gradient(to right,var(--ls-gradient-start),var(--ls-gradient-end));color:var(--ls-color-white);border-color:transparent}.btn-gradient:hover{background:linear-gradient(to right,var(--ls-gradient-end),var(--ls-gradient-start))}.btn-full-width{width:100%}.btn-rounded{border-radius:var(--ls-border-radius-full)}.btn-spinner{animation:ls-spin 1s linear infinite;height:1rem;width:1rem}.btn-spinner-circle{opacity:.25}.btn-spinner-path{opacity:.75}.btn-icon{flex-shrink:0;display:inline-flex}.btn-icon>svg{height:100%;width:100%}.btn-icon--start{margin-inline-end:.375rem}.btn-icon--end{margin-inline-start:.375rem}.btn-icon--sm{height:.875rem;width:.875rem}.btn-icon--md{height:1rem;width:1rem}.btn-icon--lg{height:1.25rem;width:1.25rem}.btn-loading-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.btn-loading-inline{display:inline-flex;align-items:center}.btn-loading-inline--start{margin-inline-end:.5rem}.btn-loading-inline--end{margin-inline-start:.5rem}.btn-content--hidden{visibility:hidden}\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: ButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ls-button', standalone: true, imports: [NgTemplateOutlet], template: `
+    <button
+      [type]="type()"
+      [disabled]="disabled() || loading()"
+      [class]="buttonClasses"
+      (click)="onClick($event)">
+      <ng-template #spinner>
+        <svg class="btn-spinner" viewBox="0 0 24 24" fill="none">
+          <circle
+            class="btn-spinner-circle"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            stroke-width="4" />
+          <path
+            class="btn-spinner-path"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+        </svg>
+      </ng-template>
+
+      @if (showStartIcon) {
+        <span
+          class="btn-icon btn-icon--start"
+          [class]="iconSizeClass"
+          [innerHTML]="sanitizedStartIcon"></span>
+      }
+
+      @if (loading() && isCustomText) {
+        <span class="btn-loading-overlay">
+          {{ loadingIndicator() }}
+        </span>
+      }
+
+      @if (loading() && !isCustomText && loadingPosition() === 'start') {
+        <span class="btn-loading-inline btn-loading-inline--start">
+          <ng-container *ngTemplateOutlet="spinner" />
+        </span>
+      }
+
+      @if (loading() && !isCustomText && loadingPosition() === 'center') {
+        <span class="btn-loading-overlay">
+          <ng-container *ngTemplateOutlet="spinner" />
+        </span>
+      }
+
+      <span
+        [class]="
+          loading() && (isCustomText || loadingPosition() === 'center')
+            ? 'btn-content--hidden'
+            : ''
+        ">
+        <ng-content />
+      </span>
+
+      @if (loading() && !isCustomText && loadingPosition() === 'end') {
+        <span class="btn-loading-inline btn-loading-inline--end">
+          <ng-container *ngTemplateOutlet="spinner" />
+        </span>
+      }
+      @if (showEndIcon) {
+        <span
+          class="btn-icon btn-icon--end"
+          [class]="iconSizeClass"
+          [innerHTML]="sanitizedEndIcon"></span>
+      }
+    </button>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:contents}.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--ls-border-radius-md);border:1px solid;padding:.5rem 1.25rem;font-size:.875rem;line-height:1.25rem;font-weight:600;box-shadow:0 10px 20px -10px;outline:none;transition:all var(--ls-transition-duration) ease;cursor:pointer}.btn-lg{padding:.625rem 1.75rem;font-size:1rem;line-height:1.5rem}.btn-sm{padding:.375rem .625rem;font-size:.75rem;line-height:1rem}.btn[disabled]{cursor:not-allowed;opacity:.6}.btn-primary{border-color:var(--ls-color-primary);background-color:var(--ls-color-primary);color:var(--ls-color-white);box-shadow:0 10px 20px -10px #4361ee99}.btn-primary:hover{filter:brightness(.9)}.btn-secondary{border-color:var(--ls-color-secondary);background-color:var(--ls-color-secondary);color:var(--ls-color-white);box-shadow:0 10px 20px -10px #805dca99}.btn-secondary:hover{filter:brightness(.9)}.btn-success{border-color:var(--ls-color-success);background-color:var(--ls-color-success);color:var(--ls-color-white);box-shadow:0 10px 20px -10px #00ab5599}.btn-success:hover{filter:brightness(.9)}.btn-error{border-color:var(--ls-color-danger);background-color:var(--ls-color-danger);color:var(--ls-color-white);box-shadow:0 10px 20px -10px #e7515a99}.btn-error:hover{filter:brightness(.9)}.btn-warning{border-color:var(--ls-color-warning);background-color:var(--ls-color-warning);color:var(--ls-color-white);box-shadow:0 10px 20px -10px #e2a03f99}.btn-warning:hover{filter:brightness(.9)}.btn-info{border-color:var(--ls-color-info);background-color:var(--ls-color-info);color:var(--ls-color-white);box-shadow:0 10px 20px -10px #2196f399}.btn-info:hover{filter:brightness(.9)}.btn-dark{border-color:var(--ls-color-dark);background-color:var(--ls-color-dark);color:var(--ls-color-white);box-shadow:0 10px 20px -10px #3b3f5c99}.btn-dark:hover{filter:brightness(.9)}.btn-outline-primary{border-color:var(--ls-color-primary);color:var(--ls-color-primary);background-color:transparent;box-shadow:none}.btn-outline-primary:hover{background-color:var(--ls-color-primary);color:var(--ls-color-white)}.btn-outline-secondary{border-color:var(--ls-color-secondary);color:var(--ls-color-secondary);background-color:transparent;box-shadow:none}.btn-outline-secondary:hover{background-color:var(--ls-color-secondary);color:var(--ls-color-white)}.btn-outline-success{border-color:var(--ls-color-success);color:var(--ls-color-success);background-color:transparent;box-shadow:none}.btn-outline-success:hover{background-color:var(--ls-color-success);color:var(--ls-color-white)}.btn-outline-error{border-color:var(--ls-color-danger);color:var(--ls-color-danger);background-color:transparent;box-shadow:none}.btn-outline-error:hover{background-color:var(--ls-color-danger);color:var(--ls-color-white)}.btn-outline-warning{border-color:var(--ls-color-warning);color:var(--ls-color-warning);background-color:transparent;box-shadow:none}.btn-outline-warning:hover{background-color:var(--ls-color-warning);color:var(--ls-color-white)}.btn-outline-info{border-color:var(--ls-color-info);color:var(--ls-color-info);background-color:transparent;box-shadow:none}.btn-outline-info:hover{background-color:var(--ls-color-info);color:var(--ls-color-white)}.btn-outline-dark{border-color:var(--ls-color-dark);color:var(--ls-color-dark);background-color:transparent;box-shadow:none}.btn-outline-dark:hover{background-color:var(--ls-color-dark);color:var(--ls-color-white)}.btn-text-primary{border-color:transparent;background-color:transparent;color:var(--ls-color-primary);box-shadow:none}.btn-text-primary:hover{background-color:#4361ee1a}.btn-text-secondary{border-color:transparent;background-color:transparent;color:var(--ls-color-secondary);box-shadow:none}.btn-text-secondary:hover{background-color:#805dca1a}.btn-text-success{border-color:transparent;background-color:transparent;color:var(--ls-color-success);box-shadow:none}.btn-text-success:hover{background-color:#00ab551a}.btn-text-error{border-color:transparent;background-color:transparent;color:var(--ls-color-danger);box-shadow:none}.btn-text-error:hover{background-color:#e7515a1a}.btn-text-warning{border-color:transparent;background-color:transparent;color:var(--ls-color-warning);box-shadow:none}.btn-text-warning:hover{background-color:#e2a03f1a}.btn-text-info{border-color:transparent;background-color:transparent;color:var(--ls-color-info);box-shadow:none}.btn-text-info:hover{background-color:#2196f31a}.btn-text-dark{border-color:transparent;background-color:transparent;color:var(--ls-color-dark);box-shadow:none}.btn-text-dark:hover{background-color:#3b3f5c1a}.btn-gradient{background:linear-gradient(to right,var(--ls-gradient-start),var(--ls-gradient-end));color:var(--ls-color-white);border-color:transparent}.btn-gradient:hover{background:linear-gradient(to right,var(--ls-gradient-end),var(--ls-gradient-start))}.btn-full-width{width:100%}.btn-rounded{border-radius:var(--ls-border-radius-full)}.btn-spinner{animation:ls-spin 1s linear infinite;height:1rem;width:1rem}.btn-spinner-circle{opacity:.25}.btn-spinner-path{opacity:.75}.btn-icon{flex-shrink:0;display:inline-flex}.btn-icon>svg{height:100%;width:100%}.btn-icon--start{margin-inline-end:.375rem}.btn-icon--end{margin-inline-start:.375rem}.btn-icon--sm{height:.875rem;width:.875rem}.btn-icon--md{height:1rem;width:1rem}.btn-icon--lg{height:1.25rem;width:1.25rem}.btn-loading-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.btn-loading-inline{display:inline-flex;align-items:center}.btn-loading-inline--start{margin-inline-end:.5rem}.btn-loading-inline--end{margin-inline-start:.5rem}.btn-content--hidden{visibility:hidden}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], startIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "startIcon", required: false }] }], endIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "endIcon", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingIndicator", required: false }] }], loadingPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingPosition", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
+
+const INDETERMINATE_SVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">' +
+    '<path d="M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm-2 10H7v-2h10v2z"/>' +
+    '</svg>';
+class CheckboxComponent {
+    constructor() {
+        this._sanitizer = inject(DomSanitizer);
+        this.icon = input.required(...(ngDevMode ? [{ debugName: "icon" }] : []));
+        this.checkedIcon = input.required(...(ngDevMode ? [{ debugName: "checkedIcon" }] : []));
+        this.checked = input(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
+        this.defaultChecked = input(false, ...(ngDevMode ? [{ debugName: "defaultChecked" }] : []));
+        this.color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
+        this.size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : []));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        this.indeterminate = input(false, ...(ngDevMode ? [{ debugName: "indeterminate" }] : []));
+        this.labelPlacement = input('end', ...(ngDevMode ? [{ debugName: "labelPlacement" }] : []));
+        this.changed = output();
+        this._isChecked = signal(false, ...(ngDevMode ? [{ debugName: "_isChecked" }] : []));
+        this._isFirstSync = true;
+        this._syncChecked = effect(() => {
+            const checked = this.checked();
+            if (this._isFirstSync) {
+                this._isFirstSync = false;
+                this._isChecked.set(checked || this.defaultChecked());
+            }
+            else {
+                this._isChecked.set(checked);
+            }
+        }, ...(ngDevMode ? [{ debugName: "_syncChecked" }] : []));
+        this.checkboxClasses = computed(() => {
+            const s = this.size() === 'small' ? 'sm' : 'md';
+            const parts = [
+                'checkbox',
+                `checkbox-${s}`,
+                `checkbox-color-${this.color()}`,
+                `checkbox-label-${this.labelPlacement()}`,
+            ];
+            if (this._isChecked()) {
+                parts.push('checkbox-checked');
+            }
+            if (this.disabled()) {
+                parts.push('checkbox-disabled');
+            }
+            if (this.indeterminate()) {
+                parts.push('checkbox-indeterminate');
+            }
+            return parts.join(' ');
+        }, ...(ngDevMode ? [{ debugName: "checkboxClasses" }] : []));
+        this.currentIcon = computed(() => {
+            let svg;
+            if (this.indeterminate()) {
+                svg = INDETERMINATE_SVG;
+            }
+            else if (this._isChecked()) {
+                svg = this.checkedIcon();
+            }
+            else {
+                svg = this.icon();
+            }
+            return this._sanitizer.bypassSecurityTrustHtml(svg);
+        }, ...(ngDevMode ? [{ debugName: "currentIcon" }] : []));
+    }
+    onToggle() {
+        if (this.disabled()) {
+            return;
+        }
+        const next = !this._isChecked();
+        this._isChecked.set(next);
+        this.changed.emit(next);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.2", type: CheckboxComponent, isStandalone: true, selector: "ls-checkbox", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, checkedIcon: { classPropertyName: "checkedIcon", publicName: "checkedIcon", isSignal: true, isRequired: true, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, defaultChecked: { classPropertyName: "defaultChecked", publicName: "defaultChecked", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, labelPlacement: { classPropertyName: "labelPlacement", publicName: "labelPlacement", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, ngImport: i0, template: `
+    <label [class]="checkboxClasses()">
+      <input
+        type="checkbox"
+        class="checkbox-input"
+        [checked]="_isChecked()"
+        [disabled]="disabled()"
+        [indeterminate]="indeterminate()"
+        (change)="onToggle()"
+      />
+      <span
+        class="checkbox-icon"
+        [innerHTML]="currentIcon()"
+      ></span>
+      <span class="checkbox-label">
+        <ng-content />
+      </span>
+    </label>
+  `, isInline: true, styles: [":host{display:inline-flex}.checkbox{display:inline-flex;align-items:center;gap:8px;cursor:pointer;position:relative;transition:opacity var(--ls-transition-duration)}.checkbox-input{position:absolute;opacity:0;width:0;height:0;margin:0;padding:0;pointer-events:none}.checkbox-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}.checkbox-icon svg{width:100%;height:100%}.checkbox-label{-webkit-user-select:none;user-select:none;cursor:pointer}.checkbox-sm .checkbox-icon{width:18px;height:18px}.checkbox-sm .checkbox-label{font-size:.875rem}.checkbox-md .checkbox-icon{width:1.25rem;height:1.25rem}.checkbox-md .checkbox-label{font-size:.875rem}.checkbox-label-end{flex-direction:row}.checkbox-label-start{flex-direction:row-reverse}.checkbox-label-top{flex-direction:column-reverse;align-items:center}.checkbox-label-bottom{flex-direction:column;align-items:center}.checkbox-color-inherit.checkbox-checked .checkbox-icon,.checkbox-color-inherit.checkbox-indeterminate .checkbox-icon{color:inherit}.checkbox-color-primary.checkbox-checked .checkbox-icon,.checkbox-color-primary.checkbox-indeterminate .checkbox-icon{color:var(--ls-color-primary)}.checkbox-color-secondary.checkbox-checked .checkbox-icon,.checkbox-color-secondary.checkbox-indeterminate .checkbox-icon{color:var(--ls-color-secondary)}.checkbox-color-success.checkbox-checked .checkbox-icon,.checkbox-color-success.checkbox-indeterminate .checkbox-icon{color:var(--ls-color-success)}.checkbox-color-error.checkbox-checked .checkbox-icon,.checkbox-color-error.checkbox-indeterminate .checkbox-icon{color:var(--ls-color-danger)}.checkbox-color-info.checkbox-checked .checkbox-icon,.checkbox-color-info.checkbox-indeterminate .checkbox-icon{color:var(--ls-color-info)}.checkbox-color-warning.checkbox-checked .checkbox-icon,.checkbox-color-warning.checkbox-indeterminate .checkbox-icon{color:var(--ls-color-warning)}.checkbox:not(.checkbox-checked):not(.checkbox-indeterminate) .checkbox-icon{color:var(--ls-color-dark)}.checkbox-disabled{cursor:not-allowed;opacity:.5}.checkbox-disabled .checkbox-label{cursor:not-allowed}.checkbox-input:focus-visible+.checkbox-icon{outline:2px solid currentColor;outline-offset:2px;border-radius:2px}body.dark .checkbox:not(.checkbox-checked):not(.checkbox-indeterminate) .checkbox-icon{color:#e0e6ed}body.dark .checkbox-label{color:#e0e6ed}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: CheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ls-checkbox', standalone: true, template: `
+    <label [class]="checkboxClasses()">
+      <input
+        type="checkbox"
+        class="checkbox-input"
+        [checked]="_isChecked()"
+        [disabled]="disabled()"
+        [indeterminate]="indeterminate()"
+        (change)="onToggle()"
+      />
+      <span
+        class="checkbox-icon"
+        [innerHTML]="currentIcon()"
+      ></span>
+      <span class="checkbox-label">
+        <ng-content />
+      </span>
+    </label>
+  `, styles: [":host{display:inline-flex}.checkbox{display:inline-flex;align-items:center;gap:8px;cursor:pointer;position:relative;transition:opacity var(--ls-transition-duration)}.checkbox-input{position:absolute;opacity:0;width:0;height:0;margin:0;padding:0;pointer-events:none}.checkbox-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}.checkbox-icon svg{width:100%;height:100%}.checkbox-label{-webkit-user-select:none;user-select:none;cursor:pointer}.checkbox-sm .checkbox-icon{width:18px;height:18px}.checkbox-sm .checkbox-label{font-size:.875rem}.checkbox-md .checkbox-icon{width:1.25rem;height:1.25rem}.checkbox-md .checkbox-label{font-size:.875rem}.checkbox-label-end{flex-direction:row}.checkbox-label-start{flex-direction:row-reverse}.checkbox-label-top{flex-direction:column-reverse;align-items:center}.checkbox-label-bottom{flex-direction:column;align-items:center}.checkbox-color-inherit.checkbox-checked .checkbox-icon,.checkbox-color-inherit.checkbox-indeterminate .checkbox-icon{color:inherit}.checkbox-color-primary.checkbox-checked .checkbox-icon,.checkbox-color-primary.checkbox-indeterminate .checkbox-icon{color:var(--ls-color-primary)}.checkbox-color-secondary.checkbox-checked .checkbox-icon,.checkbox-color-secondary.checkbox-indeterminate .checkbox-icon{color:var(--ls-color-secondary)}.checkbox-color-success.checkbox-checked .checkbox-icon,.checkbox-color-success.checkbox-indeterminate .checkbox-icon{color:var(--ls-color-success)}.checkbox-color-error.checkbox-checked .checkbox-icon,.checkbox-color-error.checkbox-indeterminate .checkbox-icon{color:var(--ls-color-danger)}.checkbox-color-info.checkbox-checked .checkbox-icon,.checkbox-color-info.checkbox-indeterminate .checkbox-icon{color:var(--ls-color-info)}.checkbox-color-warning.checkbox-checked .checkbox-icon,.checkbox-color-warning.checkbox-indeterminate .checkbox-icon{color:var(--ls-color-warning)}.checkbox:not(.checkbox-checked):not(.checkbox-indeterminate) .checkbox-icon{color:var(--ls-color-dark)}.checkbox-disabled{cursor:not-allowed;opacity:.5}.checkbox-disabled .checkbox-label{cursor:not-allowed}.checkbox-input:focus-visible+.checkbox-icon{outline:2px solid currentColor;outline-offset:2px;border-radius:2px}body.dark .checkbox:not(.checkbox-checked):not(.checkbox-indeterminate) .checkbox-icon{color:#e0e6ed}body.dark .checkbox-label{color:#e0e6ed}\n"] }]
+        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], checkedIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkedIcon", required: true }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], defaultChecked: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultChecked", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], labelPlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPlacement", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
+
+class IconButtonComponent {
+    constructor() {
+        this.sanitizer = inject(DomSanitizer);
+        this.icon = input.required(...(ngDevMode ? [{ debugName: "icon" }] : []));
+        this.ariaLabel = input.required(...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+        this.color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
+        this.size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : []));
+        this.type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : []));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        this.loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+        this.clicked = output();
+    }
+    get sanitizedIcon() {
+        return this.sanitizer.bypassSecurityTrustHtml(this.icon());
+    }
+    get buttonClasses() {
+        const classes = ['icon-btn'];
+        classes.push(`icon-btn-${this.color()}`);
+        switch (this.size()) {
+            case 'small':
+                classes.push('icon-btn-sm');
+                break;
+            case 'large':
+                classes.push('icon-btn-lg');
+                break;
+            default:
+                classes.push('icon-btn-md');
+        }
+        return classes.join(' ');
+    }
+    onClick(event) {
+        if (!this.disabled() && !this.loading()) {
+            this.clicked.emit(event);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: IconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: IconButtonComponent, isStandalone: true, selector: "ls-icon-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: `
+        <button
+            [type]="type()"
+            [disabled]="disabled() || loading()"
+            [class]="buttonClasses"
+            [attr.aria-label]="ariaLabel()"
+            [attr.aria-busy]="loading() || null"
+            (click)="onClick($event)">
+            @if (loading()) {
+                <svg class="icon-btn-spinner" viewBox="0 0 24 24" fill="none">
+                    <circle
+                        class="icon-btn-spinner-circle"
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke="currentColor"
+                        stroke-width="4" />
+                    <path
+                        class="icon-btn-spinner-path"
+                        fill="currentColor"
+                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+                </svg>
+            } @else {
+                <span class="icon-btn-icon" [innerHTML]="sanitizedIcon"></span>
+            }
+        </button>
+    `, isInline: true, styles: [":host{display:inline-flex}.icon-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:var(--ls-border-radius-full);background-color:transparent;padding:0;outline:none;cursor:pointer;transition:all var(--ls-transition-duration) ease;box-shadow:none}.icon-btn-sm{width:32px;height:32px}.icon-btn-md{width:40px;height:40px}.icon-btn-lg{width:48px;height:48px}.icon-btn-sm .icon-btn-icon,.icon-btn-sm .icon-btn-spinner{width:18px;height:18px}.icon-btn-md .icon-btn-icon,.icon-btn-md .icon-btn-spinner{width:24px;height:24px}.icon-btn-lg .icon-btn-icon,.icon-btn-lg .icon-btn-spinner{width:28px;height:28px}.icon-btn-primary{color:var(--ls-color-primary)}.icon-btn-primary:hover{background-color:#4361ee1a}.icon-btn-secondary{color:var(--ls-color-secondary)}.icon-btn-secondary:hover{background-color:#805dca1a}.icon-btn-success{color:var(--ls-color-success)}.icon-btn-success:hover{background-color:#00ab551a}.icon-btn-error{color:var(--ls-color-danger)}.icon-btn-error:hover{background-color:#e7515a1a}.icon-btn-warning{color:var(--ls-color-warning)}.icon-btn-warning:hover{background-color:#e2a03f1a}.icon-btn-info{color:var(--ls-color-info)}.icon-btn-info:hover{background-color:#2196f31a}.icon-btn-dark{color:var(--ls-color-dark)}.icon-btn-dark:hover{background-color:#3b3f5c1a}.icon-btn:focus-visible{outline:2px solid currentColor;outline-offset:2px}.icon-btn[disabled]{cursor:not-allowed;opacity:.6}.icon-btn[disabled]:hover{background-color:transparent}.icon-btn-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.icon-btn-icon>svg,.icon-btn-icon svg{width:100%;height:100%}.icon-btn-spinner{animation:ls-spin 1s linear infinite}.icon-btn-spinner-circle{opacity:.25}.icon-btn-spinner-path{opacity:.75}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: IconButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ls-icon-button', standalone: true, template: `
+        <button
+            [type]="type()"
+            [disabled]="disabled() || loading()"
+            [class]="buttonClasses"
+            [attr.aria-label]="ariaLabel()"
+            [attr.aria-busy]="loading() || null"
+            (click)="onClick($event)">
+            @if (loading()) {
+                <svg class="icon-btn-spinner" viewBox="0 0 24 24" fill="none">
+                    <circle
+                        class="icon-btn-spinner-circle"
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke="currentColor"
+                        stroke-width="4" />
+                    <path
+                        class="icon-btn-spinner-path"
+                        fill="currentColor"
+                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+                </svg>
+            } @else {
+                <span class="icon-btn-icon" [innerHTML]="sanitizedIcon"></span>
+            }
+        </button>
+    `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-flex}.icon-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:var(--ls-border-radius-full);background-color:transparent;padding:0;outline:none;cursor:pointer;transition:all var(--ls-transition-duration) ease;box-shadow:none}.icon-btn-sm{width:32px;height:32px}.icon-btn-md{width:40px;height:40px}.icon-btn-lg{width:48px;height:48px}.icon-btn-sm .icon-btn-icon,.icon-btn-sm .icon-btn-spinner{width:18px;height:18px}.icon-btn-md .icon-btn-icon,.icon-btn-md .icon-btn-spinner{width:24px;height:24px}.icon-btn-lg .icon-btn-icon,.icon-btn-lg .icon-btn-spinner{width:28px;height:28px}.icon-btn-primary{color:var(--ls-color-primary)}.icon-btn-primary:hover{background-color:#4361ee1a}.icon-btn-secondary{color:var(--ls-color-secondary)}.icon-btn-secondary:hover{background-color:#805dca1a}.icon-btn-success{color:var(--ls-color-success)}.icon-btn-success:hover{background-color:#00ab551a}.icon-btn-error{color:var(--ls-color-danger)}.icon-btn-error:hover{background-color:#e7515a1a}.icon-btn-warning{color:var(--ls-color-warning)}.icon-btn-warning:hover{background-color:#e2a03f1a}.icon-btn-info{color:var(--ls-color-info)}.icon-btn-info:hover{background-color:#2196f31a}.icon-btn-dark{color:var(--ls-color-dark)}.icon-btn-dark:hover{background-color:#3b3f5c1a}.icon-btn:focus-visible{outline:2px solid currentColor;outline-offset:2px}.icon-btn[disabled]{cursor:not-allowed;opacity:.6}.icon-btn[disabled]:hover{background-color:transparent}.icon-btn-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.icon-btn-icon>svg,.icon-btn-icon svg{width:100%;height:100%}.icon-btn-spinner{animation:ls-spin 1s linear infinite}.icon-btn-spinner-circle{opacity:.25}.icon-btn-spinner-path{opacity:.75}\n"] }]
+        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
+
+class RadioButtonComponent {
+    constructor() {
+        this.checked = input(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
+        this.color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
+        this.size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : []));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        this.labelPlacement = input('end', ...(ngDevMode ? [{ debugName: "labelPlacement" }] : []));
+        this.changed = output();
+        this._isChecked = signal(false, ...(ngDevMode ? [{ debugName: "_isChecked" }] : []));
+        this._isDisabledByCva = signal(false, ...(ngDevMode ? [{ debugName: "_isDisabledByCva" }] : []));
+        this._onChange = () => { };
+        this._onTouched = () => { };
+        this._syncChecked = effect(() => {
+            this._isChecked.set(this.checked());
+        }, ...(ngDevMode ? [{ debugName: "_syncChecked" }] : []));
+        this.radioClasses = computed(() => {
+            const s = this.size() === 'small' ? 'sm' : 'md';
+            const parts = [
+                'radio',
+                `radio-${s}`,
+                `radio-color-${this.color()}`,
+                `radio-label-${this.labelPlacement()}`,
+            ];
+            if (this._isChecked()) {
+                parts.push('radio-checked');
+            }
+            if (this.isEffectivelyDisabled()) {
+                parts.push('radio-disabled');
+            }
+            return parts.join(' ');
+        }, ...(ngDevMode ? [{ debugName: "radioClasses" }] : []));
+        this.isEffectivelyDisabled = computed(() => this.disabled() || this._isDisabledByCva(), ...(ngDevMode ? [{ debugName: "isEffectivelyDisabled" }] : []));
+    }
+    onToggle() {
+        if (this.isEffectivelyDisabled()) {
+            return;
+        }
+        const isNext = !this._isChecked();
+        this._isChecked.set(isNext);
+        this.changed.emit(isNext);
+        this._onChange(isNext);
+        this._onTouched();
+    }
+    writeValue(value) {
+        this._isChecked.set(!!value);
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._isDisabledByCva.set(isDisabled);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.2", type: RadioButtonComponent, isStandalone: true, selector: "ls-radio-button", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, labelPlacement: { classPropertyName: "labelPlacement", publicName: "labelPlacement", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => RadioButtonComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: `
+    <label [class]="radioClasses()">
+      <button
+        type="button"
+        role="radio"
+        class="radio-indicator"
+        [attr.aria-checked]="_isChecked()"
+        [disabled]="isEffectivelyDisabled()"
+        (click)="onToggle()"
+        (keydown.space)="onToggle(); $event.preventDefault()"
+        (keydown.enter)="onToggle(); $event.preventDefault()">
+      </button>
+      <span class="radio-label">
+        <ng-content />
+      </span>
+    </label>
+  `, isInline: true, styles: [":host{display:inline-flex}.radio{display:inline-flex;align-items:center;gap:8px;cursor:pointer;position:relative}.radio-indicator{position:relative;display:inline-flex;align-items:center;justify-content:center;border:2px solid #c4c4c4;border-radius:50%;background-color:transparent;padding:0;cursor:pointer;transition:border-color var(--ls-transition-duration),background-color var(--ls-transition-duration);outline:none;flex-shrink:0}.radio-indicator:after{content:\"\";position:absolute;border-radius:50%;transform:scale(0);transition:transform var(--ls-transition-duration)}.radio-checked .radio-indicator:after{transform:scale(1)}.radio-label{-webkit-user-select:none;user-select:none;cursor:pointer;font-size:.875rem}.radio-sm .radio-indicator{width:16px;height:16px}.radio-sm .radio-indicator:after{width:8px;height:8px}.radio-md .radio-indicator{width:20px;height:20px}.radio-md .radio-indicator:after{width:10px;height:10px}.radio-checked.radio-color-inherit .radio-indicator{border-color:inherit}.radio-checked.radio-color-inherit .radio-indicator:after{background-color:inherit}.radio-checked.radio-color-primary .radio-indicator{border-color:var(--ls-color-primary)}.radio-checked.radio-color-primary .radio-indicator:after{background-color:var(--ls-color-primary)}.radio-checked.radio-color-secondary .radio-indicator{border-color:var(--ls-color-secondary)}.radio-checked.radio-color-secondary .radio-indicator:after{background-color:var(--ls-color-secondary)}.radio-checked.radio-color-success .radio-indicator{border-color:var(--ls-color-success)}.radio-checked.radio-color-success .radio-indicator:after{background-color:var(--ls-color-success)}.radio-checked.radio-color-error .radio-indicator{border-color:var(--ls-color-error)}.radio-checked.radio-color-error .radio-indicator:after{background-color:var(--ls-color-error)}.radio-checked.radio-color-info .radio-indicator{border-color:var(--ls-color-info)}.radio-checked.radio-color-info .radio-indicator:after{background-color:var(--ls-color-info)}.radio-checked.radio-color-warning .radio-indicator{border-color:var(--ls-color-warning)}.radio-checked.radio-color-warning .radio-indicator:after{background-color:var(--ls-color-warning)}.radio-label-end{flex-direction:row}.radio-label-start{flex-direction:row-reverse}.radio-label-top{flex-direction:column-reverse;align-items:center}.radio-label-bottom{flex-direction:column;align-items:center}.radio-disabled{cursor:not-allowed;opacity:.5;pointer-events:none}.radio-disabled .radio-label,.radio-disabled .radio-indicator{cursor:not-allowed}.radio-indicator:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:50%}body.dark .radio-indicator{border-color:#555}body.dark .radio-label{color:#e0e6ed}body.dark .radio-checked.radio-color-primary .radio-indicator{border-color:var(--ls-color-primary)}body.dark .radio-checked.radio-color-primary .radio-indicator:after{background-color:var(--ls-color-primary)}body.dark .radio-checked.radio-color-secondary .radio-indicator{border-color:var(--ls-color-secondary)}body.dark .radio-checked.radio-color-secondary .radio-indicator:after{background-color:var(--ls-color-secondary)}body.dark .radio-checked.radio-color-success .radio-indicator{border-color:var(--ls-color-success)}body.dark .radio-checked.radio-color-success .radio-indicator:after{background-color:var(--ls-color-success)}body.dark .radio-checked.radio-color-error .radio-indicator{border-color:var(--ls-color-error)}body.dark .radio-checked.radio-color-error .radio-indicator:after{background-color:var(--ls-color-error)}body.dark .radio-checked.radio-color-info .radio-indicator{border-color:var(--ls-color-info)}body.dark .radio-checked.radio-color-info .radio-indicator:after{background-color:var(--ls-color-info)}body.dark .radio-checked.radio-color-warning .radio-indicator{border-color:var(--ls-color-warning)}body.dark .radio-checked.radio-color-warning .radio-indicator:after{background-color:var(--ls-color-warning)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RadioButtonComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => RadioButtonComponent),
+                            multi: true,
+                        },
+                    ], selector: 'ls-radio-button', standalone: true, template: `
+    <label [class]="radioClasses()">
+      <button
+        type="button"
+        role="radio"
+        class="radio-indicator"
+        [attr.aria-checked]="_isChecked()"
+        [disabled]="isEffectivelyDisabled()"
+        (click)="onToggle()"
+        (keydown.space)="onToggle(); $event.preventDefault()"
+        (keydown.enter)="onToggle(); $event.preventDefault()">
+      </button>
+      <span class="radio-label">
+        <ng-content />
+      </span>
+    </label>
+  `, styles: [":host{display:inline-flex}.radio{display:inline-flex;align-items:center;gap:8px;cursor:pointer;position:relative}.radio-indicator{position:relative;display:inline-flex;align-items:center;justify-content:center;border:2px solid #c4c4c4;border-radius:50%;background-color:transparent;padding:0;cursor:pointer;transition:border-color var(--ls-transition-duration),background-color var(--ls-transition-duration);outline:none;flex-shrink:0}.radio-indicator:after{content:\"\";position:absolute;border-radius:50%;transform:scale(0);transition:transform var(--ls-transition-duration)}.radio-checked .radio-indicator:after{transform:scale(1)}.radio-label{-webkit-user-select:none;user-select:none;cursor:pointer;font-size:.875rem}.radio-sm .radio-indicator{width:16px;height:16px}.radio-sm .radio-indicator:after{width:8px;height:8px}.radio-md .radio-indicator{width:20px;height:20px}.radio-md .radio-indicator:after{width:10px;height:10px}.radio-checked.radio-color-inherit .radio-indicator{border-color:inherit}.radio-checked.radio-color-inherit .radio-indicator:after{background-color:inherit}.radio-checked.radio-color-primary .radio-indicator{border-color:var(--ls-color-primary)}.radio-checked.radio-color-primary .radio-indicator:after{background-color:var(--ls-color-primary)}.radio-checked.radio-color-secondary .radio-indicator{border-color:var(--ls-color-secondary)}.radio-checked.radio-color-secondary .radio-indicator:after{background-color:var(--ls-color-secondary)}.radio-checked.radio-color-success .radio-indicator{border-color:var(--ls-color-success)}.radio-checked.radio-color-success .radio-indicator:after{background-color:var(--ls-color-success)}.radio-checked.radio-color-error .radio-indicator{border-color:var(--ls-color-error)}.radio-checked.radio-color-error .radio-indicator:after{background-color:var(--ls-color-error)}.radio-checked.radio-color-info .radio-indicator{border-color:var(--ls-color-info)}.radio-checked.radio-color-info .radio-indicator:after{background-color:var(--ls-color-info)}.radio-checked.radio-color-warning .radio-indicator{border-color:var(--ls-color-warning)}.radio-checked.radio-color-warning .radio-indicator:after{background-color:var(--ls-color-warning)}.radio-label-end{flex-direction:row}.radio-label-start{flex-direction:row-reverse}.radio-label-top{flex-direction:column-reverse;align-items:center}.radio-label-bottom{flex-direction:column;align-items:center}.radio-disabled{cursor:not-allowed;opacity:.5;pointer-events:none}.radio-disabled .radio-label,.radio-disabled .radio-indicator{cursor:not-allowed}.radio-indicator:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:50%}body.dark .radio-indicator{border-color:#555}body.dark .radio-label{color:#e0e6ed}body.dark .radio-checked.radio-color-primary .radio-indicator{border-color:var(--ls-color-primary)}body.dark .radio-checked.radio-color-primary .radio-indicator:after{background-color:var(--ls-color-primary)}body.dark .radio-checked.radio-color-secondary .radio-indicator{border-color:var(--ls-color-secondary)}body.dark .radio-checked.radio-color-secondary .radio-indicator:after{background-color:var(--ls-color-secondary)}body.dark .radio-checked.radio-color-success .radio-indicator{border-color:var(--ls-color-success)}body.dark .radio-checked.radio-color-success .radio-indicator:after{background-color:var(--ls-color-success)}body.dark .radio-checked.radio-color-error .radio-indicator{border-color:var(--ls-color-error)}body.dark .radio-checked.radio-color-error .radio-indicator:after{background-color:var(--ls-color-error)}body.dark .radio-checked.radio-color-info .radio-indicator{border-color:var(--ls-color-info)}body.dark .radio-checked.radio-color-info .radio-indicator:after{background-color:var(--ls-color-info)}body.dark .radio-checked.radio-color-warning .radio-indicator{border-color:var(--ls-color-warning)}body.dark .radio-checked.radio-color-warning .radio-indicator:after{background-color:var(--ls-color-warning)}\n"] }]
+        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], labelPlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPlacement", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
+
+class SliderComponent {
+    constructor() {
+        this._renderer = inject(Renderer2);
+        this._destroyRef = inject(DestroyRef);
+        this._elementRef = inject(ElementRef);
+        this.value = model(0, ...(ngDevMode ? [{ debugName: "value" }] : []));
+        this.defaultValue = input(...(ngDevMode ? [undefined, { debugName: "defaultValue" }] : []));
+        this.min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : []));
+        this.max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : []));
+        this.step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : []));
+        this.marks = input(false, ...(ngDevMode ? [{ debugName: "marks" }] : []));
+        this.color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
+        this.size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : []));
+        this.orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        this.valueLabelDisplay = input('auto', ...(ngDevMode ? [{ debugName: "valueLabelDisplay" }] : []));
+        this.onChange = output();
+        this._railRef = viewChild('railRef', ...(ngDevMode ? [{ debugName: "_railRef" }] : []));
+        this._activeThumbIndex = signal(0, ...(ngDevMode ? [{ debugName: "_activeThumbIndex" }] : []));
+        this._isDragging = signal(false, ...(ngDevMode ? [{ debugName: "_isDragging" }] : []));
+        this._cleanupMouseMove = null;
+        this._cleanupMouseUp = null;
+        this._cleanupTouchMove = null;
+        this._cleanupTouchEnd = null;
+        this._cachedRect = null;
+        this._isRange = computed(() => Array.isArray(this.value()), ...(ngDevMode ? [{ debugName: "_isRange" }] : []));
+        this._values = computed(() => {
+            const v = this.value();
+            if (Array.isArray(v))
+                return [v[0], v[1]];
+            return [this.min(), v];
+        }, ...(ngDevMode ? [{ debugName: "_values" }] : []));
+        this._normalizedMarks = computed(() => {
+            const m = this.marks();
+            if (m === false)
+                return [];
+            if (Array.isArray(m))
+                return m;
+            const marks = [];
+            const s = this.step() ?? 1;
+            for (let v = this.min(); v <= this.max(); v += s) {
+                marks.push({ value: v });
+            }
+            return marks;
+        }, ...(ngDevMode ? [{ debugName: "_normalizedMarks" }] : []));
+        this._trackFillStyle = computed(() => {
+            const [v0, v1] = this._values();
+            const range = this.max() - this.min();
+            if (range <= 0)
+                return { left: '0%', width: '0%' };
+            const left = ((v0 - this.min()) / range) * 100;
+            const width = ((v1 - v0) / range) * 100;
+            if (this._isRange()) {
+                return {
+                    left: `${left}%`,
+                    width: `${width}%`,
+                };
+            }
+            return {
+                left: '0%',
+                width: `${left + width}%`,
+            };
+        }, ...(ngDevMode ? [{ debugName: "_trackFillStyle" }] : []));
+        this._thumbPositions = computed(() => {
+            const [v0, v1] = this._values();
+            const range = this.max() - this.min();
+            if (range <= 0)
+                return this._isRange() ? [0, 0] : [0];
+            if (this._isRange()) {
+                return [
+                    ((v0 - this.min()) / range) * 100,
+                    ((v1 - this.min()) / range) * 100,
+                ];
+            }
+            return [((v1 - this.min()) / range) * 100];
+        }, ...(ngDevMode ? [{ debugName: "_thumbPositions" }] : []));
+        this._containerClasses = computed(() => {
+            const classes = ['ls-slider'];
+            classes.push(`ls-slider--${this.color()}`);
+            classes.push(`ls-slider--${this.size()}`);
+            if (this.disabled())
+                classes.push('ls-slider--disabled');
+            if (this._isDragging())
+                classes.push('ls-slider--active');
+            return classes.join(' ');
+        }, ...(ngDevMode ? [{ debugName: "_containerClasses" }] : []));
+        effect(() => {
+            const dv = this.defaultValue();
+            if (dv !== undefined && this.value() === 0) {
+                this.value.set(dv);
+            }
+        }, { allowSignalWrites: true });
+        this._destroyRef.onDestroy(() => {
+            this._removeGlobalListeners();
+        });
+    }
+    _isMarkActive(markValue) {
+        const [v0, v1] = this._values();
+        if (this._isRange()) {
+            return markValue >= v0 && markValue <= v1;
+        }
+        return markValue <= v1;
+    }
+    _getMarkPosition(markValue) {
+        const range = this.max() - this.min();
+        if (range <= 0)
+            return 0;
+        return (((markValue - this.min()) / range) * 100);
+    }
+    _getThumbValue(thumbIndex) {
+        const v = this.value();
+        if (Array.isArray(v)) {
+            return v[thumbIndex];
+        }
+        return v;
+    }
+    _onRailMouseDown(event) {
+        if (this.disabled())
+            return;
+        event.preventDefault();
+        this._startDrag(event.clientX);
+    }
+    _onThumbMouseDown(event, thumbIndex) {
+        if (this.disabled())
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        this._activeThumbIndex.set(thumbIndex);
+        this._startMouseDrag(event.clientX);
+    }
+    _onRailTouchStart(event) {
+        if (this.disabled())
+            return;
+        if (event.touches.length === 0)
+            return;
+        event.preventDefault();
+        this._startTouchDrag(event.touches[0].clientX);
+    }
+    _onThumbTouchStart(event, thumbIndex) {
+        if (this.disabled())
+            return;
+        if (event.touches.length === 0)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        this._activeThumbIndex.set(thumbIndex);
+        this._startTouchDrag(event.touches[0].clientX);
+    }
+    _onKeyDown(event, thumbIndex) {
+        if (this.disabled())
+            return;
+        const s = this.step() ?? 1;
+        let handled = false;
+        switch (event.key) {
+            case 'ArrowRight':
+            case 'ArrowUp':
+                this._adjustThumbValue(thumbIndex, s);
+                handled = true;
+                break;
+            case 'ArrowLeft':
+            case 'ArrowDown':
+                this._adjustThumbValue(thumbIndex, -s);
+                handled = true;
+                break;
+            case 'Home':
+                this._setThumbValue(thumbIndex, this.min());
+                handled = true;
+                break;
+            case 'End':
+                this._setThumbValue(thumbIndex, this.max());
+                handled = true;
+                break;
+        }
+        if (handled) {
+            event.preventDefault();
+            this.onChange.emit(this.value());
+        }
+    }
+    _startDrag(clientX) {
+        this._cacheRect();
+        if (this._isRange() && this._cachedRect) {
+            const clickValue = this._positionToValue(clientX, this._cachedRect);
+            const [v0, v1] = this._values();
+            const dist0 = Math.abs(clickValue - v0);
+            const dist1 = Math.abs(clickValue - v1);
+            this._activeThumbIndex.set(dist0 <= dist1 ? 0 : 1);
+        }
+        this._startMouseDrag(clientX);
+    }
+    _startMouseDrag(clientX) {
+        this._cacheRect();
+        this._isDragging.set(true);
+        this._updateValueFromPosition(clientX);
+        this._cleanupMouseMove =
+            this._renderer.listen('window', 'mousemove', (e) => {
+                this._updateValueFromPosition(e.clientX);
+            });
+        this._cleanupMouseUp = this._renderer.listen('window', 'mouseup', () => {
+            this._endDrag();
+        });
+    }
+    _startTouchDrag(clientX) {
+        this._cacheRect();
+        if (this._isRange() && this._cachedRect) {
+            const clickValue = this._positionToValue(clientX, this._cachedRect);
+            const [v0, v1] = this._values();
+            const dist0 = Math.abs(clickValue - v0);
+            const dist1 = Math.abs(clickValue - v1);
+            this._activeThumbIndex.set(dist0 <= dist1 ? 0 : 1);
+        }
+        this._isDragging.set(true);
+        this._updateValueFromPosition(clientX);
+        this._cleanupTouchMove =
+            this._renderer.listen('window', 'touchmove', (e) => {
+                if (e.touches.length > 0) {
+                    this._updateValueFromPosition(e.touches[0].clientX);
+                }
+            });
+        this._cleanupTouchEnd =
+            this._renderer.listen('window', 'touchend', () => {
+                this._endDrag();
+            });
+    }
+    _endDrag() {
+        this._isDragging.set(false);
+        this._removeGlobalListeners();
+        this._cachedRect = null;
+        this.onChange.emit(this.value());
+    }
+    _updateValueFromPosition(clientX) {
+        if (!this._cachedRect)
+            return;
+        const newValue = this._positionToValue(clientX, this._cachedRect);
+        const idx = this._activeThumbIndex();
+        if (this._isRange()) {
+            const current = this.value();
+            const updated = [...current];
+            updated[idx] = newValue;
+            if (idx === 0 && updated[0] > updated[1]) {
+                updated[0] = updated[1];
+            }
+            if (idx === 1 && updated[1] < updated[0]) {
+                updated[1] = updated[0];
+            }
+            this.value.set(updated);
+        }
+        else {
+            this.value.set(newValue);
+        }
+    }
+    _adjustThumbValue(thumbIndex, delta) {
+        if (this._isRange()) {
+            const current = this.value();
+            const updated = [...current];
+            updated[thumbIndex] = this._quantize(updated[thumbIndex] + delta);
+            if (thumbIndex === 0 &&
+                updated[0] > updated[1]) {
+                updated[0] = updated[1];
+            }
+            if (thumbIndex === 1 &&
+                updated[1] < updated[0]) {
+                updated[1] = updated[0];
+            }
+            this.value.set(updated);
+        }
+        else {
+            this.value.set(this._quantize(this.value() + delta));
+        }
+    }
+    _setThumbValue(thumbIndex, newValue) {
+        if (this._isRange()) {
+            const current = this.value();
+            const updated = [...current];
+            updated[thumbIndex] =
+                this._quantize(newValue);
+            if (thumbIndex === 0 &&
+                updated[0] > updated[1]) {
+                updated[0] = updated[1];
+            }
+            if (thumbIndex === 1 &&
+                updated[1] < updated[0]) {
+                updated[1] = updated[0];
+            }
+            this.value.set(updated);
+        }
+        else {
+            this.value.set(this._quantize(newValue));
+        }
+    }
+    _positionToValue(clientX, rect) {
+        const percent = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+        return this._quantize(this.min() +
+            percent * (this.max() - this.min()));
+    }
+    _quantize(raw) {
+        const s = this.step();
+        if (s === null)
+            return Math.min(this.max(), Math.max(this.min(), raw));
+        return Math.min(this.max(), Math.max(this.min(), this.min() +
+            Math.round((raw - this.min()) / s) * s));
+    }
+    _cacheRect() {
+        const railEl = this._railRef();
+        if (railEl) {
+            this._cachedRect =
+                railEl.nativeElement.getBoundingClientRect();
+        }
+    }
+    _removeGlobalListeners() {
+        this._cleanupMouseMove?.();
+        this._cleanupMouseMove = null;
+        this._cleanupMouseUp?.();
+        this._cleanupMouseUp = null;
+        this._cleanupTouchMove?.();
+        this._cleanupTouchMove = null;
+        this._cleanupTouchEnd?.();
+        this._cleanupTouchEnd = null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: SliderComponent, isStandalone: true, selector: "ls-slider", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, marks: { classPropertyName: "marks", publicName: "marks", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, valueLabelDisplay: { classPropertyName: "valueLabelDisplay", publicName: "valueLabelDisplay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onChange: "onChange" }, viewQueries: [{ propertyName: "_railRef", first: true, predicate: ["railRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div
+      [class]="_containerClasses()"
+      (mousedown)="_onRailMouseDown($event)"
+      (touchstart)="_onRailTouchStart($event)"
+      #railRef>
+      <div class="ls-slider__rail"></div>
+
+      <div
+        class="ls-slider__track"
+        [style.left]="_trackFillStyle().left"
+        [style.width]="_trackFillStyle().width">
+      </div>
+
+      @for (mark of _normalizedMarks(); track mark.value) {
+        <span
+          class="ls-slider__mark"
+          [class.ls-slider__mark--active]="
+            _isMarkActive(mark.value)
+          "
+          [style.left]="_getMarkPosition(mark.value) + '%'">
+        </span>
+        @if (mark.label) {
+          <span
+            class="ls-slider__mark-label"
+            [style.left]="
+              _getMarkPosition(mark.value) + '%'
+            ">
+            {{ mark.label }}
+          </span>
+        }
+      }
+
+      @for (pos of _thumbPositions(); track $index) {
+        <span
+          class="ls-slider__thumb"
+          [class.ls-slider__thumb--active]="
+            _isDragging() && _activeThumbIndex() === $index
+          "
+          [style.left]="pos + '%'"
+          [attr.role]="'slider'"
+          [attr.aria-valuenow]="_getThumbValue($index)"
+          [attr.aria-valuemin]="min()"
+          [attr.aria-valuemax]="max()"
+          [attr.aria-disabled]="disabled()"
+          [attr.tabindex]="disabled() ? -1 : 0"
+          (mousedown)="_onThumbMouseDown($event, $index)"
+          (touchstart)="_onThumbTouchStart($event, $index)"
+          (keydown)="_onKeyDown($event, $index)">
+          @if (
+            valueLabelDisplay() === 'on' ||
+            (valueLabelDisplay() === 'auto' &&
+              _isDragging() &&
+              _activeThumbIndex() === $index)
+          ) {
+            <span class="ls-slider__value-label">
+              {{ _getThumbValue($index) }}
+            </span>
+          }
+        </span>
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:block}.ls-slider{position:relative;height:38px;cursor:pointer;padding:15px 0;touch-action:none;-webkit-user-select:none;user-select:none}.ls-slider__rail{position:absolute;top:50%;left:0;width:100%;border-radius:9999px;background:#e0e6ed;transform:translateY(-50%)}.ls-slider__track{position:absolute;top:50%;border-radius:9999px;background:var(--ls-slider-main-color);transform:translateY(-50%)}.ls-slider__thumb{position:absolute;top:50%;z-index:1;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--ls-slider-main-color);box-shadow:0 1px 3px #0003,0 0 0 0 transparent;cursor:grab;transform:translate(-50%,-50%);transition:box-shadow .15s ease,width .15s ease,height .15s ease}.ls-slider__thumb:hover{box-shadow:0 1px 3px #0003,0 0 0 8px color-mix(in srgb,var(--ls-slider-main-color) 16%,transparent)}.ls-slider__thumb:focus-visible{outline:2px solid var(--ls-slider-main-color);outline-offset:2px}.ls-slider__thumb--active{cursor:grabbing;box-shadow:0 1px 3px #0003,0 0 0 12px color-mix(in srgb,var(--ls-slider-main-color) 24%,transparent)}.ls-slider__value-label{position:absolute;bottom:calc(100% + 6px);left:50%;padding:2px 8px;border-radius:4px;background:var(--ls-color-dark, #3b3f5c);color:#fff;font-size:12px;font-weight:600;line-height:1.4;white-space:nowrap;transform:translate(-50%);pointer-events:none}.ls-slider__mark{position:absolute;top:50%;border-radius:50%;background:#bfc9d4;transform:translate(-50%,-50%)}.ls-slider__mark--active{background:var(--ls-slider-main-color)}.ls-slider__mark-label{position:absolute;top:calc(50% + 14px);color:#888ea8;font-size:11px;white-space:nowrap;transform:translate(-50%)}.ls-slider--medium .ls-slider__rail,.ls-slider--medium .ls-slider__track{height:4px}.ls-slider--medium .ls-slider__thumb{width:20px;height:20px}.ls-slider--medium .ls-slider__mark{width:4px;height:4px}.ls-slider--medium .ls-slider__value-label{font-size:12px}.ls-slider--small .ls-slider__rail,.ls-slider--small .ls-slider__track{height:2px}.ls-slider--small .ls-slider__thumb{width:12px;height:12px}.ls-slider--small .ls-slider__mark{width:3px;height:3px}.ls-slider--small .ls-slider__value-label{font-size:10px}.ls-slider--primary{--ls-slider-main-color: var(--ls-color-primary)}.ls-slider--secondary{--ls-slider-main-color: var(--ls-color-secondary)}.ls-slider--success{--ls-slider-main-color: var(--ls-color-success)}.ls-slider--error{--ls-slider-main-color: var(--ls-color-error)}.ls-slider--info{--ls-slider-main-color: var(--ls-color-info)}.ls-slider--warning{--ls-slider-main-color: var(--ls-color-warning)}.ls-slider--disabled{opacity:.5;cursor:default;pointer-events:none}.ls-slider--active{cursor:grabbing}body.dark .ls-slider__rail{background:#ffffff26}body.dark .ls-slider__mark{background:#ffffff4d}body.dark .ls-slider__mark--active{background:var(--ls-slider-main-color)}body.dark .ls-slider__mark-label{color:#888ea8}body.dark .ls-slider__value-label{background:#1b2e4b;color:#e0e6ed}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SliderComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ls-slider', standalone: true, template: `
+    <div
+      [class]="_containerClasses()"
+      (mousedown)="_onRailMouseDown($event)"
+      (touchstart)="_onRailTouchStart($event)"
+      #railRef>
+      <div class="ls-slider__rail"></div>
+
+      <div
+        class="ls-slider__track"
+        [style.left]="_trackFillStyle().left"
+        [style.width]="_trackFillStyle().width">
+      </div>
+
+      @for (mark of _normalizedMarks(); track mark.value) {
+        <span
+          class="ls-slider__mark"
+          [class.ls-slider__mark--active]="
+            _isMarkActive(mark.value)
+          "
+          [style.left]="_getMarkPosition(mark.value) + '%'">
+        </span>
+        @if (mark.label) {
+          <span
+            class="ls-slider__mark-label"
+            [style.left]="
+              _getMarkPosition(mark.value) + '%'
+            ">
+            {{ mark.label }}
+          </span>
+        }
+      }
+
+      @for (pos of _thumbPositions(); track $index) {
+        <span
+          class="ls-slider__thumb"
+          [class.ls-slider__thumb--active]="
+            _isDragging() && _activeThumbIndex() === $index
+          "
+          [style.left]="pos + '%'"
+          [attr.role]="'slider'"
+          [attr.aria-valuenow]="_getThumbValue($index)"
+          [attr.aria-valuemin]="min()"
+          [attr.aria-valuemax]="max()"
+          [attr.aria-disabled]="disabled()"
+          [attr.tabindex]="disabled() ? -1 : 0"
+          (mousedown)="_onThumbMouseDown($event, $index)"
+          (touchstart)="_onThumbTouchStart($event, $index)"
+          (keydown)="_onKeyDown($event, $index)">
+          @if (
+            valueLabelDisplay() === 'on' ||
+            (valueLabelDisplay() === 'auto' &&
+              _isDragging() &&
+              _activeThumbIndex() === $index)
+          ) {
+            <span class="ls-slider__value-label">
+              {{ _getThumbValue($index) }}
+            </span>
+          }
+        </span>
+      }
+    </div>
+  `, styles: [":host{display:block}.ls-slider{position:relative;height:38px;cursor:pointer;padding:15px 0;touch-action:none;-webkit-user-select:none;user-select:none}.ls-slider__rail{position:absolute;top:50%;left:0;width:100%;border-radius:9999px;background:#e0e6ed;transform:translateY(-50%)}.ls-slider__track{position:absolute;top:50%;border-radius:9999px;background:var(--ls-slider-main-color);transform:translateY(-50%)}.ls-slider__thumb{position:absolute;top:50%;z-index:1;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--ls-slider-main-color);box-shadow:0 1px 3px #0003,0 0 0 0 transparent;cursor:grab;transform:translate(-50%,-50%);transition:box-shadow .15s ease,width .15s ease,height .15s ease}.ls-slider__thumb:hover{box-shadow:0 1px 3px #0003,0 0 0 8px color-mix(in srgb,var(--ls-slider-main-color) 16%,transparent)}.ls-slider__thumb:focus-visible{outline:2px solid var(--ls-slider-main-color);outline-offset:2px}.ls-slider__thumb--active{cursor:grabbing;box-shadow:0 1px 3px #0003,0 0 0 12px color-mix(in srgb,var(--ls-slider-main-color) 24%,transparent)}.ls-slider__value-label{position:absolute;bottom:calc(100% + 6px);left:50%;padding:2px 8px;border-radius:4px;background:var(--ls-color-dark, #3b3f5c);color:#fff;font-size:12px;font-weight:600;line-height:1.4;white-space:nowrap;transform:translate(-50%);pointer-events:none}.ls-slider__mark{position:absolute;top:50%;border-radius:50%;background:#bfc9d4;transform:translate(-50%,-50%)}.ls-slider__mark--active{background:var(--ls-slider-main-color)}.ls-slider__mark-label{position:absolute;top:calc(50% + 14px);color:#888ea8;font-size:11px;white-space:nowrap;transform:translate(-50%)}.ls-slider--medium .ls-slider__rail,.ls-slider--medium .ls-slider__track{height:4px}.ls-slider--medium .ls-slider__thumb{width:20px;height:20px}.ls-slider--medium .ls-slider__mark{width:4px;height:4px}.ls-slider--medium .ls-slider__value-label{font-size:12px}.ls-slider--small .ls-slider__rail,.ls-slider--small .ls-slider__track{height:2px}.ls-slider--small .ls-slider__thumb{width:12px;height:12px}.ls-slider--small .ls-slider__mark{width:3px;height:3px}.ls-slider--small .ls-slider__value-label{font-size:10px}.ls-slider--primary{--ls-slider-main-color: var(--ls-color-primary)}.ls-slider--secondary{--ls-slider-main-color: var(--ls-color-secondary)}.ls-slider--success{--ls-slider-main-color: var(--ls-color-success)}.ls-slider--error{--ls-slider-main-color: var(--ls-color-error)}.ls-slider--info{--ls-slider-main-color: var(--ls-color-info)}.ls-slider--warning{--ls-slider-main-color: var(--ls-color-warning)}.ls-slider--disabled{opacity:.5;cursor:default;pointer-events:none}.ls-slider--active{cursor:grabbing}body.dark .ls-slider__rail{background:#ffffff26}body.dark .ls-slider__mark{background:#ffffff4d}body.dark .ls-slider__mark--active{background:var(--ls-slider-main-color)}body.dark .ls-slider__mark-label{color:#888ea8}body.dark .ls-slider__value-label{background:#1b2e4b;color:#e0e6ed}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], marks: [{ type: i0.Input, args: [{ isSignal: true, alias: "marks", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], valueLabelDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueLabelDisplay", required: false }] }], onChange: [{ type: i0.Output, args: ["onChange"] }], _railRef: [{ type: i0.ViewChild, args: ['railRef', { isSignal: true }] }] } });
+
+const CHECK_SVG = '<svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">' +
+    '<path d="M3.5 6L5.5 8L8.5 4" stroke="currentColor" ' +
+    'stroke-width="2" stroke-linecap="round" ' +
+    'stroke-linejoin="round"/></svg>';
+const CLOSE_SVG = '<svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">' +
+    '<path d="M3.5 3.5L8.5 8.5M8.5 3.5L3.5 8.5" ' +
+    'stroke="currentColor" stroke-width="2" ' +
+    'stroke-linecap="round" stroke-linejoin="round"/></svg>';
+class SwitchComponent {
+    constructor() {
+        this._sanitizer = inject(DomSanitizer);
+        this.checked = input(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
+        this.defaultChecked = input(false, ...(ngDevMode ? [{ debugName: "defaultChecked" }] : []));
+        this.color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
+        this.size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : []));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        this.icon = input(false, ...(ngDevMode ? [{ debugName: "icon" }] : []));
+        this.variant = input('solid', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+        this.labelPlacement = input('end', ...(ngDevMode ? [{ debugName: "labelPlacement" }] : []));
+        this.changed = output();
+        this._isChecked = signal(false, ...(ngDevMode ? [{ debugName: "_isChecked" }] : []));
+        this._isFirstSync = true;
+        this._syncChecked = effect(() => {
+            const isChecked = this.checked();
+            if (this._isFirstSync) {
+                this._isFirstSync = false;
+                this._isChecked.set(isChecked || this.defaultChecked());
+            }
+            else {
+                this._isChecked.set(isChecked);
+            }
+        }, ...(ngDevMode ? [{ debugName: "_syncChecked" }] : []));
+        this.switchClasses = computed(() => {
+            const s = this.size() === 'small' ? 'sm' : 'md';
+            const parts = [
+                'switch',
+                `switch-${s}`,
+                `switch-color-${this.color()}`,
+                `switch-${this.variant()}`,
+                `switch-label-${this.labelPlacement()}`,
+            ];
+            if (this._isChecked()) {
+                parts.push('switch-checked');
+            }
+            if (this.disabled()) {
+                parts.push('switch-disabled');
+            }
+            return parts.join(' ');
+        }, ...(ngDevMode ? [{ debugName: "switchClasses" }] : []));
+        this.currentIcon = computed(() => {
+            const svg = this._isChecked()
+                ? CHECK_SVG
+                : CLOSE_SVG;
+            return this._sanitizer.bypassSecurityTrustHtml(svg);
+        }, ...(ngDevMode ? [{ debugName: "currentIcon" }] : []));
+    }
+    onToggle() {
+        if (this.disabled()) {
+            return;
+        }
+        const isNext = !this._isChecked();
+        this._isChecked.set(isNext);
+        this.changed.emit(isNext);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: SwitchComponent, isStandalone: true, selector: "ls-switch", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, defaultChecked: { classPropertyName: "defaultChecked", publicName: "defaultChecked", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, labelPlacement: { classPropertyName: "labelPlacement", publicName: "labelPlacement", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, ngImport: i0, template: `
+    <label [class]="switchClasses()">
+      <button
+        type="button"
+        role="switch"
+        class="switch-track"
+        [attr.aria-checked]="_isChecked()"
+        [disabled]="disabled()"
+        (click)="onToggle()"
+        (keydown.space)="onToggle(); $event.preventDefault()"
+        (keydown.enter)="onToggle(); $event.preventDefault()">
+        <span class="switch-thumb">
+          @if (icon()) {
+            <span
+              class="switch-icon"
+              [innerHTML]="currentIcon()"
+            ></span>
+          }
+        </span>
+      </button>
+      <span class="switch-label">
+        <ng-content />
+      </span>
+    </label>
+  `, isInline: true, styles: [":host{display:inline-flex}.switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;position:relative}.switch-track{position:relative;display:inline-flex;align-items:center;border:none;border-radius:999px;padding:2px;cursor:pointer;transition:background-color var(--ls-transition-duration),border-color var(--ls-transition-duration);outline:none;flex-shrink:0}.switch-thumb{display:flex;align-items:center;justify-content:center;border-radius:50%;background-color:#fff;transition:transform var(--ls-transition-duration);box-shadow:0 1px 3px #0003}.switch-icon{display:flex;align-items:center;justify-content:center;line-height:0;color:#999}.switch-icon svg{width:100%;height:100%}.switch-label{-webkit-user-select:none;user-select:none;cursor:pointer;font-size:.875rem}.switch-sm .switch-track{width:34px;height:20px}.switch-sm .switch-thumb{width:16px;height:16px}.switch-sm .switch-icon{width:10px;height:10px}.switch-sm.switch-checked .switch-thumb{transform:translate(14px)}.switch-md .switch-track{width:42px;height:24px}.switch-md .switch-thumb{width:20px;height:20px}.switch-md .switch-icon{width:12px;height:12px}.switch-md.switch-checked .switch-thumb{transform:translate(18px)}.switch-solid .switch-track{background-color:#c4c4c4}.switch-outlined .switch-track{background-color:transparent;border:2px solid #999}.switch-outlined .switch-track{padding:0}.switch-outlined .switch-thumb{background-color:#999}.switch-outlined .switch-icon{color:#fff}.switch-checked.switch-solid.switch-color-inherit .switch-track{background-color:inherit}.switch-checked.switch-solid.switch-color-primary .switch-track{background-color:var(--ls-color-primary)}.switch-checked.switch-solid.switch-color-secondary .switch-track{background-color:var(--ls-color-secondary)}.switch-checked.switch-solid.switch-color-success .switch-track{background-color:var(--ls-color-success)}.switch-checked.switch-solid.switch-color-error .switch-track{background-color:var(--ls-color-danger)}.switch-checked.switch-solid.switch-color-info .switch-track{background-color:var(--ls-color-info)}.switch-checked.switch-solid.switch-color-warning .switch-track{background-color:var(--ls-color-warning)}.switch-checked.switch-outlined.switch-color-inherit .switch-track{border-color:inherit}.switch-checked.switch-outlined.switch-color-primary .switch-track{border-color:var(--ls-color-primary)}.switch-checked.switch-outlined.switch-color-secondary .switch-track{border-color:var(--ls-color-secondary)}.switch-checked.switch-outlined.switch-color-success .switch-track{border-color:var(--ls-color-success)}.switch-checked.switch-outlined.switch-color-error .switch-track{border-color:var(--ls-color-danger)}.switch-checked.switch-outlined.switch-color-info .switch-track{border-color:var(--ls-color-info)}.switch-checked.switch-outlined.switch-color-warning .switch-track{border-color:var(--ls-color-warning)}.switch-checked.switch-outlined.switch-color-inherit .switch-thumb{background-color:inherit}.switch-checked.switch-outlined.switch-color-primary .switch-thumb{background-color:var(--ls-color-primary)}.switch-checked.switch-outlined.switch-color-secondary .switch-thumb{background-color:var(--ls-color-secondary)}.switch-checked.switch-outlined.switch-color-success .switch-thumb{background-color:var(--ls-color-success)}.switch-checked.switch-outlined.switch-color-error .switch-thumb{background-color:var(--ls-color-danger)}.switch-checked.switch-outlined.switch-color-info .switch-thumb{background-color:var(--ls-color-info)}.switch-checked.switch-outlined.switch-color-warning .switch-thumb{background-color:var(--ls-color-warning)}.switch-checked.switch-outlined .switch-icon{color:#fff}.switch-checked.switch-solid .switch-icon{color:var(--ls-color-primary)}.switch-checked.switch-solid.switch-color-secondary .switch-icon{color:var(--ls-color-secondary)}.switch-checked.switch-solid.switch-color-success .switch-icon{color:var(--ls-color-success)}.switch-checked.switch-solid.switch-color-error .switch-icon{color:var(--ls-color-danger)}.switch-checked.switch-solid.switch-color-info .switch-icon{color:var(--ls-color-info)}.switch-checked.switch-solid.switch-color-warning .switch-icon{color:var(--ls-color-warning)}.switch-checked.switch-solid.switch-color-inherit .switch-icon{color:inherit}.switch-label-end{flex-direction:row}.switch-label-start{flex-direction:row-reverse}.switch-label-top{flex-direction:column-reverse;align-items:center}.switch-label-bottom{flex-direction:column;align-items:center}.switch-disabled{cursor:not-allowed;opacity:.5;pointer-events:none}.switch-disabled .switch-label,.switch-disabled .switch-track{cursor:not-allowed}.switch-track:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:999px}body.dark .switch-solid .switch-track{background-color:#3b3f5c}body.dark .switch-outlined .switch-track{border-color:#555}body.dark .switch-outlined .switch-thumb{background-color:#888}body.dark .switch-label{color:#e0e6ed}body.dark .switch-icon{color:#bbb}body.dark .switch-checked.switch-solid.switch-color-primary .switch-track{background-color:var(--ls-color-primary)}body.dark .switch-checked.switch-solid.switch-color-secondary .switch-track{background-color:var(--ls-color-secondary)}body.dark .switch-checked.switch-solid.switch-color-success .switch-track{background-color:var(--ls-color-success)}body.dark .switch-checked.switch-solid.switch-color-error .switch-track{background-color:var(--ls-color-danger)}body.dark .switch-checked.switch-solid.switch-color-info .switch-track{background-color:var(--ls-color-info)}body.dark .switch-checked.switch-solid.switch-color-warning .switch-track{background-color:var(--ls-color-warning)}body.dark .switch-checked.switch-outlined.switch-color-primary .switch-track{border-color:var(--ls-color-primary)}body.dark .switch-checked.switch-outlined.switch-color-secondary .switch-track{border-color:var(--ls-color-secondary)}body.dark .switch-checked.switch-outlined.switch-color-success .switch-track{border-color:var(--ls-color-success)}body.dark .switch-checked.switch-outlined.switch-color-error .switch-track{border-color:var(--ls-color-danger)}body.dark .switch-checked.switch-outlined.switch-color-info .switch-track{border-color:var(--ls-color-info)}body.dark .switch-checked.switch-outlined.switch-color-warning .switch-track{border-color:var(--ls-color-warning)}body.dark .switch-checked.switch-outlined.switch-color-primary .switch-thumb{background-color:var(--ls-color-primary)}body.dark .switch-checked.switch-outlined.switch-color-secondary .switch-thumb{background-color:var(--ls-color-secondary)}body.dark .switch-checked.switch-outlined.switch-color-success .switch-thumb{background-color:var(--ls-color-success)}body.dark .switch-checked.switch-outlined.switch-color-error .switch-thumb{background-color:var(--ls-color-danger)}body.dark .switch-checked.switch-outlined.switch-color-info .switch-thumb{background-color:var(--ls-color-info)}body.dark .switch-checked.switch-outlined.switch-color-warning .switch-thumb{background-color:var(--ls-color-warning)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SwitchComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ls-switch', standalone: true, template: `
+    <label [class]="switchClasses()">
+      <button
+        type="button"
+        role="switch"
+        class="switch-track"
+        [attr.aria-checked]="_isChecked()"
+        [disabled]="disabled()"
+        (click)="onToggle()"
+        (keydown.space)="onToggle(); $event.preventDefault()"
+        (keydown.enter)="onToggle(); $event.preventDefault()">
+        <span class="switch-thumb">
+          @if (icon()) {
+            <span
+              class="switch-icon"
+              [innerHTML]="currentIcon()"
+            ></span>
+          }
+        </span>
+      </button>
+      <span class="switch-label">
+        <ng-content />
+      </span>
+    </label>
+  `, styles: [":host{display:inline-flex}.switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;position:relative}.switch-track{position:relative;display:inline-flex;align-items:center;border:none;border-radius:999px;padding:2px;cursor:pointer;transition:background-color var(--ls-transition-duration),border-color var(--ls-transition-duration);outline:none;flex-shrink:0}.switch-thumb{display:flex;align-items:center;justify-content:center;border-radius:50%;background-color:#fff;transition:transform var(--ls-transition-duration);box-shadow:0 1px 3px #0003}.switch-icon{display:flex;align-items:center;justify-content:center;line-height:0;color:#999}.switch-icon svg{width:100%;height:100%}.switch-label{-webkit-user-select:none;user-select:none;cursor:pointer;font-size:.875rem}.switch-sm .switch-track{width:34px;height:20px}.switch-sm .switch-thumb{width:16px;height:16px}.switch-sm .switch-icon{width:10px;height:10px}.switch-sm.switch-checked .switch-thumb{transform:translate(14px)}.switch-md .switch-track{width:42px;height:24px}.switch-md .switch-thumb{width:20px;height:20px}.switch-md .switch-icon{width:12px;height:12px}.switch-md.switch-checked .switch-thumb{transform:translate(18px)}.switch-solid .switch-track{background-color:#c4c4c4}.switch-outlined .switch-track{background-color:transparent;border:2px solid #999}.switch-outlined .switch-track{padding:0}.switch-outlined .switch-thumb{background-color:#999}.switch-outlined .switch-icon{color:#fff}.switch-checked.switch-solid.switch-color-inherit .switch-track{background-color:inherit}.switch-checked.switch-solid.switch-color-primary .switch-track{background-color:var(--ls-color-primary)}.switch-checked.switch-solid.switch-color-secondary .switch-track{background-color:var(--ls-color-secondary)}.switch-checked.switch-solid.switch-color-success .switch-track{background-color:var(--ls-color-success)}.switch-checked.switch-solid.switch-color-error .switch-track{background-color:var(--ls-color-danger)}.switch-checked.switch-solid.switch-color-info .switch-track{background-color:var(--ls-color-info)}.switch-checked.switch-solid.switch-color-warning .switch-track{background-color:var(--ls-color-warning)}.switch-checked.switch-outlined.switch-color-inherit .switch-track{border-color:inherit}.switch-checked.switch-outlined.switch-color-primary .switch-track{border-color:var(--ls-color-primary)}.switch-checked.switch-outlined.switch-color-secondary .switch-track{border-color:var(--ls-color-secondary)}.switch-checked.switch-outlined.switch-color-success .switch-track{border-color:var(--ls-color-success)}.switch-checked.switch-outlined.switch-color-error .switch-track{border-color:var(--ls-color-danger)}.switch-checked.switch-outlined.switch-color-info .switch-track{border-color:var(--ls-color-info)}.switch-checked.switch-outlined.switch-color-warning .switch-track{border-color:var(--ls-color-warning)}.switch-checked.switch-outlined.switch-color-inherit .switch-thumb{background-color:inherit}.switch-checked.switch-outlined.switch-color-primary .switch-thumb{background-color:var(--ls-color-primary)}.switch-checked.switch-outlined.switch-color-secondary .switch-thumb{background-color:var(--ls-color-secondary)}.switch-checked.switch-outlined.switch-color-success .switch-thumb{background-color:var(--ls-color-success)}.switch-checked.switch-outlined.switch-color-error .switch-thumb{background-color:var(--ls-color-danger)}.switch-checked.switch-outlined.switch-color-info .switch-thumb{background-color:var(--ls-color-info)}.switch-checked.switch-outlined.switch-color-warning .switch-thumb{background-color:var(--ls-color-warning)}.switch-checked.switch-outlined .switch-icon{color:#fff}.switch-checked.switch-solid .switch-icon{color:var(--ls-color-primary)}.switch-checked.switch-solid.switch-color-secondary .switch-icon{color:var(--ls-color-secondary)}.switch-checked.switch-solid.switch-color-success .switch-icon{color:var(--ls-color-success)}.switch-checked.switch-solid.switch-color-error .switch-icon{color:var(--ls-color-danger)}.switch-checked.switch-solid.switch-color-info .switch-icon{color:var(--ls-color-info)}.switch-checked.switch-solid.switch-color-warning .switch-icon{color:var(--ls-color-warning)}.switch-checked.switch-solid.switch-color-inherit .switch-icon{color:inherit}.switch-label-end{flex-direction:row}.switch-label-start{flex-direction:row-reverse}.switch-label-top{flex-direction:column-reverse;align-items:center}.switch-label-bottom{flex-direction:column;align-items:center}.switch-disabled{cursor:not-allowed;opacity:.5;pointer-events:none}.switch-disabled .switch-label,.switch-disabled .switch-track{cursor:not-allowed}.switch-track:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:999px}body.dark .switch-solid .switch-track{background-color:#3b3f5c}body.dark .switch-outlined .switch-track{border-color:#555}body.dark .switch-outlined .switch-thumb{background-color:#888}body.dark .switch-label{color:#e0e6ed}body.dark .switch-icon{color:#bbb}body.dark .switch-checked.switch-solid.switch-color-primary .switch-track{background-color:var(--ls-color-primary)}body.dark .switch-checked.switch-solid.switch-color-secondary .switch-track{background-color:var(--ls-color-secondary)}body.dark .switch-checked.switch-solid.switch-color-success .switch-track{background-color:var(--ls-color-success)}body.dark .switch-checked.switch-solid.switch-color-error .switch-track{background-color:var(--ls-color-danger)}body.dark .switch-checked.switch-solid.switch-color-info .switch-track{background-color:var(--ls-color-info)}body.dark .switch-checked.switch-solid.switch-color-warning .switch-track{background-color:var(--ls-color-warning)}body.dark .switch-checked.switch-outlined.switch-color-primary .switch-track{border-color:var(--ls-color-primary)}body.dark .switch-checked.switch-outlined.switch-color-secondary .switch-track{border-color:var(--ls-color-secondary)}body.dark .switch-checked.switch-outlined.switch-color-success .switch-track{border-color:var(--ls-color-success)}body.dark .switch-checked.switch-outlined.switch-color-error .switch-track{border-color:var(--ls-color-danger)}body.dark .switch-checked.switch-outlined.switch-color-info .switch-track{border-color:var(--ls-color-info)}body.dark .switch-checked.switch-outlined.switch-color-warning .switch-track{border-color:var(--ls-color-warning)}body.dark .switch-checked.switch-outlined.switch-color-primary .switch-thumb{background-color:var(--ls-color-primary)}body.dark .switch-checked.switch-outlined.switch-color-secondary .switch-thumb{background-color:var(--ls-color-secondary)}body.dark .switch-checked.switch-outlined.switch-color-success .switch-thumb{background-color:var(--ls-color-success)}body.dark .switch-checked.switch-outlined.switch-color-error .switch-thumb{background-color:var(--ls-color-danger)}body.dark .switch-checked.switch-outlined.switch-color-info .switch-thumb{background-color:var(--ls-color-info)}body.dark .switch-checked.switch-outlined.switch-color-warning .switch-thumb{background-color:var(--ls-color-warning)}\n"] }]
+        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], defaultChecked: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultChecked", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], labelPlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPlacement", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
+
+class LinkComponent {
+    constructor() {
+        this.variant = input('inherit', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+        this.align = input('inherit', ...(ngDevMode ? [{ debugName: "align" }] : []));
+        this.color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
+        this.href = input('', ...(ngDevMode ? [{ debugName: "href" }] : []));
+        this.underline = input('always', ...(ngDevMode ? [{ debugName: "underline" }] : []));
+        this.target = input('', ...(ngDevMode ? [{ debugName: "target" }] : []));
+        this.rel = input('', ...(ngDevMode ? [{ debugName: "rel" }] : []));
+        this.linkClasses = computed(() => {
+            const v = this.variant();
+            const c = this.color();
+            const a = this.align();
+            const u = this.underline();
+            return `link text text-${v} link-color-${c} text-align-${a} link-underline-${u}`;
+        }, ...(ngDevMode ? [{ debugName: "linkClasses" }] : []));
+        this.safeRel = computed(() => {
+            const t = this.target();
+            const r = this.rel();
+            if (t !== '_blank') {
+                return r;
+            }
+            if (!r) {
+                return 'noopener';
+            }
+            const lower = r.toLowerCase();
+            if (lower.includes('noopener') || lower.includes('noreferrer')) {
+                return r;
+            }
+            return `${r} noopener`;
+        }, ...(ngDevMode ? [{ debugName: "safeRel" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: LinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.2", type: LinkComponent, isStandalone: true, selector: "ls-link", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, underline: { classPropertyName: "underline", publicName: "underline", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, rel: { classPropertyName: "rel", publicName: "rel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <a
+      [attr.href]="href() || null"
+      [attr.rel]="safeRel() || null"
+      [attr.target]="target() || null"
+      [class]="linkClasses()"
+    >
+      <ng-content />
+    </a>
+  `, isInline: true, styles: [":host{display:contents}.link.text{display:inline;margin:0;cursor:pointer;transition:color var(--ls-transition-duration),text-decoration var(--ls-transition-duration)}.link-color-inherit{color:inherit}.link-color-primary{color:var(--ls-color-primary)}.link-color-secondary{color:var(--ls-color-secondary)}.link-color-success{color:var(--ls-color-success)}.link-color-error{color:var(--ls-color-danger)}.link-color-info{color:var(--ls-color-info)}.link-color-warning{color:var(--ls-color-warning)}.link-color-primary:hover,.link-color-secondary:hover,.link-color-success:hover,.link-color-error:hover,.link-color-info:hover,.link-color-warning:hover{opacity:.8}.link-underline-always{text-decoration:underline}.link-underline-hover{text-decoration:none}.link-underline-hover:hover{text-decoration:underline}.link-underline-none{text-decoration:none}body.dark .link-color-inherit{color:#e0e6ed}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: LinkComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ls-link', standalone: true, template: `
+    <a
+      [attr.href]="href() || null"
+      [attr.rel]="safeRel() || null"
+      [attr.target]="target() || null"
+      [class]="linkClasses()"
+    >
+      <ng-content />
+    </a>
+  `, styles: [":host{display:contents}.link.text{display:inline;margin:0;cursor:pointer;transition:color var(--ls-transition-duration),text-decoration var(--ls-transition-duration)}.link-color-inherit{color:inherit}.link-color-primary{color:var(--ls-color-primary)}.link-color-secondary{color:var(--ls-color-secondary)}.link-color-success{color:var(--ls-color-success)}.link-color-error{color:var(--ls-color-danger)}.link-color-info{color:var(--ls-color-info)}.link-color-warning{color:var(--ls-color-warning)}.link-color-primary:hover,.link-color-secondary:hover,.link-color-success:hover,.link-color-error:hover,.link-color-info:hover,.link-color-warning:hover{opacity:.8}.link-underline-always{text-decoration:underline}.link-underline-hover{text-decoration:none}.link-underline-hover:hover{text-decoration:underline}.link-underline-none{text-decoration:none}body.dark .link-color-inherit{color:#e0e6ed}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], underline: [{ type: i0.Input, args: [{ isSignal: true, alias: "underline", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], rel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rel", required: false }] }] } });
+
+class TextComponent {
+    constructor() {
+        this.variant = input('h1', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+        this.color = input('inherit', ...(ngDevMode ? [{ debugName: "color" }] : []));
+        this.align = input('inherit', ...(ngDevMode ? [{ debugName: "align" }] : []));
+        this.textClasses = computed(() => {
+            return `text text-${this.variant()} text-color-${this.color()} text-align-${this.align()}`;
+        }, ...(ngDevMode ? [{ debugName: "textClasses" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: TextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: TextComponent, isStandalone: true, selector: "ls-text", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <ng-template #content>
+      <ng-content></ng-content>
+    </ng-template>
+
+    @switch (variant()) {
+      @case ('h1') {
+        <h1 [class]="textClasses()">
+          <ng-container *ngTemplateOutlet="content" />
+        </h1>
+      }
+      @case ('h2') {
+        <h2 [class]="textClasses()">
+          <ng-container *ngTemplateOutlet="content" />
+        </h2>
+      }
+      @case ('h3') {
+        <h3 [class]="textClasses()">
+          <ng-container *ngTemplateOutlet="content" />
+        </h3>
+      }
+      @case ('h4') {
+        <h4 [class]="textClasses()">
+          <ng-container *ngTemplateOutlet="content" />
+        </h4>
+      }
+      @case ('h5') {
+        <h5 [class]="textClasses()">
+          <ng-container *ngTemplateOutlet="content" />
+        </h5>
+      }
+      @case ('h6') {
+        <h6 [class]="textClasses()">
+          <ng-container *ngTemplateOutlet="content" />
+        </h6>
+      }
+      @case ('body1') {
+        <p [class]="textClasses()">
+          <ng-container *ngTemplateOutlet="content" />
+        </p>
+      }
+      @case ('body2') {
+        <p [class]="textClasses()">
+          <ng-container *ngTemplateOutlet="content" />
+        </p>
+      }
+      @case ('subtitle1') {
+        <h6 [class]="textClasses()">
+          <ng-container *ngTemplateOutlet="content" />
+        </h6>
+      }
+      @case ('subtitle2') {
+        <h6 [class]="textClasses()">
+          <ng-container *ngTemplateOutlet="content" />
+        </h6>
+      }
+      @case ('caption') {
+        <span [class]="textClasses()">
+          <ng-container *ngTemplateOutlet="content" />
+        </span>
+      }
+      @case ('overline') {
+        <span [class]="textClasses()">
+          <ng-container *ngTemplateOutlet="content" />
+        </span>
+      }
+      @case ('button') {
+        <span [class]="textClasses()">
+          <ng-container *ngTemplateOutlet="content" />
+        </span>
+      }
+      @case ('inherit') {
+        <span [class]="textClasses()">
+          <ng-container *ngTemplateOutlet="content" />
+        </span>
+      }
+      @default {
+        <span [class]="textClasses()">
+          <ng-container *ngTemplateOutlet="content" />
+        </span>
+      }
+    }
+  `, isInline: true, styles: [".text{margin-bottom:.5rem;margin-top:0}.text-h1{font-size:40px;font-weight:600;line-height:1}.text-h2{font-size:32px;font-weight:600;line-height:1}.text-h3{font-size:28px;font-weight:600;line-height:1}.text-h4{font-size:24px;font-weight:600;line-height:1}.text-h5{font-size:20px;font-weight:600;line-height:1}.text-h6{font-size:16px;font-weight:600;line-height:1}.text-body1{font-size:1rem;font-weight:400;line-height:1.5;letter-spacing:.00938em}.text-body2{font-size:.875rem;font-weight:400;line-height:1.43;letter-spacing:.01071em}.text-subtitle1{font-size:1rem;font-weight:400;line-height:1.75;letter-spacing:.00938em}.text-subtitle2{font-size:.875rem;font-weight:500;line-height:1.57;letter-spacing:.00714em}.text-caption{font-size:.75rem;font-weight:400;line-height:1.66;letter-spacing:.03333em}.text-overline{font-size:.75rem;font-weight:400;line-height:2.66;letter-spacing:.08333em;text-transform:uppercase}.text-button{font-size:.875rem;font-weight:500;line-height:1.75;letter-spacing:.02857em;text-transform:uppercase}.text-inherit{font-size:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit}.text-color-default{color:var(--ls-color-dark)}.text-color-primary{color:var(--ls-color-primary)}.text-color-secondary{color:var(--ls-color-secondary)}.text-color-success{color:var(--ls-color-success)}.text-color-error{color:var(--ls-color-danger)}.text-color-warning{color:var(--ls-color-warning)}.text-color-info{color:var(--ls-color-info)}.text-color-dark{color:var(--ls-color-dark)}.text-align-left{text-align:left}.text-align-center{text-align:center}.text-align-right{text-align:right}.text-align-justify{text-align:justify}.text-align-inherit{text-align:inherit}body.dark .text-color-default,body.dark .text-color-dark{color:#e0e6ed}\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: TextComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ls-text', standalone: true, imports: [NgTemplateOutlet], template: `
+    <ng-template #content>
+      <ng-content></ng-content>
+    </ng-template>
+
+    @switch (variant()) {
+      @case ('h1') {
+        <h1 [class]="textClasses()">
+          <ng-container *ngTemplateOutlet="content" />
+        </h1>
+      }
+      @case ('h2') {
+        <h2 [class]="textClasses()">
+          <ng-container *ngTemplateOutlet="content" />
+        </h2>
+      }
+      @case ('h3') {
+        <h3 [class]="textClasses()">
+          <ng-container *ngTemplateOutlet="content" />
+        </h3>
+      }
+      @case ('h4') {
+        <h4 [class]="textClasses()">
+          <ng-container *ngTemplateOutlet="content" />
+        </h4>
+      }
+      @case ('h5') {
+        <h5 [class]="textClasses()">
+          <ng-container *ngTemplateOutlet="content" />
+        </h5>
+      }
+      @case ('h6') {
+        <h6 [class]="textClasses()">
+          <ng-container *ngTemplateOutlet="content" />
+        </h6>
+      }
+      @case ('body1') {
+        <p [class]="textClasses()">
+          <ng-container *ngTemplateOutlet="content" />
+        </p>
+      }
+      @case ('body2') {
+        <p [class]="textClasses()">
+          <ng-container *ngTemplateOutlet="content" />
+        </p>
+      }
+      @case ('subtitle1') {
+        <h6 [class]="textClasses()">
+          <ng-container *ngTemplateOutlet="content" />
+        </h6>
+      }
+      @case ('subtitle2') {
+        <h6 [class]="textClasses()">
+          <ng-container *ngTemplateOutlet="content" />
+        </h6>
+      }
+      @case ('caption') {
+        <span [class]="textClasses()">
+          <ng-container *ngTemplateOutlet="content" />
+        </span>
+      }
+      @case ('overline') {
+        <span [class]="textClasses()">
+          <ng-container *ngTemplateOutlet="content" />
+        </span>
+      }
+      @case ('button') {
+        <span [class]="textClasses()">
+          <ng-container *ngTemplateOutlet="content" />
+        </span>
+      }
+      @case ('inherit') {
+        <span [class]="textClasses()">
+          <ng-container *ngTemplateOutlet="content" />
+        </span>
+      }
+      @default {
+        <span [class]="textClasses()">
+          <ng-container *ngTemplateOutlet="content" />
+        </span>
+      }
+    }
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".text{margin-bottom:.5rem;margin-top:0}.text-h1{font-size:40px;font-weight:600;line-height:1}.text-h2{font-size:32px;font-weight:600;line-height:1}.text-h3{font-size:28px;font-weight:600;line-height:1}.text-h4{font-size:24px;font-weight:600;line-height:1}.text-h5{font-size:20px;font-weight:600;line-height:1}.text-h6{font-size:16px;font-weight:600;line-height:1}.text-body1{font-size:1rem;font-weight:400;line-height:1.5;letter-spacing:.00938em}.text-body2{font-size:.875rem;font-weight:400;line-height:1.43;letter-spacing:.01071em}.text-subtitle1{font-size:1rem;font-weight:400;line-height:1.75;letter-spacing:.00938em}.text-subtitle2{font-size:.875rem;font-weight:500;line-height:1.57;letter-spacing:.00714em}.text-caption{font-size:.75rem;font-weight:400;line-height:1.66;letter-spacing:.03333em}.text-overline{font-size:.75rem;font-weight:400;line-height:2.66;letter-spacing:.08333em;text-transform:uppercase}.text-button{font-size:.875rem;font-weight:500;line-height:1.75;letter-spacing:.02857em;text-transform:uppercase}.text-inherit{font-size:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit}.text-color-default{color:var(--ls-color-dark)}.text-color-primary{color:var(--ls-color-primary)}.text-color-secondary{color:var(--ls-color-secondary)}.text-color-success{color:var(--ls-color-success)}.text-color-error{color:var(--ls-color-danger)}.text-color-warning{color:var(--ls-color-warning)}.text-color-info{color:var(--ls-color-info)}.text-color-dark{color:var(--ls-color-dark)}.text-align-left{text-align:left}.text-align-center{text-align:center}.text-align-right{text-align:right}.text-align-justify{text-align:justify}.text-align-inherit{text-align:inherit}body.dark .text-color-default,body.dark .text-color-dark{color:#e0e6ed}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }] } });
+
+class TagComponent {
+    constructor() {
+        this._sanitizer = inject(DomSanitizer);
+        this.variant = input('filled', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+        this.color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
+        this.startIcon = input(...(ngDevMode ? [undefined, { debugName: "startIcon" }] : []));
+        this.endIcon = input(...(ngDevMode ? [undefined, { debugName: "endIcon" }] : []));
+    }
+    get sanitizedStartIcon() {
+        return this._sanitizer.bypassSecurityTrustHtml(this.startIcon() ?? '');
+    }
+    get sanitizedEndIcon() {
+        return this._sanitizer.bypassSecurityTrustHtml(this.endIcon() ?? '');
+    }
+    get tagClasses() {
+        return `tag tag-${this.variant()}-${this.color()}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: TagComponent, isStandalone: true, selector: "ls-tag", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, startIcon: { classPropertyName: "startIcon", publicName: "startIcon", isSignal: true, isRequired: false, transformFunction: null }, endIcon: { classPropertyName: "endIcon", publicName: "endIcon", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <span [class]="tagClasses">
+      @if (startIcon()) {
+        <span
+          class="tag-icon tag-icon--start"
+          [innerHTML]="sanitizedStartIcon"></span>
+      }
+      <ng-content />
+      @if (endIcon()) {
+        <span
+          class="tag-icon tag-icon--end"
+          [innerHTML]="sanitizedEndIcon"></span>
+      }
+    </span>
+  `, isInline: true, styles: [":host{display:contents}.tag{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:.75rem;font-weight:600;line-height:1;height:24px;padding:0 8px;border-radius:6px;white-space:nowrap;cursor:default;-webkit-user-select:none;user-select:none;transition:all .15s ease-in-out}.tag-icon{display:inline-flex;align-items:center;flex-shrink:0;width:16px;height:16px}.tag-icon svg{width:100%;height:100%}.tag-filled-primary{border:none;color:#fff;background-color:var(--ls-color-primary)}.tag-filled-secondary{border:none;color:#fff;background-color:var(--ls-color-secondary)}.tag-filled-success{border:none;color:#fff;background-color:var(--ls-color-success)}.tag-filled-error{border:none;color:#fff;background-color:var(--ls-color-error)}.tag-filled-info{border:none;color:#fff;background-color:var(--ls-color-info)}.tag-filled-warning{border:none;color:#fff;background-color:var(--ls-color-warning)}.tag-filled-inherit{border:none;color:#fff;background-color:var(--ls-color-dark)}.tag-outlined-primary{background-color:transparent;border:1px solid var(--ls-color-primary);color:var(--ls-color-primary)}.tag-outlined-secondary{background-color:transparent;border:1px solid var(--ls-color-secondary);color:var(--ls-color-secondary)}.tag-outlined-success{background-color:transparent;border:1px solid var(--ls-color-success);color:var(--ls-color-success)}.tag-outlined-error{background-color:transparent;border:1px solid var(--ls-color-error);color:var(--ls-color-error)}.tag-outlined-info{background-color:transparent;border:1px solid var(--ls-color-info);color:var(--ls-color-info)}.tag-outlined-warning{background-color:transparent;border:1px solid var(--ls-color-warning);color:var(--ls-color-warning)}.tag-outlined-inherit{background-color:transparent;border:1px solid var(--ls-color-dark);color:var(--ls-color-dark)}.tag-soft-primary{border:none;color:var(--ls-color-primary);background-color:var(--ls-color-primary-dark-light)}.tag-soft-secondary{border:none;color:var(--ls-color-secondary);background-color:var(--ls-color-secondary-dark-light)}.tag-soft-success{border:none;color:var(--ls-color-success);background-color:var(--ls-color-success-dark-light)}.tag-soft-error{border:none;color:var(--ls-color-error);background-color:var(--ls-color-error-dark-light)}.tag-soft-info{border:none;color:var(--ls-color-info);background-color:var(--ls-color-info-dark-light)}.tag-soft-warning{border:none;color:var(--ls-color-warning);background-color:var(--ls-color-warning-dark-light)}.tag-soft-inherit{border:none;color:var(--ls-color-dark);background-color:var(--ls-color-dark-dark-light)}.tag-inverted-primary{border:none;background-color:#fff;color:var(--ls-color-primary)}.tag-inverted-secondary{border:none;background-color:#fff;color:var(--ls-color-secondary)}.tag-inverted-success{border:none;background-color:#fff;color:var(--ls-color-success)}.tag-inverted-error{border:none;background-color:#fff;color:var(--ls-color-error)}.tag-inverted-info{border:none;background-color:#fff;color:var(--ls-color-info)}.tag-inverted-warning{border:none;background-color:#fff;color:var(--ls-color-warning)}.tag-inverted-inherit{border:none;background-color:#fff;color:var(--ls-color-dark)}body.dark .tag-filled-inherit{color:var(--ls-color-dark);background-color:#e0e6ed}body.dark .tag-outlined-inherit{border-color:#e0e6ed;color:#e0e6ed}body.dark .tag-soft-inherit{color:#e0e6ed;background-color:#e0e6ed26}body.dark .tag-inverted-primary,body.dark .tag-inverted-secondary,body.dark .tag-inverted-success,body.dark .tag-inverted-error,body.dark .tag-inverted-info,body.dark .tag-inverted-warning{background-color:var(--ls-color-dark)}body.dark .tag-inverted-inherit{color:#e0e6ed;background-color:var(--ls-color-dark)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: TagComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ls-tag', standalone: true, template: `
+    <span [class]="tagClasses">
+      @if (startIcon()) {
+        <span
+          class="tag-icon tag-icon--start"
+          [innerHTML]="sanitizedStartIcon"></span>
+      }
+      <ng-content />
+      @if (endIcon()) {
+        <span
+          class="tag-icon tag-icon--end"
+          [innerHTML]="sanitizedEndIcon"></span>
+      }
+    </span>
+  `, styles: [":host{display:contents}.tag{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:.75rem;font-weight:600;line-height:1;height:24px;padding:0 8px;border-radius:6px;white-space:nowrap;cursor:default;-webkit-user-select:none;user-select:none;transition:all .15s ease-in-out}.tag-icon{display:inline-flex;align-items:center;flex-shrink:0;width:16px;height:16px}.tag-icon svg{width:100%;height:100%}.tag-filled-primary{border:none;color:#fff;background-color:var(--ls-color-primary)}.tag-filled-secondary{border:none;color:#fff;background-color:var(--ls-color-secondary)}.tag-filled-success{border:none;color:#fff;background-color:var(--ls-color-success)}.tag-filled-error{border:none;color:#fff;background-color:var(--ls-color-error)}.tag-filled-info{border:none;color:#fff;background-color:var(--ls-color-info)}.tag-filled-warning{border:none;color:#fff;background-color:var(--ls-color-warning)}.tag-filled-inherit{border:none;color:#fff;background-color:var(--ls-color-dark)}.tag-outlined-primary{background-color:transparent;border:1px solid var(--ls-color-primary);color:var(--ls-color-primary)}.tag-outlined-secondary{background-color:transparent;border:1px solid var(--ls-color-secondary);color:var(--ls-color-secondary)}.tag-outlined-success{background-color:transparent;border:1px solid var(--ls-color-success);color:var(--ls-color-success)}.tag-outlined-error{background-color:transparent;border:1px solid var(--ls-color-error);color:var(--ls-color-error)}.tag-outlined-info{background-color:transparent;border:1px solid var(--ls-color-info);color:var(--ls-color-info)}.tag-outlined-warning{background-color:transparent;border:1px solid var(--ls-color-warning);color:var(--ls-color-warning)}.tag-outlined-inherit{background-color:transparent;border:1px solid var(--ls-color-dark);color:var(--ls-color-dark)}.tag-soft-primary{border:none;color:var(--ls-color-primary);background-color:var(--ls-color-primary-dark-light)}.tag-soft-secondary{border:none;color:var(--ls-color-secondary);background-color:var(--ls-color-secondary-dark-light)}.tag-soft-success{border:none;color:var(--ls-color-success);background-color:var(--ls-color-success-dark-light)}.tag-soft-error{border:none;color:var(--ls-color-error);background-color:var(--ls-color-error-dark-light)}.tag-soft-info{border:none;color:var(--ls-color-info);background-color:var(--ls-color-info-dark-light)}.tag-soft-warning{border:none;color:var(--ls-color-warning);background-color:var(--ls-color-warning-dark-light)}.tag-soft-inherit{border:none;color:var(--ls-color-dark);background-color:var(--ls-color-dark-dark-light)}.tag-inverted-primary{border:none;background-color:#fff;color:var(--ls-color-primary)}.tag-inverted-secondary{border:none;background-color:#fff;color:var(--ls-color-secondary)}.tag-inverted-success{border:none;background-color:#fff;color:var(--ls-color-success)}.tag-inverted-error{border:none;background-color:#fff;color:var(--ls-color-error)}.tag-inverted-info{border:none;background-color:#fff;color:var(--ls-color-info)}.tag-inverted-warning{border:none;background-color:#fff;color:var(--ls-color-warning)}.tag-inverted-inherit{border:none;background-color:#fff;color:var(--ls-color-dark)}body.dark .tag-filled-inherit{color:var(--ls-color-dark);background-color:#e0e6ed}body.dark .tag-outlined-inherit{border-color:#e0e6ed;color:#e0e6ed}body.dark .tag-soft-inherit{color:#e0e6ed;background-color:#e0e6ed26}body.dark .tag-inverted-primary,body.dark .tag-inverted-secondary,body.dark .tag-inverted-success,body.dark .tag-inverted-error,body.dark .tag-inverted-info,body.dark .tag-inverted-warning{background-color:var(--ls-color-dark)}body.dark .tag-inverted-inherit{color:#e0e6ed;background-color:var(--ls-color-dark)}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], startIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "startIcon", required: false }] }], endIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "endIcon", required: false }] }] } });
+
+class BadgeComponent {
+    constructor() {
+        this.badgeContent = input(undefined, ...(ngDevMode ? [{ debugName: "badgeContent" }] : []));
+        this.max = input(99, ...(ngDevMode ? [{ debugName: "max" }] : []));
+        this.severity = input('error', ...(ngDevMode ? [{ debugName: "severity" }] : []));
+        this.variant = input('solid', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+        this.badgePosition = input('top-right', ...(ngDevMode ? [{ debugName: "badgePosition" }] : []));
+        this.overlap = input('rectangular', ...(ngDevMode ? [{ debugName: "overlap" }] : []));
+        this.isHidden = input(false, ...(ngDevMode ? [{ debugName: "isHidden" }] : []));
+        this.formattedContent = computed(() => {
+            const raw = this.badgeContent();
+            if (raw === undefined || raw === null)
+                return '';
+            if (typeof raw === 'number') {
+                return raw > this.max()
+                    ? `${this.max()}+`
+                    : String(raw);
+            }
+            return String(raw);
+        }, ...(ngDevMode ? [{ debugName: "formattedContent" }] : []));
+        this.badgeClasses = computed(() => {
+            const classes = ['badge'];
+            classes.push(`badge-${this.severity()}`);
+            classes.push(`badge-${this.variant()}`);
+            classes.push(`badge-${this.badgePosition()}`);
+            classes.push(`badge-overlap-${this.overlap()}`);
+            return classes.join(' ');
+        }, ...(ngDevMode ? [{ debugName: "badgeClasses" }] : []));
+        this.ariaLabelText = computed(() => {
+            if (this.variant() === 'dot') {
+                return 'status indicator';
+            }
+            const formatted = this.formattedContent();
+            return formatted || 'badge';
+        }, ...(ngDevMode ? [{ debugName: "ariaLabelText" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: BadgeComponent, isStandalone: true, selector: "ls-badge", inputs: { badgeContent: { classPropertyName: "badgeContent", publicName: "badgeContent", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, badgePosition: { classPropertyName: "badgePosition", publicName: "badgePosition", isSignal: true, isRequired: false, transformFunction: null }, overlap: { classPropertyName: "overlap", publicName: "overlap", isSignal: true, isRequired: false, transformFunction: null }, isHidden: { classPropertyName: "isHidden", publicName: "isHidden", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div class="badge-wrapper">
+      <ng-content />
+      @if (!isHidden()) {
+        <span
+          [class]="badgeClasses()"
+          role="status"
+          [attr.aria-label]="ariaLabelText()">
+          @if (variant() !== 'dot') {
+            {{ formattedContent() }}
+          }
+        </span>
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:contents}.badge-wrapper{position:relative;display:inline-flex;vertical-align:middle}.badge{position:absolute;display:inline-flex;align-items:center;justify-content:center;font-size:.625rem;font-weight:600;line-height:1;min-width:20px;height:20px;padding:0 6px;border-radius:var(--ls-border-radius-full);white-space:nowrap;z-index:1;pointer-events:none;transition:transform var(--ls-transition-duration) ease;box-shadow:0 2px 5px #00000026}.badge-solid{color:#fff}.badge-outlined{background-color:transparent;border-width:2px;border-style:solid}.badge-dot{min-width:10px;width:10px;height:10px;padding:0;border-radius:50%}.badge-top-right{top:0;right:0;transform:translate(50%,-50%)}.badge-top-left{top:0;left:0;transform:translate(-50%,-50%)}.badge-bottom-right{bottom:0;right:0;transform:translate(50%,50%)}.badge-bottom-left{bottom:0;left:0;transform:translate(-50%,50%)}.badge-overlap-circular.badge-top-right{top:8%;right:8%}.badge-overlap-circular.badge-top-left{top:8%;left:8%}.badge-overlap-circular.badge-bottom-right{bottom:8%;right:8%}.badge-overlap-circular.badge-bottom-left{bottom:8%;left:8%}.badge-solid.badge-primary{background-color:var(--ls-color-primary)}.badge-solid.badge-secondary{background-color:var(--ls-color-secondary)}.badge-solid.badge-success{background-color:var(--ls-color-success)}.badge-solid.badge-warning{background-color:var(--ls-color-warning)}.badge-solid.badge-error{background-color:var(--ls-color-danger)}.badge-solid.badge-info{background-color:var(--ls-color-info)}.badge-outlined.badge-primary{border-color:var(--ls-color-primary);color:var(--ls-color-primary)}.badge-outlined.badge-secondary{border-color:var(--ls-color-secondary);color:var(--ls-color-secondary)}.badge-outlined.badge-success{border-color:var(--ls-color-success);color:var(--ls-color-success)}.badge-outlined.badge-warning{border-color:var(--ls-color-warning);color:var(--ls-color-warning)}.badge-outlined.badge-error{border-color:var(--ls-color-danger);color:var(--ls-color-danger)}.badge-outlined.badge-info{border-color:var(--ls-color-info);color:var(--ls-color-info)}.badge-dot.badge-primary{background-color:var(--ls-color-primary)}.badge-dot.badge-secondary{background-color:var(--ls-color-secondary)}.badge-dot.badge-success{background-color:var(--ls-color-success)}.badge-dot.badge-warning{background-color:var(--ls-color-warning)}.badge-dot.badge-error{background-color:var(--ls-color-danger)}.badge-dot.badge-info{background-color:var(--ls-color-info)}body.dark .badge-solid{color:#fff}body.dark .badge-outlined.badge-primary{border-color:var(--ls-color-primary);color:var(--ls-color-primary)}body.dark .badge-outlined.badge-secondary{border-color:#9ca3af;color:#9ca3af}body.dark .badge-outlined.badge-success{border-color:var(--ls-color-success);color:var(--ls-color-success)}body.dark .badge-outlined.badge-warning{border-color:var(--ls-color-warning);color:var(--ls-color-warning)}body.dark .badge-outlined.badge-error{border-color:var(--ls-color-danger);color:var(--ls-color-danger)}body.dark .badge-outlined.badge-info{border-color:var(--ls-color-info);color:var(--ls-color-info)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: BadgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ls-badge', standalone: true, template: `
+    <div class="badge-wrapper">
+      <ng-content />
+      @if (!isHidden()) {
+        <span
+          [class]="badgeClasses()"
+          role="status"
+          [attr.aria-label]="ariaLabelText()">
+          @if (variant() !== 'dot') {
+            {{ formattedContent() }}
+          }
+        </span>
+      }
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:contents}.badge-wrapper{position:relative;display:inline-flex;vertical-align:middle}.badge{position:absolute;display:inline-flex;align-items:center;justify-content:center;font-size:.625rem;font-weight:600;line-height:1;min-width:20px;height:20px;padding:0 6px;border-radius:var(--ls-border-radius-full);white-space:nowrap;z-index:1;pointer-events:none;transition:transform var(--ls-transition-duration) ease;box-shadow:0 2px 5px #00000026}.badge-solid{color:#fff}.badge-outlined{background-color:transparent;border-width:2px;border-style:solid}.badge-dot{min-width:10px;width:10px;height:10px;padding:0;border-radius:50%}.badge-top-right{top:0;right:0;transform:translate(50%,-50%)}.badge-top-left{top:0;left:0;transform:translate(-50%,-50%)}.badge-bottom-right{bottom:0;right:0;transform:translate(50%,50%)}.badge-bottom-left{bottom:0;left:0;transform:translate(-50%,50%)}.badge-overlap-circular.badge-top-right{top:8%;right:8%}.badge-overlap-circular.badge-top-left{top:8%;left:8%}.badge-overlap-circular.badge-bottom-right{bottom:8%;right:8%}.badge-overlap-circular.badge-bottom-left{bottom:8%;left:8%}.badge-solid.badge-primary{background-color:var(--ls-color-primary)}.badge-solid.badge-secondary{background-color:var(--ls-color-secondary)}.badge-solid.badge-success{background-color:var(--ls-color-success)}.badge-solid.badge-warning{background-color:var(--ls-color-warning)}.badge-solid.badge-error{background-color:var(--ls-color-danger)}.badge-solid.badge-info{background-color:var(--ls-color-info)}.badge-outlined.badge-primary{border-color:var(--ls-color-primary);color:var(--ls-color-primary)}.badge-outlined.badge-secondary{border-color:var(--ls-color-secondary);color:var(--ls-color-secondary)}.badge-outlined.badge-success{border-color:var(--ls-color-success);color:var(--ls-color-success)}.badge-outlined.badge-warning{border-color:var(--ls-color-warning);color:var(--ls-color-warning)}.badge-outlined.badge-error{border-color:var(--ls-color-danger);color:var(--ls-color-danger)}.badge-outlined.badge-info{border-color:var(--ls-color-info);color:var(--ls-color-info)}.badge-dot.badge-primary{background-color:var(--ls-color-primary)}.badge-dot.badge-secondary{background-color:var(--ls-color-secondary)}.badge-dot.badge-success{background-color:var(--ls-color-success)}.badge-dot.badge-warning{background-color:var(--ls-color-warning)}.badge-dot.badge-error{background-color:var(--ls-color-danger)}.badge-dot.badge-info{background-color:var(--ls-color-info)}body.dark .badge-solid{color:#fff}body.dark .badge-outlined.badge-primary{border-color:var(--ls-color-primary);color:var(--ls-color-primary)}body.dark .badge-outlined.badge-secondary{border-color:#9ca3af;color:#9ca3af}body.dark .badge-outlined.badge-success{border-color:var(--ls-color-success);color:var(--ls-color-success)}body.dark .badge-outlined.badge-warning{border-color:var(--ls-color-warning);color:var(--ls-color-warning)}body.dark .badge-outlined.badge-error{border-color:var(--ls-color-danger);color:var(--ls-color-danger)}body.dark .badge-outlined.badge-info{border-color:var(--ls-color-info);color:var(--ls-color-info)}\n"] }]
+        }], propDecorators: { badgeContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeContent", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], badgePosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgePosition", required: false }] }], overlap: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlap", required: false }] }], isHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "isHidden", required: false }] }] } });
+
+class ChipComponent {
+    constructor() {
+        this._sanitizer = inject(DomSanitizer);
+        this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+        this.variant = input('filled', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+        this.color = input('default', ...(ngDevMode ? [{ debugName: "color" }] : []));
+        this.size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : []));
+        this.icon = input(undefined, ...(ngDevMode ? [{ debugName: "icon" }] : []));
+        this.avatar = input(undefined, ...(ngDevMode ? [{ debugName: "avatar" }] : []));
+        this.deleteIcon = input(false, ...(ngDevMode ? [{ debugName: "deleteIcon" }] : []));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        this.clickable = input(false, ...(ngDevMode ? [{ debugName: "clickable" }] : []));
+        this.onClick = output();
+        this.onDelete = output();
+        this.sanitizedIcon = computed(() => this._sanitizer.bypassSecurityTrustHtml(this.icon() ?? ''), ...(ngDevMode ? [{ debugName: "sanitizedIcon" }] : []));
+        this.chipClasses = computed(() => {
+            const classes = ['chip'];
+            classes.push(`chip-${this.variant()}`);
+            classes.push(`chip-${this.color()}`);
+            classes.push(`chip-${this.size()}`);
+            if (this.clickable())
+                classes.push('chip-clickable');
+            if (this.disabled())
+                classes.push('chip-disabled');
+            return classes.join(' ');
+        }, ...(ngDevMode ? [{ debugName: "chipClasses" }] : []));
+    }
+    handleClick(event) {
+        if (this.clickable() && !this.disabled()) {
+            this.onClick.emit();
+        }
+    }
+    handleDelete(event) {
+        event.stopPropagation();
+        this.onDelete.emit();
+    }
+    handleKeydown(event) {
+        if (event.key === 'Enter') {
+            this.handleClick(event);
+        }
+        if ((event.key === 'Delete' || event.key === 'Backspace') &&
+            this.deleteIcon()) {
+            this.handleDelete(event);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ChipComponent, isStandalone: true, selector: "ls-chip", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, avatar: { classPropertyName: "avatar", publicName: "avatar", isSignal: true, isRequired: false, transformFunction: null }, deleteIcon: { classPropertyName: "deleteIcon", publicName: "deleteIcon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick", onDelete: "onDelete" }, ngImport: i0, template: `
+    <span
+      [class]="chipClasses()"
+      [attr.role]="clickable() ? 'button' : null"
+      [attr.tabindex]="clickable() && !disabled() ? 0 : null"
+      [attr.aria-disabled]="disabled() ? 'true' : null"
+      (click)="handleClick($event)"
+      (keydown)="handleKeydown($event)">
+
+      @if (avatar()) {
+        <img
+          class="chip-avatar"
+          [src]="avatar()"
+          [alt]="label()"
+          aria-hidden="true" />
+      } @else if (icon()) {
+        <span
+          class="chip-icon"
+          [innerHTML]="sanitizedIcon()"
+          aria-hidden="true"></span>
+      }
+
+      <span class="chip-label">{{ label() }}</span>
+
+      @if (deleteIcon() && !disabled()) {
+        <button
+          class="chip-delete"
+          aria-label="Remove"
+          tabindex="-1"
+          (click)="handleDelete($event)">
+          <svg
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            class="chip-delete-svg">
+            <path
+              d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
+          </svg>
+        </button>
+      }
+    </span>
+  `, isInline: true, styles: [":host{display:contents}.chip{display:inline-flex;align-items:center;border-radius:var(--ls-border-radius-full);font-weight:500;white-space:nowrap;vertical-align:middle;outline:none;transition:background-color .15s ease,box-shadow .15s ease;-webkit-user-select:none;user-select:none}.chip-medium{height:32px;padding:0 12px;font-size:.8125rem;line-height:32px;gap:6px}.chip-small{height:24px;padding:0 8px;font-size:.75rem;line-height:24px;gap:4px}.chip-filled.chip-default{background-color:#e0e0e0;color:#000000de}.chip-filled.chip-primary{background-color:var(--ls-color-primary);color:#fff}.chip-filled.chip-secondary{background-color:var(--ls-color-secondary);color:#fff}.chip-filled.chip-success{background-color:var(--ls-color-success);color:#fff}.chip-filled.chip-warning{background-color:var(--ls-color-warning);color:#fff}.chip-filled.chip-error{background-color:var(--ls-color-danger);color:#fff}.chip-filled.chip-info{background-color:var(--ls-color-info);color:#fff}.chip-outlined.chip-default{background-color:transparent;border:1px solid #bdbdbd;color:#000000de}.chip-outlined.chip-primary{background-color:transparent;border:1px solid var(--ls-color-primary);color:var(--ls-color-primary)}.chip-outlined.chip-secondary{background-color:transparent;border:1px solid var(--ls-color-secondary);color:var(--ls-color-secondary)}.chip-outlined.chip-success{background-color:transparent;border:1px solid var(--ls-color-success);color:var(--ls-color-success)}.chip-outlined.chip-warning{background-color:transparent;border:1px solid var(--ls-color-warning);color:var(--ls-color-warning)}.chip-outlined.chip-error{background-color:transparent;border:1px solid var(--ls-color-danger);color:var(--ls-color-danger)}.chip-outlined.chip-info{background-color:transparent;border:1px solid var(--ls-color-info);color:var(--ls-color-info)}.chip-clickable{cursor:pointer}.chip-clickable:hover{box-shadow:0 2px 4px #0000001a}.chip-clickable.chip-filled.chip-default:hover{background-color:#d5d5d5}.chip-clickable.chip-filled.chip-primary:hover,.chip-clickable.chip-filled.chip-secondary:hover,.chip-clickable.chip-filled.chip-success:hover,.chip-clickable.chip-filled.chip-warning:hover,.chip-clickable.chip-filled.chip-error:hover,.chip-clickable.chip-filled.chip-info:hover{filter:brightness(.9)}.chip-clickable.chip-outlined:hover{background-color:#0000000a}.chip-disabled{opacity:.6;pointer-events:none;cursor:default}.chip-avatar{width:24px;height:24px;border-radius:50%;object-fit:cover;margin-left:-4px}.chip-small .chip-avatar{width:18px;height:18px;margin-left:-2px}.chip-icon{display:inline-flex;align-items:center;flex-shrink:0}.chip-icon>svg{width:18px;height:18px}.chip-small .chip-icon>svg{width:16px;height:16px}.chip-delete{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;border:none;background:transparent;color:inherit;opacity:.7;padding:0;margin-right:-4px;transition:opacity .15s ease}.chip-delete:hover{opacity:1}.chip-delete-svg{width:18px;height:18px}.chip-small .chip-delete-svg{width:16px;height:16px}body.dark .chip-filled.chip-default{background-color:#4a4a4a;color:#e0e0e0}body.dark .chip-clickable.chip-filled.chip-default:hover{background-color:#5a5a5a}body.dark .chip-outlined.chip-default{border-color:#616161;color:#e0e0e0}body.dark .chip-clickable.chip-outlined:hover{background-color:#ffffff14}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ChipComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ls-chip', standalone: true, template: `
+    <span
+      [class]="chipClasses()"
+      [attr.role]="clickable() ? 'button' : null"
+      [attr.tabindex]="clickable() && !disabled() ? 0 : null"
+      [attr.aria-disabled]="disabled() ? 'true' : null"
+      (click)="handleClick($event)"
+      (keydown)="handleKeydown($event)">
+
+      @if (avatar()) {
+        <img
+          class="chip-avatar"
+          [src]="avatar()"
+          [alt]="label()"
+          aria-hidden="true" />
+      } @else if (icon()) {
+        <span
+          class="chip-icon"
+          [innerHTML]="sanitizedIcon()"
+          aria-hidden="true"></span>
+      }
+
+      <span class="chip-label">{{ label() }}</span>
+
+      @if (deleteIcon() && !disabled()) {
+        <button
+          class="chip-delete"
+          aria-label="Remove"
+          tabindex="-1"
+          (click)="handleDelete($event)">
+          <svg
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            class="chip-delete-svg">
+            <path
+              d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
+          </svg>
+        </button>
+      }
+    </span>
+  `, styles: [":host{display:contents}.chip{display:inline-flex;align-items:center;border-radius:var(--ls-border-radius-full);font-weight:500;white-space:nowrap;vertical-align:middle;outline:none;transition:background-color .15s ease,box-shadow .15s ease;-webkit-user-select:none;user-select:none}.chip-medium{height:32px;padding:0 12px;font-size:.8125rem;line-height:32px;gap:6px}.chip-small{height:24px;padding:0 8px;font-size:.75rem;line-height:24px;gap:4px}.chip-filled.chip-default{background-color:#e0e0e0;color:#000000de}.chip-filled.chip-primary{background-color:var(--ls-color-primary);color:#fff}.chip-filled.chip-secondary{background-color:var(--ls-color-secondary);color:#fff}.chip-filled.chip-success{background-color:var(--ls-color-success);color:#fff}.chip-filled.chip-warning{background-color:var(--ls-color-warning);color:#fff}.chip-filled.chip-error{background-color:var(--ls-color-danger);color:#fff}.chip-filled.chip-info{background-color:var(--ls-color-info);color:#fff}.chip-outlined.chip-default{background-color:transparent;border:1px solid #bdbdbd;color:#000000de}.chip-outlined.chip-primary{background-color:transparent;border:1px solid var(--ls-color-primary);color:var(--ls-color-primary)}.chip-outlined.chip-secondary{background-color:transparent;border:1px solid var(--ls-color-secondary);color:var(--ls-color-secondary)}.chip-outlined.chip-success{background-color:transparent;border:1px solid var(--ls-color-success);color:var(--ls-color-success)}.chip-outlined.chip-warning{background-color:transparent;border:1px solid var(--ls-color-warning);color:var(--ls-color-warning)}.chip-outlined.chip-error{background-color:transparent;border:1px solid var(--ls-color-danger);color:var(--ls-color-danger)}.chip-outlined.chip-info{background-color:transparent;border:1px solid var(--ls-color-info);color:var(--ls-color-info)}.chip-clickable{cursor:pointer}.chip-clickable:hover{box-shadow:0 2px 4px #0000001a}.chip-clickable.chip-filled.chip-default:hover{background-color:#d5d5d5}.chip-clickable.chip-filled.chip-primary:hover,.chip-clickable.chip-filled.chip-secondary:hover,.chip-clickable.chip-filled.chip-success:hover,.chip-clickable.chip-filled.chip-warning:hover,.chip-clickable.chip-filled.chip-error:hover,.chip-clickable.chip-filled.chip-info:hover{filter:brightness(.9)}.chip-clickable.chip-outlined:hover{background-color:#0000000a}.chip-disabled{opacity:.6;pointer-events:none;cursor:default}.chip-avatar{width:24px;height:24px;border-radius:50%;object-fit:cover;margin-left:-4px}.chip-small .chip-avatar{width:18px;height:18px;margin-left:-2px}.chip-icon{display:inline-flex;align-items:center;flex-shrink:0}.chip-icon>svg{width:18px;height:18px}.chip-small .chip-icon>svg{width:16px;height:16px}.chip-delete{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;border:none;background:transparent;color:inherit;opacity:.7;padding:0;margin-right:-4px;transition:opacity .15s ease}.chip-delete:hover{opacity:1}.chip-delete-svg{width:18px;height:18px}.chip-small .chip-delete-svg{width:16px;height:16px}body.dark .chip-filled.chip-default{background-color:#4a4a4a;color:#e0e0e0}body.dark .chip-clickable.chip-filled.chip-default:hover{background-color:#5a5a5a}body.dark .chip-outlined.chip-default{border-color:#616161;color:#e0e0e0}body.dark .chip-clickable.chip-outlined:hover{background-color:#ffffff14}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], avatar: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatar", required: false }] }], deleteIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteIcon", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], onClick: [{ type: i0.Output, args: ["onClick"] }], onDelete: [{ type: i0.Output, args: ["onDelete"] }] } });
+
+let nextId = 0;
+class TooltipComponent {
+    constructor() {
+        this.content = input.required(...(ngDevMode ? [{ debugName: "content" }] : []));
+        this.placement = input('top', ...(ngDevMode ? [{ debugName: "placement" }] : []));
+        this.backgroundClass = input('dark', ...(ngDevMode ? [{ debugName: "backgroundClass" }] : []));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        this._isVisible = signal(false, ...(ngDevMode ? [{ debugName: "_isVisible" }] : []));
+        this._tooltipId = `ls-tooltip-${nextId++}`;
+    }
+    get tooltipClasses() {
+        return [
+            'tooltip-box',
+            `tooltip-${this.placement()}`,
+            `tooltip-bg-${this.backgroundClass()}`,
+        ].join(' ');
+    }
+    show() {
+        this._isVisible.set(true);
+    }
+    hide() {
+        this._isVisible.set(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: TooltipComponent, isStandalone: true, selector: "ls-tooltip", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, backgroundClass: { classPropertyName: "backgroundClass", publicName: "backgroundClass", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <span
+      class="ls-tooltip-trigger"
+      [class.ls-tooltip-disabled]="disabled()"
+      [attr.aria-describedby]="disabled() ? null : _tooltipId"
+      (mouseenter)="show()"
+      (mouseleave)="hide()"
+      (focus)="show()"
+      (blur)="hide()">
+      <ng-content />
+      @if (_isVisible() && !disabled()) {
+        <span
+          [id]="_tooltipId"
+          role="tooltip"
+          [attr.aria-hidden]="!_isVisible()"
+          [class]="tooltipClasses">
+          {{ content() }}
+          <span class="tooltip-arrow"></span>
+        </span>
+      }
+    </span>
+  `, isInline: true, styles: [":host{display:contents}.ls-tooltip-trigger{position:relative;display:inline-flex}.ls-tooltip-disabled{pointer-events:none}.tooltip-box{position:absolute;z-index:10;padding:2px 8px;border-radius:6px;font-family:var(--ls-font-family);font-size:.8rem;font-weight:500;white-space:nowrap;box-shadow:0 2px 8px #00000026;pointer-events:none;animation:tooltip-fade-in var(--ls-transition-duration) ease forwards}@keyframes tooltip-fade-in{0%{opacity:0}to{opacity:1}}.tooltip-top{bottom:calc(100% + 8px);left:50%;transform:translate(-50%)}.tooltip-bottom{top:calc(100% + 8px);left:50%;transform:translate(-50%)}.tooltip-left{right:calc(100% + 8px);top:50%;transform:translateY(-50%)}.tooltip-right{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}.tooltip-arrow{position:absolute;width:0;height:0;border:6px solid transparent}.tooltip-top .tooltip-arrow{bottom:-6px;left:50%;transform:translate(-50%);border-bottom:none;border-top-color:inherit}.tooltip-bottom .tooltip-arrow{top:-6px;left:50%;transform:translate(-50%);border-top:none;border-bottom-color:inherit}.tooltip-left .tooltip-arrow{right:-6px;top:50%;transform:translateY(-50%);border-right:none;border-left-color:inherit}.tooltip-right .tooltip-arrow{left:-6px;top:50%;transform:translateY(-50%);border-left:none;border-right-color:inherit}.tooltip-bg-primary{background-color:var(--ls-color-primary);color:#fff;border-color:var(--ls-color-primary)}.tooltip-bg-success{background-color:var(--ls-color-success);color:#fff;border-color:var(--ls-color-success)}.tooltip-bg-info{background-color:var(--ls-color-info);color:#fff;border-color:var(--ls-color-info)}.tooltip-bg-danger{background-color:var(--ls-color-danger);color:#fff;border-color:var(--ls-color-danger)}.tooltip-bg-warning{background-color:var(--ls-color-warning);color:#fff;border-color:var(--ls-color-warning)}.tooltip-bg-secondary{background-color:var(--ls-color-secondary);color:#fff;border-color:var(--ls-color-secondary)}.tooltip-bg-dark{background-color:var(--ls-color-dark);color:#fff;border-color:var(--ls-color-dark)}body.dark .tooltip-bg-dark{background-color:#e0e6ed;color:var(--ls-color-dark);border-color:#e0e6ed}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: TooltipComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ls-tooltip', standalone: true, template: `
+    <span
+      class="ls-tooltip-trigger"
+      [class.ls-tooltip-disabled]="disabled()"
+      [attr.aria-describedby]="disabled() ? null : _tooltipId"
+      (mouseenter)="show()"
+      (mouseleave)="hide()"
+      (focus)="show()"
+      (blur)="hide()">
+      <ng-content />
+      @if (_isVisible() && !disabled()) {
+        <span
+          [id]="_tooltipId"
+          role="tooltip"
+          [attr.aria-hidden]="!_isVisible()"
+          [class]="tooltipClasses">
+          {{ content() }}
+          <span class="tooltip-arrow"></span>
+        </span>
+      }
+    </span>
+  `, styles: [":host{display:contents}.ls-tooltip-trigger{position:relative;display:inline-flex}.ls-tooltip-disabled{pointer-events:none}.tooltip-box{position:absolute;z-index:10;padding:2px 8px;border-radius:6px;font-family:var(--ls-font-family);font-size:.8rem;font-weight:500;white-space:nowrap;box-shadow:0 2px 8px #00000026;pointer-events:none;animation:tooltip-fade-in var(--ls-transition-duration) ease forwards}@keyframes tooltip-fade-in{0%{opacity:0}to{opacity:1}}.tooltip-top{bottom:calc(100% + 8px);left:50%;transform:translate(-50%)}.tooltip-bottom{top:calc(100% + 8px);left:50%;transform:translate(-50%)}.tooltip-left{right:calc(100% + 8px);top:50%;transform:translateY(-50%)}.tooltip-right{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}.tooltip-arrow{position:absolute;width:0;height:0;border:6px solid transparent}.tooltip-top .tooltip-arrow{bottom:-6px;left:50%;transform:translate(-50%);border-bottom:none;border-top-color:inherit}.tooltip-bottom .tooltip-arrow{top:-6px;left:50%;transform:translate(-50%);border-top:none;border-bottom-color:inherit}.tooltip-left .tooltip-arrow{right:-6px;top:50%;transform:translateY(-50%);border-right:none;border-left-color:inherit}.tooltip-right .tooltip-arrow{left:-6px;top:50%;transform:translateY(-50%);border-left:none;border-right-color:inherit}.tooltip-bg-primary{background-color:var(--ls-color-primary);color:#fff;border-color:var(--ls-color-primary)}.tooltip-bg-success{background-color:var(--ls-color-success);color:#fff;border-color:var(--ls-color-success)}.tooltip-bg-info{background-color:var(--ls-color-info);color:#fff;border-color:var(--ls-color-info)}.tooltip-bg-danger{background-color:var(--ls-color-danger);color:#fff;border-color:var(--ls-color-danger)}.tooltip-bg-warning{background-color:var(--ls-color-warning);color:#fff;border-color:var(--ls-color-warning)}.tooltip-bg-secondary{background-color:var(--ls-color-secondary);color:#fff;border-color:var(--ls-color-secondary)}.tooltip-bg-dark{background-color:var(--ls-color-dark);color:#fff;border-color:var(--ls-color-dark)}body.dark .tooltip-bg-dark{background-color:#e0e6ed;color:var(--ls-color-dark);border-color:#e0e6ed}\n"] }]
+        }], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: true }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], backgroundClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundClass", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+class AvatarComponent {
+    constructor() {
+        this.alt = input('', ...(ngDevMode ? [{ debugName: "alt" }] : []));
+        this.color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
+        this.size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : []));
+        this.src = input('', ...(ngDevMode ? [{ debugName: "src" }] : []));
+        this.text = input('', ...(ngDevMode ? [{ debugName: "text" }] : []));
+        this.tooltip = input('', ...(ngDevMode ? [{ debugName: "tooltip" }] : []));
+        this.variant = input('circular', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+        this.containerClasses = computed(() => `avatar avatar-${this.size()} avatar-${this.variant()}`, ...(ngDevMode ? [{ debugName: "containerClasses" }] : []));
+        this.fallbackClasses = computed(() => `avatar avatar-${this.size()} avatar-${this.variant()} avatar-fallback`, ...(ngDevMode ? [{ debugName: "fallbackClasses" }] : []));
+        this.hasTooltip = computed(() => !!this.tooltip(), ...(ngDevMode ? [{ debugName: "hasTooltip" }] : []));
+        this.isImageMode = computed(() => !!this.src(), ...(ngDevMode ? [{ debugName: "isImageMode" }] : []));
+        this.isTextMode = computed(() => !this.src() && !!this.text(), ...(ngDevMode ? [{ debugName: "isTextMode" }] : []));
+        this.textClasses = computed(() => `avatar avatar-${this.size()} avatar-${this.variant()} avatar-color-${this.color()}`, ...(ngDevMode ? [{ debugName: "textClasses" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: AvatarComponent, isStandalone: true, selector: "ls-avatar", inputs: { alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @if (hasTooltip()) {
+      <ls-tooltip [content]="tooltip()">
+        <ng-container *ngTemplateOutlet="avatarTpl" />
+      </ls-tooltip>
+    } @else {
+      <ng-container *ngTemplateOutlet="avatarTpl" />
+    }
+
+    <ng-template #avatarTpl>
+      @if (isImageMode()) {
+        <img
+          [src]="src()"
+          [alt]="alt()"
+          [class]="containerClasses()" />
+      } @else if (isTextMode()) {
+        <span
+          role="img"
+          [attr.aria-label]="text()"
+          [class]="textClasses()">
+          {{ text() }}
+        </span>
+      } @else {
+        <span
+          role="img"
+          aria-label="avatar"
+          [class]="fallbackClasses()">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            class="avatar-icon">
+            <path
+              d="M12 12c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5
+                5 2.24 5 5 5zm0 2c-3.33 0-10 1.67-10
+                5v2h20v-2c0-3.33-6.67-5-10-5z" />
+          </svg>
+        </span>
+      }
+    </ng-template>
+  `, isInline: true, styles: [":host{display:contents}.avatar{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;font-family:var(--ls-font-family);font-weight:600;color:#fff;-webkit-user-select:none;user-select:none;vertical-align:middle}img.avatar{object-fit:cover}.avatar-small{width:2.25rem;height:2.25rem;font-size:.75rem}.avatar-medium{width:2.75rem;height:2.75rem;font-size:.875rem}.avatar-large{width:3.5rem;height:3.5rem;font-size:1.125rem}.avatar-circular{border-radius:var(--ls-border-radius-full)}.avatar-rounded{border-radius:var(--ls-border-radius-md)}.avatar-square{border-radius:0}.avatar-color-primary{background-color:var(--ls-color-primary)}.avatar-color-secondary{background-color:var(--ls-color-secondary)}.avatar-color-error{background-color:var(--ls-color-error)}.avatar-color-info{background-color:var(--ls-color-info)}.avatar-color-success{background-color:var(--ls-color-success)}.avatar-color-warning{background-color:var(--ls-color-warning)}.avatar-fallback{background-color:var(--ls-color-dark)}.avatar-icon{width:60%;height:60%;fill:currentColor}body.dark .avatar-fallback{background-color:#3b3f5c;color:#e0e6ed}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TooltipComponent, selector: "ls-tooltip", inputs: ["content", "placement", "backgroundClass", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AvatarComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, TooltipComponent], selector: 'ls-avatar', standalone: true, template: `
+    @if (hasTooltip()) {
+      <ls-tooltip [content]="tooltip()">
+        <ng-container *ngTemplateOutlet="avatarTpl" />
+      </ls-tooltip>
+    } @else {
+      <ng-container *ngTemplateOutlet="avatarTpl" />
+    }
+
+    <ng-template #avatarTpl>
+      @if (isImageMode()) {
+        <img
+          [src]="src()"
+          [alt]="alt()"
+          [class]="containerClasses()" />
+      } @else if (isTextMode()) {
+        <span
+          role="img"
+          [attr.aria-label]="text()"
+          [class]="textClasses()">
+          {{ text() }}
+        </span>
+      } @else {
+        <span
+          role="img"
+          aria-label="avatar"
+          [class]="fallbackClasses()">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            class="avatar-icon">
+            <path
+              d="M12 12c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5
+                5 2.24 5 5 5zm0 2c-3.33 0-10 1.67-10
+                5v2h20v-2c0-3.33-6.67-5-10-5z" />
+          </svg>
+        </span>
+      }
+    </ng-template>
+  `, styles: [":host{display:contents}.avatar{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;font-family:var(--ls-font-family);font-weight:600;color:#fff;-webkit-user-select:none;user-select:none;vertical-align:middle}img.avatar{object-fit:cover}.avatar-small{width:2.25rem;height:2.25rem;font-size:.75rem}.avatar-medium{width:2.75rem;height:2.75rem;font-size:.875rem}.avatar-large{width:3.5rem;height:3.5rem;font-size:1.125rem}.avatar-circular{border-radius:var(--ls-border-radius-full)}.avatar-rounded{border-radius:var(--ls-border-radius-md)}.avatar-square{border-radius:0}.avatar-color-primary{background-color:var(--ls-color-primary)}.avatar-color-secondary{background-color:var(--ls-color-secondary)}.avatar-color-error{background-color:var(--ls-color-error)}.avatar-color-info{background-color:var(--ls-color-info)}.avatar-color-success{background-color:var(--ls-color-success)}.avatar-color-warning{background-color:var(--ls-color-warning)}.avatar-fallback{background-color:var(--ls-color-dark)}.avatar-icon{width:60%;height:60%;fill:currentColor}body.dark .avatar-fallback{background-color:#3b3f5c;color:#e0e6ed}\n"] }]
+        }], propDecorators: { alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
+
+class AvatarGroupComponent {
+    constructor() {
+        this.avatars = input([], ...(ngDevMode ? [{ debugName: "avatars" }] : []));
+        this.maxAvatarGroup = input(0, ...(ngDevMode ? [{ debugName: "maxAvatarGroup" }] : []));
+        this.groupSize = computed(() => this.avatars()[0]?.size ?? 'medium', ...(ngDevMode ? [{ debugName: "groupSize" }] : []));
+        this.groupVariant = computed(() => this.avatars()[0]?.variant ?? 'circular', ...(ngDevMode ? [{ debugName: "groupVariant" }] : []));
+        this.visibleAvatars = computed(() => {
+            const max = this.maxAvatarGroup();
+            const all = this.avatars();
+            if (max > 0 && all.length > max) {
+                return all.slice(0, max);
+            }
+            return all;
+        }, ...(ngDevMode ? [{ debugName: "visibleAvatars" }] : []));
+        this.overflowCount = computed(() => {
+            const max = this.maxAvatarGroup();
+            const all = this.avatars();
+            if (max > 0 && all.length > max) {
+                return all.length - max;
+            }
+            return 0;
+        }, ...(ngDevMode ? [{ debugName: "overflowCount" }] : []));
+        this.hasOverflow = computed(() => this.overflowCount() > 0, ...(ngDevMode ? [{ debugName: "hasOverflow" }] : []));
+        this.overflowText = computed(() => '+' + this.overflowCount(), ...(ngDevMode ? [{ debugName: "overflowText" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AvatarGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: AvatarGroupComponent, isStandalone: true, selector: "ls-avatar-group", inputs: { avatars: { classPropertyName: "avatars", publicName: "avatars", isSignal: true, isRequired: false, transformFunction: null }, maxAvatarGroup: { classPropertyName: "maxAvatarGroup", publicName: "maxAvatarGroup", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div class="avatar-group" role="group" aria-label="Avatar group">
+      @for (avatar of visibleAvatars(); track $index) {
+        <div
+          class="avatar-group-item"
+          [style.z-index]="visibleAvatars().length - $index">
+          <ls-avatar
+            [src]="avatar.src ?? ''"
+            [alt]="avatar.alt ?? ''"
+            [variant]="avatar.variant ?? groupVariant()"
+            [text]="avatar.text ?? ''"
+            [color]="avatar.color ?? 'primary'"
+            [tooltip]="avatar.tooltip ?? ''"
+            [size]="avatar.size ?? groupSize()" />
+        </div>
+      }
+      @if (hasOverflow()) {
+        <div class="avatar-group-item" [style.z-index]="0">
+          <ls-avatar
+            [text]="overflowText()"
+            [variant]="groupVariant()"
+            [size]="groupSize()"
+            color="secondary" />
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:contents}.avatar-group{display:inline-flex;align-items:center}.avatar-group-item{position:relative;display:flex;align-items:center;margin-left:-.5rem}.avatar-group-item:first-child{margin-left:0}.avatar-group-item .avatar{border:2px solid #fff}body.dark .avatar-group-item .avatar{border-color:#1b2e4b}\n"], dependencies: [{ kind: "component", type: AvatarComponent, selector: "ls-avatar", inputs: ["alt", "color", "size", "src", "text", "tooltip", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AvatarGroupComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AvatarComponent], selector: 'ls-avatar-group', standalone: true, template: `
+    <div class="avatar-group" role="group" aria-label="Avatar group">
+      @for (avatar of visibleAvatars(); track $index) {
+        <div
+          class="avatar-group-item"
+          [style.z-index]="visibleAvatars().length - $index">
+          <ls-avatar
+            [src]="avatar.src ?? ''"
+            [alt]="avatar.alt ?? ''"
+            [variant]="avatar.variant ?? groupVariant()"
+            [text]="avatar.text ?? ''"
+            [color]="avatar.color ?? 'primary'"
+            [tooltip]="avatar.tooltip ?? ''"
+            [size]="avatar.size ?? groupSize()" />
+        </div>
+      }
+      @if (hasOverflow()) {
+        <div class="avatar-group-item" [style.z-index]="0">
+          <ls-avatar
+            [text]="overflowText()"
+            [variant]="groupVariant()"
+            [size]="groupSize()"
+            color="secondary" />
+        </div>
+      }
+    </div>
+  `, styles: [":host{display:contents}.avatar-group{display:inline-flex;align-items:center}.avatar-group-item{position:relative;display:flex;align-items:center;margin-left:-.5rem}.avatar-group-item:first-child{margin-left:0}.avatar-group-item .avatar{border:2px solid #fff}body.dark .avatar-group-item .avatar{border-color:#1b2e4b}\n"] }]
+        }], propDecorators: { avatars: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatars", required: false }] }], maxAvatarGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxAvatarGroup", required: false }] }] } });
+
+class LogoComponent {
+    constructor() {
+        this.href = input('', ...(ngDevMode ? [{ debugName: "href" }] : []));
+        this.size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : []));
+        this.src = input('', ...(ngDevMode ? [{ debugName: "src" }] : []));
+        this.hasHref = computed(() => !!this.href(), ...(ngDevMode ? [{ debugName: "hasHref" }] : []));
+        this.imgClasses = computed(() => `logo logo-${this.size()}`, ...(ngDevMode ? [{ debugName: "imgClasses" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: LogoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: LogoComponent, isStandalone: true, selector: "ls-logo", inputs: { href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @if (hasHref()) {
+      <a [attr.href]="href()" class="logo-link">
+        <img [src]="src()" [class]="imgClasses()" alt="Logo" />
+      </a>
+    } @else {
+      <img [src]="src()" [class]="imgClasses()" alt="Logo" />
+    }
+  `, isInline: true, styles: [":host{display:contents}.logo{display:block;height:auto;max-width:100%;object-fit:contain}.logo-small{height:1.5rem}.logo-medium{height:2rem}.logo-large{height:2.5rem}.logo-link{display:inline-flex;line-height:0;text-decoration:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: LogoComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [], selector: 'ls-logo', standalone: true, template: `
+    @if (hasHref()) {
+      <a [attr.href]="href()" class="logo-link">
+        <img [src]="src()" [class]="imgClasses()" alt="Logo" />
+      </a>
+    } @else {
+      <img [src]="src()" [class]="imgClasses()" alt="Logo" />
+    }
+  `, styles: [":host{display:contents}.logo{display:block;height:auto;max-width:100%;object-fit:contain}.logo-small{height:1.5rem}.logo-medium{height:2rem}.logo-large{height:2.5rem}.logo-link{display:inline-flex;line-height:0;text-decoration:none}\n"] }]
+        }], propDecorators: { href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }] } });
+
+class ProgressBarComponent {
+    constructor() {
+        this.variant = input('indeterminate', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+        this.color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
+        this.value = input(0, ...(ngDevMode ? [{ debugName: "value" }] : []));
+        this.showLabel = input(false, ...(ngDevMode ? [{ debugName: "showLabel" }] : []));
+        this.labelPosition = input('inside', ...(ngDevMode ? [{ debugName: "labelPosition" }] : []));
+        this.size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : []));
+        this.onFinished = output();
+        this._sizeClassMap = {
+            small: 'progress-bar-sm',
+            medium: 'progress-bar-md',
+            large: 'progress-bar-lg',
+            'extra-large': 'progress-bar-xl',
+        };
+        this.clampedValue = computed(() => Math.min(100, Math.max(0, this.value())), ...(ngDevMode ? [{ debugName: "clampedValue" }] : []));
+        this.trackClasses = computed(() => {
+            const classes = ['progress-bar-track'];
+            classes.push(this._sizeClassMap[this.size()]);
+            return classes.join(' ');
+        }, ...(ngDevMode ? [{ debugName: "trackClasses" }] : []));
+        this.indicatorClasses = computed(() => {
+            const classes = ['progress-bar-indicator'];
+            classes.push(`progress-bar-${this.color()}`);
+            const v = this.variant();
+            if (v === 'stripe') {
+                classes.push('progress-bar-stripe');
+            }
+            else if (v === 'animated') {
+                classes.push('progress-bar-animated');
+            }
+            else if (v === 'indeterminate') {
+                classes.push('progress-bar-indeterminate');
+            }
+            return classes.join(' ');
+        }, ...(ngDevMode ? [{ debugName: "indicatorClasses" }] : []));
+        this.indicatorWidth = computed(() => {
+            if (this.variant() === 'indeterminate') {
+                return '100%';
+            }
+            return `${this.clampedValue()}%`;
+        }, ...(ngDevMode ? [{ debugName: "indicatorWidth" }] : []));
+        this.labelText = computed(() => `${this.clampedValue()}%`, ...(ngDevMode ? [{ debugName: "labelText" }] : []));
+        this.labelClasses = computed(() => {
+            const classes = ['progress-bar-label'];
+            if (this.labelPosition() === 'inside') {
+                classes.push('progress-bar-label-inside');
+                if (this.clampedValue() < 15) {
+                    classes.push('progress-bar-label-dark');
+                }
+                else {
+                    classes.push('progress-bar-label-light');
+                }
+            }
+            else {
+                classes.push('progress-bar-label-right');
+            }
+            return classes.join(' ');
+        }, ...(ngDevMode ? [{ debugName: "labelClasses" }] : []));
+        effect(() => {
+            if (this.variant() !== 'indeterminate' &&
+                this.value() >= 100) {
+                this.onFinished.emit();
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ProgressBarComponent, isStandalone: true, selector: "ls-progress-bar", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onFinished: "onFinished" }, ngImport: i0, template: `
+   <div class="progress-bar-wrapper">
+      <div
+        [class]="trackClasses()"
+        role="progressbar"
+        [attr.aria-valuenow]="variant() === 'indeterminate' ? null : clampedValue()"
+        aria-valuemin="0"
+        aria-valuemax="100"
+        [attr.aria-label]="labelText()">
+
+        <div
+          [class]="indicatorClasses()"
+          [style.width]="indicatorWidth()">
+        </div>
+
+        @if (showLabel() && labelPosition() === 'inside' && variant() !== 'indeterminate') {
+          <span
+            [class]="labelClasses()"
+            [style.left.%]="clampedValue()">
+            {{ labelText() }}
+          </span>
+        }
+      </div>
+
+      @if (showLabel() && labelPosition() === 'right' && variant() !== 'indeterminate') {
+        <span [class]="labelClasses()">
+          {{ labelText() }}
+        </span>
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:contents}.progress-bar-wrapper{display:flex;align-items:center;width:100%;gap:8px}.progress-bar-track{position:relative;width:100%;background-color:#e5e7eb;border-radius:var(--ls-border-radius-full);overflow:hidden}.progress-bar-sm{height:4px}.progress-bar-md{height:8px}.progress-bar-lg{height:16px}.progress-bar-xl{height:24px}.progress-bar-indicator{height:100%;border-radius:var(--ls-border-radius-full);transition:width var(--ls-transition-duration) ease;position:relative}.progress-bar-stripe{background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:1rem 1rem}.progress-bar-animated{background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:1rem 1rem;animation:ls-progress-bar-stripes 1s linear infinite}.progress-bar-indeterminate{animation:ls-progress-bar-indeterminate 1.5s cubic-bezier(.65,.815,.735,.395) infinite;width:35%!important;position:absolute}@keyframes ls-progress-bar-stripes{0%{background-position:1rem 0}to{background-position:0 0}}@keyframes ls-progress-bar-indeterminate{0%{transform:translate(-100%)}to{transform:translate(300%)}}.progress-bar-label{font-size:.625rem;font-weight:600;white-space:nowrap;line-height:1}.progress-bar-label-inside{position:absolute;top:50%;transform:translate(-100%,-50%);margin-left:-4px;z-index:2;transition:left var(--ls-transition-duration) ease;pointer-events:none}.progress-bar-label-dark.progress-bar-label-inside{transform:translate(4px,-50%)}.progress-bar-label-right{flex-shrink:0;font-size:.75rem;color:#1f2937}.progress-bar-label-dark{color:#1f2937}.progress-bar-label-light{color:#fff}.progress-bar-primary{background-color:var(--ls-color-primary)}.progress-bar-secondary{background-color:var(--ls-color-secondary)}.progress-bar-error{background-color:var(--ls-color-danger)}.progress-bar-info{background-color:var(--ls-color-info)}.progress-bar-success{background-color:var(--ls-color-success)}.progress-bar-warning{background-color:var(--ls-color-warning)}.progress-bar-inherit{background-color:currentColor}body.dark .progress-bar-track{background-color:#374151}body.dark .progress-bar-label-right{color:#e5e7eb}body.dark .progress-bar-label-dark{color:#f3f4f6}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ProgressBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ls-progress-bar', standalone: true, template: `
+   <div class="progress-bar-wrapper">
+      <div
+        [class]="trackClasses()"
+        role="progressbar"
+        [attr.aria-valuenow]="variant() === 'indeterminate' ? null : clampedValue()"
+        aria-valuemin="0"
+        aria-valuemax="100"
+        [attr.aria-label]="labelText()">
+
+        <div
+          [class]="indicatorClasses()"
+          [style.width]="indicatorWidth()">
+        </div>
+
+        @if (showLabel() && labelPosition() === 'inside' && variant() !== 'indeterminate') {
+          <span
+            [class]="labelClasses()"
+            [style.left.%]="clampedValue()">
+            {{ labelText() }}
+          </span>
+        }
+      </div>
+
+      @if (showLabel() && labelPosition() === 'right' && variant() !== 'indeterminate') {
+        <span [class]="labelClasses()">
+          {{ labelText() }}
+        </span>
+      }
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:contents}.progress-bar-wrapper{display:flex;align-items:center;width:100%;gap:8px}.progress-bar-track{position:relative;width:100%;background-color:#e5e7eb;border-radius:var(--ls-border-radius-full);overflow:hidden}.progress-bar-sm{height:4px}.progress-bar-md{height:8px}.progress-bar-lg{height:16px}.progress-bar-xl{height:24px}.progress-bar-indicator{height:100%;border-radius:var(--ls-border-radius-full);transition:width var(--ls-transition-duration) ease;position:relative}.progress-bar-stripe{background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:1rem 1rem}.progress-bar-animated{background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:1rem 1rem;animation:ls-progress-bar-stripes 1s linear infinite}.progress-bar-indeterminate{animation:ls-progress-bar-indeterminate 1.5s cubic-bezier(.65,.815,.735,.395) infinite;width:35%!important;position:absolute}@keyframes ls-progress-bar-stripes{0%{background-position:1rem 0}to{background-position:0 0}}@keyframes ls-progress-bar-indeterminate{0%{transform:translate(-100%)}to{transform:translate(300%)}}.progress-bar-label{font-size:.625rem;font-weight:600;white-space:nowrap;line-height:1}.progress-bar-label-inside{position:absolute;top:50%;transform:translate(-100%,-50%);margin-left:-4px;z-index:2;transition:left var(--ls-transition-duration) ease;pointer-events:none}.progress-bar-label-dark.progress-bar-label-inside{transform:translate(4px,-50%)}.progress-bar-label-right{flex-shrink:0;font-size:.75rem;color:#1f2937}.progress-bar-label-dark{color:#1f2937}.progress-bar-label-light{color:#fff}.progress-bar-primary{background-color:var(--ls-color-primary)}.progress-bar-secondary{background-color:var(--ls-color-secondary)}.progress-bar-error{background-color:var(--ls-color-danger)}.progress-bar-info{background-color:var(--ls-color-info)}.progress-bar-success{background-color:var(--ls-color-success)}.progress-bar-warning{background-color:var(--ls-color-warning)}.progress-bar-inherit{background-color:currentColor}body.dark .progress-bar-track{background-color:#374151}body.dark .progress-bar-label-right{color:#e5e7eb}body.dark .progress-bar-label-dark{color:#f3f4f6}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], onFinished: [{ type: i0.Output, args: ["onFinished"] }] } });
+
+const RADIUS = 20;
+const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
+class LoaderComponent {
+    constructor() {
+        this.variant = input('indeterminate', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+        this.color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
+        this.value = input(0, ...(ngDevMode ? [{ debugName: "value" }] : []));
+        this.size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : []));
+        this.onFinished = output();
+        this.circumference = CIRCUMFERENCE;
+        this._diameterMap = {
+            small: 16,
+            medium: 32,
+            large: 48,
+        };
+        this._sizeClassMap = {
+            small: 'loader-sm',
+            medium: 'loader-md',
+            large: 'loader-lg',
+        };
+        this.svgDiameter = computed(() => this._diameterMap[this.size()], ...(ngDevMode ? [{ debugName: "svgDiameter" }] : []));
+        this.svgClasses = computed(() => {
+            const classes = ['loader-svg'];
+            classes.push(this._sizeClassMap[this.size()]);
+            if (this.variant() === 'indeterminate') {
+                classes.push('loader-indeterminate');
+            }
+            return classes.join(' ');
+        }, ...(ngDevMode ? [{ debugName: "svgClasses" }] : []));
+        this.indicatorClasses = computed(() => {
+            const classes = ['loader-indicator'];
+            classes.push(`loader-${this.variant()}`);
+            classes.push(`loader-${this.color()}`);
+            return classes.join(' ');
+        }, ...(ngDevMode ? [{ debugName: "indicatorClasses" }] : []));
+        this.bufferClasses = computed(() => `loader-buffer loader-${this.color()}`, ...(ngDevMode ? [{ debugName: "bufferClasses" }] : []));
+        this.indicatorDashOffset = computed(() => {
+            const v = this.variant();
+            if (v === 'determinate' || v === 'buffer') {
+                const clamped = Math.min(100, Math.max(0, this.value()));
+                return CIRCUMFERENCE - (CIRCUMFERENCE * clamped) / 100;
+            }
+            return 0;
+        }, ...(ngDevMode ? [{ debugName: "indicatorDashOffset" }] : []));
+        this.bufferDashOffset = computed(() => {
+            if (this.variant() === 'buffer') {
+                const clamped = Math.min(100, Math.max(0, this.value()) + 20);
+                return CIRCUMFERENCE - (CIRCUMFERENCE * clamped) / 100;
+            }
+            return CIRCUMFERENCE;
+        }, ...(ngDevMode ? [{ debugName: "bufferDashOffset" }] : []));
+        effect(() => {
+            if (this.variant() === 'determinate' &&
+                this.value() >= 100) {
+                this.onFinished.emit();
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: LoaderComponent, isStandalone: true, selector: "ls-loader", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onFinished: "onFinished" }, ngImport: i0, template: `
+    <svg
+      [class]="svgClasses()"
+      [attr.width]="svgDiameter()"
+      [attr.height]="svgDiameter()"
+      viewBox="0 0 50 50"
+      role="progressbar"
+      [attr.aria-valuenow]="
+        variant() === 'determinate' ? value() : null
+      "
+      [attr.aria-valuemin]="
+        variant() === 'determinate' ? 0 : null
+      "
+      [attr.aria-valuemax]="
+        variant() === 'determinate' ? 100 : null
+      ">
+      <circle
+        class="loader-track"
+        cx="25"
+        cy="25"
+        r="20"
+        fill="none"
+        stroke-width="5" />
+      @if (variant() === 'buffer') {
+        <circle
+          [class]="bufferClasses()"
+          cx="25"
+          cy="25"
+          r="20"
+          fill="none"
+          stroke-width="5"
+          [attr.stroke-dasharray]="circumference"
+          [attr.stroke-dashoffset]="bufferDashOffset()" />
+      }
+      <circle
+        [class]="indicatorClasses()"
+        cx="25"
+        cy="25"
+        r="20"
+        fill="none"
+        stroke-width="5"
+        [attr.stroke-dasharray]="circumference"
+        [attr.stroke-dashoffset]="indicatorDashOffset()" />
+    </svg>
+  `, isInline: true, styles: [":host{display:contents}.loader-svg{display:inline-block;vertical-align:middle;transform-origin:center}.loader-sm{width:16px;height:16px}.loader-md{width:32px;height:32px}.loader-lg{width:48px;height:48px}.loader-track{stroke:#e0e0e0}.loader-indicator{stroke-linecap:round;transform-origin:center;transform:rotate(-90deg);transition:stroke-dashoffset var(--ls-transition-duration) ease}.loader-determinate{transition:stroke-dashoffset var(--ls-transition-duration) ease}.loader-svg.loader-indeterminate{animation:ls-loader-rotate 1.4s linear infinite}.loader-indicator.loader-indeterminate{animation:ls-loader-dash 1.4s ease-in-out infinite;stroke-linecap:round}.loader-buffer{stroke-linecap:round;transform-origin:center;transform:rotate(-90deg);opacity:.3;transition:stroke-dashoffset var(--ls-transition-duration) ease}@keyframes ls-loader-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes ls-loader-dash{0%{stroke-dasharray:1,125.66;stroke-dashoffset:0}50%{stroke-dasharray:89,125.66;stroke-dashoffset:-35}to{stroke-dasharray:89,125.66;stroke-dashoffset:-124}}.loader-primary{stroke:var(--ls-color-primary)}.loader-secondary{stroke:var(--ls-color-secondary)}.loader-error{stroke:var(--ls-color-danger)}.loader-info{stroke:var(--ls-color-info)}.loader-success{stroke:var(--ls-color-success)}.loader-warning{stroke:var(--ls-color-warning)}.loader-inherit{stroke:currentColor}body.dark .loader-track{stroke:#374151}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: LoaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ls-loader', standalone: true, template: `
+    <svg
+      [class]="svgClasses()"
+      [attr.width]="svgDiameter()"
+      [attr.height]="svgDiameter()"
+      viewBox="0 0 50 50"
+      role="progressbar"
+      [attr.aria-valuenow]="
+        variant() === 'determinate' ? value() : null
+      "
+      [attr.aria-valuemin]="
+        variant() === 'determinate' ? 0 : null
+      "
+      [attr.aria-valuemax]="
+        variant() === 'determinate' ? 100 : null
+      ">
+      <circle
+        class="loader-track"
+        cx="25"
+        cy="25"
+        r="20"
+        fill="none"
+        stroke-width="5" />
+      @if (variant() === 'buffer') {
+        <circle
+          [class]="bufferClasses()"
+          cx="25"
+          cy="25"
+          r="20"
+          fill="none"
+          stroke-width="5"
+          [attr.stroke-dasharray]="circumference"
+          [attr.stroke-dashoffset]="bufferDashOffset()" />
+      }
+      <circle
+        [class]="indicatorClasses()"
+        cx="25"
+        cy="25"
+        r="20"
+        fill="none"
+        stroke-width="5"
+        [attr.stroke-dasharray]="circumference"
+        [attr.stroke-dashoffset]="indicatorDashOffset()" />
+    </svg>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:contents}.loader-svg{display:inline-block;vertical-align:middle;transform-origin:center}.loader-sm{width:16px;height:16px}.loader-md{width:32px;height:32px}.loader-lg{width:48px;height:48px}.loader-track{stroke:#e0e0e0}.loader-indicator{stroke-linecap:round;transform-origin:center;transform:rotate(-90deg);transition:stroke-dashoffset var(--ls-transition-duration) ease}.loader-determinate{transition:stroke-dashoffset var(--ls-transition-duration) ease}.loader-svg.loader-indeterminate{animation:ls-loader-rotate 1.4s linear infinite}.loader-indicator.loader-indeterminate{animation:ls-loader-dash 1.4s ease-in-out infinite;stroke-linecap:round}.loader-buffer{stroke-linecap:round;transform-origin:center;transform:rotate(-90deg);opacity:.3;transition:stroke-dashoffset var(--ls-transition-duration) ease}@keyframes ls-loader-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes ls-loader-dash{0%{stroke-dasharray:1,125.66;stroke-dashoffset:0}50%{stroke-dasharray:89,125.66;stroke-dashoffset:-35}to{stroke-dasharray:89,125.66;stroke-dashoffset:-124}}.loader-primary{stroke:var(--ls-color-primary)}.loader-secondary{stroke:var(--ls-color-secondary)}.loader-error{stroke:var(--ls-color-danger)}.loader-info{stroke:var(--ls-color-info)}.loader-success{stroke:var(--ls-color-success)}.loader-warning{stroke:var(--ls-color-warning)}.loader-inherit{stroke:currentColor}body.dark .loader-track{stroke:#374151}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], onFinished: [{ type: i0.Output, args: ["onFinished"] }] } });
+
+const SEVERITY_ICON_MAP = {
+    success: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>`,
+    error: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>`,
+    warning: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg>`,
+    info: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>`,
+    primary: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>`,
+    secondary: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>`,
+};
+const CLOSE_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="18" height="18"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>`;
+class AlertComponent {
+    constructor() {
+        this._sanitizer = inject(DomSanitizer);
+        this.severity = input('info', ...(ngDevMode ? [{ debugName: "severity" }] : []));
+        this.variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+        this.closable = input(false, ...(ngDevMode ? [{ debugName: "closable" }] : []));
+        this.icon = input(true, ...(ngDevMode ? [{ debugName: "icon" }] : []));
+        this.iconMapping = input(...(ngDevMode ? [undefined, { debugName: "iconMapping" }] : []));
+        this.color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : []));
+        this.alertTitle = input(...(ngDevMode ? [undefined, { debugName: "alertTitle" }] : []));
+        this.message = input(...(ngDevMode ? [undefined, { debugName: "message" }] : []));
+        this.onClose = output();
+        this.alertClasses = computed(() => {
+            const classes = ['alert', `alert-${this.variant()}-${this.severity()}`];
+            if (this.closable()) {
+                classes.push('alert-closable');
+            }
+            return classes.join(' ');
+        }, ...(ngDevMode ? [{ debugName: "alertClasses" }] : []));
+        this.ariaLive = computed(() => {
+            const s = this.severity();
+            return s === 'error' || s === 'warning' ? 'assertive' : 'polite';
+        }, ...(ngDevMode ? [{ debugName: "ariaLive" }] : []));
+        this.sanitizedIcon = computed(() => {
+            const svg = this.iconMapping() || SEVERITY_ICON_MAP[this.severity()];
+            return this._sanitizer.bypassSecurityTrustHtml(svg);
+        }, ...(ngDevMode ? [{ debugName: "sanitizedIcon" }] : []));
+        this.sanitizedCloseIcon = this._sanitizer.bypassSecurityTrustHtml(CLOSE_ICON);
+        this.colorStyle = computed(() => {
+            const c = this.color();
+            if (!c)
+                return '';
+            return `--alert-custom-color: ${c};`;
+        }, ...(ngDevMode ? [{ debugName: "colorStyle" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: AlertComponent, isStandalone: true, selector: "ls-alert", inputs: { severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconMapping: { classPropertyName: "iconMapping", publicName: "iconMapping", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, alertTitle: { classPropertyName: "alertTitle", publicName: "alertTitle", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClose: "onClose" }, ngImport: i0, template: `
+    <div
+      [class]="alertClasses()"
+      [style]="colorStyle()"
+      role="alert"
+      [attr.aria-live]="ariaLive()">
+      @if (icon()) {
+        <span class="alert-icon" [innerHTML]="sanitizedIcon()"></span>
+      }
+      <div class="alert-content">
+        @if (alertTitle()) {
+          <div class="alert-title">{{ alertTitle() }}</div>
+        }
+        @if (message()) {
+          <div class="alert-message">{{ message() }}</div>
+        }
+      </div>
+      @if (closable()) {
+        <button
+          class="alert-close"
+          (click)="onClose.emit()"
+          [innerHTML]="sanitizedCloseIcon"
+          aria-label="Close"></button>
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:contents}.alert{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;border-radius:var(--ls-border-radius-md, 6px);font-family:var(--ls-font-family, \"Nunito\", sans-serif);font-size:14px;line-height:1.5;position:relative;width:100%;box-sizing:border-box}.alert-icon{flex-shrink:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.alert-icon svg{width:100%;height:100%}.alert-content{flex:1;min-width:0}.alert-title{font-weight:600;margin-bottom:4px}.alert-message{padding-top:2px;font-weight:400}.alert-close{flex-shrink:0;background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:inherit;opacity:.7;transition:opacity var(--ls-transition-duration, .3s);display:flex;align-items:center;justify-content:center}.alert-close:hover{opacity:1}.alert-default-success{background-color:var(--ls-color-success-light);border-left:4px solid var(--ls-color-success);color:var(--ls-color-success)}.alert-default-error{background-color:var(--ls-color-danger-light);border-left:4px solid var(--ls-color-danger);color:var(--ls-color-danger)}.alert-default-warning{background-color:var(--ls-color-warning-light);border-left:4px solid var(--ls-color-warning);color:var(--ls-color-warning)}.alert-default-info{background-color:var(--ls-color-info-light);border-left:4px solid var(--ls-color-info);color:var(--ls-color-info)}.alert-default-primary{background-color:var(--ls-color-primary-light);border-left:4px solid var(--ls-color-primary);color:var(--ls-color-primary)}.alert-default-secondary{background-color:var(--ls-color-secondary-light);border-left:4px solid var(--ls-color-secondary);color:var(--ls-color-secondary)}.alert-filled-success{background-color:var(--ls-color-success);color:#fff}.alert-filled-error{background-color:var(--ls-color-danger);color:#fff}.alert-filled-warning{background-color:var(--ls-color-warning);color:#fff}.alert-filled-info{background-color:var(--ls-color-info);color:#fff}.alert-filled-primary{background-color:var(--ls-color-primary);color:#fff}.alert-filled-secondary{background-color:var(--ls-color-secondary);color:#fff}.alert-outlined-success{background-color:transparent;border:1px solid var(--ls-color-success);color:var(--ls-color-success)}.alert-outlined-error{background-color:transparent;border:1px solid var(--ls-color-danger);color:var(--ls-color-danger)}.alert-outlined-warning{background-color:transparent;border:1px solid var(--ls-color-warning);color:var(--ls-color-warning)}.alert-outlined-info{background-color:transparent;border:1px solid var(--ls-color-info);color:var(--ls-color-info)}.alert-outlined-primary{background-color:transparent;border:1px solid var(--ls-color-primary);color:var(--ls-color-primary)}.alert-outlined-secondary{background-color:transparent;border:1px solid var(--ls-color-secondary);color:var(--ls-color-secondary)}.alert[style*=--alert-custom-color]{border-color:var(--alert-custom-color)}.alert-default-success[style*=--alert-custom-color],.alert-default-error[style*=--alert-custom-color],.alert-default-warning[style*=--alert-custom-color],.alert-default-info[style*=--alert-custom-color],.alert-default-primary[style*=--alert-custom-color],.alert-default-secondary[style*=--alert-custom-color]{border-left-color:var(--alert-custom-color);color:var(--alert-custom-color)}.alert-filled-success[style*=--alert-custom-color],.alert-filled-error[style*=--alert-custom-color],.alert-filled-warning[style*=--alert-custom-color],.alert-filled-info[style*=--alert-custom-color],.alert-filled-primary[style*=--alert-custom-color],.alert-filled-secondary[style*=--alert-custom-color]{background-color:var(--alert-custom-color)}.alert-outlined-success[style*=--alert-custom-color],.alert-outlined-error[style*=--alert-custom-color],.alert-outlined-warning[style*=--alert-custom-color],.alert-outlined-info[style*=--alert-custom-color],.alert-outlined-primary[style*=--alert-custom-color],.alert-outlined-secondary[style*=--alert-custom-color]{border-color:var(--alert-custom-color);color:var(--alert-custom-color)}body.dark .alert-default-success{background-color:var(--ls-color-success-dark-light);border-left-color:var(--ls-color-success);color:var(--ls-color-success)}body.dark .alert-default-error{background-color:var(--ls-color-danger-dark-light);border-left-color:var(--ls-color-danger);color:var(--ls-color-danger)}body.dark .alert-default-warning{background-color:var(--ls-color-warning-dark-light);border-left-color:var(--ls-color-warning);color:var(--ls-color-warning)}body.dark .alert-default-info{background-color:var(--ls-color-info-dark-light);border-left-color:var(--ls-color-info);color:var(--ls-color-info)}body.dark .alert-default-primary{background-color:var(--ls-color-primary-dark-light);border-left-color:var(--ls-color-primary);color:var(--ls-color-primary)}body.dark .alert-default-secondary{background-color:var(--ls-color-secondary-dark-light);border-left-color:var(--ls-color-secondary);color:var(--ls-color-secondary)}body.dark .alert-outlined-success{border-color:var(--ls-color-success);color:var(--ls-color-success)}body.dark .alert-outlined-error{border-color:var(--ls-color-danger);color:var(--ls-color-danger)}body.dark .alert-outlined-warning{border-color:var(--ls-color-warning);color:var(--ls-color-warning)}body.dark .alert-outlined-info{border-color:var(--ls-color-info);color:var(--ls-color-info)}body.dark .alert-outlined-primary{border-color:var(--ls-color-primary);color:var(--ls-color-primary)}body.dark .alert-outlined-secondary{border-color:var(--ls-color-secondary);color:var(--ls-color-secondary)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AlertComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ls-alert', standalone: true, template: `
+    <div
+      [class]="alertClasses()"
+      [style]="colorStyle()"
+      role="alert"
+      [attr.aria-live]="ariaLive()">
+      @if (icon()) {
+        <span class="alert-icon" [innerHTML]="sanitizedIcon()"></span>
+      }
+      <div class="alert-content">
+        @if (alertTitle()) {
+          <div class="alert-title">{{ alertTitle() }}</div>
+        }
+        @if (message()) {
+          <div class="alert-message">{{ message() }}</div>
+        }
+      </div>
+      @if (closable()) {
+        <button
+          class="alert-close"
+          (click)="onClose.emit()"
+          [innerHTML]="sanitizedCloseIcon"
+          aria-label="Close"></button>
+      }
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:contents}.alert{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;border-radius:var(--ls-border-radius-md, 6px);font-family:var(--ls-font-family, \"Nunito\", sans-serif);font-size:14px;line-height:1.5;position:relative;width:100%;box-sizing:border-box}.alert-icon{flex-shrink:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.alert-icon svg{width:100%;height:100%}.alert-content{flex:1;min-width:0}.alert-title{font-weight:600;margin-bottom:4px}.alert-message{padding-top:2px;font-weight:400}.alert-close{flex-shrink:0;background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:inherit;opacity:.7;transition:opacity var(--ls-transition-duration, .3s);display:flex;align-items:center;justify-content:center}.alert-close:hover{opacity:1}.alert-default-success{background-color:var(--ls-color-success-light);border-left:4px solid var(--ls-color-success);color:var(--ls-color-success)}.alert-default-error{background-color:var(--ls-color-danger-light);border-left:4px solid var(--ls-color-danger);color:var(--ls-color-danger)}.alert-default-warning{background-color:var(--ls-color-warning-light);border-left:4px solid var(--ls-color-warning);color:var(--ls-color-warning)}.alert-default-info{background-color:var(--ls-color-info-light);border-left:4px solid var(--ls-color-info);color:var(--ls-color-info)}.alert-default-primary{background-color:var(--ls-color-primary-light);border-left:4px solid var(--ls-color-primary);color:var(--ls-color-primary)}.alert-default-secondary{background-color:var(--ls-color-secondary-light);border-left:4px solid var(--ls-color-secondary);color:var(--ls-color-secondary)}.alert-filled-success{background-color:var(--ls-color-success);color:#fff}.alert-filled-error{background-color:var(--ls-color-danger);color:#fff}.alert-filled-warning{background-color:var(--ls-color-warning);color:#fff}.alert-filled-info{background-color:var(--ls-color-info);color:#fff}.alert-filled-primary{background-color:var(--ls-color-primary);color:#fff}.alert-filled-secondary{background-color:var(--ls-color-secondary);color:#fff}.alert-outlined-success{background-color:transparent;border:1px solid var(--ls-color-success);color:var(--ls-color-success)}.alert-outlined-error{background-color:transparent;border:1px solid var(--ls-color-danger);color:var(--ls-color-danger)}.alert-outlined-warning{background-color:transparent;border:1px solid var(--ls-color-warning);color:var(--ls-color-warning)}.alert-outlined-info{background-color:transparent;border:1px solid var(--ls-color-info);color:var(--ls-color-info)}.alert-outlined-primary{background-color:transparent;border:1px solid var(--ls-color-primary);color:var(--ls-color-primary)}.alert-outlined-secondary{background-color:transparent;border:1px solid var(--ls-color-secondary);color:var(--ls-color-secondary)}.alert[style*=--alert-custom-color]{border-color:var(--alert-custom-color)}.alert-default-success[style*=--alert-custom-color],.alert-default-error[style*=--alert-custom-color],.alert-default-warning[style*=--alert-custom-color],.alert-default-info[style*=--alert-custom-color],.alert-default-primary[style*=--alert-custom-color],.alert-default-secondary[style*=--alert-custom-color]{border-left-color:var(--alert-custom-color);color:var(--alert-custom-color)}.alert-filled-success[style*=--alert-custom-color],.alert-filled-error[style*=--alert-custom-color],.alert-filled-warning[style*=--alert-custom-color],.alert-filled-info[style*=--alert-custom-color],.alert-filled-primary[style*=--alert-custom-color],.alert-filled-secondary[style*=--alert-custom-color]{background-color:var(--alert-custom-color)}.alert-outlined-success[style*=--alert-custom-color],.alert-outlined-error[style*=--alert-custom-color],.alert-outlined-warning[style*=--alert-custom-color],.alert-outlined-info[style*=--alert-custom-color],.alert-outlined-primary[style*=--alert-custom-color],.alert-outlined-secondary[style*=--alert-custom-color]{border-color:var(--alert-custom-color);color:var(--alert-custom-color)}body.dark .alert-default-success{background-color:var(--ls-color-success-dark-light);border-left-color:var(--ls-color-success);color:var(--ls-color-success)}body.dark .alert-default-error{background-color:var(--ls-color-danger-dark-light);border-left-color:var(--ls-color-danger);color:var(--ls-color-danger)}body.dark .alert-default-warning{background-color:var(--ls-color-warning-dark-light);border-left-color:var(--ls-color-warning);color:var(--ls-color-warning)}body.dark .alert-default-info{background-color:var(--ls-color-info-dark-light);border-left-color:var(--ls-color-info);color:var(--ls-color-info)}body.dark .alert-default-primary{background-color:var(--ls-color-primary-dark-light);border-left-color:var(--ls-color-primary);color:var(--ls-color-primary)}body.dark .alert-default-secondary{background-color:var(--ls-color-secondary-dark-light);border-left-color:var(--ls-color-secondary);color:var(--ls-color-secondary)}body.dark .alert-outlined-success{border-color:var(--ls-color-success);color:var(--ls-color-success)}body.dark .alert-outlined-error{border-color:var(--ls-color-danger);color:var(--ls-color-danger)}body.dark .alert-outlined-warning{border-color:var(--ls-color-warning);color:var(--ls-color-warning)}body.dark .alert-outlined-info{border-color:var(--ls-color-info);color:var(--ls-color-info)}body.dark .alert-outlined-primary{border-color:var(--ls-color-primary);color:var(--ls-color-primary)}body.dark .alert-outlined-secondary{border-color:var(--ls-color-secondary);color:var(--ls-color-secondary)}\n"] }]
+        }], propDecorators: { severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconMapping: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconMapping", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], alertTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "alertTitle", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], onClose: [{ type: i0.Output, args: ["onClose"] }] } });
+
+class ModalActionsComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ModalActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: ModalActionsComponent, isStandalone: true, selector: "ls-modal-actions", host: { classAttribute: "modal-actions" }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ModalActionsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'modal-actions' },
+                    imports: [],
+                    selector: 'ls-modal-actions',
+                    standalone: true,
+                    template: `<ng-content />`,
+                }]
+        }] });
+
+let _titleIdCounter = 0;
+class ModalTitleComponent {
+    constructor() {
+        this.id = `ls-modal-title-${++_titleIdCounter}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ModalTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: ModalTitleComponent, isStandalone: true, selector: "ls-modal-title", host: { properties: { "id": "id" }, classAttribute: "modal-title" }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ModalTitleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'modal-title', '[id]': 'id' },
+                    imports: [],
+                    selector: 'ls-modal-title',
+                    standalone: true,
+                    template: `<ng-content />`,
+                }]
+        }] });
+
+class ModalStackService {
+    constructor() {
+        this._stack = signal([], ...(ngDevMode ? [{ debugName: "_stack" }] : []));
+    }
+    push(id) {
+        this._stack.update(stack => [...stack, id]);
+    }
+    pop(id) {
+        this._stack.update(stack => stack.filter(s => s !== id));
+    }
+    isTop(id) {
+        const stack = this._stack();
+        return stack.length > 0 && stack[stack.length - 1] === id;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ModalStackService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ModalStackService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ModalStackService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+let _modalIdCounter = 0;
+class ModalComponent {
+    constructor() {
+        this.open = input(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+        this.disableBackdropClose = input(false, ...(ngDevMode ? [{ debugName: "disableBackdropClose" }] : []));
+        this.fullScreen = input(false, ...(ngDevMode ? [{ debugName: "fullScreen" }] : []));
+        this.fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
+        this.maxWidth = input('md', ...(ngDevMode ? [{ debugName: "maxWidth" }] : []));
+        this.scroll = input('dialog', ...(ngDevMode ? [{ debugName: "scroll" }] : []));
+        this.showCloseButton = input(true, ...(ngDevMode ? [{ debugName: "showCloseButton" }] : []));
+        this.closed = output();
+        this._modalStackService = inject(ModalStackService);
+        this._titleComponent = contentChild(ModalTitleComponent, ...(ngDevMode ? [{ debugName: "_titleComponent" }] : []));
+        this._panel = viewChild('panel', ...(ngDevMode ? [{ debugName: "_panel" }] : []));
+        this._id = `ls-modal-${++_modalIdCounter}`;
+        this._previouslyFocused = null;
+        this.labelledById = computed(() => {
+            const title = this._titleComponent();
+            return title ? title.id : null;
+        }, ...(ngDevMode ? [{ debugName: "labelledById" }] : []));
+        this.overlayClasses = computed(() => {
+            const classes = ['modal-overlay'];
+            if (this.scroll() === 'body')
+                classes.push('modal-overlay-body');
+            return classes.join(' ');
+        }, ...(ngDevMode ? [{ debugName: "overlayClasses" }] : []));
+        this.panelClasses = computed(() => {
+            const classes = [
+                'modal-panel',
+                `modal-max-${this.maxWidth()}`,
+                `modal-scroll-${this.scroll()}`,
+            ];
+            if (this.fullScreen())
+                classes.push('modal-full-screen');
+            if (this.fullWidth())
+                classes.push('modal-full-width');
+            if (this.showCloseButton())
+                classes.push('modal-has-close-btn');
+            return classes.join(' ');
+        }, ...(ngDevMode ? [{ debugName: "panelClasses" }] : []));
+        effect(() => {
+            if (this.open()) {
+                this._previouslyFocused = document.activeElement;
+                this._modalStackService.push(this._id);
+                setTimeout(() => {
+                    untracked(() => this._panel()?.nativeElement.focus());
+                }, 0);
+            }
+            else {
+                this._modalStackService.pop(this._id);
+                this._previouslyFocused?.focus?.();
+                this._previouslyFocused = null;
+            }
+        });
+    }
+    ngOnDestroy() {
+        if (this.open()) {
+            this._modalStackService.pop(this._id);
+        }
+    }
+    onEscape() {
+        if (this.open() && this._modalStackService.isTop(this._id)) {
+            this.closed.emit();
+        }
+    }
+    onBackdropClick() {
+        if (!this.disableBackdropClose()) {
+            this.closed.emit();
+        }
+    }
+    onCloseButtonClick() {
+        this.closed.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ModalComponent, isStandalone: true, selector: "ls-modal", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, disableBackdropClose: { classPropertyName: "disableBackdropClose", publicName: "disableBackdropClose", isSignal: true, isRequired: false, transformFunction: null }, fullScreen: { classPropertyName: "fullScreen", publicName: "fullScreen", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, scroll: { classPropertyName: "scroll", publicName: "scroll", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, queries: [{ propertyName: "_titleComponent", first: true, predicate: ModalTitleComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (open()) {
+      <div [class]="overlayClasses()" (click)="onBackdropClick()">
+        <div
+          #panel
+          [attr.aria-labelledby]="labelledById()"
+          [attr.aria-modal]="true"
+          [class]="panelClasses()"
+          role="dialog"
+          tabindex="-1"
+          (click)="$event.stopPropagation()">
+          @if (showCloseButton()) {
+            <button
+              aria-label="Close"
+              class="modal-close-btn"
+              type="button"
+              (click)="onCloseButtonClick()">
+              <ls-icon name="x" />
+            </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 }); }
+}
+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: `
+    @if (open()) {
+      <div [class]="overlayClasses()" (click)="onBackdropClick()">
+        <div
+          #panel
+          [attr.aria-labelledby]="labelledById()"
+          [attr.aria-modal]="true"
+          [class]="panelClasses()"
+          role="dialog"
+          tabindex="-1"
+          (click)="$event.stopPropagation()">
+          @if (showCloseButton()) {
+            <button
+              aria-label="Close"
+              class="modal-close-btn"
+              type="button"
+              (click)="onCloseButtonClick()">
+              <ls-icon name="x" />
+            </button>
+          }
+          <ng-content />
+        </div>
+      </div>
+    }
+  `, 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"] }]
+        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], disableBackdropClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableBackdropClose", required: false }] }], fullScreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullScreen", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], scroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "scroll", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], _titleComponent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ModalTitleComponent), { isSignal: true }] }], _panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], onEscape: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
+            }] } });
+
+class ModalContentComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ModalContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: ModalContentComponent, isStandalone: true, selector: "ls-modal-content", host: { classAttribute: "modal-content" }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ModalContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'modal-content' },
+                    imports: [],
+                    selector: 'ls-modal-content',
+                    standalone: true,
+                    template: `<ng-content />`,
+                }]
+        }] });
+
+class PopoverComponent {
+    constructor() {
+        this._renderer = inject(Renderer2);
+        this._destroyRef = inject(DestroyRef);
+        this._document = inject(DOCUMENT);
+        this._elementRef = inject(ElementRef);
+        this._cleanupScroll = null;
+        this.placement = input('bottom', ...(ngDevMode ? [{ debugName: "placement" }] : []));
+        this.showArrow = input(true, ...(ngDevMode ? [{ debugName: "showArrow" }] : []));
+        this.offset = input(8, ...(ngDevMode ? [{ debugName: "offset" }] : []));
+        this.autoFlip = input(true, ...(ngDevMode ? [{ debugName: "autoFlip" }] : []));
+        this.trigger = input(undefined, ...(ngDevMode ? [{ debugName: "trigger" }] : []));
+        this.isOpen = model(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+        this.onOpened = output();
+        this.onHidden = output();
+        this._panelRef = viewChild('panelRef', ...(ngDevMode ? [{ debugName: "_panelRef" }] : []));
+        this._currentPlacement = signal('bottom', ...(ngDevMode ? [{ debugName: "_currentPlacement" }] : []));
+        this._isAnimating = signal(false, ...(ngDevMode ? [{ debugName: "_isAnimating" }] : []));
+        this._cleanupClickOutside = null;
+        this._cleanupEscape = null;
+        this._hoverBridgeTimeout = null;
+        this._wasOpen = false;
+        this._panelClasses = computed(() => ['popover-panel', `popover-${this._currentPlacement()}`].join(' '), ...(ngDevMode ? [{ debugName: "_panelClasses" }] : []));
+        this._arrowClasses = computed(() => `popover-arrow popover-arrow-${this._currentPlacement()}`, ...(ngDevMode ? [{ debugName: "_arrowClasses" }] : []));
+        effect(() => {
+            const isOpen = this.isOpen();
+            untracked(() => {
+                if (isOpen) {
+                    this._currentPlacement.set(this.placement());
+                    this._isAnimating.set(true);
+                    this._setupListeners();
+                    setTimeout(() => {
+                        if (this.isOpen()) {
+                            this._computePosition();
+                        }
+                    }, 0);
+                    this._wasOpen = true;
+                }
+                else if (this._wasOpen) {
+                    this._isAnimating.set(true);
+                    this._wasOpen = false;
+                }
+                else {
+                    this._removeListeners();
+                }
+            });
+        });
+        this._destroyRef.onDestroy(() => {
+            this._removeListeners();
+            if (this._hoverBridgeTimeout) {
+                clearTimeout(this._hoverBridgeTimeout);
+            }
+        });
+    }
+    open() {
+        this.isOpen.set(true);
+    }
+    close() {
+        this.isOpen.set(false);
+    }
+    toggle() {
+        if (this.isOpen()) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    _onAnimationEnd() {
+        this._isAnimating.set(false);
+        if (this.isOpen()) {
+            this.onOpened.emit();
+        }
+        else {
+            this._removeListeners();
+            this.onHidden.emit();
+        }
+    }
+    _onPanelMouseEnter() {
+        if (this._hoverBridgeTimeout) {
+            clearTimeout(this._hoverBridgeTimeout);
+            this._hoverBridgeTimeout = null;
+        }
+    }
+    _onPanelMouseLeave() {
+        this._hoverBridgeTimeout = setTimeout(() => this.close(), 100);
+    }
+    _computePosition() {
+        const anchor = this.trigger() ??
+            this._elementRef.nativeElement.parentElement;
+        const panel = this._panelRef()?.nativeElement;
+        if (!anchor || !panel)
+            return;
+        const anchorRect = anchor.getBoundingClientRect();
+        const panelRect = panel.getBoundingClientRect();
+        const offset = this.offset();
+        let placement = this._currentPlacement();
+        if (this.autoFlip()) {
+            placement = this._getFlippedPlacement(placement, anchorRect, panelRect, offset);
+            this._currentPlacement.set(placement);
+        }
+        let top = 0;
+        let left = 0;
+        switch (placement) {
+            case 'top':
+                top = anchorRect.top - panelRect.height - offset;
+                left =
+                    anchorRect.left +
+                        (anchorRect.width - panelRect.width) / 2;
+                break;
+            case 'bottom':
+                top = anchorRect.bottom + offset;
+                left =
+                    anchorRect.left +
+                        (anchorRect.width - panelRect.width) / 2;
+                break;
+            case 'left':
+                top =
+                    anchorRect.top +
+                        (anchorRect.height - panelRect.height) / 2;
+                left = anchorRect.left - panelRect.width - offset;
+                break;
+            case 'right':
+                top =
+                    anchorRect.top +
+                        (anchorRect.height - panelRect.height) / 2;
+                left = anchorRect.right + offset;
+                break;
+        }
+        panel.style.setProperty('--popover-top', `${top}px`);
+        panel.style.setProperty('--popover-left', `${left}px`);
+    }
+    _getFlippedPlacement(placement, anchorRect, panelRect, offset) {
+        const viewportWidth = this._document.defaultView?.innerWidth ?? 0;
+        const viewportHeight = this._document.defaultView?.innerHeight ?? 0;
+        const opposites = {
+            top: 'bottom',
+            bottom: 'top',
+            left: 'right',
+            right: 'left',
+        };
+        switch (placement) {
+            case 'top':
+                if (anchorRect.top - panelRect.height - offset < 0) {
+                    return opposites[placement];
+                }
+                break;
+            case 'bottom':
+                if (anchorRect.bottom + panelRect.height + offset >
+                    viewportHeight) {
+                    return opposites[placement];
+                }
+                break;
+            case 'left':
+                if (anchorRect.left - panelRect.width - offset < 0) {
+                    return opposites[placement];
+                }
+                break;
+            case 'right':
+                if (anchorRect.right + panelRect.width + offset >
+                    viewportWidth) {
+                    return opposites[placement];
+                }
+                break;
+        }
+        return placement;
+    }
+    _setupListeners() {
+        this._removeListeners();
+        this._cleanupClickOutside = this._renderer.listen(this._document, 'click', (event) => {
+            const anchor = this.trigger() ??
+                this._elementRef.nativeElement.parentElement;
+            const panel = this._panelRef()?.nativeElement;
+            const target = event.target;
+            if (panel &&
+                !panel.contains(target) &&
+                anchor &&
+                !anchor.contains(target)) {
+                this.close();
+            }
+        });
+        this._cleanupEscape = this._renderer.listen(this._document, 'keydown', (event) => {
+            if (event.key === 'Escape') {
+                this.close();
+            }
+        });
+        this._cleanupScroll = this._renderer.listen('window', 'scroll', () => {
+            if (this.isOpen()) {
+                this.close();
+            }
+        }, { capture: true });
+    }
+    _removeListeners() {
+        if (this._cleanupClickOutside) {
+            this._cleanupClickOutside();
+            this._cleanupClickOutside = null;
+        }
+        if (this._cleanupEscape) {
+            this._cleanupEscape();
+            this._cleanupEscape = null;
+        }
+        if (this._cleanupScroll) {
+            this._cleanupScroll();
+            this._cleanupScroll = null;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: PopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: PopoverComponent, isStandalone: true, selector: "ls-popover", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, showArrow: { classPropertyName: "showArrow", publicName: "showArrow", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, autoFlip: { classPropertyName: "autoFlip", publicName: "autoFlip", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", onOpened: "onOpened", onHidden: "onHidden" }, viewQueries: [{ propertyName: "_panelRef", first: true, predicate: ["panelRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (isOpen() || _isAnimating()) {
+      <div
+        [class]="_panelClasses()"
+        [class.popover-enter]="isOpen() && _isAnimating()"
+        [class.popover-exit]="!isOpen() && _isAnimating()"
+        (animationend)="_onAnimationEnd()"
+        (mouseenter)="_onPanelMouseEnter()"
+        (mouseleave)="_onPanelMouseLeave()"
+        role="dialog"
+        aria-modal="false"
+        #panelRef>
+        @if (showArrow()) {
+          <span [class]="_arrowClasses()"></span>
+        }
+        <ng-content />
+      </div>
+    }
+  `, isInline: true, styles: [":host{display:contents}.popover-panel{position:fixed;top:var(--popover-top, 0);left:var(--popover-left, 0);z-index:1050;background:var(--ls-color-white, #fff);border:1px solid var(--ls-color-border, #e0e6ed);border-radius:8px;box-shadow:0 4px 16px #0000001f;padding:12px 16px;animation-duration:.15s;animation-fill-mode:both;animation-timing-function:ease-out}.popover-enter{animation-name:popoverFadeIn}.popover-exit{animation-name:popoverFadeOut}@keyframes popoverFadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes popoverFadeOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(4px)}}.popover-arrow{position:absolute;width:10px;height:10px;background:inherit;border:inherit;transform:rotate(45deg);z-index:-1}.popover-arrow-top{bottom:-6px;left:50%;margin-left:-5px;border-top:0;border-left:0}.popover-arrow-bottom{top:-6px;left:50%;margin-left:-5px;border-bottom:0;border-right:0}.popover-arrow-left{right:-6px;top:50%;margin-top:-5px;border-bottom:0;border-left:0}.popover-arrow-right{left:-6px;top:50%;margin-top:-5px;border-top:0;border-right:0}:host-context(body.dark) .popover-panel{background:#1b2e4b!important;border-color:#253b5c!important;color:#e0e6ed!important;box-shadow:0 4px 16px #00000080!important}:host-context(.dark) .popover-panel{background:#1b2e4b!important;border-color:#253b5c!important;color:#e0e6ed!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: PopoverComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ls-popover', standalone: true, template: `
+    @if (isOpen() || _isAnimating()) {
+      <div
+        [class]="_panelClasses()"
+        [class.popover-enter]="isOpen() && _isAnimating()"
+        [class.popover-exit]="!isOpen() && _isAnimating()"
+        (animationend)="_onAnimationEnd()"
+        (mouseenter)="_onPanelMouseEnter()"
+        (mouseleave)="_onPanelMouseLeave()"
+        role="dialog"
+        aria-modal="false"
+        #panelRef>
+        @if (showArrow()) {
+          <span [class]="_arrowClasses()"></span>
+        }
+        <ng-content />
+      </div>
+    }
+  `, styles: [":host{display:contents}.popover-panel{position:fixed;top:var(--popover-top, 0);left:var(--popover-left, 0);z-index:1050;background:var(--ls-color-white, #fff);border:1px solid var(--ls-color-border, #e0e6ed);border-radius:8px;box-shadow:0 4px 16px #0000001f;padding:12px 16px;animation-duration:.15s;animation-fill-mode:both;animation-timing-function:ease-out}.popover-enter{animation-name:popoverFadeIn}.popover-exit{animation-name:popoverFadeOut}@keyframes popoverFadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes popoverFadeOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(4px)}}.popover-arrow{position:absolute;width:10px;height:10px;background:inherit;border:inherit;transform:rotate(45deg);z-index:-1}.popover-arrow-top{bottom:-6px;left:50%;margin-left:-5px;border-top:0;border-left:0}.popover-arrow-bottom{top:-6px;left:50%;margin-left:-5px;border-bottom:0;border-right:0}.popover-arrow-left{right:-6px;top:50%;margin-top:-5px;border-bottom:0;border-left:0}.popover-arrow-right{left:-6px;top:50%;margin-top:-5px;border-top:0;border-right:0}:host-context(body.dark) .popover-panel{background:#1b2e4b!important;border-color:#253b5c!important;color:#e0e6ed!important;box-shadow:0 4px 16px #00000080!important}:host-context(.dark) .popover-panel{background:#1b2e4b!important;border-color:#253b5c!important;color:#e0e6ed!important}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], showArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "showArrow", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], autoFlip: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoFlip", required: false }] }], trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], onOpened: [{ type: i0.Output, args: ["onOpened"] }], onHidden: [{ type: i0.Output, args: ["onHidden"] }], _panelRef: [{ type: i0.ViewChild, args: ['panelRef', { isSignal: true }] }] } });
+
+class PaginationComponent {
+    constructor() {
+        this.count = input(1, ...(ngDevMode ? [{ debugName: "count" }] : []));
+        this.page = input(undefined, ...(ngDevMode ? [{ debugName: "page" }] : []));
+        this.defaultPage = input(1, ...(ngDevMode ? [{ debugName: "defaultPage" }] : []));
+        this.color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
+        this.variant = input('outlined', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+        this.shape = input('rounded', ...(ngDevMode ? [{ debugName: "shape" }] : []));
+        this.size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : []));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        this.showFirstButton = input(false, ...(ngDevMode ? [{ debugName: "showFirstButton" }] : []));
+        this.showLastButton = input(false, ...(ngDevMode ? [{ debugName: "showLastButton" }] : []));
+        this.hidePrevButton = input(false, ...(ngDevMode ? [{ debugName: "hidePrevButton" }] : []));
+        this.hideNextButton = input(false, ...(ngDevMode ? [{ debugName: "hideNextButton" }] : []));
+        this.pageChange = output();
+        this._internalPage = signal(1, ...(ngDevMode ? [{ debugName: "_internalPage" }] : []));
+        this.activePage = computed(() => this.page() ?? this._internalPage(), ...(ngDevMode ? [{ debugName: "activePage" }] : []));
+        this.pages = computed(() => {
+            const total = this.count();
+            const current = this.activePage();
+            if (total <= 5) {
+                return Array.from({ length: total }, (_, i) => i + 1);
+            }
+            const start = Math.max(1, Math.min(current - 2, total - 4));
+            return Array.from({ length: 5 }, (_, i) => start + i);
+        }, ...(ngDevMode ? [{ debugName: "pages" }] : []));
+        this.isFirstPage = computed(() => this.activePage() === 1, ...(ngDevMode ? [{ debugName: "isFirstPage" }] : []));
+        this.isLastPage = computed(() => this.activePage() === this.count(), ...(ngDevMode ? [{ debugName: "isLastPage" }] : []));
+        this._baseClasses = computed(() => {
+            const size = this.size();
+            const sizeClass = size === 'small'
+                ? 'pg-item-sm'
+                : size === 'large'
+                    ? 'pg-item-lg'
+                    : 'pg-item-md';
+            const shapeClass = this.shape() === 'circular' ? 'pg-item-circular' : 'pg-item-rounded';
+            return [
+                'pg-item',
+                `pg-item-${this.variant()}-${this.color()}`,
+                sizeClass,
+                shapeClass,
+            ].join(' ');
+        }, ...(ngDevMode ? [{ debugName: "_baseClasses" }] : []));
+    }
+    ngOnInit() {
+        this._internalPage.set(this.defaultPage());
+    }
+    pageItemClasses(n) {
+        const base = this._baseClasses();
+        return n === this.activePage() ? `${base} pg-item-active` : base;
+    }
+    navClasses(isAtBoundary) {
+        const classes = `${this._baseClasses()} pg-nav-btn`;
+        return isAtBoundary || this.disabled()
+            ? `${classes} pg-item-disabled`
+            : classes;
+    }
+    goToPage(n) {
+        if (this.disabled() || n < 1 || n > this.count())
+            return;
+        if (this.page() === undefined) {
+            this._internalPage.set(n);
+        }
+        this.pageChange.emit(n);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: PaginationComponent, isStandalone: true, selector: "ls-pagination", inputs: { count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, defaultPage: { classPropertyName: "defaultPage", publicName: "defaultPage", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showFirstButton: { classPropertyName: "showFirstButton", publicName: "showFirstButton", isSignal: true, isRequired: false, transformFunction: null }, showLastButton: { classPropertyName: "showLastButton", publicName: "showLastButton", isSignal: true, isRequired: false, transformFunction: null }, hidePrevButton: { classPropertyName: "hidePrevButton", publicName: "hidePrevButton", isSignal: true, isRequired: false, transformFunction: null }, hideNextButton: { classPropertyName: "hideNextButton", publicName: "hideNextButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: `
+    <nav aria-label="pagination">
+      <ul class="pg-list">
+        @if (showFirstButton()) {
+          <li>
+            <button
+              type="button"
+              aria-label="first"
+              [class]="navClasses(isFirstPage())"
+              [disabled]="isFirstPage() || disabled()"
+              [attr.aria-disabled]="
+                isFirstPage() || disabled() ? 'true' : null
+              "
+              (click)="goToPage(1)">
+              <ls-icon class="pg-icon-left" name="carets-down" />
+            </button>
+          </li>
+        }
+        @if (!hidePrevButton()) {
+          <li>
+            <button
+              type="button"
+              aria-label="prev"
+              [class]="navClasses(isFirstPage())"
+              [disabled]="isFirstPage() || disabled()"
+              [attr.aria-disabled]="
+                isFirstPage() || disabled() ? 'true' : null
+              "
+              (click)="goToPage(activePage() - 1)">
+              <ls-icon class="pg-icon-left" name="caret-down" />
+            </button>
+          </li>
+        }
+        @for (n of pages(); track $index) {
+          <li>
+            <button
+              type="button"
+              [class]="pageItemClasses(n)"
+              [attr.aria-current]="n === activePage() ? 'page' : null"
+              [disabled]="disabled()"
+              [attr.aria-disabled]="disabled() ? 'true' : null"
+              (click)="goToPage(n)">
+              {{ n }}
+            </button>
+          </li>
+        }
+        @if (!hideNextButton()) {
+          <li>
+            <button
+              type="button"
+              aria-label="next"
+              [class]="navClasses(isLastPage())"
+              [disabled]="isLastPage() || disabled()"
+              [attr.aria-disabled]="
+                isLastPage() || disabled() ? 'true' : null
+              "
+              (click)="goToPage(activePage() + 1)">
+              <ls-icon class="pg-icon-right" name="caret-down" />
+            </button>
+          </li>
+        }
+        @if (showLastButton()) {
+          <li>
+            <button
+              type="button"
+              aria-label="last"
+              [class]="navClasses(isLastPage())"
+              [disabled]="isLastPage() || disabled()"
+              [attr.aria-disabled]="
+                isLastPage() || disabled() ? 'true' : null
+              "
+              (click)="goToPage(count())">
+              <ls-icon class="pg-icon-right" name="carets-down" />
+            </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 }); }
+}
+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: `
+    <nav aria-label="pagination">
+      <ul class="pg-list">
+        @if (showFirstButton()) {
+          <li>
+            <button
+              type="button"
+              aria-label="first"
+              [class]="navClasses(isFirstPage())"
+              [disabled]="isFirstPage() || disabled()"
+              [attr.aria-disabled]="
+                isFirstPage() || disabled() ? 'true' : null
+              "
+              (click)="goToPage(1)">
+              <ls-icon class="pg-icon-left" name="carets-down" />
+            </button>
+          </li>
+        }
+        @if (!hidePrevButton()) {
+          <li>
+            <button
+              type="button"
+              aria-label="prev"
+              [class]="navClasses(isFirstPage())"
+              [disabled]="isFirstPage() || disabled()"
+              [attr.aria-disabled]="
+                isFirstPage() || disabled() ? 'true' : null
+              "
+              (click)="goToPage(activePage() - 1)">
+              <ls-icon class="pg-icon-left" name="caret-down" />
+            </button>
+          </li>
+        }
+        @for (n of pages(); track $index) {
+          <li>
+            <button
+              type="button"
+              [class]="pageItemClasses(n)"
+              [attr.aria-current]="n === activePage() ? 'page' : null"
+              [disabled]="disabled()"
+              [attr.aria-disabled]="disabled() ? 'true' : null"
+              (click)="goToPage(n)">
+              {{ n }}
+            </button>
+          </li>
+        }
+        @if (!hideNextButton()) {
+          <li>
+            <button
+              type="button"
+              aria-label="next"
+              [class]="navClasses(isLastPage())"
+              [disabled]="isLastPage() || disabled()"
+              [attr.aria-disabled]="
+                isLastPage() || disabled() ? 'true' : null
+              "
+              (click)="goToPage(activePage() + 1)">
+              <ls-icon class="pg-icon-right" name="caret-down" />
+            </button>
+          </li>
+        }
+        @if (showLastButton()) {
+          <li>
+            <button
+              type="button"
+              aria-label="last"
+              [class]="navClasses(isLastPage())"
+              [disabled]="isLastPage() || disabled()"
+              [attr.aria-disabled]="
+                isLastPage() || disabled() ? 'true' : null
+              "
+              (click)="goToPage(count())">
+              <ls-icon class="pg-icon-right" name="carets-down" />
+            </button>
+          </li>
+        }
+      </ul>
+    </nav>
+  `, 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"] }]
+        }], propDecorators: { count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }], defaultPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultPage", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showFirstButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFirstButton", required: false }] }], showLastButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLastButton", required: false }] }], hidePrevButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePrevButton", required: false }] }], hideNextButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideNextButton", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }] } });
+
+// @lumston/ds-angular — public API surface
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AlertComponent, AvatarComponent, AvatarGroupComponent, BadgeComponent, ButtonComponent, CheckboxComponent, ChipComponent, DropdownComponent, ICON_REGISTRY, IconButtonComponent, IconComponent, LinkComponent, LoaderComponent, LogoComponent, LsDropdownContentDirective, ModalActionsComponent, ModalComponent, ModalContentComponent, ModalStackService, ModalTitleComponent, PaginationComponent, PopoverComponent, ProgressBarComponent, RadioButtonComponent, SliderComponent, SwitchComponent, TagComponent, TextComponent, TooltipComponent };
+//# sourceMappingURL=lumston-ds-angular.mjs.map