@ziadshalaby/ngx-zs-component 2.0.8 → 3.0.0

package/fesm2022/ziadshalaby-ngx-zs-component.mjs

@@ -379,152 +379,424 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
             args: [{ selector: 'ZS-nav-item', imports: [CommonModule, RouterModule], template: "<!-- ========================= Conditional Rendering ========================= -->\n@if (item()) {\n  @if (item().children?.length) {\n\n    <!-- ========================= Parent Item with Dropdown ========================= -->\n    <div class=\"zs:relative zs:w-full\">\n\n      <!-- ========================= Main Toggle Button ========================= -->\n      <button\n        type=\"button\"\n        (click)=\"toggle()\"\n        [ngClass]=\"getItemClasses(item())\"\n        class=\"zs:flex zs:w-full zs:items-center zs:gap-2 zs:rounded-md zs:px-3 zs:py-2 zs:text-left \n        zs:text-sm zs:font-medium zs:md:text-base\"\n        aria-haspopup=\"true\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-controls]=\"'submenu-' + index()\"\n      >\n        <div class=\"zs:flex zs:items-center\">\n          @if (item().icon) {\n            <i [ngClass]=\"[\n              item().icon, \n              item().iconClass ?? '',\n              (item().icon && item().label) ? 'zs:mr-2' : ''\n            ]\" aria-hidden=\"true\"></i>\n          }\n          <span class=\"zs:wrap-break-word\" [ngClass]=\"labelLineClass(item())\">{{ item().label }}</span>\n        </div>\n        <i class=\"fas fa-chevron-down zs:ml-auto zs:p-0.5 zs:text-xs\" aria-hidden=\"true\"></i>\n      </button>\n\n      <!-- ========================= Dropdown Menu ========================= -->\n      <div\n        [id]=\"'submenu-' + index()\"\n        [ngClass]=\"{\n          'zs:block': isOpen(),\n          'zs:hidden': !isOpen(),\n          'zs:absolute zs:left-6 zs:w-50 zs:mt-1 zs:py-1 zs:bg-white zs:dark:bg-gray-800 \n          zs:rounded-md shadow-md-all shadow-md-all-night': item().childrenOpenWindow,\n          'zs:px-4 zs:mt-1': !item().childrenOpenWindow\n        }\"\n        class=\"{{ zIndices.navItemDropdown }}\"\n        role=\"menu\"\n        [attr.aria-label]=\"item().label + ' submenu'\"\n      >\n        @for (child of item().children; track $index) {\n          <ZS-nav-item\n            [item]=\"child\"\n            [collectionName]=\"collectionName() + '-' + index()\"\n            (anyItemClickedEv)=\"handleChildClick($event)\"\n            role=\"menuitem\"\n          ></ZS-nav-item>\n        }\n      </div>\n\n    </div>\n\n  } @else {\n\n    <!-- ========================= Leaf Item (No Children) ========================= -->\n    <a\n      [routerLink]=\"item().routerLink\"\n      [routerLinkActive]=\"item().routerLinkActive ?? ''\"\n      #rla=\"routerLinkActive\"\n      [ngClass]=\"rla.isActive ? '' : getItemClasses(item())\"\n      class=\"zs:flex zs:items-center zs:rounded-md zs:px-3 zs:py-2 \n      zs:text-sm zs:font-medium zs:md:text-base\"\n      (click)=\"onItemClick()\"\n      role=\"menuitem\"\n    >\n      @if (item().icon) {\n        <i [ngClass]=\"[\n          item().icon,\n          rla.isActive ? '' : item().iconClass ?? '',\n          (item().icon && item().label) ? 'zs:mr-2' : ''\n        ]\"\n        aria-hidden=\"true\"></i>\n      }\n      <span class=\"zs:wrap-break-word zs:line-clamp-3\" [ngClass]=\"labelLineClass(item())\">{{ item().label }}</span>\n    </a>\n  }\n}" }]
         }], ctorParameters: () => [], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], collectionName: [{ type: i0.Input, args: [{ isSignal: true, alias: "collectionName", required: true }] }], anyItemClickedEv: [{ type: i0.Output, args: ["anyItemClickedEv"] }] } });
 
-const FormPaletteMap = new Map([
+// Unified palette map with all configurations
+const unifiedPaletteMap = new Map([
     [
         'secondary',
         {
-            border: 'zs:border-slate-300 zs:dark:border-slate-600',
-            borderHover: 'zs:hover:border-slate-500 zs:dark:hover:border-slate-400',
-            inputBg: 'zs:bg-slate-50 zs:dark:bg-slate-900',
-            ring: 'zs:focus-within:ring-slate-400 zs:dark:focus-within:ring-slate-600',
-            bgSelect: 'zs:bg-slate-200 zs:dark:bg-slate-800',
-            text: 'zs:text-slate-800 zs:dark:text-slate-300',
-            textHover: 'zs:hover:text-slate-700 zs:dark:hover:text-slate-400',
-            btnBG: 'zs:bg-slate-500 zs:dark:bg-slate-700',
-            btnBGHover: 'zs:hover:bg-slate-600',
-            checkBoxText: 'zs:text-slate-500 zs:dark:text-slate-700',
-            checkBoxTextHover: 'zs:hover:text-slate-600',
+            input: {
+                border: 'zs:border-slate-300 zs:dark:border-slate-600',
+                borderHover: 'zs:hover:border-slate-500 zs:dark:hover:border-slate-400',
+                inputBg: 'zs:bg-slate-50 zs:dark:bg-slate-900',
+                text: 'zs:text-slate-800 zs:dark:text-slate-300',
+            },
+            ring: {
+                ring: 'zs:focus-within:ring-slate-400 zs:dark:focus-within:ring-slate-600',
+            },
+            buttonSolid: {
+                btnBG: 'zs:bg-slate-500 zs:dark:bg-slate-700',
+                btnBGHover: 'zs:hover:bg-slate-600',
+            },
+            buttonOutline: {
+                border: 'zs:border-slate-500 zs:dark:border-slate-500',
+                btnBGHover: 'zs:hover:bg-slate-600 zs:dark:hover:bg-slate-600',
+                text: 'zs:text-slate-500 zs:dark:text-slate-500'
+            },
+            select: {
+                bgSelect: 'zs:bg-slate-200 zs:dark:bg-slate-800',
+                cleartext: 'zs:text-slate-700 zs:dark:text-slate-500',
+                cleartexthover: 'zs:hover:text-slate-500 zs:dark:hover:text-slate-300',
+            },
+            checkbox: {
+                checkBoxText: 'zs:text-slate-500 zs:dark:text-slate-700',
+                checkBoxTextHover: 'zs:hover:text-slate-600',
+            },
+            card: {
+                border: 'zs:border-slate-300 zs:dark:border-slate-700',
+                borderHover: 'zs:hover:border-slate-600 zs:dark:hover:border-slate-500',
+            },
+            modal: {
+                border: 'zs:border-slate-300 zs:dark:border-slate-600',
+                text: 'zs:text-slate-800 zs:dark:text-slate-300',
+            },
+            page404: {
+                btnBG: 'zs:bg-slate-500 zs:dark:bg-slate-700',
+                btnBGHover: 'zs:hover:bg-slate-600',
+                iconText: 'zs:text-slate-500 zs:dark:text-slate-700',
+            },
         },
     ],
     [
         'primary',
         {
-            border: 'zs:border-blue-200 zs:dark:border-blue-700',
-            borderHover: 'zs:hover:border-blue-400 zs:dark:hover:border-blue-500',
-            inputBg: 'zs:bg-white zs:dark:bg-slate-900',
-            ring: 'zs:focus-within:ring-blue-400 zs:dark:focus-within:ring-blue-500',
-            bgSelect: 'zs:bg-blue-200 zs:dark:bg-blue-800',
-            text: 'zs:text-blue-900 zs:dark:text-blue-100',
-            textHover: 'zs:hover:text-blue-700 zs:dark:hover:text-blue-300',
-            btnBG: 'zs:bg-blue-500 zs:dark:bg-blue-700',
-            btnBGHover: 'zs:hover:bg-blue-600',
-            checkBoxText: 'zs:text-blue-500 zs:dark:text-blue-700',
-            checkBoxTextHover: 'zs:hover:text-blue-600',
+            input: {
+                border: 'zs:border-blue-200 zs:dark:border-blue-700',
+                borderHover: 'zs:hover:border-blue-400 zs:dark:hover:border-blue-500',
+                inputBg: 'zs:bg-white zs:dark:bg-slate-900',
+                text: 'zs:text-blue-900 zs:dark:text-blue-100',
+            },
+            ring: {
+                ring: 'zs:focus-within:ring-blue-400 zs:dark:focus-within:ring-blue-500',
+            },
+            buttonSolid: {
+                btnBG: 'zs:bg-blue-500 zs:dark:bg-blue-700',
+                btnBGHover: 'zs:hover:bg-blue-600',
+            },
+            buttonOutline: {
+                border: 'zs:border-blue-500 zs:dark:border-blue-600',
+                btnBGHover: 'zs:hover:bg-blue-600',
+                text: 'zs:text-blue-500 zs:dark:text-blue-500'
+            },
+            select: {
+                bgSelect: 'zs:bg-blue-200 zs:dark:bg-blue-800',
+                cleartext: 'zs:text-blue-800 zs:dark:text-blue-500',
+                cleartexthover: 'zs:hover:text-blue-600 zs:dark:hover:text-blue-300',
+            },
+            checkbox: {
+                checkBoxText: 'zs:text-blue-500 zs:dark:text-blue-700',
+                checkBoxTextHover: 'zs:hover:text-blue-600',
+            },
+            card: {
+                border: 'zs:border-blue-300 zs:dark:border-blue-700',
+                borderHover: 'zs:hover:border-blue-600 zs:dark:hover:border-blue-500',
+            },
+            modal: {
+                border: 'zs:border-blue-200 zs:dark:border-blue-700',
+                text: 'zs:text-blue-900 zs:dark:text-blue-100',
+            },
+            page404: {
+                btnBG: 'zs:bg-blue-500 zs:dark:bg-blue-700',
+                btnBGHover: 'zs:hover:bg-blue-600',
+                iconText: 'zs:text-blue-500 zs:dark:text-blue-700',
+            },
         },
     ],
     [
         'success',
         {
-            border: 'zs:border-green-300 zs:dark:border-green-600',
-            borderHover: 'zs:hover:border-green-500 zs:dark:hover:border-green-400',
-            inputBg: 'zs:bg-white zs:dark:bg-slate-900',
-            ring: 'zs:focus-within:ring-green-400 zs:dark:focus-within:ring-green-600',
-            bgSelect: 'zs:bg-green-200 zs:dark:bg-green-800',
-            text: 'zs:text-green-800 zs:dark:text-green-300',
-            textHover: 'zs:hover:text-green-700 zs:dark:hover:text-green-400',
-            btnBG: 'zs:bg-green-500 zs:dark:bg-green-700',
-            btnBGHover: 'zs:hover:bg-green-600',
-            checkBoxText: 'zs:text-green-500 zs:dark:text-green-700',
-            checkBoxTextHover: 'zs:hover:text-green-600',
+            input: {
+                border: 'zs:border-green-300 zs:dark:border-green-600',
+                borderHover: 'zs:hover:border-green-500 zs:dark:hover:border-green-400',
+                inputBg: 'zs:bg-white zs:dark:bg-slate-900',
+                text: 'zs:text-green-800 zs:dark:text-green-300',
+            },
+            ring: {
+                ring: 'zs:focus-within:ring-green-400 zs:dark:focus-within:ring-green-600',
+            },
+            buttonSolid: {
+                btnBG: 'zs:bg-green-500 zs:dark:bg-green-700',
+                btnBGHover: 'zs:hover:bg-green-600',
+            },
+            buttonOutline: {
+                border: 'zs:border-green-500 zs:dark:border-green-600',
+                btnBGHover: 'zs:hover:bg-green-600',
+                text: 'zs:text-green-500 zs:dark:text-green-600'
+            },
+            select: {
+                bgSelect: 'zs:bg-green-200 zs:dark:bg-green-800',
+                cleartext: 'zs:text-green-800 zs:dark:text-green-500',
+                cleartexthover: 'zs:hover:text-green-600 zs:dark:hover:text-green-300',
+            },
+            checkbox: {
+                checkBoxText: 'zs:text-green-500 zs:dark:text-green-700',
+                checkBoxTextHover: 'zs:hover:text-green-600',
+            },
+            card: {
+                border: 'zs:border-green-300 zs:dark:border-green-700',
+                borderHover: 'zs:hover:border-green-600 zs:dark:hover:border-green-500',
+            },
+            modal: {
+                border: 'zs:border-green-300 zs:dark:border-green-600',
+                text: 'zs:text-green-800 zs:dark:text-green-300',
+            },
+            page404: {
+                btnBG: 'zs:bg-green-500 zs:dark:bg-green-700',
+                btnBGHover: 'zs:hover:bg-green-600',
+                iconText: 'zs:text-green-500 zs:dark:text-green-700',
+            },
         },
     ],
     [
         'danger',
         {
-            border: 'zs:border-red-300 zs:dark:border-red-600',
-            borderHover: 'zs:hover:border-red-500 zs:dark:hover:border-red-400',
-            inputBg: 'zs:bg-white zs:dark:bg-slate-900',
-            ring: 'zs:focus-within:ring-red-400 zs:dark:focus-within:ring-red-600',
-            bgSelect: 'zs:bg-red-200 zs:dark:bg-red-800',
-            text: 'zs:text-red-800 zs:dark:text-red-300',
-            textHover: 'zs:hover:text-red-700 zs:dark:hover:text-red-400',
-            btnBG: 'zs:bg-red-500 zs:dark:bg-red-700',
-            btnBGHover: 'zs:hover:bg-red-600',
-            checkBoxText: 'zs:text-red-500 zs:dark:text-red-700',
-            checkBoxTextHover: 'zs:hover:text-red-600',
+            input: {
+                border: 'zs:border-red-300 zs:dark:border-red-600',
+                borderHover: 'zs:hover:border-red-500 zs:dark:hover:border-red-400',
+                inputBg: 'zs:bg-white zs:dark:bg-slate-900',
+                text: 'zs:text-red-800 zs:dark:text-red-300',
+            },
+            ring: {
+                ring: 'zs:focus-within:ring-red-400 zs:dark:focus-within:ring-red-600',
+            },
+            buttonSolid: {
+                btnBG: 'zs:bg-red-500 zs:dark:bg-red-700',
+                btnBGHover: 'zs:hover:bg-red-600',
+            },
+            buttonOutline: {
+                border: 'zs:border-red-500 zs:dark:border-red-600',
+                btnBGHover: 'zs:hover:bg-red-600',
+                text: 'zs:text-red-500 zs:dark:text-red-600'
+            },
+            select: {
+                bgSelect: 'zs:bg-red-200 zs:dark:bg-red-800',
+                cleartext: 'zs:text-red-800 zs:dark:text-red-500',
+                cleartexthover: 'zs:hover:text-red-600 zs:dark:hover:text-red-300',
+            },
+            checkbox: {
+                checkBoxText: 'zs:text-red-500 zs:dark:text-red-700',
+                checkBoxTextHover: 'zs:hover:text-red-600',
+            },
+            card: {
+                border: 'zs:border-red-300 zs:dark:border-red-700',
+                borderHover: 'zs:hover:border-red-600 zs:dark:hover:border-red-500',
+            },
+            modal: {
+                border: 'zs:border-red-300 zs:dark:border-red-600',
+                text: 'zs:text-red-800 zs:dark:text-red-300',
+            },
+            page404: {
+                btnBG: 'zs:bg-red-500 zs:dark:bg-red-700',
+                btnBGHover: 'zs:hover:bg-red-600',
+                iconText: 'zs:text-red-500 zs:dark:text-red-700',
+            },
         },
     ],
     [
         'warning',
         {
-            border: 'zs:border-yellow-300 zs:dark:border-yellow-600',
-            borderHover: 'zs:hover:border-yellow-500 zs:dark:hover:border-yellow-400',
-            inputBg: 'zs:bg-white zs:dark:bg-slate-900',
-            ring: 'zs:focus-within:ring-yellow-400 zs:dark:focus-within:ring-yellow-600',
-            bgSelect: 'zs:bg-amber-200 zs:dark:bg-amber-800',
-            text: 'zs:text-amber-800 zs:dark:text-amber-300',
-            textHover: 'zs:hover:text-amber-700 zs:dark:hover:text-amber-400',
-            btnBG: 'zs:bg-amber-500 zs:dark:bg-amber-700',
-            btnBGHover: 'zs:hover:bg-amber-600',
-            checkBoxText: 'zs:text-amber-500 zs:dark:text-amber-700',
-            checkBoxTextHover: 'zs:hover:text-amber-600',
+            input: {
+                border: 'zs:border-yellow-300 zs:dark:border-yellow-600',
+                borderHover: 'zs:hover:border-yellow-500 zs:dark:hover:border-yellow-400',
+                inputBg: 'zs:bg-white zs:dark:bg-slate-900',
+                text: 'zs:text-amber-800 zs:dark:text-amber-300',
+            },
+            ring: {
+                ring: 'zs:focus-within:ring-yellow-400 zs:dark:focus-within:ring-yellow-600',
+            },
+            buttonSolid: {
+                btnBG: 'zs:bg-amber-500 zs:dark:bg-amber-700',
+                btnBGHover: 'zs:hover:bg-amber-600',
+            },
+            buttonOutline: {
+                border: 'zs:border-amber-500 zs:dark:border-amber-600',
+                btnBGHover: 'zs:hover:bg-amber-600',
+                text: 'zs:text-amber-500 zs:dark:text-amber-600'
+            },
+            select: {
+                bgSelect: 'zs:bg-amber-200 zs:dark:bg-amber-800',
+                cleartext: 'zs:text-amber-800 zs:dark:text-amber-500',
+                cleartexthover: 'zs:hover:text-amber-600 zs:dark:hover:text-amber-300',
+            },
+            checkbox: {
+                checkBoxText: 'zs:text-amber-500 zs:dark:text-amber-700',
+                checkBoxTextHover: 'zs:hover:text-amber-600',
+            },
+            card: {
+                border: 'zs:border-yellow-300 zs:dark:border-yellow-700',
+                borderHover: 'zs:hover:border-yellow-600 zs:dark:hover:border-yellow-500',
+            },
+            modal: {
+                border: 'zs:border-yellow-300 zs:dark:border-yellow-600',
+                text: 'zs:text-amber-800 zs:dark:text-amber-300',
+            },
+            page404: {
+                btnBG: 'zs:bg-amber-500 zs:dark:bg-amber-700',
+                btnBGHover: 'zs:hover:bg-amber-600',
+                iconText: 'zs:text-amber-500 zs:dark:text-amber-700',
+            },
         },
     ],
     [
         'info',
         {
-            border: 'zs:border-cyan-300 zs:dark:border-cyan-600',
-            borderHover: 'zs:hover:border-cyan-500 zs:dark:hover:border-cyan-400',
-            inputBg: 'zs:bg-white zs:dark:bg-slate-900',
-            ring: 'zs:focus-within:ring-cyan-400 zs:dark:focus-within:ring-cyan-600',
-            bgSelect: 'zs:bg-cyan-200 zs:dark:bg-cyan-800',
-            text: 'zs:text-cyan-800 zs:dark:text-cyan-300',
-            textHover: 'zs:hover:text-cyan-700 zs:dark:hover:text-cyan-400',
-            btnBG: 'zs:bg-cyan-500 zs:dark:bg-cyan-700',
-            btnBGHover: 'zs:hover:bg-cyan-600',
-            checkBoxText: 'zs:text-cyan-500 zs:dark:text-cyan-700',
-            checkBoxTextHover: 'zs:hover:text-cyan-600',
+            input: {
+                border: 'zs:border-cyan-300 zs:dark:border-cyan-600',
+                borderHover: 'zs:hover:border-cyan-500 zs:dark:hover:border-cyan-400',
+                inputBg: 'zs:bg-white zs:dark:bg-slate-900',
+                text: 'zs:text-cyan-800 zs:dark:text-cyan-300',
+            },
+            ring: {
+                ring: 'zs:focus-within:ring-cyan-400 zs:dark:focus-within:ring-cyan-600',
+            },
+            buttonSolid: {
+                btnBG: 'zs:bg-cyan-500 zs:dark:bg-cyan-700',
+                btnBGHover: 'zs:hover:bg-cyan-600',
+            },
+            buttonOutline: {
+                border: 'zs:border-cyan-500 zs:dark:border-cyan-600',
+                btnBGHover: 'zs:hover:bg-cyan-600',
+                text: 'zs:text-cyan-500 zs:dark:text-cyan-600'
+            },
+            select: {
+                bgSelect: 'zs:bg-cyan-200 zs:dark:bg-cyan-800',
+                cleartext: 'zs:text-cyan-800 zs:dark:text-cyan-500',
+                cleartexthover: 'zs:hover:text-cyan-600 zs:dark:hover:text-cyan-300',
+            },
+            checkbox: {
+                checkBoxText: 'zs:text-cyan-500 zs:dark:text-cyan-700',
+                checkBoxTextHover: 'zs:hover:text-cyan-600',
+            },
+            card: {
+                border: 'zs:border-cyan-300 zs:dark:border-cyan-700',
+                borderHover: 'zs:hover:border-cyan-600 zs:dark:hover:border-cyan-500',
+            },
+            modal: {
+                border: 'zs:border-cyan-300 zs:dark:border-cyan-600',
+                text: 'zs:text-cyan-800 zs:dark:text-cyan-300',
+            },
+            page404: {
+                btnBG: 'zs:bg-cyan-500 zs:dark:bg-cyan-700',
+                btnBGHover: 'zs:hover:bg-cyan-600',
+                iconText: 'zs:text-cyan-500 zs:dark:text-cyan-700',
+            },
         },
     ],
     [
         'dark',
         {
-            border: 'zs:border-slate-900 zs:dark:border-slate-700',
-            borderHover: 'zs:hover:border-gray-500 zs:dark:hover:border-slate-500',
-            inputBg: 'zs:bg-slate-300 zs:dark:bg-slate-900',
-            ring: 'zs:focus-within:ring-slate-700 zs:dark:focus-within:ring-slate-600',
-            bgSelect: 'zs:bg-slate-400 zs:dark:bg-slate-800',
-            text: 'zs:text-slate-900 zs:dark:text-slate-300',
-            textHover: 'zs:hover:text-slate-700 zs:dark:hover:text-slate-400',
-            btnBG: 'zs:bg-slate-900 zs:dark:bg-slate-700',
-            btnBGHover: 'zs:hover:bg-slate-800',
-            checkBoxText: 'zs:text-slate-900 zs:dark:text-slate-700',
-            checkBoxTextHover: 'zs:hover:text-slate-800'
+            input: {
+                border: 'zs:border-slate-900 zs:dark:border-slate-700',
+                borderHover: 'zs:hover:border-gray-500 zs:dark:hover:border-slate-500',
+                inputBg: 'zs:bg-slate-300 zs:dark:bg-slate-900',
+                text: 'zs:text-slate-900 zs:dark:text-slate-300',
+            },
+            ring: {
+                ring: 'zs:focus-within:ring-slate-700 zs:dark:focus-within:ring-slate-600',
+            },
+            buttonSolid: {
+                btnBG: 'zs:bg-slate-900 zs:dark:bg-slate-700',
+                btnBGHover: 'zs:hover:bg-slate-800 zs:dark:hover:bg-slate-700/70',
+            },
+            buttonOutline: {
+                border: 'zs:border-slate-900 zs:dark:border-slate-500',
+                btnBGHover: 'zs:hover:bg-slate-800 zs:dark:hover:bg-slate-700/70',
+                text: 'zs:text-slate-900 zs:dark:text-slate-500'
+            },
+            select: {
+                bgSelect: 'zs:bg-slate-400 zs:dark:bg-slate-800',
+                cleartext: 'zs:text-slate-700 zs:dark:text-slate-500',
+                cleartexthover: 'zs:hover:text-slate-900 zs:dark:hover:text-slate-700',
+            },
+            checkbox: {
+                checkBoxText: 'zs:text-slate-900 zs:dark:text-slate-700',
+                checkBoxTextHover: 'zs:hover:text-slate-700/70',
+            },
+            card: {
+                border: 'zs:border-slate-900 zs:dark:border-slate-700',
+                borderHover: 'zs:hover:border-gray-600 zs:dark:hover:border-slate-500',
+            },
+            modal: {
+                border: 'zs:border-slate-900 zs:dark:border-slate-700',
+                text: 'zs:text-slate-900 zs:dark:text-slate-300',
+            },
+            page404: {
+                btnBG: 'zs:bg-slate-900 zs:dark:bg-slate-700',
+                btnBGHover: 'zs:hover:bg-slate-800 zs:dark:hover:bg-slate-700/70',
+                iconText: 'zs:text-slate-900 zs:dark:text-slate-700',
+            },
         },
     ],
     [
         'violet',
         {
-            border: 'zs:border-violet-300 zs:dark:border-violet-600',
-            borderHover: 'zs:hover:border-violet-500 zs:dark:hover:border-violet-400',
-            inputBg: 'zs:bg-white zs:dark:bg-slate-900',
-            ring: 'zs:focus-within:ring-violet-400 zs:dark:focus-within:ring-violet-600',
-            bgSelect: 'zs:bg-violet-200 zs:dark:bg-violet-800',
-            text: 'zs:text-violet-800 zs:dark:text-violet-300',
-            textHover: 'zs:hover:text-violet-700 zs:dark:hover:text-violet-400',
-            btnBG: 'zs:bg-violet-500 zs:dark:bg-violet-700',
-            btnBGHover: 'zs:hover:bg-violet-600',
-            checkBoxText: 'zs:text-violet-500 zs:dark:text-violet-700',
-            checkBoxTextHover: 'zs:hover:text-violet-600',
+            input: {
+                border: 'zs:border-violet-300 zs:dark:border-violet-600',
+                borderHover: 'zs:hover:border-violet-500 zs:dark:hover:border-violet-400',
+                inputBg: 'zs:bg-white zs:dark:bg-slate-900',
+                text: 'zs:text-violet-800 zs:dark:text-violet-300',
+            },
+            ring: {
+                ring: 'zs:focus-within:ring-violet-400 zs:dark:focus-within:ring-violet-600',
+            },
+            buttonSolid: {
+                btnBG: 'zs:bg-violet-500 zs:dark:bg-violet-700',
+                btnBGHover: 'zs:hover:bg-violet-600',
+            },
+            buttonOutline: {
+                border: 'zs:border-violet-500 zs:dark:border-violet-600',
+                btnBGHover: 'zs:hover:bg-violet-600',
+                text: 'zs:text-violet-500 zs:dark:text-violet-600'
+            },
+            select: {
+                bgSelect: 'zs:bg-violet-200 zs:dark:bg-violet-800',
+                cleartext: 'zs:text-violet-800 zs:dark:text-violet-500',
+                cleartexthover: 'zs:hover:text-violet-600 zs:dark:hover:text-violet-300',
+            },
+            checkbox: {
+                checkBoxText: 'zs:text-violet-500 zs:dark:text-violet-700',
+                checkBoxTextHover: 'zs:hover:text-violet-600',
+            },
+            card: {
+                border: 'zs:border-violet-300 zs:dark:border-violet-700',
+                borderHover: 'zs:hover:border-violet-600 zs:dark:hover:border-violet-500',
+            },
+            modal: {
+                border: 'zs:border-violet-300 zs:dark:border-violet-600',
+                text: 'zs:text-violet-800 zs:dark:text-violet-300',
+            },
+            page404: {
+                btnBG: 'zs:bg-violet-500 zs:dark:bg-violet-700',
+                btnBGHover: 'zs:hover:bg-violet-600',
+                iconText: 'zs:text-violet-500 zs:dark:text-violet-700',
+            },
         },
     ],
     [
         'teal',
         {
-            border: 'zs:border-teal-300 zs:dark:border-teal-600',
-            borderHover: 'zs:hover:border-teal-500 zs:dark:hover:border-teal-400',
-            inputBg: 'zs:bg-white zs:dark:bg-slate-900',
-            ring: 'zs:focus-within:ring-teal-400 zs:dark:focus-within:ring-teal-600',
-            bgSelect: 'zs:bg-teal-200 zs:dark:bg-teal-800',
-            text: 'zs:text-teal-800 zs:dark:text-teal-300',
-            textHover: 'zs:hover:text-teal-700 zs:dark:hover:text-teal-400',
-            btnBG: 'zs:bg-teal-500 zs:dark:bg-teal-700',
-            btnBGHover: 'zs:hover:bg-teal-600',
-            checkBoxText: 'zs:text-teal-500 zs:dark:text-teal-700',
-            checkBoxTextHover: 'zs:hover:text-teal-600',
+            input: {
+                border: 'zs:border-teal-300 zs:dark:border-teal-600',
+                borderHover: 'zs:hover:border-teal-500 zs:dark:hover:border-teal-400',
+                inputBg: 'zs:bg-white zs:dark:bg-slate-900',
+                text: 'zs:text-teal-800 zs:dark:text-teal-300',
+            },
+            ring: {
+                ring: 'zs:focus-within:ring-teal-400 zs:dark:focus-within:ring-teal-600',
+            },
+            buttonSolid: {
+                btnBG: 'zs:bg-teal-500 zs:dark:bg-teal-700',
+                btnBGHover: 'zs:hover:bg-teal-600',
+            },
+            buttonOutline: {
+                border: 'zs:border-teal-500 zs:dark:border-teal-600',
+                btnBGHover: 'zs:hover:bg-teal-600',
+                text: 'zs:text-teal-500 zs:dark:text-teal-600'
+            },
+            select: {
+                bgSelect: 'zs:bg-teal-200 zs:dark:bg-teal-800',
+                cleartext: 'zs:text-teal-800 zs:dark:text-teal-500',
+                cleartexthover: 'zs:hover:text-teal-600 zs:dark:hover:text-teal-300',
+            },
+            checkbox: {
+                checkBoxText: 'zs:text-teal-500 zs:dark:text-teal-700',
+                checkBoxTextHover: 'zs:hover:text-teal-600',
+            },
+            card: {
+                border: 'zs:border-teal-300 zs:dark:border-teal-700',
+                borderHover: 'zs:hover:border-teal-600 zs:dark:hover:border-teal-500',
+            },
+            modal: {
+                border: 'zs:border-teal-300 zs:dark:border-teal-600',
+                text: 'zs:text-teal-800 zs:dark:text-teal-300',
+            },
+            page404: {
+                btnBG: 'zs:bg-teal-500 zs:dark:bg-teal-700',
+                btnBGHover: 'zs:hover:bg-teal-600',
+                iconText: 'zs:text-teal-500 zs:dark:text-teal-700',
+            },
         },
     ],
 ]);
+// Helper functions for backward compatibility
+const inputPaletteMap = new Map(Array.from(unifiedPaletteMap).map(([key, value]) => [key, value.input]));
+const ringPaletteMap = new Map(Array.from(unifiedPaletteMap).map(([key, value]) => [key, value.ring]));
+const buttonSolidPaletteMap = new Map(Array.from(unifiedPaletteMap).map(([key, value]) => [key, value.buttonSolid]));
+const buttonOutlinePaletteMap = new Map(Array.from(unifiedPaletteMap).map(([key, value]) => [key, value.buttonOutline]));
+const selectPaletteMap = new Map(Array.from(unifiedPaletteMap).map(([key, value]) => [key, value.select]));
+const checkboxTextPaletteMap = new Map(Array.from(unifiedPaletteMap).map(([key, value]) => [key, value.checkbox]));
+const cardPaletteMap = new Map(Array.from(unifiedPaletteMap).map(([key, value]) => [key, value.card]));
+const modalPaletteMap = new Map(Array.from(unifiedPaletteMap).map(([key, value]) => [key, value.modal]));
+const page404PaletteMap = new Map(Array.from(unifiedPaletteMap).map(([key, value]) => [key, value.page404]));
 const ColorMapping = new Map([
     ['slate', { text: 'zs:text-slate-600 zs:dark:text-slate-400', bg: 'zs:bg-slate-600 zs:dark:bg-slate-400', border: 'zs:border-slate-600 zs:dark:border-slate-400' }],
     ['gray', { text: 'zs:text-gray-600 zs:dark:text-gray-400', bg: 'zs:bg-gray-600 zs:dark:bg-gray-400', border: 'zs:border-gray-600 zs:dark:border-gray-400' }],
@@ -655,16 +927,13 @@ class Card {
         const variant = this.variant();
         const clickable = this.clickable();
         const bodyClass = this.bodyClass();
-        const palette = FormPaletteMap.get(style) ?? {
-            border: '',
-            borderHover: '',
-            ring: '',
-        };
+        const ringPalette = ringPaletteMap.get(style);
+        const cardPalette = cardPaletteMap.get(style);
         const base = 'zs:w-full zs:h-full zs:overflow-hidden zs:flex zs:flex-col zs:gap-4 zs:rounded-lg zs:transition-all zs:duration-300';
         // ---------------------
         // Border Handling
         // ---------------------
-        const border = (variant?.border ?? true) ? `zs:border ${palette.border}` : 'zs:border-0';
+        const border = (variant?.border ?? true) ? `zs:border ${cardPalette.border}` : 'zs:border-0';
         // ---------------------
         // Shadow Handling
         // ---------------------
@@ -674,12 +943,12 @@ class Card {
         // ---------------------
         // Hover Border Handling
         // ---------------------
-        const hoverBorder = (variant?.border_hover ?? true) ? palette.borderHover : '';
+        const hoverBorder = (variant?.border_hover ?? true) ? cardPalette.borderHover : '';
         // ---------------------
         // Clickable / Focus Effects
         // ---------------------
         const clickEffects = clickable
-            ? `zs:cursor-pointer zs:hover:scale-[1.02] zs:active:scale-[0.97] zs:focus-visible:ring-2 ${palette.ring}`
+            ? `zs:cursor-pointer zs:hover:scale-[1.02] zs:active:scale-[0.97] zs:focus-visible:ring-2 ${ringPalette.ring}`
             : '';
         // ---------------------
         // Combine Classes
@@ -1064,7 +1333,6 @@ class Button {
     // ==============================================
     // Computed Properties
     // ==============================================
-    palette = computed(() => FormPaletteMap.get(this.btnStyle()), ...(ngDevMode ? [{ debugName: "palette" }] : []));
     solidTextColor = computed(() => {
         if (['primary', 'dark', 'violet', 'secondary'].includes(this.btnStyle()))
             return 'zs:text-slate-100';
@@ -1073,20 +1341,29 @@ class Button {
     baseClasses = computed(() => {
         const size = this.size();
         const variant = this.variant();
-        const p = this.palette();
-        const sizes = {
-            xs: 'zs:text-[10px] zs:px-2 zs:py-1',
-            sm: 'zs:text-xs zs:px-3.5 zs:py-1.75',
-            md: 'zs:text-sm zs:px-5 zs:py-2.5',
-            lg: 'zs:text-base zs:px-6.5 zs:py-3.25',
-            xl: 'zs:text-lg zs:px-8 zs:py-4',
-        };
-        const solidClasses = this.join(p.btnBG, p.btnBGHover, 'zs:shadow-md zs:dark:shadow-slate-700/50', 'zs:hover:shadow-lg', 'zs:active:shadow-sm', ['dark'].includes(this.btnStyle()) ? 'zs:dark:hover:shadow-sm' : '', this.solidTextColor());
-        const outlineClasses = this.join('zs:bg-transparent', 'zs:border', p.border, p.borderHover, p.text, p.textHover, 'zs:hover:shadow-sm');
+        const solidPalette = buttonSolidPaletteMap.get(this.btnStyle());
+        const outlinePalette = buttonOutlinePaletteMap.get(this.btnStyle());
+        const ringConfig = ringPaletteMap.get(this.btnStyle());
+        const solidPadding = {
+            xs: 'zs:px-2 zs:py-1',
+            sm: 'zs:px-3.5 zs:py-1.75',
+            md: 'zs:px-5 zs:py-2.5',
+            lg: 'zs:px-6.5 zs:py-3.25',
+            xl: 'zs:px-8 zs:py-4',
+        }[size];
+        const outlinePadding = {
+            xs: 'zs:px-[calc(--spacing(2)-1px)] zs:py-[calc(--spacing(2)-1px)]',
+            sm: 'zs:px-[calc(--spacing(3.5)-1px)] zs:py-[calc(--spacing(1.75)-1px)]',
+            md: 'zs:px-[calc(--spacing(5)-1px)] zs:py-[calc(--spacing(2.5)-1px)]',
+            lg: 'zs:px-[calc(--spacing(6.5)-1px)] zs:py-[calc(--spacing(3.25)-1px)]',
+            xl: 'zs:px-[calc(--spacing(8)-1px)] zs:py-[calc(--spacing(4)-1px)]',
+        }[size];
+        const solidClasses = this.join(solidPalette.btnBG, solidPalette.btnBGHover, 'zs:hover:scale-[1.02]', 'zs:shadow-md zs:dark:shadow-slate-700/50', 'zs:hover:shadow-lg', 'zs:active:shadow-sm', ['dark', 'secondary'].includes(this.btnStyle()) ? 'zs:dark:hover:shadow-sm' : '', this.solidTextColor());
+        const outlineClasses = this.join('zs:bg-transparent', 'zs:border-[1px]', outlinePalette.border, outlinePalette.btnBGHover, outlinePalette.text, 'zs:hover:text-gray-50', 'zs:hover:shadow-sm');
         const stateClasses = this.disabled()
             ? 'zs:opacity-60 zs:cursor-not-allowed zs:shadow-none'
-            : this.join('zs:hover:scale-[1.02]', 'zs:active:scale-[0.97]', 'zs:transition-[background-color,color,border-color,box-shadow,opacity]', 'zs:duration-200', 'zs:ease-in-out');
-        return this.join('zs:inline-flex zs:items-center zs:justify-center', ['xl'].includes(size) ? 'zs:rounded-xl' : 'zs:rounded-lg', 'zs:focus-visible:ring-2', 'zs:select-none', 'zs:outline-hidden', sizes[size], variant === 'solid' ? solidClasses : outlineClasses, stateClasses, p.ring);
+            : this.join('zs:active:scale-[0.97]', 'zs:transition-[background-color,color,border-color,box-shadow,opacity]', 'zs:duration-200', 'zs:ease-in-out');
+        return this.join(variant === 'solid' ? solidPadding : outlinePadding, variant === 'solid' ? solidClasses : outlineClasses, stateClasses, ringConfig.ring, 'zs:inline-flex zs:items-center zs:justify-center', ['xl'].includes(size) ? 'zs:rounded-xl' : 'zs:rounded-lg', 'zs:focus-visible:ring-2', 'zs:select-none', 'zs:outline-hidden');
     }, ...(ngDevMode ? [{ debugName: "baseClasses" }] : []));
     // ==============================================
     // Methods
@@ -1147,7 +1424,7 @@ class Modal {
         show: true,
         text: 'Cancel',
         btnStyle: 'secondary',
-        variant: 'solid',
+        variant: 'outline',
         size: 'md',
         icon: null,
         disabled: false
@@ -1178,7 +1455,7 @@ class Modal {
     // ==============================================
     // Computed Signals
     // ==============================================
-    palette = computed(() => FormPaletteMap.get(this.modalStyle()), ...(ngDevMode ? [{ debugName: "palette" }] : []));
+    palette = computed(() => modalPaletteMap.get(this.modalStyle()), ...(ngDevMode ? [{ debugName: "palette" }] : []));
     isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
     positionClass = computed(() => positionMap[this.position()], ...(ngDevMode ? [{ debugName: "positionClass" }] : []));
     setTimeId;
@@ -1212,11 +1489,11 @@ class Modal {
             this.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Modal, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Modal, isStandalone: true, selector: "ZS-modal", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, modalStyle: { classPropertyName: "modalStyle", publicName: "modalStyle", isSignal: true, isRequired: false, transformFunction: null }, showCancelIcon: { classPropertyName: "showCancelIcon", publicName: "showCancelIcon", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, cancelConfig: { classPropertyName: "cancelConfig", publicName: "cancelConfig", isSignal: true, isRequired: false, transformFunction: null }, confirmConfig: { classPropertyName: "confirmConfig", publicName: "confirmConfig", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, closeOnOverlay: { classPropertyName: "closeOnOverlay", publicName: "closeOnOverlay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", confirmEv: "confirmEv", cancelEv: "cancelEv", closedEv: "closedEv" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "<!-- ========================= Overlay ========================= -->\n@if (isOpen()) {\n  <div #modalRef\n    class=\"zs:fixed zs:inset-0 zs:flex {{ zIndices.modal }} zs:bg-black/50 zs:dark:bg-black/70 zs:transition-all zs:duration-300\"\n    [ngClass]=\"[positionClass(), open() ? 'animate-fadeIn' : 'animate-fadeOut']\"\n    (click)=\"onOverlayClick($event)\"\n    role=\"presentation\"\n    [attr.inert]=\"isOpen() ? null : ''\"\n  >\n\n    <!-- ========================= Modal Container ========================= -->\n    <div\n      class=\"zs:relative zs:m-4 zs:bg-white zs:dark:bg-slate-900 zs:w-full zs:max-w-lg zs:mx-4 \n      zs:rounded-2xl zs:shadow-lg zs:transition-all zs:duration-300 zs:outline-hidden\"\n      [ngClass]=\"[\n        'zs:border', \n        palette().border,\n        palette().text,\n        open() ? 'animate-modalIn' : 'animate-modalOut'\n      ]\"\n      (click)=\"$event.stopPropagation()\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      [attr.aria-labelledby]=\"'modal-title'\"\n      [attr.aria-describedby]=\"'modal-body'\"\n      tabindex=\"0\"\n      (keydown.escape)=\"close()\"\n    >\n\n        <!-- ========================= Modal Header ========================= -->\n        <div\n            class=\"zs:flex zs:items-center zs:justify-between zs:px-4 zs:py-3 zs:border-b\"\n            [class]=\"palette().border\"\n        >\n            <h3 id=\"modal-title\" class=\"zs:font-semibold zs:text-lg\">\n            {{ title() }}\n            </h3>\n            @if(showCancelIcon()) {\n                <button \n                class=\"zs:text-xl zs:hover:opacity-85 zs:cursor-pointer zs:transition-colors zs:duration-200 zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-offset-2 zs:focus-visible:ring-blue-500 zs:rounded-md\"\n                [class]=\"palette().textHover\"\n                (click)=\"close()\"\n                aria-label=\"Close dialog\"\n                >\n                    <i class=\"fa-solid fa-xmark\"></i>\n                </button>\n            }\n        </div>\n\n        <!-- ========================= Modal Body ========================= -->\n        <div id=\"modal-body\" class=\"zs:p-4 scroll zs:max-h-[75vh] scroll-{{ modalStyle() }}\">\n            <ng-content></ng-content>\n        </div>\n\n        <!-- ========================= Modal Footer ========================= -->\n        @if (showFooter()) {\n            <div\n            class=\"zs:flex zs:justify-end zs:gap-3 zs:p-4 zs:border-t\"\n            [class]=\"palette().border\"\n            >\n                @if (cancelMerged().show) {\n                    <ZS-button\n                    [btnStyle]=\"cancelMerged().btnStyle\"\n                    variant=\"solid\"\n                    type=\"button\"\n                    (clickedEv)=\"cancelEv.emit()\"\n                    [icon]=\"cancelMerged().icon\"\n                    [disabled]=\"cancelMerged().disabled\"\n                    [size]=\"cancelMerged().size\"\n                    [variant]=\"cancelMerged().variant\"\n                    aria-label=\"Cancel\"\n                    >\n                        {{ cancelMerged().text}}\n                    </ZS-button>\n                }\n                @if (confirmMerged().show) {\n                    <ZS-button\n                    type=\"button\"\n                    [btnStyle]=\"confirmMerged().btnStyle\"\n                    (clickedEv)=\"confirmEv.emit()\"\n                    [icon]=\"confirmMerged().icon\"\n                    [disabled]=\"confirmMerged().disabled\"\n                    [size]=\"confirmMerged().size\"\n                    [variant]=\"confirmMerged().variant\"\n                    aria-label=\"Confirm\"\n                    >\n                        {{ confirmMerged().text}}\n                    </ZS-button>\n                }\n            </div>\n        }\n    </div>\n  </div>\n}", styles: ["@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes modalIn{0%{opacity:0;transform:scale(.9) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes modalOut{0%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.9) translateY(10px)}}.animate-fadeIn{animation:fadeIn .25s ease-out forwards}.animate-modalIn{animation:modalIn .25s ease-out forwards}.animate-fadeOut{animation:fadeOut .25s ease-in forwards}.animate-modalOut{animation:modalOut .25s ease-in forwards}\n"], dependencies: [{ kind: "component", type: Button, selector: "ZS-button", inputs: ["Id", "btnStyle", "variant", "size", "disabled", "icon", "type"], outputs: ["clickedEv"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Modal, isStandalone: true, selector: "ZS-modal", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, modalStyle: { classPropertyName: "modalStyle", publicName: "modalStyle", isSignal: true, isRequired: false, transformFunction: null }, showCancelIcon: { classPropertyName: "showCancelIcon", publicName: "showCancelIcon", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, cancelConfig: { classPropertyName: "cancelConfig", publicName: "cancelConfig", isSignal: true, isRequired: false, transformFunction: null }, confirmConfig: { classPropertyName: "confirmConfig", publicName: "confirmConfig", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, closeOnOverlay: { classPropertyName: "closeOnOverlay", publicName: "closeOnOverlay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", confirmEv: "confirmEv", cancelEv: "cancelEv", closedEv: "closedEv" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "<!-- ========================= Overlay ========================= -->\n@if (isOpen()) {\n  <div #modalRef\n    class=\"zs:fixed zs:inset-0 zs:flex {{ zIndices.modal }} zs:bg-black/50 zs:dark:bg-black/70 zs:transition-all zs:duration-300\"\n    [ngClass]=\"[positionClass(), open() ? 'animate-fadeIn' : 'animate-fadeOut']\"\n    (click)=\"onOverlayClick($event)\"\n    role=\"presentation\"\n    [attr.inert]=\"isOpen() ? null : ''\"\n  >\n\n    <!-- ========================= Modal Container ========================= -->\n    <div\n      class=\"zs:relative zs:m-4 zs:bg-white zs:dark:bg-slate-900 zs:w-full zs:max-w-lg zs:mx-4 \n      zs:rounded-2xl zs:shadow-lg zs:transition-all zs:duration-300 zs:outline-hidden\"\n      [ngClass]=\"[\n        'zs:border', \n        palette().border,\n        palette().text,\n        open() ? 'animate-modalIn' : 'animate-modalOut'\n      ]\"\n      (click)=\"$event.stopPropagation()\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      [attr.aria-labelledby]=\"'modal-title'\"\n      [attr.aria-describedby]=\"'modal-body'\"\n      tabindex=\"0\"\n      (keydown.escape)=\"close()\"\n    >\n\n        <!-- ========================= Modal Header ========================= -->\n        <div\n            class=\"zs:flex zs:items-center zs:justify-between zs:px-4 zs:py-3 zs:border-b\"\n            [class]=\"palette().border\"\n        >\n            <h3 id=\"modal-title\" class=\"zs:font-semibold zs:text-lg\">\n            {{ title() }}\n            </h3>\n            @if(showCancelIcon()) {\n                <button \n                class=\"zs:text-xl zs:hover:opacity-85 zs:cursor-pointer zs:transition-colors \n                zs:duration-200 zs:focus:outline-hidden zs:focus-visible:ring-2 \n                zs:focus-visible:ring-offset-2 zs:focus-visible:ring-blue-500 \n                zs:rounded-md zs:hover:scale-[1.02] zs:active:scale-[0.97]\"\n                (click)=\"close()\"\n                aria-label=\"Close dialog\"\n                >\n                    <i class=\"fa-solid fa-xmark\"></i>\n                </button>\n            }\n        </div>\n\n        <!-- ========================= Modal Body ========================= -->\n        <div id=\"modal-body\" class=\"zs:p-4 scroll zs:max-h-[75vh] scroll-{{ modalStyle() }}\">\n            <ng-content></ng-content>\n        </div>\n\n        <!-- ========================= Modal Footer ========================= -->\n        @if (showFooter()) {\n            <div\n            class=\"zs:flex zs:justify-end zs:gap-3 zs:p-4 zs:border-t\"\n            [class]=\"palette().border\"\n            >\n                @if (cancelMerged().show) {\n                    <ZS-button\n                    [btnStyle]=\"cancelMerged().btnStyle\"\n                    variant=\"solid\"\n                    type=\"button\"\n                    (clickedEv)=\"cancelEv.emit()\"\n                    [icon]=\"cancelMerged().icon\"\n                    [disabled]=\"cancelMerged().disabled\"\n                    [size]=\"cancelMerged().size\"\n                    [variant]=\"cancelMerged().variant\"\n                    aria-label=\"Cancel\"\n                    >\n                        {{ cancelMerged().text}}\n                    </ZS-button>\n                }\n                @if (confirmMerged().show) {\n                    <ZS-button\n                    type=\"button\"\n                    [btnStyle]=\"confirmMerged().btnStyle\"\n                    (clickedEv)=\"confirmEv.emit()\"\n                    [icon]=\"confirmMerged().icon\"\n                    [disabled]=\"confirmMerged().disabled\"\n                    [size]=\"confirmMerged().size\"\n                    [variant]=\"confirmMerged().variant\"\n                    aria-label=\"Confirm\"\n                    >\n                        {{ confirmMerged().text}}\n                    </ZS-button>\n                }\n            </div>\n        }\n    </div>\n  </div>\n}", styles: ["@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes modalIn{0%{opacity:0;transform:scale(.9) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes modalOut{0%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.9) translateY(10px)}}.animate-fadeIn{animation:fadeIn .25s ease-out forwards}.animate-modalIn{animation:modalIn .25s ease-out forwards}.animate-fadeOut{animation:fadeOut .25s ease-in forwards}.animate-modalOut{animation:modalOut .25s ease-in forwards}\n"], dependencies: [{ kind: "component", type: Button, selector: "ZS-button", inputs: ["Id", "btnStyle", "variant", "size", "disabled", "icon", "type"], outputs: ["clickedEv"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Modal, decorators: [{
             type: Component,
-            args: [{ selector: 'ZS-modal', imports: [Button, CommonModule], template: "<!-- ========================= Overlay ========================= -->\n@if (isOpen()) {\n  <div #modalRef\n    class=\"zs:fixed zs:inset-0 zs:flex {{ zIndices.modal }} zs:bg-black/50 zs:dark:bg-black/70 zs:transition-all zs:duration-300\"\n    [ngClass]=\"[positionClass(), open() ? 'animate-fadeIn' : 'animate-fadeOut']\"\n    (click)=\"onOverlayClick($event)\"\n    role=\"presentation\"\n    [attr.inert]=\"isOpen() ? null : ''\"\n  >\n\n    <!-- ========================= Modal Container ========================= -->\n    <div\n      class=\"zs:relative zs:m-4 zs:bg-white zs:dark:bg-slate-900 zs:w-full zs:max-w-lg zs:mx-4 \n      zs:rounded-2xl zs:shadow-lg zs:transition-all zs:duration-300 zs:outline-hidden\"\n      [ngClass]=\"[\n        'zs:border', \n        palette().border,\n        palette().text,\n        open() ? 'animate-modalIn' : 'animate-modalOut'\n      ]\"\n      (click)=\"$event.stopPropagation()\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      [attr.aria-labelledby]=\"'modal-title'\"\n      [attr.aria-describedby]=\"'modal-body'\"\n      tabindex=\"0\"\n      (keydown.escape)=\"close()\"\n    >\n\n        <!-- ========================= Modal Header ========================= -->\n        <div\n            class=\"zs:flex zs:items-center zs:justify-between zs:px-4 zs:py-3 zs:border-b\"\n            [class]=\"palette().border\"\n        >\n            <h3 id=\"modal-title\" class=\"zs:font-semibold zs:text-lg\">\n            {{ title() }}\n            </h3>\n            @if(showCancelIcon()) {\n                <button \n                class=\"zs:text-xl zs:hover:opacity-85 zs:cursor-pointer zs:transition-colors zs:duration-200 zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-offset-2 zs:focus-visible:ring-blue-500 zs:rounded-md\"\n                [class]=\"palette().textHover\"\n                (click)=\"close()\"\n                aria-label=\"Close dialog\"\n                >\n                    <i class=\"fa-solid fa-xmark\"></i>\n                </button>\n            }\n        </div>\n\n        <!-- ========================= Modal Body ========================= -->\n        <div id=\"modal-body\" class=\"zs:p-4 scroll zs:max-h-[75vh] scroll-{{ modalStyle() }}\">\n            <ng-content></ng-content>\n        </div>\n\n        <!-- ========================= Modal Footer ========================= -->\n        @if (showFooter()) {\n            <div\n            class=\"zs:flex zs:justify-end zs:gap-3 zs:p-4 zs:border-t\"\n            [class]=\"palette().border\"\n            >\n                @if (cancelMerged().show) {\n                    <ZS-button\n                    [btnStyle]=\"cancelMerged().btnStyle\"\n                    variant=\"solid\"\n                    type=\"button\"\n                    (clickedEv)=\"cancelEv.emit()\"\n                    [icon]=\"cancelMerged().icon\"\n                    [disabled]=\"cancelMerged().disabled\"\n                    [size]=\"cancelMerged().size\"\n                    [variant]=\"cancelMerged().variant\"\n                    aria-label=\"Cancel\"\n                    >\n                        {{ cancelMerged().text}}\n                    </ZS-button>\n                }\n                @if (confirmMerged().show) {\n                    <ZS-button\n                    type=\"button\"\n                    [btnStyle]=\"confirmMerged().btnStyle\"\n                    (clickedEv)=\"confirmEv.emit()\"\n                    [icon]=\"confirmMerged().icon\"\n                    [disabled]=\"confirmMerged().disabled\"\n                    [size]=\"confirmMerged().size\"\n                    [variant]=\"confirmMerged().variant\"\n                    aria-label=\"Confirm\"\n                    >\n                        {{ confirmMerged().text}}\n                    </ZS-button>\n                }\n            </div>\n        }\n    </div>\n  </div>\n}", styles: ["@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes modalIn{0%{opacity:0;transform:scale(.9) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes modalOut{0%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.9) translateY(10px)}}.animate-fadeIn{animation:fadeIn .25s ease-out forwards}.animate-modalIn{animation:modalIn .25s ease-out forwards}.animate-fadeOut{animation:fadeOut .25s ease-in forwards}.animate-modalOut{animation:modalOut .25s ease-in forwards}\n"] }]
+            args: [{ selector: 'ZS-modal', imports: [Button, CommonModule], template: "<!-- ========================= Overlay ========================= -->\n@if (isOpen()) {\n  <div #modalRef\n    class=\"zs:fixed zs:inset-0 zs:flex {{ zIndices.modal }} zs:bg-black/50 zs:dark:bg-black/70 zs:transition-all zs:duration-300\"\n    [ngClass]=\"[positionClass(), open() ? 'animate-fadeIn' : 'animate-fadeOut']\"\n    (click)=\"onOverlayClick($event)\"\n    role=\"presentation\"\n    [attr.inert]=\"isOpen() ? null : ''\"\n  >\n\n    <!-- ========================= Modal Container ========================= -->\n    <div\n      class=\"zs:relative zs:m-4 zs:bg-white zs:dark:bg-slate-900 zs:w-full zs:max-w-lg zs:mx-4 \n      zs:rounded-2xl zs:shadow-lg zs:transition-all zs:duration-300 zs:outline-hidden\"\n      [ngClass]=\"[\n        'zs:border', \n        palette().border,\n        palette().text,\n        open() ? 'animate-modalIn' : 'animate-modalOut'\n      ]\"\n      (click)=\"$event.stopPropagation()\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      [attr.aria-labelledby]=\"'modal-title'\"\n      [attr.aria-describedby]=\"'modal-body'\"\n      tabindex=\"0\"\n      (keydown.escape)=\"close()\"\n    >\n\n        <!-- ========================= Modal Header ========================= -->\n        <div\n            class=\"zs:flex zs:items-center zs:justify-between zs:px-4 zs:py-3 zs:border-b\"\n            [class]=\"palette().border\"\n        >\n            <h3 id=\"modal-title\" class=\"zs:font-semibold zs:text-lg\">\n            {{ title() }}\n            </h3>\n            @if(showCancelIcon()) {\n                <button \n                class=\"zs:text-xl zs:hover:opacity-85 zs:cursor-pointer zs:transition-colors \n                zs:duration-200 zs:focus:outline-hidden zs:focus-visible:ring-2 \n                zs:focus-visible:ring-offset-2 zs:focus-visible:ring-blue-500 \n                zs:rounded-md zs:hover:scale-[1.02] zs:active:scale-[0.97]\"\n                (click)=\"close()\"\n                aria-label=\"Close dialog\"\n                >\n                    <i class=\"fa-solid fa-xmark\"></i>\n                </button>\n            }\n        </div>\n\n        <!-- ========================= Modal Body ========================= -->\n        <div id=\"modal-body\" class=\"zs:p-4 scroll zs:max-h-[75vh] scroll-{{ modalStyle() }}\">\n            <ng-content></ng-content>\n        </div>\n\n        <!-- ========================= Modal Footer ========================= -->\n        @if (showFooter()) {\n            <div\n            class=\"zs:flex zs:justify-end zs:gap-3 zs:p-4 zs:border-t\"\n            [class]=\"palette().border\"\n            >\n                @if (cancelMerged().show) {\n                    <ZS-button\n                    [btnStyle]=\"cancelMerged().btnStyle\"\n                    variant=\"solid\"\n                    type=\"button\"\n                    (clickedEv)=\"cancelEv.emit()\"\n                    [icon]=\"cancelMerged().icon\"\n                    [disabled]=\"cancelMerged().disabled\"\n                    [size]=\"cancelMerged().size\"\n                    [variant]=\"cancelMerged().variant\"\n                    aria-label=\"Cancel\"\n                    >\n                        {{ cancelMerged().text}}\n                    </ZS-button>\n                }\n                @if (confirmMerged().show) {\n                    <ZS-button\n                    type=\"button\"\n                    [btnStyle]=\"confirmMerged().btnStyle\"\n                    (clickedEv)=\"confirmEv.emit()\"\n                    [icon]=\"confirmMerged().icon\"\n                    [disabled]=\"confirmMerged().disabled\"\n                    [size]=\"confirmMerged().size\"\n                    [variant]=\"confirmMerged().variant\"\n                    aria-label=\"Confirm\"\n                    >\n                        {{ confirmMerged().text}}\n                    </ZS-button>\n                }\n            </div>\n        }\n    </div>\n  </div>\n}", styles: ["@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes modalIn{0%{opacity:0;transform:scale(.9) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes modalOut{0%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.9) translateY(10px)}}.animate-fadeIn{animation:fadeIn .25s ease-out forwards}.animate-modalIn{animation:modalIn .25s ease-out forwards}.animate-fadeOut{animation:fadeOut .25s ease-in forwards}.animate-modalOut{animation:modalOut .25s ease-in forwards}\n"] }]
         }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], modalStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "modalStyle", required: false }] }], showCancelIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCancelIcon", required: false }] }], showFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooter", required: false }] }], cancelConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelConfig", required: false }] }], confirmConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmConfig", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], closeOnOverlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnOverlay", required: false }] }], confirmEv: [{ type: i0.Output, args: ["confirmEv"] }], cancelEv: [{ type: i0.Output, args: ["cancelEv"] }], closedEv: [{ type: i0.Output, args: ["closedEv"] }], onEscape: [{
                 type: HostListener,
                 args: ['document:keydown.escape']
@@ -1358,14 +1635,14 @@ class Page404 {
         if (this.pageStyle() === 'normal')
             return {
                 btnBG: 'zs:bg-sky-500 zs:dark:bg-sky-600',
-                btnBgHover: 'zs:hover:bg-sky-600 zs:dark:hover:bg-sky-500',
+                btnBGHover: 'zs:hover:bg-sky-600 zs:dark:hover:bg-sky-500',
                 iconText: 'zs:text-sky-600 zs:dark:text-sky-500'
             };
-        const pallete = FormPaletteMap.get(this.pageStyle() ?? 'violet');
+        const pallete = page404PaletteMap.get(this.pageStyle());
         return {
             btnBG: pallete.btnBG,
-            btnBgHover: pallete.btnBGHover,
-            iconText: pallete.checkBoxText
+            btnBGHover: pallete.btnBGHover,
+            iconText: pallete.iconText
         };
     }, ...(ngDevMode ? [{ debugName: "style" }] : []));
     // ========================================================================
@@ -1373,11 +1650,11 @@ class Page404 {
     // ========================================================================
     onAction = output();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Page404, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Page404, isStandalone: true, selector: "ZS-page404", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, pageStyle: { classPropertyName: "pageStyle", publicName: "pageStyle", isSignal: true, isRequired: false, transformFunction: null }, showButton: { classPropertyName: "showButton", publicName: "showButton", isSignal: true, isRequired: false, transformFunction: null }, buttonText: { classPropertyName: "buttonText", publicName: "buttonText", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onAction: "onAction" }, ngImport: i0, template: "<!-- ========================= Page 404 Container ========================= -->\n<div class=\"zs:flex zs:flex-col zs:items-center zs:justify-center zs:min-h-[90vh]\n    zs:text-center zs:transition-colors zs:duration-500 zs:animate-fadeIn\"\n    [ngClass]=\"[style().iconText]\"\n    >\n\n  <!-- ========================= Icon ========================= --> \n  <div class=\"zs:text-[136px] zs:mb-8 animate-float zs:opacity-90 zs:leading-none\">\n    <i class=\"fa-solid\" [class]=\"icon()\"></i>\n  </div>\n\n  <!-- ========================= Title ========================= -->\n  <h1 class=\"zs:text-6xl zs:font-black zs:tracking-widest zs:mb-2 \n  zs:text-rose-600 zs:dark:text-rose-500 zs:select-none\n  zs:drop-shadow-[0_0_8px_rgba(239,68,68,0.5)]\">\n    404\n  </h1>\n\n\n  <!-- ========================= Message ========================= -->\n  <h2 class=\"zs:text-2xl zs:text-rose-600/80 zs:dark:text-rose-800/80 zs:font-semibold zs:mb-4\">\n    {{ title() }}\n  </h2>\n  <p class=\"zs:text-base zs:max-w-md zs:text-gray-600 zs:dark:text-gray-400 zs:mb-8\">\n    {{ message() }}\n  </p>\n\n  <!-- ========================= Button ========================= -->\n  @if (showButton()) {\n    <a\n      [routerLink]=\"routerLink()\"\n      (click)=\"onAction.emit()\"\n      class=\"zs:px-6 zs:py-2 zs:rounded-full\n             zs:text-white zs:font-medium zs:shadow-md\n             zs:hover:shadow-lg zs:flex zs:items-center \n             zs:justify-center zs:transition-all zs:duration-300 zs:ease-out \n             zs:gap-1.5\"\n      [ngClass]=\"[style().btnBG, style().btnBgHover]\"\n    >\n      <i class=\"fa-solid fa-house\"></i>\n      {{ buttonText() }}\n    </a>\n  }\n</div>\n", styles: ["@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}.animate-float{animation:float 3s ease-in-out infinite}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Page404, isStandalone: true, selector: "ZS-page404", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, pageStyle: { classPropertyName: "pageStyle", publicName: "pageStyle", isSignal: true, isRequired: false, transformFunction: null }, showButton: { classPropertyName: "showButton", publicName: "showButton", isSignal: true, isRequired: false, transformFunction: null }, buttonText: { classPropertyName: "buttonText", publicName: "buttonText", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onAction: "onAction" }, ngImport: i0, template: "<!-- ========================= Page 404 Container ========================= -->\n<div class=\"zs:flex zs:flex-col zs:items-center zs:justify-center zs:min-h-[90vh]\n    zs:text-center zs:transition-colors zs:duration-500 zs:animate-fadeIn\"\n    [ngClass]=\"[style().iconText]\"\n    >\n\n  <!-- ========================= Icon ========================= --> \n  <div class=\"zs:text-[136px] zs:mb-8 animate-float zs:opacity-90 zs:leading-none\">\n    <i class=\"fa-solid\" [class]=\"icon()\"></i>\n  </div>\n\n  <!-- ========================= Title ========================= -->\n  <h1 class=\"zs:text-6xl zs:font-black zs:tracking-widest zs:mb-2 \n  zs:text-rose-600 zs:dark:text-rose-500 zs:select-none\n  zs:drop-shadow-[0_0_8px_rgba(239,68,68,0.5)]\">\n    404\n  </h1>\n\n\n  <!-- ========================= Message ========================= -->\n  <h2 class=\"zs:text-2xl zs:text-rose-600/80 zs:dark:text-rose-800/80 zs:font-semibold zs:mb-4\">\n    {{ title() }}\n  </h2>\n  <p class=\"zs:text-base zs:max-w-md zs:text-gray-600 zs:dark:text-gray-400 zs:mb-8\">\n    {{ message() }}\n  </p>\n\n  <!-- ========================= Button ========================= -->\n  @if (showButton()) {\n    <a\n      [routerLink]=\"routerLink()\"\n      (click)=\"onAction.emit()\"\n      class=\"zs:px-6 zs:py-2 zs:rounded-full\n             zs:text-white zs:font-medium zs:shadow-md\n             zs:hover:shadow-lg zs:flex zs:items-center \n             zs:justify-center zs:transition-all zs:duration-300 zs:ease-out \n             zs:gap-1.5\"\n      [ngClass]=\"[style().btnBG, style().btnBGHover]\"\n    >\n      <i class=\"fa-solid fa-house\"></i>\n      {{ buttonText() }}\n    </a>\n  }\n</div>\n", styles: ["@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}.animate-float{animation:float 3s ease-in-out infinite}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Page404, decorators: [{
             type: Component,
-            args: [{ selector: 'ZS-page404', imports: [RouterModule, CommonModule], template: "<!-- ========================= Page 404 Container ========================= -->\n<div class=\"zs:flex zs:flex-col zs:items-center zs:justify-center zs:min-h-[90vh]\n    zs:text-center zs:transition-colors zs:duration-500 zs:animate-fadeIn\"\n    [ngClass]=\"[style().iconText]\"\n    >\n\n  <!-- ========================= Icon ========================= --> \n  <div class=\"zs:text-[136px] zs:mb-8 animate-float zs:opacity-90 zs:leading-none\">\n    <i class=\"fa-solid\" [class]=\"icon()\"></i>\n  </div>\n\n  <!-- ========================= Title ========================= -->\n  <h1 class=\"zs:text-6xl zs:font-black zs:tracking-widest zs:mb-2 \n  zs:text-rose-600 zs:dark:text-rose-500 zs:select-none\n  zs:drop-shadow-[0_0_8px_rgba(239,68,68,0.5)]\">\n    404\n  </h1>\n\n\n  <!-- ========================= Message ========================= -->\n  <h2 class=\"zs:text-2xl zs:text-rose-600/80 zs:dark:text-rose-800/80 zs:font-semibold zs:mb-4\">\n    {{ title() }}\n  </h2>\n  <p class=\"zs:text-base zs:max-w-md zs:text-gray-600 zs:dark:text-gray-400 zs:mb-8\">\n    {{ message() }}\n  </p>\n\n  <!-- ========================= Button ========================= -->\n  @if (showButton()) {\n    <a\n      [routerLink]=\"routerLink()\"\n      (click)=\"onAction.emit()\"\n      class=\"zs:px-6 zs:py-2 zs:rounded-full\n             zs:text-white zs:font-medium zs:shadow-md\n             zs:hover:shadow-lg zs:flex zs:items-center \n             zs:justify-center zs:transition-all zs:duration-300 zs:ease-out \n             zs:gap-1.5\"\n      [ngClass]=\"[style().btnBG, style().btnBgHover]\"\n    >\n      <i class=\"fa-solid fa-house\"></i>\n      {{ buttonText() }}\n    </a>\n  }\n</div>\n", styles: ["@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}.animate-float{animation:float 3s ease-in-out infinite}\n"] }]
+            args: [{ selector: 'ZS-page404', imports: [RouterModule, CommonModule], template: "<!-- ========================= Page 404 Container ========================= -->\n<div class=\"zs:flex zs:flex-col zs:items-center zs:justify-center zs:min-h-[90vh]\n    zs:text-center zs:transition-colors zs:duration-500 zs:animate-fadeIn\"\n    [ngClass]=\"[style().iconText]\"\n    >\n\n  <!-- ========================= Icon ========================= --> \n  <div class=\"zs:text-[136px] zs:mb-8 animate-float zs:opacity-90 zs:leading-none\">\n    <i class=\"fa-solid\" [class]=\"icon()\"></i>\n  </div>\n\n  <!-- ========================= Title ========================= -->\n  <h1 class=\"zs:text-6xl zs:font-black zs:tracking-widest zs:mb-2 \n  zs:text-rose-600 zs:dark:text-rose-500 zs:select-none\n  zs:drop-shadow-[0_0_8px_rgba(239,68,68,0.5)]\">\n    404\n  </h1>\n\n\n  <!-- ========================= Message ========================= -->\n  <h2 class=\"zs:text-2xl zs:text-rose-600/80 zs:dark:text-rose-800/80 zs:font-semibold zs:mb-4\">\n    {{ title() }}\n  </h2>\n  <p class=\"zs:text-base zs:max-w-md zs:text-gray-600 zs:dark:text-gray-400 zs:mb-8\">\n    {{ message() }}\n  </p>\n\n  <!-- ========================= Button ========================= -->\n  @if (showButton()) {\n    <a\n      [routerLink]=\"routerLink()\"\n      (click)=\"onAction.emit()\"\n      class=\"zs:px-6 zs:py-2 zs:rounded-full\n             zs:text-white zs:font-medium zs:shadow-md\n             zs:hover:shadow-lg zs:flex zs:items-center \n             zs:justify-center zs:transition-all zs:duration-300 zs:ease-out \n             zs:gap-1.5\"\n      [ngClass]=\"[style().btnBG, style().btnBGHover]\"\n    >\n      <i class=\"fa-solid fa-house\"></i>\n      {{ buttonText() }}\n    </a>\n  }\n</div>\n", styles: ["@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}.animate-float{animation:float 3s ease-in-out infinite}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], pageStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageStyle", required: false }] }], showButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showButton", required: false }] }], buttonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonText", required: false }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], onAction: [{ type: i0.Output, args: ["onAction"] }] } });
 
 // ========================================================================
@@ -1629,10 +1906,14 @@ class ThemeToggle {
     currentTheme = signal('light', ...(ngDevMode ? [{ debugName: "currentTheme" }] : []));
     isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
     userSelectedTheme = signal(false, ...(ngDevMode ? [{ debugName: "userSelectedTheme" }] : []));
+    lastEmittedTheme = null;
+    lastManualTheme = null;
     // ==============================================
     // Inputs
     // ==============================================
     bodyClass = input('zs:bg-white zs:dark:bg-gray-900 zs:text-gray-900 zs:dark:text-gray-100', ...(ngDevMode ? [{ debugName: "bodyClass" }] : []));
+    showDefaultUI = input(true, ...(ngDevMode ? [{ debugName: "showDefaultUI" }] : []));
+    setManualTheme = input(null, ...(ngDevMode ? [{ debugName: "setManualTheme" }] : []));
     // ==============================================
     // Outputs
     // ==============================================
@@ -1665,11 +1946,27 @@ class ThemeToggle {
         effect(() => {
             const theme = this.currentTheme();
             document.documentElement.classList.toggle('dark', theme === 'dark');
-            document.body.className = this.bodyClass();
+            const classes = this.bodyClass().split(' ');
+            document.body.classList.value = ''; // clear only what YOU set  
+            classes.forEach(c => document.body.classList.add(c));
             if (this.userSelectedTheme()) {
                 localStorage.setItem('theme', theme);
             }
         });
+        effect(() => {
+            const manual = this.setManualTheme();
+            if (manual && manual !== this.lastManualTheme) {
+                this.lastManualTheme = manual;
+                this.setTheme(manual);
+            }
+        });
+        effect(() => {
+            const theme = this.currentTheme();
+            if (theme !== this.lastEmittedTheme) {
+                this.lastEmittedTheme = theme;
+                this.themeChangeEv.emit(theme);
+            }
+        });
     }
     // ==============================================
     // Component Methods
@@ -1678,10 +1975,11 @@ class ThemeToggle {
         this.isOpen.set(!this.isOpen());
     }
     setTheme(theme) {
-        this.currentTheme.set(theme);
+        if (this.currentTheme() !== theme) {
+            this.currentTheme.set(theme);
+            this.userSelectedTheme.set(true);
+        }
         this.isOpen.set(false);
-        this.themeChangeEv.emit(theme);
-        this.userSelectedTheme.set(true);
     }
     // ==============================================
     // Host Listeners
@@ -1693,12 +1991,12 @@ class ThemeToggle {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ThemeToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: ThemeToggle, isStandalone: true, selector: "ZS-theme-toggle", inputs: { bodyClass: { classPropertyName: "bodyClass", publicName: "bodyClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { themeChangeEv: "themeChangeEv" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<!-- ========================= Theme Switcher Panel ========================= -->\n<div \n  class=\"zs:fixed zs:left-0 zs:top-1/6 {{ zIndices.themeToggle }} zs:transform \n  zs:-translate-y-1/2 zs:transition-all zs:duration-300\"\n  [ngClass]=\"!isOpen() ? 'zs:-translate-x-24' : ''\"\n  role=\"complementary\"\n  aria-label=\"Theme switcher panel\"\n>\n  <!-- ========================= Theme Selection Buttons ========================= -->\n  <div class=\"zs:flex zs:items-center\">\n    <div \n      class=\"zs:flex zs:overflow-hidden zs:transition-all zs:duration-300\"\n      role=\"group\"\n      aria-label=\"Theme selection\"\n    >\n      <!-- Light Theme Button -->\n      <button\n        (click)=\"setTheme('light')\"\n        type=\"button\"\n        class=\"zs:px-3 zs:py-2 zs:rounded-l-none zs:border-l-0 zs:border-y \n        zs:transition-colors zs:shrink-0\n        zs:bg-white zs:text-gray-900 zs:border-gray-300\n        zs:dark:bg-gray-800 zs:dark:text-gray-100 zs:dark:border-gray-600\n        zs:hover:bg-gray-100 zs:dark:hover:bg-gray-700 zs:w-12\n        zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-offset-2 \n        zs:focus-visible:ring-blue-500\"\n        aria-label=\"Activate light theme\"\n        [attr.aria-pressed]=\"currentTheme() === 'light'\"\n      >\n        <i class=\"fas fa-sun zs:text-yellow-500\" aria-hidden=\"true\"></i>\n      </button>\n\n      <!-- Dark Theme Button -->\n      <button\n        (click)=\"setTheme('dark')\"\n        type=\"button\"\n        class=\"zs:px-3 zs:py-2 zs:rounded-r-lg zs:border-y zs:border-r \n        zs:transition-colors zs:shrink-0\n        zs:bg-white zs:text-gray-900 zs:border-gray-300\n        zs:dark:bg-gray-800 zs:dark:text-gray-100 zs:dark:border-gray-600\n        zs:hover:bg-gray-100 zs:dark:hover:bg-gray-700 zs:w-12\n        zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-offset-2 \n        zs:focus-visible:ring-blue-500\"\n        aria-label=\"Activate dark theme\"\n        [attr.aria-pressed]=\"currentTheme() === 'dark'\"\n      >\n        <i class=\"fas fa-moon\" aria-hidden=\"true\"></i>\n      </button>\n    </div>\n\n    <!-- ========================= Toggle Button with Connector ========================= -->\n    <div \n      class=\"zs:relative\"\n      [ngClass]=\"isOpen() ? 'zs:hidden' : ''\"\n    >\n      <!-- Connector Line -->\n      <div\n        class=\"zs:absolute zs:top-1/2 zs:right-0 zs:h-0.5 zs:w-3 zs:transform zs:-translate-y-1/2\n                zs:bg-gray-300 zs:dark:bg-gray-600\"\n        aria-hidden=\"true\"\n      ></div>\n\n      <!-- Toggle Button -->\n      <button\n        (click)=\"toggleOpen()\"\n        type=\"button\"\n        class=\"zs:relative zs:z-100 zs:w-12 zs:h-12 zs:rounded-full zs:rounded-l-none zs:border-l-0 \n        zs:border-2\n        zs:transition-all zs:duration-300 zs:flex zs:items-center zs:justify-center\n        zs:bg-white zs:text-gray-900 zs:border-gray-300\n        zs:dark:bg-gray-800 zs:dark:text-gray-100 zs:dark:border-gray-600\n        zs:hover:bg-gray-100 zs:dark:hover:bg-gray-700\n        zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-offset-2 \n        zs:focus-visible:ring-blue-500\"\n        aria-label=\"Toggle theme switcher\"\n        [attr.aria-expanded]=\"isOpen()\"\n        aria-controls=\"theme-panel\"\n      >\n        @if (currentTheme() === 'dark') {\n          <i class=\"fas fa-moon\" aria-hidden=\"true\"></i>\n        } @else {\n          <i class=\"fas fa-sun zs:text-yellow-500\" aria-hidden=\"true\"></i>\n        }\n      </button>\n    </div>\n  </div>\n</div>", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: ThemeToggle, isStandalone: true, selector: "ZS-theme-toggle", inputs: { bodyClass: { classPropertyName: "bodyClass", publicName: "bodyClass", isSignal: true, isRequired: false, transformFunction: null }, showDefaultUI: { classPropertyName: "showDefaultUI", publicName: "showDefaultUI", isSignal: true, isRequired: false, transformFunction: null }, setManualTheme: { classPropertyName: "setManualTheme", publicName: "setManualTheme", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { themeChangeEv: "themeChangeEv" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<!-- ========================= Theme Switcher Panel ========================= -->\n@if(showDefaultUI()) {\n  <div \n    class=\"zs:fixed zs:left-0 zs:top-1/6 {{ zIndices.themeToggle }} zs:transform \n    zs:-translate-y-1/2 zs:transition-all zs:duration-300\"\n    [ngClass]=\"!isOpen() ? 'zs:-translate-x-24' : ''\"\n    role=\"complementary\"\n    aria-label=\"Theme switcher panel\"\n  >\n    <!-- ========================= Theme Selection Buttons ========================= -->\n    <div class=\"zs:flex zs:items-center\">\n      <div \n        class=\"zs:flex zs:overflow-hidden zs:transition-all zs:duration-300\"\n        role=\"group\"\n        aria-label=\"Theme selection\"\n      >\n        <!-- Light Theme Button -->\n        <button\n          (click)=\"setTheme('light')\"\n          type=\"button\"\n          class=\"zs:px-3 zs:py-2 zs:rounded-l-none zs:border-l-0 zs:border-y \n          zs:transition-colors zs:shrink-0\n          zs:bg-white zs:text-gray-900 zs:border-gray-300\n          zs:dark:bg-gray-800 zs:dark:text-gray-100 zs:dark:border-gray-600\n          zs:hover:bg-gray-100 zs:dark:hover:bg-gray-700 zs:w-12\n          zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-offset-2 \n          zs:focus-visible:ring-blue-500\"\n          aria-label=\"Activate light theme\"\n          [attr.aria-pressed]=\"currentTheme() === 'light'\"\n        >\n          <i class=\"fas fa-sun zs:text-yellow-500\" aria-hidden=\"true\"></i>\n        </button>\n  \n        <!-- Dark Theme Button -->\n        <button\n          (click)=\"setTheme('dark')\"\n          type=\"button\"\n          class=\"zs:px-3 zs:py-2 zs:rounded-r-lg zs:border-y zs:border-r \n          zs:transition-colors zs:shrink-0\n          zs:bg-white zs:text-gray-900 zs:border-gray-300\n          zs:dark:bg-gray-800 zs:dark:text-gray-100 zs:dark:border-gray-600\n          zs:hover:bg-gray-100 zs:dark:hover:bg-gray-700 zs:w-12\n          zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-offset-2 \n          zs:focus-visible:ring-blue-500\"\n          aria-label=\"Activate dark theme\"\n          [attr.aria-pressed]=\"currentTheme() === 'dark'\"\n        >\n          <i class=\"fas fa-moon\" aria-hidden=\"true\"></i>\n        </button>\n      </div>\n  \n      <!-- ========================= Toggle Button with Connector ========================= -->\n      <div \n        class=\"zs:relative\"\n        [ngClass]=\"isOpen() ? 'zs:hidden' : ''\"\n      >\n        <!-- Connector Line -->\n        <div\n          class=\"zs:absolute zs:top-1/2 zs:right-0 zs:h-0.5 zs:w-3 zs:transform zs:-translate-y-1/2\n                  zs:bg-gray-300 zs:dark:bg-gray-600\"\n          aria-hidden=\"true\"\n        ></div>\n  \n        <!-- Toggle Button -->\n        <button\n          (click)=\"toggleOpen()\"\n          type=\"button\"\n          class=\"zs:relative zs:z-100 zs:w-12 zs:h-12 zs:rounded-full zs:rounded-l-none zs:border-l-0 \n          zs:border-2\n          zs:transition-all zs:duration-300 zs:flex zs:items-center zs:justify-center\n          zs:bg-white zs:text-gray-900 zs:border-gray-300\n          zs:dark:bg-gray-800 zs:dark:text-gray-100 zs:dark:border-gray-600\n          zs:hover:bg-gray-100 zs:dark:hover:bg-gray-700\n          zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-offset-2 \n          zs:focus-visible:ring-blue-500\"\n          aria-label=\"Toggle theme switcher\"\n          [attr.aria-expanded]=\"isOpen()\"\n          aria-controls=\"theme-panel\"\n        >\n          @if (currentTheme() === 'dark') {\n            <i class=\"fas fa-moon\" aria-hidden=\"true\"></i>\n          } @else {\n            <i class=\"fas fa-sun zs:text-yellow-500\" aria-hidden=\"true\"></i>\n          }\n        </button>\n      </div>\n    </div>\n  </div>\n}", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ThemeToggle, decorators: [{
             type: Component,
-            args: [{ selector: 'ZS-theme-toggle', imports: [CommonModule], template: "<!-- ========================= Theme Switcher Panel ========================= -->\n<div \n  class=\"zs:fixed zs:left-0 zs:top-1/6 {{ zIndices.themeToggle }} zs:transform \n  zs:-translate-y-1/2 zs:transition-all zs:duration-300\"\n  [ngClass]=\"!isOpen() ? 'zs:-translate-x-24' : ''\"\n  role=\"complementary\"\n  aria-label=\"Theme switcher panel\"\n>\n  <!-- ========================= Theme Selection Buttons ========================= -->\n  <div class=\"zs:flex zs:items-center\">\n    <div \n      class=\"zs:flex zs:overflow-hidden zs:transition-all zs:duration-300\"\n      role=\"group\"\n      aria-label=\"Theme selection\"\n    >\n      <!-- Light Theme Button -->\n      <button\n        (click)=\"setTheme('light')\"\n        type=\"button\"\n        class=\"zs:px-3 zs:py-2 zs:rounded-l-none zs:border-l-0 zs:border-y \n        zs:transition-colors zs:shrink-0\n        zs:bg-white zs:text-gray-900 zs:border-gray-300\n        zs:dark:bg-gray-800 zs:dark:text-gray-100 zs:dark:border-gray-600\n        zs:hover:bg-gray-100 zs:dark:hover:bg-gray-700 zs:w-12\n        zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-offset-2 \n        zs:focus-visible:ring-blue-500\"\n        aria-label=\"Activate light theme\"\n        [attr.aria-pressed]=\"currentTheme() === 'light'\"\n      >\n        <i class=\"fas fa-sun zs:text-yellow-500\" aria-hidden=\"true\"></i>\n      </button>\n\n      <!-- Dark Theme Button -->\n      <button\n        (click)=\"setTheme('dark')\"\n        type=\"button\"\n        class=\"zs:px-3 zs:py-2 zs:rounded-r-lg zs:border-y zs:border-r \n        zs:transition-colors zs:shrink-0\n        zs:bg-white zs:text-gray-900 zs:border-gray-300\n        zs:dark:bg-gray-800 zs:dark:text-gray-100 zs:dark:border-gray-600\n        zs:hover:bg-gray-100 zs:dark:hover:bg-gray-700 zs:w-12\n        zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-offset-2 \n        zs:focus-visible:ring-blue-500\"\n        aria-label=\"Activate dark theme\"\n        [attr.aria-pressed]=\"currentTheme() === 'dark'\"\n      >\n        <i class=\"fas fa-moon\" aria-hidden=\"true\"></i>\n      </button>\n    </div>\n\n    <!-- ========================= Toggle Button with Connector ========================= -->\n    <div \n      class=\"zs:relative\"\n      [ngClass]=\"isOpen() ? 'zs:hidden' : ''\"\n    >\n      <!-- Connector Line -->\n      <div\n        class=\"zs:absolute zs:top-1/2 zs:right-0 zs:h-0.5 zs:w-3 zs:transform zs:-translate-y-1/2\n                zs:bg-gray-300 zs:dark:bg-gray-600\"\n        aria-hidden=\"true\"\n      ></div>\n\n      <!-- Toggle Button -->\n      <button\n        (click)=\"toggleOpen()\"\n        type=\"button\"\n        class=\"zs:relative zs:z-100 zs:w-12 zs:h-12 zs:rounded-full zs:rounded-l-none zs:border-l-0 \n        zs:border-2\n        zs:transition-all zs:duration-300 zs:flex zs:items-center zs:justify-center\n        zs:bg-white zs:text-gray-900 zs:border-gray-300\n        zs:dark:bg-gray-800 zs:dark:text-gray-100 zs:dark:border-gray-600\n        zs:hover:bg-gray-100 zs:dark:hover:bg-gray-700\n        zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-offset-2 \n        zs:focus-visible:ring-blue-500\"\n        aria-label=\"Toggle theme switcher\"\n        [attr.aria-expanded]=\"isOpen()\"\n        aria-controls=\"theme-panel\"\n      >\n        @if (currentTheme() === 'dark') {\n          <i class=\"fas fa-moon\" aria-hidden=\"true\"></i>\n        } @else {\n          <i class=\"fas fa-sun zs:text-yellow-500\" aria-hidden=\"true\"></i>\n        }\n      </button>\n    </div>\n  </div>\n</div>", styles: [":host{display:block}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { bodyClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "bodyClass", required: false }] }], themeChangeEv: [{ type: i0.Output, args: ["themeChangeEv"] }], onDocumentClick: [{
+            args: [{ selector: 'ZS-theme-toggle', imports: [CommonModule], template: "<!-- ========================= Theme Switcher Panel ========================= -->\n@if(showDefaultUI()) {\n  <div \n    class=\"zs:fixed zs:left-0 zs:top-1/6 {{ zIndices.themeToggle }} zs:transform \n    zs:-translate-y-1/2 zs:transition-all zs:duration-300\"\n    [ngClass]=\"!isOpen() ? 'zs:-translate-x-24' : ''\"\n    role=\"complementary\"\n    aria-label=\"Theme switcher panel\"\n  >\n    <!-- ========================= Theme Selection Buttons ========================= -->\n    <div class=\"zs:flex zs:items-center\">\n      <div \n        class=\"zs:flex zs:overflow-hidden zs:transition-all zs:duration-300\"\n        role=\"group\"\n        aria-label=\"Theme selection\"\n      >\n        <!-- Light Theme Button -->\n        <button\n          (click)=\"setTheme('light')\"\n          type=\"button\"\n          class=\"zs:px-3 zs:py-2 zs:rounded-l-none zs:border-l-0 zs:border-y \n          zs:transition-colors zs:shrink-0\n          zs:bg-white zs:text-gray-900 zs:border-gray-300\n          zs:dark:bg-gray-800 zs:dark:text-gray-100 zs:dark:border-gray-600\n          zs:hover:bg-gray-100 zs:dark:hover:bg-gray-700 zs:w-12\n          zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-offset-2 \n          zs:focus-visible:ring-blue-500\"\n          aria-label=\"Activate light theme\"\n          [attr.aria-pressed]=\"currentTheme() === 'light'\"\n        >\n          <i class=\"fas fa-sun zs:text-yellow-500\" aria-hidden=\"true\"></i>\n        </button>\n  \n        <!-- Dark Theme Button -->\n        <button\n          (click)=\"setTheme('dark')\"\n          type=\"button\"\n          class=\"zs:px-3 zs:py-2 zs:rounded-r-lg zs:border-y zs:border-r \n          zs:transition-colors zs:shrink-0\n          zs:bg-white zs:text-gray-900 zs:border-gray-300\n          zs:dark:bg-gray-800 zs:dark:text-gray-100 zs:dark:border-gray-600\n          zs:hover:bg-gray-100 zs:dark:hover:bg-gray-700 zs:w-12\n          zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-offset-2 \n          zs:focus-visible:ring-blue-500\"\n          aria-label=\"Activate dark theme\"\n          [attr.aria-pressed]=\"currentTheme() === 'dark'\"\n        >\n          <i class=\"fas fa-moon\" aria-hidden=\"true\"></i>\n        </button>\n      </div>\n  \n      <!-- ========================= Toggle Button with Connector ========================= -->\n      <div \n        class=\"zs:relative\"\n        [ngClass]=\"isOpen() ? 'zs:hidden' : ''\"\n      >\n        <!-- Connector Line -->\n        <div\n          class=\"zs:absolute zs:top-1/2 zs:right-0 zs:h-0.5 zs:w-3 zs:transform zs:-translate-y-1/2\n                  zs:bg-gray-300 zs:dark:bg-gray-600\"\n          aria-hidden=\"true\"\n        ></div>\n  \n        <!-- Toggle Button -->\n        <button\n          (click)=\"toggleOpen()\"\n          type=\"button\"\n          class=\"zs:relative zs:z-100 zs:w-12 zs:h-12 zs:rounded-full zs:rounded-l-none zs:border-l-0 \n          zs:border-2\n          zs:transition-all zs:duration-300 zs:flex zs:items-center zs:justify-center\n          zs:bg-white zs:text-gray-900 zs:border-gray-300\n          zs:dark:bg-gray-800 zs:dark:text-gray-100 zs:dark:border-gray-600\n          zs:hover:bg-gray-100 zs:dark:hover:bg-gray-700\n          zs:focus:outline-hidden zs:focus-visible:ring-2 zs:focus-visible:ring-offset-2 \n          zs:focus-visible:ring-blue-500\"\n          aria-label=\"Toggle theme switcher\"\n          [attr.aria-expanded]=\"isOpen()\"\n          aria-controls=\"theme-panel\"\n        >\n          @if (currentTheme() === 'dark') {\n            <i class=\"fas fa-moon\" aria-hidden=\"true\"></i>\n          } @else {\n            <i class=\"fas fa-sun zs:text-yellow-500\" aria-hidden=\"true\"></i>\n          }\n        </button>\n      </div>\n    </div>\n  </div>\n}", styles: [":host{display:block}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { bodyClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "bodyClass", required: false }] }], showDefaultUI: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDefaultUI", required: false }] }], setManualTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "setManualTheme", required: false }] }], themeChangeEv: [{ type: i0.Output, args: ["themeChangeEv"] }], onDocumentClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
             }] } });
@@ -1761,7 +2059,11 @@ class Checkbox {
     // ==============================================
     // Computed Signals
     // ==============================================
-    palette = computed(() => FormPaletteMap.get(this.inputStyle()) ?? FormPaletteMap.get('secondary'), ...(ngDevMode ? [{ debugName: "palette" }] : []));
+    palette = computed(() => {
+        const checkboxTextPalette = checkboxTextPaletteMap.get(this.inputStyle());
+        const ringPalette = ringPaletteMap.get(this.inputStyle());
+        return { checkboxTextPalette, ringPalette };
+    }, ...(ngDevMode ? [{ debugName: "palette" }] : []));
     iconClasses = computed(() => {
         const v = this.variant();
         const s = this.shape();
@@ -1820,11 +2122,11 @@ class Checkbox {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Checkbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: Checkbox, isStandalone: true, selector: "ZS-checkbox", inputs: { Id: { classPropertyName: "Id", publicName: "Id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, inputStyle: { classPropertyName: "inputStyle", publicName: "inputStyle", 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 }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", 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 }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: "<div class=\"zs:flex zs:items-center zs:justify-start zs:w-full zs:select-none\">\n  <!-- ===================== Checkbox Wrapper ===================== -->\n  <div\n    class=\"zs:cursor-pointer group leading-none\"\n  >\n    <!-- ===================== Hidden Input (Native for screen readers) ===================== -->\n    <input\n      type=\"checkbox\"\n      class=\"zs:hidden\"\n      [id]=\"Id()\"\n      [checked]=\"isChecked()\"\n      [disabled]=\"disabledOrReadonly()\"\n      (change)=\"toggleChecked()\"\n    />\n\n    <!-- ===================== Custom Accessible Checkbox ===================== -->\n    <span\n      role=\"'checkbox'\"\n      tabindex=\"0\"\n      [attr.aria-checked]=\"isChecked()\"\n      [attr.aria-disabled]=\"disabledOrReadonly()\"\n      [attr.aria-labelledby]=\"Id() + '-label'\"\n      [ngClass]=\"[\n        sizeClass(),\n        palette().checkBoxText,\n        palette().checkBoxTextHover,\n        palette().ring,\n        'zs:leading-none zs:inline-flex zs:items-center zs:justify-center zs:focus:outline-hidden zs:focus-visible:ring-2'\n      ]\"\n      (click)=\"toggleChecked()\"\n      (keydown)=\"onKeyDown($event)\"\n    >\n      <i [class]=\"iconClasses()\"></i>\n    </span>\n  </div>\n\n  <!-- ===================== Label (ZS-label component) ===================== -->\n  <ZS-label [class]=\"(label() || hint()) ? 'zs:ml-1' : ''\"\n    [id]=\"Id() + '-label'\"\n    [label]=\"label()\"\n    [hint]=\"hint()\"\n    [hintId]=\"Id() + '-hint'\"\n    [size]=\"size()\"\n    [for]=\"Id()\"\n  ></ZS-label>\n</div>", styles: [""], dependencies: [{ kind: "component", type: Label, selector: "ZS-label", inputs: ["label", "hint", "hintId", "size", "required", "for"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: Checkbox, isStandalone: true, selector: "ZS-checkbox", inputs: { Id: { classPropertyName: "Id", publicName: "Id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, inputStyle: { classPropertyName: "inputStyle", publicName: "inputStyle", 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 }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", 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 }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: "<div class=\"zs:flex zs:items-center zs:justify-start zs:w-full zs:select-none\">\n  <!-- ===================== Checkbox Wrapper ===================== -->\n  <div\n    class=\"zs:cursor-pointer group leading-none\"\n  >\n    <!-- ===================== Hidden Input (Native for screen readers) ===================== -->\n    <input\n      type=\"checkbox\"\n      class=\"zs:hidden\"\n      [id]=\"Id()\"\n      [checked]=\"isChecked()\"\n      [disabled]=\"disabledOrReadonly()\"\n      (change)=\"toggleChecked()\"\n    />\n\n    <!-- ===================== Custom Accessible Checkbox ===================== -->\n    <span\n      role=\"'checkbox'\"\n      tabindex=\"0\"\n      [attr.aria-checked]=\"isChecked()\"\n      [attr.aria-disabled]=\"disabledOrReadonly()\"\n      [attr.aria-labelledby]=\"Id() + '-label'\"\n      [ngClass]=\"[\n        sizeClass(),\n        palette().checkboxTextPalette.checkBoxText,\n        palette().checkboxTextPalette.checkBoxTextHover,\n        palette().ringPalette.ring,\n        'zs:leading-none zs:inline-flex zs:items-center zs:justify-center zs:focus:outline-hidden zs:focus-visible:ring-2'\n      ]\"\n      (click)=\"toggleChecked()\"\n      (keydown)=\"onKeyDown($event)\"\n    >\n      <i [class]=\"iconClasses()\"></i>\n    </span>\n  </div>\n\n  <!-- ===================== Label (ZS-label component) ===================== -->\n  <ZS-label [class]=\"(label() || hint()) ? 'zs:ml-1' : ''\"\n    [id]=\"Id() + '-label'\"\n    [label]=\"label()\"\n    [hint]=\"hint()\"\n    [hintId]=\"Id() + '-hint'\"\n    [size]=\"size()\"\n    [for]=\"Id()\"\n  ></ZS-label>\n</div>", styles: [""], dependencies: [{ kind: "component", type: Label, selector: "ZS-label", inputs: ["label", "hint", "hintId", "size", "required", "for"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Checkbox, decorators: [{
             type: Component,
-            args: [{ selector: 'ZS-checkbox', imports: [Label, CommonModule], template: "<div class=\"zs:flex zs:items-center zs:justify-start zs:w-full zs:select-none\">\n  <!-- ===================== Checkbox Wrapper ===================== -->\n  <div\n    class=\"zs:cursor-pointer group leading-none\"\n  >\n    <!-- ===================== Hidden Input (Native for screen readers) ===================== -->\n    <input\n      type=\"checkbox\"\n      class=\"zs:hidden\"\n      [id]=\"Id()\"\n      [checked]=\"isChecked()\"\n      [disabled]=\"disabledOrReadonly()\"\n      (change)=\"toggleChecked()\"\n    />\n\n    <!-- ===================== Custom Accessible Checkbox ===================== -->\n    <span\n      role=\"'checkbox'\"\n      tabindex=\"0\"\n      [attr.aria-checked]=\"isChecked()\"\n      [attr.aria-disabled]=\"disabledOrReadonly()\"\n      [attr.aria-labelledby]=\"Id() + '-label'\"\n      [ngClass]=\"[\n        sizeClass(),\n        palette().checkBoxText,\n        palette().checkBoxTextHover,\n        palette().ring,\n        'zs:leading-none zs:inline-flex zs:items-center zs:justify-center zs:focus:outline-hidden zs:focus-visible:ring-2'\n      ]\"\n      (click)=\"toggleChecked()\"\n      (keydown)=\"onKeyDown($event)\"\n    >\n      <i [class]=\"iconClasses()\"></i>\n    </span>\n  </div>\n\n  <!-- ===================== Label (ZS-label component) ===================== -->\n  <ZS-label [class]=\"(label() || hint()) ? 'zs:ml-1' : ''\"\n    [id]=\"Id() + '-label'\"\n    [label]=\"label()\"\n    [hint]=\"hint()\"\n    [hintId]=\"Id() + '-hint'\"\n    [size]=\"size()\"\n    [for]=\"Id()\"\n  ></ZS-label>\n</div>" }]
+            args: [{ selector: 'ZS-checkbox', imports: [Label, CommonModule], template: "<div class=\"zs:flex zs:items-center zs:justify-start zs:w-full zs:select-none\">\n  <!-- ===================== Checkbox Wrapper ===================== -->\n  <div\n    class=\"zs:cursor-pointer group leading-none\"\n  >\n    <!-- ===================== Hidden Input (Native for screen readers) ===================== -->\n    <input\n      type=\"checkbox\"\n      class=\"zs:hidden\"\n      [id]=\"Id()\"\n      [checked]=\"isChecked()\"\n      [disabled]=\"disabledOrReadonly()\"\n      (change)=\"toggleChecked()\"\n    />\n\n    <!-- ===================== Custom Accessible Checkbox ===================== -->\n    <span\n      role=\"'checkbox'\"\n      tabindex=\"0\"\n      [attr.aria-checked]=\"isChecked()\"\n      [attr.aria-disabled]=\"disabledOrReadonly()\"\n      [attr.aria-labelledby]=\"Id() + '-label'\"\n      [ngClass]=\"[\n        sizeClass(),\n        palette().checkboxTextPalette.checkBoxText,\n        palette().checkboxTextPalette.checkBoxTextHover,\n        palette().ringPalette.ring,\n        'zs:leading-none zs:inline-flex zs:items-center zs:justify-center zs:focus:outline-hidden zs:focus-visible:ring-2'\n      ]\"\n      (click)=\"toggleChecked()\"\n      (keydown)=\"onKeyDown($event)\"\n    >\n      <i [class]=\"iconClasses()\"></i>\n    </span>\n  </div>\n\n  <!-- ===================== Label (ZS-label component) ===================== -->\n  <ZS-label [class]=\"(label() || hint()) ? 'zs:ml-1' : ''\"\n    [id]=\"Id() + '-label'\"\n    [label]=\"label()\"\n    [hint]=\"hint()\"\n    [hintId]=\"Id() + '-hint'\"\n    [size]=\"size()\"\n    [for]=\"Id()\"\n  ></ZS-label>\n</div>" }]
         }], propDecorators: { Id: [{ type: i0.Input, args: [{ isSignal: true, alias: "Id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], inputStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputStyle", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], isReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "isReadonly", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 // ==============================================================================
@@ -1894,7 +2196,11 @@ class FileInput {
     // ==============================================================================
     // Computed Properties
     // ==============================================================================
-    palette = computed(() => FormPaletteMap.get(this.inputStyle()), ...(ngDevMode ? [{ debugName: "palette" }] : []));
+    palette = computed(() => {
+        const inputPalette = inputPaletteMap.get(this.inputStyle());
+        const ringPalette = ringPaletteMap.get(this.inputStyle());
+        return { inputPalette, ringPalette };
+    }, ...(ngDevMode ? [{ debugName: "palette" }] : []));
     hasFiles = computed(() => this.files().size > 0, ...(ngDevMode ? [{ debugName: "hasFiles" }] : []));
     totalSize = computed(() => this.filesMapToList().reduce((sum, f) => sum + f.size, 0), ...(ngDevMode ? [{ debugName: "totalSize" }] : []));
     disabledOrReadonly = computed(() => this.disabled() || this.isReadonly(), ...(ngDevMode ? [{ debugName: "disabledOrReadonly" }] : []));
@@ -2052,11 +2358,11 @@ class FileInput {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: FileInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: FileInput, isStandalone: true, selector: "ZS-file", inputs: { Id: { classPropertyName: "Id", publicName: "Id", isSignal: true, isRequired: false, transformFunction: null }, iName: { classPropertyName: "iName", publicName: "iName", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, inputStyle: { classPropertyName: "inputStyle", publicName: "inputStyle", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, validateFns: { classPropertyName: "validateFns", publicName: "validateFns", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, allowPreview: { classPropertyName: "allowPreview", publicName: "allowPreview", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changeEv: "changeEv", files: "filesChange", touched: "touchedChange" }, viewQueries: [{ propertyName: "fileInputRef", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"zs:flex zs:flex-col zs:gap-2 zs:w-full\"\n  [ngClass]=\"disabled() ? 'zs:opacity-60' : ''\"\n  role=\"group\"\n  [attr.aria-labelledby]=\"Id() + '-label'\"\n  [attr.aria-describedby]=\"Id() + '-hint ' + Id() + '-error'\"\n>\n  <!-- ========================= Label & Hint ========================= -->\n  <ZS-label [class]=\"(label() || hint()) ? 'zs:mb-1' : ''\"\n    [label]=\"label()\"\n    [hint]=\"hint()\"\n    [required]=\"required()\"\n    [hintId]=\"Id() + '-hint'\"\n    [for]=\"Id()\"\n    [id]=\"Id() + '-label'\"\n  >\n  </ZS-label>\n\n  <!-- ================= Input ================= -->\n  <div\n    [class]=\"[\n      'zs:relative zs:rounded-xl zs:flex zs:flex-col zs:justify-center zs:items-center zs:gap-2 zs:border-2 zs:border-dashed zs:transition-all zs:duration-200',\n      palette().border,\n      palette().ring,\n      palette().borderHover,\n      palette().inputBg\n    ].join(' ')\"\n    [ngClass]=\"disabledOrReadonly() ? 'cursor-not-allowed' : 'cursor-pointer'\"\n    tabindex=\"0\"\n    role=\"button\"\n    [attr.aria-disabled]=\"disabledOrReadonly()\"\n    [attr.aria-label]=\"placeholder() || 'Upload file'\"\n    (keydown.enter)=\"!disabledOrReadonly() && fileInput.click()\"\n    (keydown.space)=\"!disabledOrReadonly() && fileInput.click()\"\n  >\n    <input\n      #fileInput\n      type=\"file\"\n      [id]=\"Id()\"\n      [name]=\"iName()\"\n      [attr.accept]=\"accept()\"\n      [attr.multiple]=\"multiple() ? '' : null\"\n      [attr.autofocus]=\"autofocus() ? true : null\"\n      class=\"zs:absolute zs:inset-0 zs:opacity-0 zs:cursor-pointer\"\n      [disabled]=\"disabledOrReadonly()\"\n      (change)=\"handleFileChange($event)\"\n      [attr.aria-required]=\"required()\"\n      [attr.aria-invalid]=\"!!error().length\"\n      [attr.aria-describedby]=\"Id() + '-hint ' + Id() + '-error'\"\n    />\n\n    <div class=\"zs:flex zs:flex-col zs:items-center zs:justify-center zs:text-center zs:py-6 zs:pointer-events-none zs:select-none\">\n      <i class=\"fa-solid fa-upload text-3xl mb-2\" [ngClass]=\"palette().text\" aria-hidden=\"true\"></i>\n      <p class=\"zs:text-sm zs:text-gray-500 zs:dark:text-gray-400\">\n        {{ placeholder() }}\n      </p>\n    </div>\n  </div>\n\n  <!-- ================= Files Preview ================= -->\n  @if (hasFiles()) {\n    <div\n      class=\"zs:flex zs:flex-col zs:gap-2 zs:mt-3\"\n      role=\"list\"\n      aria-label=\"Uploaded files\"\n    >\n      @for (entry of files().entries(); track entry[0]) {\n        <div\n          class=\"zs:flex zs:flex-col zs:gap-1 zs:p-2 zs:rounded-lg zs:border zs:focus:outline-hidden zs:focus:ring-2 zs:focus:ring-offset-2\"\n          [ngClass]=\"[palette().border, palette().inputBg]\"\n          role=\"listitem\"\n          tabindex=\"0\"\n        >\n          <span class=\"zs:block zs:text-sm zs:font-medium zs:truncate\">\n            {{ entry[1].name }}\n          </span>\n\n          <div class=\"zs:flex zs:items-center zs:justify-between zs:gap-4\">\n            <div class=\"zs:flex zs:items-center zs:gap-1\">\n              <i class=\"text-lg fa-solid fa-file\" [ngClass]=\"palette().text\" aria-hidden=\"true\"></i>\n              <span class=\"zs:text-xs zs:text-gray-500\">\n                {{ formatSize(entry[1].size) }}\n              </span>\n            </div>\n\n            <div class=\"zs:flex zs:gap-2\">\n              @if (allowPreview() && entry[1].url?.startsWith('blob:')) {\n                <ZS-button\n                  type=\"button\"\n                  (clickedEv)=\"preview(entry[1].url)\"\n                  [btnStyle]=\"inputStyle()\"\n                  size=\"sm\"\n                  aria-label=\"Preview {{ entry[1].name }}\"\n                >\n                  Preview\n                </ZS-button>\n              }\n\n              @if (!disabledOrReadonly()) {\n                <ZS-button\n                  type=\"button\"\n                  variant=\"outline\"\n                  btnStyle=\"danger\"\n                  (clickedEv)=\"removeFile(entry[0])\"\n                  icon=\"fa-solid fa-trash\"\n                  aria-label=\"Remove {{ entry[1].name }}\"\n                >\n                </ZS-button>\n              }\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- ========================= Error Messages ========================= -->\n  <ZS-input-errors\n    [Id]=\"Id() + '-error'\"\n    [errors]=\"[error()]\"\n    aria-live=\"assertive\"\n    role=\"alert\"\n  >\n  </ZS-input-errors>\n</div>\n", styles: [":host{@apply block w-full;}input[type=file]:disabled{@apply cursor-not-allowed opacity-60;}\n"], dependencies: [{ kind: "component", type: Label, selector: "ZS-label", inputs: ["label", "hint", "hintId", "size", "required", "for"] }, { kind: "component", type: InputErrors, selector: "ZS-input-errors", inputs: ["Id", "errors"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: Button, selector: "ZS-button", inputs: ["Id", "btnStyle", "variant", "size", "disabled", "icon", "type"], outputs: ["clickedEv"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: FileInput, isStandalone: true, selector: "ZS-file", inputs: { Id: { classPropertyName: "Id", publicName: "Id", isSignal: true, isRequired: false, transformFunction: null }, iName: { classPropertyName: "iName", publicName: "iName", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, inputStyle: { classPropertyName: "inputStyle", publicName: "inputStyle", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, validateFns: { classPropertyName: "validateFns", publicName: "validateFns", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, allowPreview: { classPropertyName: "allowPreview", publicName: "allowPreview", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changeEv: "changeEv", files: "filesChange", touched: "touchedChange" }, viewQueries: [{ propertyName: "fileInputRef", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"zs:flex zs:flex-col zs:gap-2 zs:w-full\"\n  [ngClass]=\"disabled() ? 'zs:opacity-60' : ''\"\n  role=\"group\"\n  [attr.aria-labelledby]=\"Id() + '-label'\"\n  [attr.aria-describedby]=\"Id() + '-hint ' + Id() + '-error'\"\n>\n  <!-- ========================= Label & Hint ========================= -->\n  <ZS-label [class]=\"(label() || hint()) ? 'zs:mb-1' : ''\"\n    [label]=\"label()\"\n    [hint]=\"hint()\"\n    [required]=\"required()\"\n    [hintId]=\"Id() + '-hint'\"\n    [for]=\"Id()\"\n    [id]=\"Id() + '-label'\"\n  >\n  </ZS-label>\n\n  <!-- ================= Input ================= -->\n  <div\n    [class]=\"[\n      'zs:relative zs:rounded-xl zs:flex zs:flex-col zs:justify-center zs:items-center zs:gap-2 zs:border-2 zs:border-dashed zs:transition-all zs:duration-200',\n      palette().inputPalette.border,\n      palette().ringPalette.ring,\n      palette().inputPalette.borderHover,\n      palette().inputPalette.inputBg\n    ].join(' ')\"\n    [ngClass]=\"disabledOrReadonly() ? 'cursor-not-allowed' : 'cursor-pointer'\"\n    tabindex=\"0\"\n    role=\"button\"\n    [attr.aria-disabled]=\"disabledOrReadonly()\"\n    [attr.aria-label]=\"placeholder() || 'Upload file'\"\n    (keydown.enter)=\"!disabledOrReadonly() && fileInput.click()\"\n    (keydown.space)=\"!disabledOrReadonly() && fileInput.click()\"\n  >\n    <input\n      #fileInput\n      type=\"file\"\n      [id]=\"Id()\"\n      [name]=\"iName()\"\n      [attr.accept]=\"accept()\"\n      [attr.multiple]=\"multiple() ? '' : null\"\n      [attr.autofocus]=\"autofocus() ? true : null\"\n      class=\"zs:absolute zs:inset-0 zs:opacity-0 zs:cursor-pointer\"\n      [disabled]=\"disabledOrReadonly()\"\n      (change)=\"handleFileChange($event)\"\n      [attr.aria-required]=\"required()\"\n      [attr.aria-invalid]=\"!!error().length\"\n      [attr.aria-describedby]=\"Id() + '-hint ' + Id() + '-error'\"\n    />\n\n    <div class=\"zs:flex zs:flex-col zs:items-center zs:justify-center zs:text-center zs:py-6 zs:pointer-events-none zs:select-none\">\n      <i class=\"fa-solid fa-upload text-3xl mb-2\" [ngClass]=\"palette().inputPalette.text\" aria-hidden=\"true\"></i>\n      <p class=\"zs:text-sm zs:text-gray-500 zs:dark:text-gray-400\">\n        {{ placeholder() }}\n      </p>\n    </div>\n  </div>\n\n  <!-- ================= Files Preview ================= -->\n  @if (hasFiles()) {\n    <div\n      class=\"zs:flex zs:flex-col zs:gap-2 zs:mt-3\"\n      role=\"list\"\n      aria-label=\"Uploaded files\"\n    >\n      @for (entry of files().entries(); track entry[0]) {\n        <div\n          class=\"zs:flex zs:flex-col zs:gap-1 zs:p-2 zs:rounded-lg zs:border zs:focus:outline-hidden zs:focus:ring-2 zs:focus:ring-offset-2\"\n          [ngClass]=\"[palette().inputPalette.border, palette().inputPalette.inputBg]\"\n          role=\"listitem\"\n          tabindex=\"0\"\n        >\n          <span class=\"zs:block zs:text-sm zs:font-medium zs:truncate\">\n            {{ entry[1].name }}\n          </span>\n\n          <div class=\"zs:flex zs:items-center zs:justify-between zs:gap-4\">\n            <div class=\"zs:flex zs:items-center zs:gap-1\">\n              <i class=\"text-lg fa-solid fa-file\" [ngClass]=\"palette().inputPalette.text\" aria-hidden=\"true\"></i>\n              <span class=\"zs:text-xs zs:text-gray-500\">\n                {{ formatSize(entry[1].size) }}\n              </span>\n            </div>\n\n            <div class=\"zs:flex zs:gap-2\">\n              @if (allowPreview() && entry[1].url?.startsWith('blob:')) {\n                <ZS-button\n                  type=\"button\"\n                  (clickedEv)=\"preview(entry[1].url)\"\n                  [btnStyle]=\"inputStyle()\"\n                  size=\"sm\"\n                  aria-label=\"Preview {{ entry[1].name }}\"\n                >\n                  Preview\n                </ZS-button>\n              }\n\n              @if (!disabledOrReadonly()) {\n                <ZS-button\n                  type=\"button\"\n                  variant=\"outline\"\n                  btnStyle=\"danger\"\n                  (clickedEv)=\"removeFile(entry[0])\"\n                  icon=\"fa-solid fa-trash\"\n                  aria-label=\"Remove {{ entry[1].name }}\"\n                >\n                </ZS-button>\n              }\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- ========================= Error Messages ========================= -->\n  <ZS-input-errors\n    [Id]=\"Id() + '-error'\"\n    [errors]=\"[error()]\"\n    aria-live=\"assertive\"\n    role=\"alert\"\n  >\n  </ZS-input-errors>\n</div>\n", styles: [":host{@apply block w-full;}input[type=file]:disabled{@apply cursor-not-allowed opacity-60;}\n"], dependencies: [{ kind: "component", type: Label, selector: "ZS-label", inputs: ["label", "hint", "hintId", "size", "required", "for"] }, { kind: "component", type: InputErrors, selector: "ZS-input-errors", inputs: ["Id", "errors"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: Button, selector: "ZS-button", inputs: ["Id", "btnStyle", "variant", "size", "disabled", "icon", "type"], outputs: ["clickedEv"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: FileInput, decorators: [{
             type: Component,
-            args: [{ selector: 'ZS-file', imports: [Label, InputErrors, CommonModule, Button], template: "<div\n  class=\"zs:flex zs:flex-col zs:gap-2 zs:w-full\"\n  [ngClass]=\"disabled() ? 'zs:opacity-60' : ''\"\n  role=\"group\"\n  [attr.aria-labelledby]=\"Id() + '-label'\"\n  [attr.aria-describedby]=\"Id() + '-hint ' + Id() + '-error'\"\n>\n  <!-- ========================= Label & Hint ========================= -->\n  <ZS-label [class]=\"(label() || hint()) ? 'zs:mb-1' : ''\"\n    [label]=\"label()\"\n    [hint]=\"hint()\"\n    [required]=\"required()\"\n    [hintId]=\"Id() + '-hint'\"\n    [for]=\"Id()\"\n    [id]=\"Id() + '-label'\"\n  >\n  </ZS-label>\n\n  <!-- ================= Input ================= -->\n  <div\n    [class]=\"[\n      'zs:relative zs:rounded-xl zs:flex zs:flex-col zs:justify-center zs:items-center zs:gap-2 zs:border-2 zs:border-dashed zs:transition-all zs:duration-200',\n      palette().border,\n      palette().ring,\n      palette().borderHover,\n      palette().inputBg\n    ].join(' ')\"\n    [ngClass]=\"disabledOrReadonly() ? 'cursor-not-allowed' : 'cursor-pointer'\"\n    tabindex=\"0\"\n    role=\"button\"\n    [attr.aria-disabled]=\"disabledOrReadonly()\"\n    [attr.aria-label]=\"placeholder() || 'Upload file'\"\n    (keydown.enter)=\"!disabledOrReadonly() && fileInput.click()\"\n    (keydown.space)=\"!disabledOrReadonly() && fileInput.click()\"\n  >\n    <input\n      #fileInput\n      type=\"file\"\n      [id]=\"Id()\"\n      [name]=\"iName()\"\n      [attr.accept]=\"accept()\"\n      [attr.multiple]=\"multiple() ? '' : null\"\n      [attr.autofocus]=\"autofocus() ? true : null\"\n      class=\"zs:absolute zs:inset-0 zs:opacity-0 zs:cursor-pointer\"\n      [disabled]=\"disabledOrReadonly()\"\n      (change)=\"handleFileChange($event)\"\n      [attr.aria-required]=\"required()\"\n      [attr.aria-invalid]=\"!!error().length\"\n      [attr.aria-describedby]=\"Id() + '-hint ' + Id() + '-error'\"\n    />\n\n    <div class=\"zs:flex zs:flex-col zs:items-center zs:justify-center zs:text-center zs:py-6 zs:pointer-events-none zs:select-none\">\n      <i class=\"fa-solid fa-upload text-3xl mb-2\" [ngClass]=\"palette().text\" aria-hidden=\"true\"></i>\n      <p class=\"zs:text-sm zs:text-gray-500 zs:dark:text-gray-400\">\n        {{ placeholder() }}\n      </p>\n    </div>\n  </div>\n\n  <!-- ================= Files Preview ================= -->\n  @if (hasFiles()) {\n    <div\n      class=\"zs:flex zs:flex-col zs:gap-2 zs:mt-3\"\n      role=\"list\"\n      aria-label=\"Uploaded files\"\n    >\n      @for (entry of files().entries(); track entry[0]) {\n        <div\n          class=\"zs:flex zs:flex-col zs:gap-1 zs:p-2 zs:rounded-lg zs:border zs:focus:outline-hidden zs:focus:ring-2 zs:focus:ring-offset-2\"\n          [ngClass]=\"[palette().border, palette().inputBg]\"\n          role=\"listitem\"\n          tabindex=\"0\"\n        >\n          <span class=\"zs:block zs:text-sm zs:font-medium zs:truncate\">\n            {{ entry[1].name }}\n          </span>\n\n          <div class=\"zs:flex zs:items-center zs:justify-between zs:gap-4\">\n            <div class=\"zs:flex zs:items-center zs:gap-1\">\n              <i class=\"text-lg fa-solid fa-file\" [ngClass]=\"palette().text\" aria-hidden=\"true\"></i>\n              <span class=\"zs:text-xs zs:text-gray-500\">\n                {{ formatSize(entry[1].size) }}\n              </span>\n            </div>\n\n            <div class=\"zs:flex zs:gap-2\">\n              @if (allowPreview() && entry[1].url?.startsWith('blob:')) {\n                <ZS-button\n                  type=\"button\"\n                  (clickedEv)=\"preview(entry[1].url)\"\n                  [btnStyle]=\"inputStyle()\"\n                  size=\"sm\"\n                  aria-label=\"Preview {{ entry[1].name }}\"\n                >\n                  Preview\n                </ZS-button>\n              }\n\n              @if (!disabledOrReadonly()) {\n                <ZS-button\n                  type=\"button\"\n                  variant=\"outline\"\n                  btnStyle=\"danger\"\n                  (clickedEv)=\"removeFile(entry[0])\"\n                  icon=\"fa-solid fa-trash\"\n                  aria-label=\"Remove {{ entry[1].name }}\"\n                >\n                </ZS-button>\n              }\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- ========================= Error Messages ========================= -->\n  <ZS-input-errors\n    [Id]=\"Id() + '-error'\"\n    [errors]=\"[error()]\"\n    aria-live=\"assertive\"\n    role=\"alert\"\n  >\n  </ZS-input-errors>\n</div>\n", styles: [":host{@apply block w-full;}input[type=file]:disabled{@apply cursor-not-allowed opacity-60;}\n"] }]
+            args: [{ selector: 'ZS-file', imports: [Label, InputErrors, CommonModule, Button], template: "<div\n  class=\"zs:flex zs:flex-col zs:gap-2 zs:w-full\"\n  [ngClass]=\"disabled() ? 'zs:opacity-60' : ''\"\n  role=\"group\"\n  [attr.aria-labelledby]=\"Id() + '-label'\"\n  [attr.aria-describedby]=\"Id() + '-hint ' + Id() + '-error'\"\n>\n  <!-- ========================= Label & Hint ========================= -->\n  <ZS-label [class]=\"(label() || hint()) ? 'zs:mb-1' : ''\"\n    [label]=\"label()\"\n    [hint]=\"hint()\"\n    [required]=\"required()\"\n    [hintId]=\"Id() + '-hint'\"\n    [for]=\"Id()\"\n    [id]=\"Id() + '-label'\"\n  >\n  </ZS-label>\n\n  <!-- ================= Input ================= -->\n  <div\n    [class]=\"[\n      'zs:relative zs:rounded-xl zs:flex zs:flex-col zs:justify-center zs:items-center zs:gap-2 zs:border-2 zs:border-dashed zs:transition-all zs:duration-200',\n      palette().inputPalette.border,\n      palette().ringPalette.ring,\n      palette().inputPalette.borderHover,\n      palette().inputPalette.inputBg\n    ].join(' ')\"\n    [ngClass]=\"disabledOrReadonly() ? 'cursor-not-allowed' : 'cursor-pointer'\"\n    tabindex=\"0\"\n    role=\"button\"\n    [attr.aria-disabled]=\"disabledOrReadonly()\"\n    [attr.aria-label]=\"placeholder() || 'Upload file'\"\n    (keydown.enter)=\"!disabledOrReadonly() && fileInput.click()\"\n    (keydown.space)=\"!disabledOrReadonly() && fileInput.click()\"\n  >\n    <input\n      #fileInput\n      type=\"file\"\n      [id]=\"Id()\"\n      [name]=\"iName()\"\n      [attr.accept]=\"accept()\"\n      [attr.multiple]=\"multiple() ? '' : null\"\n      [attr.autofocus]=\"autofocus() ? true : null\"\n      class=\"zs:absolute zs:inset-0 zs:opacity-0 zs:cursor-pointer\"\n      [disabled]=\"disabledOrReadonly()\"\n      (change)=\"handleFileChange($event)\"\n      [attr.aria-required]=\"required()\"\n      [attr.aria-invalid]=\"!!error().length\"\n      [attr.aria-describedby]=\"Id() + '-hint ' + Id() + '-error'\"\n    />\n\n    <div class=\"zs:flex zs:flex-col zs:items-center zs:justify-center zs:text-center zs:py-6 zs:pointer-events-none zs:select-none\">\n      <i class=\"fa-solid fa-upload text-3xl mb-2\" [ngClass]=\"palette().inputPalette.text\" aria-hidden=\"true\"></i>\n      <p class=\"zs:text-sm zs:text-gray-500 zs:dark:text-gray-400\">\n        {{ placeholder() }}\n      </p>\n    </div>\n  </div>\n\n  <!-- ================= Files Preview ================= -->\n  @if (hasFiles()) {\n    <div\n      class=\"zs:flex zs:flex-col zs:gap-2 zs:mt-3\"\n      role=\"list\"\n      aria-label=\"Uploaded files\"\n    >\n      @for (entry of files().entries(); track entry[0]) {\n        <div\n          class=\"zs:flex zs:flex-col zs:gap-1 zs:p-2 zs:rounded-lg zs:border zs:focus:outline-hidden zs:focus:ring-2 zs:focus:ring-offset-2\"\n          [ngClass]=\"[palette().inputPalette.border, palette().inputPalette.inputBg]\"\n          role=\"listitem\"\n          tabindex=\"0\"\n        >\n          <span class=\"zs:block zs:text-sm zs:font-medium zs:truncate\">\n            {{ entry[1].name }}\n          </span>\n\n          <div class=\"zs:flex zs:items-center zs:justify-between zs:gap-4\">\n            <div class=\"zs:flex zs:items-center zs:gap-1\">\n              <i class=\"text-lg fa-solid fa-file\" [ngClass]=\"palette().inputPalette.text\" aria-hidden=\"true\"></i>\n              <span class=\"zs:text-xs zs:text-gray-500\">\n                {{ formatSize(entry[1].size) }}\n              </span>\n            </div>\n\n            <div class=\"zs:flex zs:gap-2\">\n              @if (allowPreview() && entry[1].url?.startsWith('blob:')) {\n                <ZS-button\n                  type=\"button\"\n                  (clickedEv)=\"preview(entry[1].url)\"\n                  [btnStyle]=\"inputStyle()\"\n                  size=\"sm\"\n                  aria-label=\"Preview {{ entry[1].name }}\"\n                >\n                  Preview\n                </ZS-button>\n              }\n\n              @if (!disabledOrReadonly()) {\n                <ZS-button\n                  type=\"button\"\n                  variant=\"outline\"\n                  btnStyle=\"danger\"\n                  (clickedEv)=\"removeFile(entry[0])\"\n                  icon=\"fa-solid fa-trash\"\n                  aria-label=\"Remove {{ entry[1].name }}\"\n                >\n                </ZS-button>\n              }\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- ========================= Error Messages ========================= -->\n  <ZS-input-errors\n    [Id]=\"Id() + '-error'\"\n    [errors]=\"[error()]\"\n    aria-live=\"assertive\"\n    role=\"alert\"\n  >\n  </ZS-input-errors>\n</div>\n", styles: [":host{@apply block w-full;}input[type=file]:disabled{@apply cursor-not-allowed opacity-60;}\n"] }]
         }], propDecorators: { Id: [{ type: i0.Input, args: [{ isSignal: true, alias: "Id", required: false }] }], iName: [{ type: i0.Input, args: [{ isSignal: true, alias: "iName", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], inputStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputStyle", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], isReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "isReadonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], validateFns: [{ type: i0.Input, args: [{ isSignal: true, alias: "validateFns", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], allowPreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowPreview", required: false }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], changeEv: [{ type: i0.Output, args: ["changeEv"] }], files: [{ type: i0.Input, args: [{ isSignal: true, alias: "files", required: false }] }, { type: i0.Output, args: ["filesChange"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], fileInputRef: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }] } });
 
 // ==============================================================================
@@ -2173,9 +2479,10 @@ class Input {
     containerClasses = computed(() => {
         const baseClasses = 'zs:border zs:transition-all zs:duration-150 zs:focus-within:ring-2';
         const hasError = this.error().length;
-        let styleConfig = FormPaletteMap.get(this.inputStyle()) ?? FormPaletteMap.get('secondary');
+        let styleConfig = inputPaletteMap.get(this.inputStyle());
+        const ringConfig = ringPaletteMap.get(this.inputStyle());
         if (hasError) {
-            styleConfig = FormPaletteMap.get('danger');
+            styleConfig = inputPaletteMap.get('danger');
         }
         const disabledClass = this.disabled() ? 'zs:opacity-60' : '';
         const interactionClass = this.disabledOrReadonly()
@@ -2187,7 +2494,7 @@ class Input {
             styleConfig.borderHover,
             styleConfig.inputBg,
             styleConfig.text,
-            styleConfig.ring,
+            ringConfig.ring,
             disabledClass,
             interactionClass,
         ]
@@ -2431,9 +2738,6 @@ class Range {
     // Computed Properties
     // ==============================================
     disabledOrReadonly = computed(() => this.disabled() || this.isReadonly(), ...(ngDevMode ? [{ debugName: "disabledOrReadonly" }] : []));
-    palette = computed(() => {
-        return FormPaletteMap.get(this.inputStyle()) ?? FormPaletteMap.get('secondary');
-    }, ...(ngDevMode ? [{ debugName: "palette" }] : []));
     percent = computed(() => {
         const range = this.max() - this.min();
         return ((this.value() - this.min()) / range) * 100;
@@ -2469,6 +2773,11 @@ class Range {
         };
         return sizeClasses[this.size()];
     }, ...(ngDevMode ? [{ debugName: "gapCLasses" }] : []));
+    palette = computed(() => {
+        const buttonSolidPalette = buttonSolidPaletteMap.get(this.inputStyle());
+        const inputPalette = inputPaletteMap.get(this.inputStyle());
+        return { buttonSolidPalette, inputPalette };
+    }, ...(ngDevMode ? [{ debugName: "palette" }] : []));
     rangeClasses = computed(() => {
         const base = 'zs:relative zs:w-full zs:rounded-full zs:cursor-pointer';
         const sizeClasses = this.rangeSizeClasses('height');
@@ -2476,9 +2785,9 @@ class Range {
         const interactionClass = !this.disabledOrReadonly() ? 'zs:group' : '';
         return [
             sizeClasses,
-            this.palette().border,
-            this.palette().inputBg,
-            this.palette().text,
+            this.palette().inputPalette.border,
+            this.palette().inputPalette.inputBg,
+            this.palette().inputPalette.text,
             base,
             disabledClass,
             interactionClass
@@ -2486,8 +2795,8 @@ class Range {
     }, ...(ngDevMode ? [{ debugName: "rangeClasses" }] : []));
     ThumbClasses = computed(() => {
         return [
-            this.palette().btnBG,
-            this.palette().btnBGHover,
+            this.palette().buttonSolidPalette.btnBG,
+            this.palette().buttonSolidPalette.btnBGHover,
             this.dragging() ? 'zs:scale-110 zs:shadow-lg' : '',
             this.rangeSizeClasses('size')
         ].join(' ');
@@ -2561,11 +2870,11 @@ class Range {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Range, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Range, isStandalone: true, selector: "ZS-range", inputs: { Id: { classPropertyName: "Id", publicName: "Id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", 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 }, inputStyle: { classPropertyName: "inputStyle", publicName: "inputStyle", 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 }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "trackRef", first: true, predicate: ["track"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- ========================= Label ========================= -->\n<div class=\"zs:flex zs:flex-col zs:w-full zs:select-none\">\n  <ZS-label [class]=\"(label() || hint()) ? 'zs:mb-1' : ''\"\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [hintId]=\"Id() + '-hint'\"\n  [size]=\"size()\"\n  [for]=\"Id()\"\n  ></ZS-label>\n\n  <!-- ========================= Slider Container ========================= -->\n  <div class=\"zs:flex zs:items-center\"\n  [class]=\"gapCLasses()\">\n    \n    <!-- ========================= Track ========================= -->\n    <div\n      #track\n      [class]=\"rangeClasses()\"\n      (mousedown)=\"onMouseDown($event)\"\n    >\n      \n      <!-- ========================= Track Background ========================= -->\n      <div\n        class=\"zs:absolute zs:inset-0 zs:rounded-full zs:bg-linear-to-r zs:from-gray-200 zs:to-gray-300 zs:transition-all zs:duration-300 zs:group-hover:brightness-110\"\n        [ngClass]=\"[\n          ['secondary', 'dark'].includes(inputStyle()) ? 'zs:dark:from-gray-500 zs:dark:to-gray-600' : 'zs:dark:from-gray-700 zs:dark:to-gray-800',\n          disabledOrReadonly() ? 'zs:cursor-not-allowed' : ''\n        ]\"\n        ></div>\n\n      <!-- ========================= Fill (Progress) ========================= -->\n      <div\n        class=\"zs:absolute zs:left-0 zs:rounded-full zs:top-0 zs:h-full zs:transition-all zs:duration-200 zs:ease-out zs:shadow-sm\"\n        [style.width.%]=\"percent()\"\n        [ngClass]=\"[\n          disabledOrReadonly() ? 'zs:cursor-not-allowed' : '',\n          palette().btnBG,\n          palette().btnBGHover\n        ]\"\n      ></div>\n\n      <!-- ========================= Thumb (Handle) ========================= -->\n      <div\n        class=\"zs:absolute zs:top-1/2 zs:rounded-full zs:flex zs:items-center zs:justify-center \n        zs:-translate-y-1/2 zs:transition-all zs:duration-200 zs:ease-out zs:shadow-md \n        zs:group-hover:scale-110\"\n        [style.left]=\"calcThumbPosition()\"\n        [ngClass]=\"[ThumbClasses(), disabledOrReadonly() ? 'zs:cursor-not-allowed' : '']\"\n        role=\"slider\"\n        tabindex=\"0\"\n        [attr.id]=\"Id()\"\n        [attr.aria-valuemin]=\"min()\"\n        [attr.aria-valuemax]=\"max()\"\n        [attr.aria-valuenow]=\"value()\"\n        [attr.aria-disabled]=\"disabledOrReadonly() || null\"\n        [attr.aria-readonly]=\"isReadonly() || null\"\n        [attr.aria-labelledby]=\"Id() + '-label'\"\n        [attr.aria-describedby]=\"hint() ? Id() + '-hint' : null\"\n        aria-orientation=\"horizontal\"\n      >\n        <i class=\"fa-solid fa-circle zs:text-white\" [ngClass]=\"dotCLasses()\"></i>\n      </div>\n    </div>\n\n    <!-- ========================= Value Display ========================= -->\n    @if (showValue()) {\n      <div class=\"zs:text-sm zs:text-gray-600 zs:dark:text-gray-300 zs:font-medium\">\n        {{ value() }}\n      </div>\n    }\n  </div>\n</div>", styles: [".thumb-active{transition:transform .1s ease-in-out}\n"], dependencies: [{ kind: "component", type: Label, selector: "ZS-label", inputs: ["label", "hint", "hintId", "size", "required", "for"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Range, isStandalone: true, selector: "ZS-range", inputs: { Id: { classPropertyName: "Id", publicName: "Id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", 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 }, inputStyle: { classPropertyName: "inputStyle", publicName: "inputStyle", 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 }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "trackRef", first: true, predicate: ["track"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- ========================= Label ========================= -->\n<div class=\"zs:flex zs:flex-col zs:w-full zs:select-none\">\n  <ZS-label [class]=\"(label() || hint()) ? 'zs:mb-1' : ''\"\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [hintId]=\"Id() + '-hint'\"\n  [size]=\"size()\"\n  [for]=\"Id()\"\n  ></ZS-label>\n\n  <!-- ========================= Slider Container ========================= -->\n  <div class=\"zs:flex zs:items-center\"\n  [class]=\"gapCLasses()\">\n    \n    <!-- ========================= Track ========================= -->\n    <div\n      #track\n      [class]=\"rangeClasses()\"\n      (mousedown)=\"onMouseDown($event)\"\n    >\n      \n      <!-- ========================= Track Background ========================= -->\n      <div\n        class=\"zs:absolute zs:inset-0 zs:rounded-full zs:bg-linear-to-r zs:from-gray-200 zs:to-gray-300 zs:transition-all zs:duration-300 zs:group-hover:brightness-110\"\n        [ngClass]=\"[\n          ['secondary', 'dark'].includes(inputStyle()) ? 'zs:dark:from-gray-500 zs:dark:to-gray-600' : 'zs:dark:from-gray-700 zs:dark:to-gray-800',\n          disabledOrReadonly() ? 'zs:cursor-not-allowed' : ''\n        ]\"\n        ></div>\n\n      <!-- ========================= Fill (Progress) ========================= -->\n      <div\n        class=\"zs:absolute zs:left-0 zs:rounded-full zs:top-0 zs:h-full zs:transition-all zs:duration-200 zs:ease-out zs:shadow-sm\"\n        [style.width.%]=\"percent()\"\n        [ngClass]=\"[\n          disabledOrReadonly() ? 'zs:cursor-not-allowed' : '',\n          palette().buttonSolidPalette.btnBG,\n          palette().buttonSolidPalette.btnBGHover\n        ]\"\n      ></div>\n\n      <!-- ========================= Thumb (Handle) ========================= -->\n      <div\n        class=\"zs:absolute zs:top-1/2 zs:rounded-full zs:flex zs:items-center zs:justify-center \n        zs:-translate-y-1/2 zs:transition-all zs:duration-200 zs:ease-out zs:shadow-md \n        zs:group-hover:scale-110\"\n        [style.left]=\"calcThumbPosition()\"\n        [ngClass]=\"[ThumbClasses(), disabledOrReadonly() ? 'zs:cursor-not-allowed' : '']\"\n        role=\"slider\"\n        tabindex=\"0\"\n        [attr.id]=\"Id()\"\n        [attr.aria-valuemin]=\"min()\"\n        [attr.aria-valuemax]=\"max()\"\n        [attr.aria-valuenow]=\"value()\"\n        [attr.aria-disabled]=\"disabledOrReadonly() || null\"\n        [attr.aria-readonly]=\"isReadonly() || null\"\n        [attr.aria-labelledby]=\"Id() + '-label'\"\n        [attr.aria-describedby]=\"hint() ? Id() + '-hint' : null\"\n        aria-orientation=\"horizontal\"\n      >\n        <i class=\"fa-solid fa-circle zs:text-white\" [ngClass]=\"dotCLasses()\"></i>\n      </div>\n    </div>\n\n    <!-- ========================= Value Display ========================= -->\n    @if (showValue()) {\n      <div class=\"zs:text-sm zs:text-gray-600 zs:dark:text-gray-300 zs:font-medium\">\n        {{ value() }}\n      </div>\n    }\n  </div>\n</div>", styles: [".thumb-active{transition:transform .1s ease-in-out}\n"], dependencies: [{ kind: "component", type: Label, selector: "ZS-label", inputs: ["label", "hint", "hintId", "size", "required", "for"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Range, decorators: [{
             type: Component,
-            args: [{ selector: 'ZS-range', imports: [Label, CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- ========================= Label ========================= -->\n<div class=\"zs:flex zs:flex-col zs:w-full zs:select-none\">\n  <ZS-label [class]=\"(label() || hint()) ? 'zs:mb-1' : ''\"\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [hintId]=\"Id() + '-hint'\"\n  [size]=\"size()\"\n  [for]=\"Id()\"\n  ></ZS-label>\n\n  <!-- ========================= Slider Container ========================= -->\n  <div class=\"zs:flex zs:items-center\"\n  [class]=\"gapCLasses()\">\n    \n    <!-- ========================= Track ========================= -->\n    <div\n      #track\n      [class]=\"rangeClasses()\"\n      (mousedown)=\"onMouseDown($event)\"\n    >\n      \n      <!-- ========================= Track Background ========================= -->\n      <div\n        class=\"zs:absolute zs:inset-0 zs:rounded-full zs:bg-linear-to-r zs:from-gray-200 zs:to-gray-300 zs:transition-all zs:duration-300 zs:group-hover:brightness-110\"\n        [ngClass]=\"[\n          ['secondary', 'dark'].includes(inputStyle()) ? 'zs:dark:from-gray-500 zs:dark:to-gray-600' : 'zs:dark:from-gray-700 zs:dark:to-gray-800',\n          disabledOrReadonly() ? 'zs:cursor-not-allowed' : ''\n        ]\"\n        ></div>\n\n      <!-- ========================= Fill (Progress) ========================= -->\n      <div\n        class=\"zs:absolute zs:left-0 zs:rounded-full zs:top-0 zs:h-full zs:transition-all zs:duration-200 zs:ease-out zs:shadow-sm\"\n        [style.width.%]=\"percent()\"\n        [ngClass]=\"[\n          disabledOrReadonly() ? 'zs:cursor-not-allowed' : '',\n          palette().btnBG,\n          palette().btnBGHover\n        ]\"\n      ></div>\n\n      <!-- ========================= Thumb (Handle) ========================= -->\n      <div\n        class=\"zs:absolute zs:top-1/2 zs:rounded-full zs:flex zs:items-center zs:justify-center \n        zs:-translate-y-1/2 zs:transition-all zs:duration-200 zs:ease-out zs:shadow-md \n        zs:group-hover:scale-110\"\n        [style.left]=\"calcThumbPosition()\"\n        [ngClass]=\"[ThumbClasses(), disabledOrReadonly() ? 'zs:cursor-not-allowed' : '']\"\n        role=\"slider\"\n        tabindex=\"0\"\n        [attr.id]=\"Id()\"\n        [attr.aria-valuemin]=\"min()\"\n        [attr.aria-valuemax]=\"max()\"\n        [attr.aria-valuenow]=\"value()\"\n        [attr.aria-disabled]=\"disabledOrReadonly() || null\"\n        [attr.aria-readonly]=\"isReadonly() || null\"\n        [attr.aria-labelledby]=\"Id() + '-label'\"\n        [attr.aria-describedby]=\"hint() ? Id() + '-hint' : null\"\n        aria-orientation=\"horizontal\"\n      >\n        <i class=\"fa-solid fa-circle zs:text-white\" [ngClass]=\"dotCLasses()\"></i>\n      </div>\n    </div>\n\n    <!-- ========================= Value Display ========================= -->\n    @if (showValue()) {\n      <div class=\"zs:text-sm zs:text-gray-600 zs:dark:text-gray-300 zs:font-medium\">\n        {{ value() }}\n      </div>\n    }\n  </div>\n</div>", styles: [".thumb-active{transition:transform .1s ease-in-out}\n"] }]
+            args: [{ selector: 'ZS-range', imports: [Label, CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- ========================= Label ========================= -->\n<div class=\"zs:flex zs:flex-col zs:w-full zs:select-none\">\n  <ZS-label [class]=\"(label() || hint()) ? 'zs:mb-1' : ''\"\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [hintId]=\"Id() + '-hint'\"\n  [size]=\"size()\"\n  [for]=\"Id()\"\n  ></ZS-label>\n\n  <!-- ========================= Slider Container ========================= -->\n  <div class=\"zs:flex zs:items-center\"\n  [class]=\"gapCLasses()\">\n    \n    <!-- ========================= Track ========================= -->\n    <div\n      #track\n      [class]=\"rangeClasses()\"\n      (mousedown)=\"onMouseDown($event)\"\n    >\n      \n      <!-- ========================= Track Background ========================= -->\n      <div\n        class=\"zs:absolute zs:inset-0 zs:rounded-full zs:bg-linear-to-r zs:from-gray-200 zs:to-gray-300 zs:transition-all zs:duration-300 zs:group-hover:brightness-110\"\n        [ngClass]=\"[\n          ['secondary', 'dark'].includes(inputStyle()) ? 'zs:dark:from-gray-500 zs:dark:to-gray-600' : 'zs:dark:from-gray-700 zs:dark:to-gray-800',\n          disabledOrReadonly() ? 'zs:cursor-not-allowed' : ''\n        ]\"\n        ></div>\n\n      <!-- ========================= Fill (Progress) ========================= -->\n      <div\n        class=\"zs:absolute zs:left-0 zs:rounded-full zs:top-0 zs:h-full zs:transition-all zs:duration-200 zs:ease-out zs:shadow-sm\"\n        [style.width.%]=\"percent()\"\n        [ngClass]=\"[\n          disabledOrReadonly() ? 'zs:cursor-not-allowed' : '',\n          palette().buttonSolidPalette.btnBG,\n          palette().buttonSolidPalette.btnBGHover\n        ]\"\n      ></div>\n\n      <!-- ========================= Thumb (Handle) ========================= -->\n      <div\n        class=\"zs:absolute zs:top-1/2 zs:rounded-full zs:flex zs:items-center zs:justify-center \n        zs:-translate-y-1/2 zs:transition-all zs:duration-200 zs:ease-out zs:shadow-md \n        zs:group-hover:scale-110\"\n        [style.left]=\"calcThumbPosition()\"\n        [ngClass]=\"[ThumbClasses(), disabledOrReadonly() ? 'zs:cursor-not-allowed' : '']\"\n        role=\"slider\"\n        tabindex=\"0\"\n        [attr.id]=\"Id()\"\n        [attr.aria-valuemin]=\"min()\"\n        [attr.aria-valuemax]=\"max()\"\n        [attr.aria-valuenow]=\"value()\"\n        [attr.aria-disabled]=\"disabledOrReadonly() || null\"\n        [attr.aria-readonly]=\"isReadonly() || null\"\n        [attr.aria-labelledby]=\"Id() + '-label'\"\n        [attr.aria-describedby]=\"hint() ? Id() + '-hint' : null\"\n        aria-orientation=\"horizontal\"\n      >\n        <i class=\"fa-solid fa-circle zs:text-white\" [ngClass]=\"dotCLasses()\"></i>\n      </div>\n    </div>\n\n    <!-- ========================= Value Display ========================= -->\n    @if (showValue()) {\n      <div class=\"zs:text-sm zs:text-gray-600 zs:dark:text-gray-300 zs:font-medium\">\n        {{ value() }}\n      </div>\n    }\n  </div>\n</div>", styles: [".thumb-active{transition:transform .1s ease-in-out}\n"] }]
         }], ctorParameters: () => [], propDecorators: { Id: [{ type: i0.Input, args: [{ isSignal: true, alias: "Id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", 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 }] }], inputStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputStyle", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], isReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "isReadonly", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], trackRef: [{ type: i0.ViewChild, args: ['track', { isSignal: true }] }] } });
 
 // =================================================================================================
@@ -2617,11 +2926,13 @@ class Select {
     // =================================================================================================
     styleEntry = computed(() => {
         const hasError = this.error().length;
-        let styleEntry = FormPaletteMap.get(this.inputStyle()) ?? FormPaletteMap.get('secondary');
+        let inputEntry = inputPaletteMap.get(this.inputStyle());
+        let selectEntry = selectPaletteMap.get(this.inputStyle());
         if (hasError) {
-            styleEntry = FormPaletteMap.get('danger');
+            selectEntry = selectPaletteMap.get('danger');
+            inputEntry = inputPaletteMap.get('danger');
         }
-        return styleEntry;
+        return { inputEntry, selectEntry };
     }, ...(ngDevMode ? [{ debugName: "styleEntry" }] : []));
     disabledOrReadonly = computed(() => this.disabled() || this.isReadonly(), ...(ngDevMode ? [{ debugName: "disabledOrReadonly" }] : []));
     filteredItems = computed(() => {
@@ -2642,22 +2953,27 @@ class Select {
         const cursorCls = this.disabledOrReadonly()
             ? 'zs:cursor-not-allowed'
             : 'zs:cursor-text';
+        const inputEntry = this.styleEntry().inputEntry;
         return [
             base,
-            this.styleEntry().border,
-            this.styleEntry().inputBg,
-            this.styleEntry().text,
-            this.styleEntry().borderHover,
+            inputEntry.border,
+            inputEntry.borderHover,
+            inputEntry.inputBg,
+            inputEntry.text,
             disabledCls,
             cursorCls
         ].filter(Boolean).join(' ');
     }, ...(ngDevMode ? [{ debugName: "containerClasses" }] : []));
     clearClass = computed(() => {
         const base = 'zs:mt-2 zs:text-sm zs:flex zs:items-center zs:transition-colors';
-        return [base, this.styleEntry().text, this.styleEntry().textHover].filter(Boolean).join(' ');
+        return [
+            base,
+            this.styleEntry().selectEntry.cleartext,
+            this.styleEntry().selectEntry.cleartexthover
+        ].filter(Boolean).join(' ');
     }, ...(ngDevMode ? [{ debugName: "clearClass" }] : []));
     showItemsClass = computed(() => {
-        return this.styleEntry()?.bgSelect ?? '';
+        return this.styleEntry().selectEntry.bgSelect ?? '';
     }, ...(ngDevMode ? [{ debugName: "showItemsClass" }] : []));
     error = computed(() => {
         const selectedItems = this.selectedItems();
@@ -2683,7 +2999,7 @@ class Select {
     // =================================================================================================
     getBgSelectClasses = (selected) => {
         return selected
-            ? `${this.styleEntry().bgSelect} zs:hover:opacity-80`
+            ? `${this.styleEntry().selectEntry.bgSelect} zs:hover:opacity-80`
             : 'zs:hover:bg-gray-200/50 zs:dark:hover:bg-gray-600/40';
     };
     // =================================================================================================
@@ -2863,5 +3179,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ALERT_CONFIG, Alert, AlertService, Button, Card, Carousel, Checkbox, ColorMapping, Connection, ExtractorService, FileInput, Form, FormPaletteMap, Input, InputErrors, Label, Modal, NavItem, NavItemService, Navbar, NgxZsComponent, Page404, Pagination, Range, ScrollToTop, Select, Spinner, ThemeToggle, Toggle };
+export { ALERT_CONFIG, Alert, AlertService, Button, Card, Carousel, Checkbox, ColorMapping, Connection, ExtractorService, FileInput, Form, Input, InputErrors, Label, Modal, NavItem, NavItemService, Navbar, NgxZsComponent, Page404, Pagination, Range, ScrollToTop, Select, Spinner, ThemeToggle, Toggle, buttonOutlinePaletteMap, buttonSolidPaletteMap, cardPaletteMap, checkboxTextPaletteMap, inputPaletteMap, modalPaletteMap, page404PaletteMap, ringPaletteMap, selectPaletteMap, unifiedPaletteMap };
 //# sourceMappingURL=ziadshalaby-ngx-zs-component.mjs.map