cax-design-system 2.1.0 → 2.3.0

package/resources/cax.scss

@@ -214,6 +214,39 @@
         padding: 0;
         border-radius: 50%;
     }
+
+    .cax-badge-button-wrapper {
+        position: relative;
+        display: inline-flex;
+
+        .cax-badge {
+            position: absolute;
+            top: -8px;
+            right: -8px;
+            transform: none;
+            min-width: 20px;
+            height: 20px;
+            line-height: 20px;
+            font-size: 12px;
+            z-index: 1;
+        }
+    }
+
+    .cax-button-badge {
+        position: relative !important;
+
+        .cax-badge {
+            position: absolute;
+            top: 0;
+            right: 0;
+            transform: translate(50%, -50%);
+            z-index: 1;
+            min-width: 1.5rem;
+            height: 1.5rem;
+            line-height: 1.5rem;
+            font-size: 0.75rem;
+        }
+    }
 }
 
 @layer cax {
@@ -945,127 +978,6 @@
             background-color: transparent;
         }
     }
-
-    .cax-autocomplete .cax-autocomplete-loader {
-    }
-    .cax-autocomplete.cax-autocomplete-dd .cax-autocomplete-loader {
-        right: 3.25rem;
-    }
-    .cax-autocomplete:not(.cax-disabled):hover .cax-autocomplete-multiple-container {
-        border-color: #52525b;
-    }
-    .cax-autocomplete:not(.cax-disabled).cax-focus .cax-autocomplete-multiple-container {
-        outline: 1px solid var(--cax-focus-ring-color);
-        outline-offset: -1px;
-        box-shadow: none;
-        border-color: #52525b;
-    }
-    .cax-autocomplete .cax-autocomplete-multiple-container {
-        padding: 0.25rem 0.75rem;
-        gap: 0.5rem;
-    }
-    .cax-autocomplete .cax-autocomplete-multiple-container .cax-autocomplete-input-token {
-        padding: 0.25rem 0;
-    }
-    .cax-autocomplete .cax-autocomplete-multiple-container .cax-autocomplete-input-token input {
-        font-family: var(--font-family);
-        font-feature-settings: var(--font-feature-settings, normal);
-        font-size: 1rem;
-        color: #ffffff;
-        padding: 0;
-        margin: 0;
-    }
-    .cax-autocomplete .cax-autocomplete-multiple-container .cax-autocomplete-token {
-        padding: 0.25rem 0.75rem;
-        background: #3f3f46;
-        color: #ffffff;
-        border-radius: 16px;
-    }
-    .cax-autocomplete .cax-autocomplete-multiple-container .cax-autocomplete-token .cax-autocomplete-token-icon {
-        margin-left: 0.5rem;
-    }
-    .cax-autocomplete .cax-autocomplete-multiple-container .cax-autocomplete-token.cax-focus {
-        background: #3f3f46;
-        color: #ffffff;
-    }
-    .cax-autocomplete.cax-invalid.cax-component > .cax-inputtext {
-        border-color: #fca5a5;
-    }
-
-    .cax-autocomplete-panel {
-        background: var(--white-100);
-        color: var(--black-100);
-        border: 1px solid var(--grey-200);
-        border-radius: 7px;
-        box-shadow:
-            0 4px 6px -1px rgba(0, 0, 0, 0.1),
-            0 2px 4px -2px rgba(0, 0, 0, 0.1);
-    }
-    .cax-autocomplete-panel .cax-autocomplete-items {
-        padding: 0.25rem 0.25rem;
-    }
-    .cax-autocomplete-panel .cax-autocomplete-items .cax-autocomplete-item {
-        margin: 2px 0;
-        padding: 0.5rem 0.75rem;
-        border: 0 none;
-        color: var(--grey-900);
-        background: var(--white-100);
-        transition:
-            background-color 0.2s,
-            color 0.2s,
-            border-color 0.2s,
-            box-shadow 0.2s,
-            outline-color 0.2s;
-        border-radius: 4px;
-    }
-    .cax-autocomplete-panel .cax-autocomplete-items .cax-autocomplete-item:first-child {
-        margin-top: 0;
-    }
-    .cax-autocomplete-panel .cax-autocomplete-items .cax-autocomplete-item.cax-highlight {
-        color: var(--grey-900);
-        background: var(--grey-100);
-    }
-    .cax-autocomplete-panel .cax-autocomplete-items .cax-autocomplete-item.cax-highlight.cax-focus {
-        background: rgba(34, 211, 238, 0.24);
-    }
-    .cax-autocomplete-panel .cax-autocomplete-items .cax-autocomplete-item:not(.cax-highlight):not(.cax-disabled).cax-focus {
-        color: #ffffff;
-        background: rgba(255, 255, 255, 0.08);
-    }
-    .cax-autocomplete-panel .cax-autocomplete-items .cax-autocomplete-item:not(.cax-highlight):not(.cax-disabled):hover {
-        color: var(--black-100);
-        background: var(--grey-100);
-    }
-    .cax-autocomplete-panel .cax-autocomplete-items .cax-autocomplete-item-group {
-        margin: 0;
-        padding: 0.5rem 0.75rem;
-        color: #71717a;
-        background: #18181b;
-        font-weight: 600;
-    }
-    .cax-autocomplete-panel .cax-autocomplete-items .cax-autocomplete-empty-message {
-        padding: 0.5rem 0.75rem;
-        color: var(--grey-900);
-        background: var(--white-100);
-    }
-
-    cax-autocomplete.ng-dirty.ng-invalid > .cax-autocomplete > .cax-inputtext {
-        border-color: #fca5a5;
-    }
-
-    cax-autocomplete.cax-autocomplete-clearable .cax-inputtext {
-        padding-left: 1.9rem;
-        padding-right: 1.9rem;
-    }
-    cax-autocomplete.cax-autocomplete-clearable .cax-autocomplete-clear-icon {
-        color: #a1a1aa;
-        // left: 11rem;
-    }
-
-    cax-autocomplete.cax-autocomplete-clearable .cax-autocomplete-dd .cax-autocomplete-clear-icon {
-        color: #a1a1aa;
-        right: 3.25rem;
-    }
     .cax-cascadeselect {
         border: 1px solid var(--neutral-200);
         transition:
@@ -1420,43 +1332,6 @@
         color: var(--neutral-900);
     }
 
-    cax-inputnumber.ng-dirty.ng-invalid > .cax-inputnumber > .cax-inputtext {
-        border-color: #fca5a5;
-    }
-
-    cax-inputnumber.cax-inputnumber-clearable .cax-inputnumber-input {
-        padding-right: 2.5rem;
-    }
-    cax-inputnumber.cax-inputnumber-clearable .cax-inputnumber-clear-icon {
-        color: #a1a1aa;
-        right: 0.75rem;
-    }
-
-    cax-inputnumber.cax-inputnumber-clearable .cax-inputnumber-buttons-stacked .cax-inputnumber-clear-icon {
-        right: 3.25rem;
-    }
-    cax-inputnumber.cax-inputnumber-clearable .cax-inputnumber-buttons-horizontal .cax-inputnumber-clear-icon {
-        right: 3.25rem;
-    }
-
-    cax-inputnumber.cax-inputnumber.cax-variant-filled > .cax-inputnumber-input {
-        background-color: #27272a;
-    }
-    cax-inputnumber.cax-inputnumber.cax-variant-filled > .cax-inputnumber-input:enabled:hover {
-        background-color: var(--neutral-500);
-    }
-    cax-inputnumber.cax-inputnumber.cax-variant-filled > .cax-inputnumber-input:enabled:focus {
-        background-color: #27272a;
-    }
-    .cax-inputnumber-input {
-        width: 46px;
-        height: 40px;
-        border-radius: 5px;
-        border: 1px solid var(--neutral-200);
-        color: var(--neutral-500);
-        font-weight: 400;
-    }
-
     .cax-inputotp {
         display: flex;
         align-items: center;
@@ -2315,22 +2190,6 @@
         background-color: rgba(0, 0, 0, 0.4);
     }
 
-    .cax-splitbutton {
-        border-radius: 6px;
-    }
-    .cax-splitbutton.cax-button-rounded {
-        border-radius: 2rem;
-    }
-    .cax-splitbutton.cax-button-rounded > .cax-button {
-        border-radius: 2rem;
-    }
-    .cax-splitbutton.cax-button-raised {
-        box-shadow:
-            0 3px 1px -2px rgba(0, 0, 0, 0.2),
-            0 2px 2px 0 rgba(0, 0, 0, 0.14),
-            0 1px 5px 0 rgba(0, 0, 0, 0.12);
-    }
-
     .cax-carousel .cax-carousel-content .cax-carousel-prev,
     .cax-carousel .cax-carousel-content .cax-carousel-next {
         width: 1.75rem;
@@ -2825,32 +2684,6 @@
         background: #18181b;
         margin: 0;
     }
-
-    .cax-timeline .cax-timeline-event-marker {
-        border: 2px solid #3f3f46;
-        border-radius: 50%;
-        width: 1.125rem;
-        height: 1.125rem;
-        background-color: #020617;
-    }
-    .cax-timeline .cax-timeline-event-connector {
-        background-color: #3f3f46;
-    }
-    .cax-timeline.cax-timeline-vertical .cax-timeline-event-opposite,
-    .cax-timeline.cax-timeline-vertical .cax-timeline-event-content {
-        padding: 0 1rem;
-    }
-    .cax-timeline.cax-timeline-vertical .cax-timeline-event-connector {
-        width: 2px;
-    }
-    .cax-timeline.cax-timeline-horizontal .cax-timeline-event-opposite,
-    .cax-timeline.cax-timeline-horizontal .cax-timeline-event-content {
-        padding: 1rem 0;
-    }
-    .cax-timeline.cax-timeline-horizontal .cax-timeline-event-connector {
-        height: 2px;
-    }
-
     .cax-tree {
         border: 1px solid var(--neutral-200);
         background: var(--white-100);
@@ -3299,74 +3132,7 @@
         border-bottom-right-radius: 6px;
     }
 
-    .cax-accordion .cax-accordion-header .cax-accordion-header-link {
-        padding: 1.125rem 1.125rem 1.125rem 1.125rem;
-        border: 1px solid #e0e5eb;
-        color: var(--neutral-900);
-        background: var(--neutral-300);
-        font-weight: 600;
-        border-radius: 6px;
-        font-size: 16px;
-        border-bottom: 1px solid #e0e5eb;
-        transition:
-            background-color 0.2s,
-            color 0.2s,
-            border-color 0.2s,
-            box-shadow 0.2s,
-            outline-color 0.2s;
-    }
-    .cax-accordion .cax-accordion-header .cax-accordion-header-link .cax-accordion-toggle-icon {
-        margin-right: 0.5rem;
-    }
-
-    .cax-accordion .cax-accordion-header:not(.cax-disabled).cax-highlight .cax-accordion-header-link {
-        background: var(--neutral-300);
-        border-color: 1px solid #e0e5eb;
-        color: var(--neutral-900);
-        border-bottom-right-radius: 0;
-        border-bottom-left-radius: 0;
-    }
-
-    .cax-accordion .cax-accordion-content {
-        padding: 0 1.125rem 1.125rem 1.125rem;
-        border: 1px solid #e0e5eb;
-        background: var(--white-100);
-        color: var(--neutral-900);
-        font-size: 0.875rem;
-        border-top-right-radius: 0;
-        border-top-left-radius: 0;
-        border-bottom-right-radius: 6px;
-        border-bottom-left-radius: 6px;
-    }
-    .cax-accordion cax-accordiontab .cax-accordion-tab {
-        margin-bottom: 0;
-    }
-    .cax-accordion cax-accordiontab .cax-accordion-header .cax-accordion-header-link {
-        border-radius: 0;
-    }
-    .cax-accordion cax-accordiontab .cax-accordion-content {
-        border-radius: 0;
-    }
-    .cax-accordion cax-accordiontab:not(:first-child) .cax-accordion-header .cax-accordion-header-link {
-        border-top: 0 none;
-    }
-    .cax-accordion cax-accordiontab:not(:first-child) .cax-accordion-header:not(.cax-highlight):not(.cax-disabled):hover .cax-accordion-header-link,
-    .cax-accordion cax-accordiontab:not(:first-child) .cax-accordion-header:not(.cax-disabled).cax-highlight:hover .cax-accordion-header-link {
-        border-top: 0 none;
-    }
-    .cax-accordion cax-accordiontab:first-child .cax-accordion-header .cax-accordion-header-link {
-        border-top-right-radius: 6px;
-        border-top-left-radius: 6px;
-    }
-    .cax-accordion cax-accordiontab:last-child .cax-accordion-header:not(.cax-highlight) .cax-accordion-header-link {
-        border-bottom-right-radius: 6px;
-        border-bottom-left-radius: 6px;
-    }
-    .cax-accordion cax-accordiontab:last-child .cax-accordion-content {
-        border-bottom-right-radius: 6px;
-        border-bottom-left-radius: 6px;
-    }
-
+   
     .cax-card {
         background: var(--white-900);
         color: var(--neutral-900);
@@ -3921,52 +3687,6 @@
         margin-left: 1rem;
     }
 
-    .cax-overlaypanel {
-        background: var(--neutral-100);
-        color: var(--neutral-700);
-        border: 1px solid var(--neutral-700);
-        border-radius: 7px;
-    }
-    .cax-overlaypanel .cax-overlaypanel-content {
-        padding: 0 1.125rem 1.125rem 1.125rem;
-    }
-    .cax-overlaypanel .cax-overlaypanel-close {
-        background: #22d3ee;
-        color: #020617;
-        width: 1.75rem;
-        height: 1.75rem;
-        transition:
-            background-color 0.2s,
-            color 0.2s,
-            border-color 0.2s,
-            box-shadow 0.2s,
-            outline-color 0.2s;
-        border-radius: 50%;
-        position: absolute;
-        top: -0.875rem;
-        right: -0.875rem;
-    }
-    .cax-overlaypanel .cax-overlaypanel-close:enabled:hover {
-        background: #67e8f9;
-        color: #020617;
-    }
-    .cax-overlaypanel:after {
-        border: solid transparent;
-        border-color: rgba(24, 24, 27, 0);
-        border-bottom-color: #18181b;
-    }
-    .cax-overlaypanel:before {
-        border: solid transparent;
-        border-color: rgba(63, 63, 70, 0);
-        border-bottom-color: #3c3c43;
-    }
-    .cax-overlaypanel.cax-overlaypanel-flipped:after {
-        border-top-color: #18181b;
-    }
-    .cax-overlaypanel.cax-overlaypanel-flipped:before {
-        border-top-color: #3f3f46;
-    }
-
     .cax-tooltip .cax-tooltip-text {
         background: var(--neutral-800);
         color: #ffffff;
@@ -5045,58 +4765,7 @@
         padding-left: 0.5rem;
         padding-right: 0.5rem;
     }
-
-    .cax-steps .cax-steps-item .cax-menuitem-link {
-        background: transparent;
-        transition:
-            background-color 0.2s,
-            color 0.2s,
-            border-color 0.2s,
-            box-shadow 0.2s,
-            outline-color 0.2s;
-        border-radius: 6px;
-        background: #18181b;
-    }
-    .cax-steps .cax-steps-item .cax-menuitem-link .cax-steps-number {
-        color: #a1a1aa;
-        border: 1px solid #3f3f46;
-        background: #18181b;
-        min-width: 2rem;
-        height: 2rem;
-        line-height: 2rem;
-        font-size: 1.143rem;
-        z-index: 1;
-        border-radius: 50%;
-    }
-    .cax-steps .cax-steps-item .cax-menuitem-link .cax-steps-title {
-        margin-top: 0.5rem;
-        color: #ffffff;
-    }
-    .cax-steps .cax-steps-item .cax-menuitem-link:not(.cax-disabled):focus-visible {
-        outline: 1px solid var(--cax-focus-ring-color);
-        outline-offset: 2px;
-        box-shadow: none;
-    }
-    .cax-steps .cax-steps-item.cax-highlight .cax-steps-number {
-        background: rgba(34, 211, 238, 0.16);
-        color: rgba(255, 255, 255, 0.87);
-    }
-    .cax-steps .cax-steps-item.cax-highlight .cax-steps-title {
-        font-weight: 500;
-        color: #ffffff;
-    }
-    .cax-steps .cax-steps-item:before {
-        content: ' ';
-        border-top: 1px solid #3f3f46;
-        width: 100%;
-        top: 50%;
-        left: 0;
-        display: block;
-        position: absolute;
-        margin-top: -1rem;
-    }
-
-    .cax-tabmenu .cax-tabmenu-nav {
+    .cax-tabmenu .cax-tabmenu-nav {
         background: #18181b;
         border: 1px solid #3f3f46;
         border-width: 0 0 1px 0;
@@ -5176,15 +4845,18 @@
     }
 
     .cax-tieredmenu {
-        padding: 0.25rem 0.25rem;
-        color: #ffffff;
-        border: 1px solid #e3e4e6;
-        border-radius: 12px;
-        width: 12.5rem;
+        padding: var(--space-150) var(--space-50) var(--space-150) var(--space-50);
+        color: var(--white-100);
+        border: 1px solid var(--neutral-200);
+        border-radius: var(--radius-100);
+        min-width: 9.5rem;
     }
     .cax-tieredmenu.cax-tieredmenu-overlay {
         background: var(--white-100);
-        border: 1px solid #e3e4e6;
+        border: 1px solid var(--neutral-200);
+        box-shadow:
+            var(--shadow-lg-1) #16181d14,
+            var(--shadow-lg-2) #16181d14;
     }
     .cax-tieredmenu .cax-tieredmenu-root-list {
         outline: 0 none;
@@ -5199,7 +4871,7 @@
         border-radius: 6px;
     }
     .cax-tieredmenu .cax-menuitem > .cax-menuitem-content {
-        color: #ffffff;
+        color: var(--white-100);
         transition:
             background-color 0.2s,
             color 0.2s,
@@ -5740,23 +5412,6 @@
     }
 }
 @layer cax {
-    .cax-accordion .cax-accordion-header .cax-accordion-header-link {
-        border-radius: 6px !important;
-        flex-direction: row-reverse;
-        justify-content: space-between;
-    }
-    .cax-accordion .cax-accordion-header .cax-accordion-header-link .cax-accordion-toggle-icon {
-        transform: rotate(90deg);
-    }
-    .cax-accordion .cax-accordion-header.cax-highlight .cax-accordion-toggle-icon {
-        transform: rotate(-180deg);
-    }
-    .cax-accordion .cax-accordion-header:not(.cax-disabled) .cax-accordion-header-link:focus-visible {
-        outline-offset: -2px;
-    }
-    .cax-accordion cax-accordiontab:last-of-type .cax-accordion-tab {
-        border-bottom: 0 none;
-    }
 
     .cax-autocomplete .cax-autocomplete-multiple-container {
         padding: 0.25rem 0.25rem;
@@ -6006,73 +5661,6 @@
         // padding: 0.5rem;
     }
 
-    .cax-inputnumber.cax-inputnumber-buttons-stacked {
-        position: relative;
-    }
-    .cax-inputnumber.cax-inputnumber-buttons-stacked .cax-inputnumber-input {
-        border-top-right-radius: 5px;
-        border-bottom-right-radius: 5px;
-    }
-    .cax-inputnumber.cax-inputnumber-buttons-stacked .cax-inputnumber-button-group {
-        position: absolute;
-        top: 1px;
-        right: 1px;
-        height: calc(100% - 2px);
-    }
-    .cax-inputnumber.cax-inputnumber-buttons-stacked .cax-inputnumber-button {
-        border-top-right-radius: 5px;
-        border-bottom-right-radius: 5px;
-        background-color: transparent;
-        border: 0 none;
-        color: #a1a1aa;
-    }
-    .cax-inputnumber.cax-inputnumber-buttons-stacked .cax-inputnumber-button:hover {
-        background-color: rgba(255, 255, 255, 0.03);
-        color: #ffffff;
-    }
-    .cax-inputnumber.cax-inputnumber-buttons-stacked .cax-inputnumber-button:active {
-        background-color: rgba(255, 255, 255, 0.08);
-        color: #ffffff;
-    }
-    .cax-inputnumber.cax-inputnumber-buttons-horizontal .cax-inputnumber-button {
-        background-color: transparent;
-        border: 1px solid #3f3f46;
-        color: #a1a1aa;
-    }
-    .cax-inputnumber.cax-inputnumber-buttons-horizontal .cax-inputnumber-button:hover {
-        background-color: rgba(255, 255, 255, 0.03);
-        color: #ffffff;
-    }
-    .cax-inputnumber.cax-inputnumber-buttons-horizontal .cax-inputnumber-button:active {
-        background-color: rgba(255, 255, 255, 0.08);
-        color: #ffffff;
-    }
-    .cax-inputnumber.cax-inputnumber-buttons-horizontal .cax-inputnumber-button.cax-inputnumber-button-up {
-        border-left: 0 none;
-    }
-    .cax-inputnumber.cax-inputnumber-buttons-horizontal .cax-inputnumber-button.cax-inputnumber-button-down {
-        border-right: 0 none;
-    }
-    .cax-inputnumber.cax-inputnumber-buttons-vertical .cax-inputnumber-button {
-        background-color: transparent;
-        border: 1px solid #3f3f46;
-        color: #a1a1aa;
-    }
-    .cax-inputnumber.cax-inputnumber-buttons-vertical .cax-inputnumber-button:hover {
-        background-color: rgba(255, 255, 255, 0.03);
-        color: #ffffff;
-    }
-    .cax-inputnumber.cax-inputnumber-buttons-vertical .cax-inputnumber-button:active {
-        background-color: rgba(255, 255, 255, 0.08);
-        color: #ffffff;
-    }
-    .cax-inputnumber.cax-inputnumber-buttons-vertical .cax-inputnumber-button.cax-inputnumber-button-up {
-        border-bottom: 0 none;
-    }
-    .cax-inputnumber.cax-inputnumber-buttons-vertical .cax-inputnumber-button.cax-inputnumber-button-down {
-        border-top: 0 none;
-    }
-
     .cax-inputswitch .cax-inputswitch-slider {
         border: 0 none;
     }
@@ -6341,40 +5929,6 @@
         border-top-left-radius: 6px;
     }
 
-    .cax-overlaypanel {
-        box-shadow: none;
-    }
-    .cax-overlaypanel .cax-overlaypanel-content {
-        padding: 0.75rem;
-    }
-    .cax-overlaypanel .cax-overlaypanel-close {
-        width: 1.75rem;
-        height: 1.75rem;
-        color: #a1a1aa;
-        border: 0 none;
-        background: var(--white-100);
-        border-radius: 50%;
-        transition:
-            background-color 0.2s,
-            color 0.2s,
-            border-color 0.2s,
-            box-shadow 0.2s,
-            outline-color 0.2s;
-        position: absolute;
-        top: 0.25rem;
-        right: 0.25rem;
-    }
-    .cax-overlaypanel .cax-overlaypanel-close:enabled:hover {
-        color: #ffffff;
-        border-color: transparent;
-        background: rgba(255, 255, 255, 0.03);
-    }
-    .cax-overlaypanel .cax-overlaypanel-close:focus-visible {
-        outline: 1px solid var(--cax-focus-ring-color);
-        outline-offset: 2px;
-        box-shadow: none;
-    }
-
     .cax-panel {
         border: 1px solid #3f3f46;
         border-radius: 6px;
@@ -6561,61 +6115,6 @@
     .cax-stepper .cax-stepper-header.cax-highlight .cax-stepper-title {
         color: #22d3ee;
     }
-
-    .cax-steps .cax-steps-item .cax-menuitem-link .cax-steps-number {
-        border-width: 2px;
-        transition:
-            background-color 0.2s,
-            color 0.2s,
-            border-color 0.2s,
-            box-shadow 0.2s,
-            outline-color 0.2s;
-    }
-    .cax-steps .cax-steps-item .cax-menuitem-link .cax-steps-title {
-        font-weight: 500;
-        transition:
-            background-color 0.2s,
-            color 0.2s,
-            border-color 0.2s,
-            box-shadow 0.2s,
-            outline-color 0.2s;
-    }
-    .cax-steps .cax-steps-item .cax-steps-number {
-        position: relative;
-        font-weight: 500;
-    }
-    .cax-steps .cax-steps-item .cax-steps-number::after {
-        content: ' ';
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        border-radius: 50%;
-        box-shadow:
-            0px 0.5px 0px 0px rgba(0, 0, 0, 0.06),
-            0px 1px 1px 0px rgba(0, 0, 0, 0.12);
-    }
-    .cax-steps .cax-steps-item.cax-highlight .cax-steps-number {
-        background: #18181b;
-        color: #22d3ee;
-    }
-    .cax-steps .cax-steps-item.cax-highlight .cax-steps-title {
-        color: #22d3ee;
-    }
-    .cax-steps .cax-steps-item.cax-disabled {
-        opacity: 1;
-    }
-    .cax-steps .cax-steps-item:before {
-        border-top-width: 2px;
-        margin-top: calc(-1rem + 1px);
-    }
-    .cax-steps .cax-steps-item:first-child::before {
-        width: calc(50% + 1rem);
-        transform: translateX(100%);
-    }
-    .cax-steps .cax-steps-item:last-child::before {
-        width: 50%;
-    }
-
     .cax-tabmenu .cax-tabmenu-ink-bar {
         z-index: 1;
         display: block;
@@ -6653,31 +6152,6 @@
     .cax-terminal .cax-terminal-response {
         margin: 2px 0;
     }
-
-    .cax-timeline .cax-timeline-event-marker {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        position: relative;
-    }
-    .cax-timeline .cax-timeline-event-marker::before {
-        content: ' ';
-        border-radius: 50%;
-        width: 0.375rem;
-        height: 0.375rem;
-        background-color: #22d3ee;
-    }
-    .cax-timeline .cax-timeline-event-marker::after {
-        content: ' ';
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        border-radius: 50%;
-        box-shadow:
-            0px 0.5px 0px 0px rgba(0, 0, 0, 0.06),
-            0px 1px 1px 0px rgba(0, 0, 0, 0.12);
-    }
-
     .cax-togglebutton.cax-button {
         padding: 0.25rem;
     }
@@ -8338,7 +7812,7 @@ cax-radiobutton.ng-dirty.ng-invalid > .cax-radiobutton > .cax-radiobutton-box {
     font-weight: 500;
     width: 100%;
     min-width: 0;
-    background: var(--white-100);
+    background: transparent;
     padding: 8px 10px 8px 10px;
     transition:
         background-color 0.2s,
@@ -8347,7 +7821,6 @@ cax-radiobutton.ng-dirty.ng-invalid > .cax-radiobutton > .cax-radiobutton-box {
         box-shadow 0.2s,
         outline-color 0.2s;
     appearance: none;
-    border-radius: 8px;
 }
 
 .cax-input-size-sm {
@@ -8512,7 +7985,6 @@ cax-radiobutton.ng-dirty.ng-invalid > .cax-radiobutton > .cax-radiobutton-box {
 }
 .cax-inputtext {
     border: 1px solid var(--neutral-200);
-
     &:hover {
         border: 1px solid var(--neutral-300);
     }
@@ -8599,7 +8071,7 @@ input.cax-input-invalid:not(:disabled):focus,
 
 .cax-input-icon-left > .cax-icon-wrapper.cax-icon,
 .cax-input-icon-left > i:first-of-type {
-    left: 0.75rem;
+    left: 0.6rem;
     color: var(--neutral-750);
 }
 
@@ -8990,7 +8462,7 @@ cax-inputmask.cax-inputmask-clearable .cax-inputmask-clear-icon {
 }
 
 .cax-paginator {
-    background: transparent;
+    background: transparent !important;
     color: var(--neutral-900);
     border-width: 0;
     padding: 8px 16px;
@@ -9177,6 +8649,22 @@ cax-inputmask.cax-inputmask-clearable .cax-inputmask-clear-icon {
     }
 }
 
+.cax-splitbutton {
+    border-radius: var(--radius-75);
+}
+.cax-splitbutton.cax-button-rounded {
+    border-radius: var(--radius-400);
+}
+.cax-splitbutton.cax-button-rounded > .cax-button {
+    border-radius: var(--radius-400);
+}
+.cax-splitbutton.cax-button-raised {
+    box-shadow:
+        0 3px 1px -2px rgba(0, 0, 0, 0.2),
+        0 2px 2px 0 rgba(0, 0, 0, 0.14),
+        0 1px 5px 0 rgba(0, 0, 0, 0.12);
+}
+
 .cax-button {
     color: var(--white-100);
     background: var(--primary-500);
@@ -9198,7 +8686,7 @@ cax-inputmask.cax-inputmask-clearable .cax-inputmask-clear-icon {
 }
 .cax-button:not(:disabled):active {
     background: var(--primary-500);
-    color: var(--surface-100);
+    color: var(--white-100);
     border-color: var(--primary-500);
 }
 .cax-button.cax-button-outlined {
@@ -9270,14 +8758,7 @@ cax-inputmask.cax-inputmask-clearable .cax-inputmask-clear-icon {
 .cax-button .cax-button-icon-top {
     margin-bottom: var(--space-100);
 }
-.cax-button .cax-badge {
-    margin-left: var(--space-100);
-    min-width: 1rem;
-    height: 1rem;
-    line-height: 1rem;
-    color: var(--white-100);
-    background-color: var(--error-600);
-}
+
 .cax-button.cax-button-raised {
     box-shadow:
         0 3px 1px -2px rgba(0, 0, 0, 0.2),
@@ -9441,9 +8922,8 @@ cax-inputmask.cax-inputmask-clearable .cax-inputmask-clear-icon {
 .cax-button.cax-button-secondary:not(:disabled):active,
 .cax-button-group.cax-button-secondary > .cax-button:not(:disabled):active,
 .cax-splitbutton.cax-button-secondary > .cax-button:not(:disabled):active {
-    background: var(--neutral-150);
+    background: var(--neutral-75);
     color: var(--neutral-900);
-    border-color: 1px solid var(--neutral-150);
 }
 .cax-button.cax-button-secondary.cax-button-outlined,
 .cax-button-group.cax-button-secondary > .cax-button.cax-button-outlined,
@@ -10566,45 +10046,155 @@ cax-inputmask.cax-inputmask-clearable .cax-inputmask-clear-icon {
     }
 }
 
-.cax-toggleswitch-track {
-    display: block;
-    height: 24px;
-    width: 40px;
-    border-radius: 9999px;
-    transition:
-        background-color 0.2s,
-        border-color 0.2s;
-    background-color: var(--neutral-50);
-    border: 1px solid var(--neutral-100);
-    position: relative;
+.cax-steps .cax-steps-item .cax-menuitem-link {
+    background: transparent;
+    border-radius: 6px;
+}
+.cax-steps .cax-steps-item .cax-menuitem-link .cax-steps-number {
+    color: var(--neutral-700);
+    border: 1px solid var(--neutral-25);
+    background: var(--neutral-25);
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    z-index: 1;
+    border-radius: 50%;
+}
+.cax-steps .cax-steps-item .cax-menuitem-link .cax-steps-title {
+    margin-top: 0.5rem;
+    color: var(--neutral-700);
+    font-weight: 500;
+    font-size: 16px;
+}
+.cax-steps .cax-steps-item .cax-menuitem-link:not(.cax-disabled):focus-visible {
+    outline: 1px solid var(--cax-focus-ring-color);
+    outline-offset: 2px;
+    box-shadow: none;
+}
+.cax-steps .cax-steps-item.cax-highlight .cax-steps-number {
+    background: rgba(34, 211, 238, 0.16);
+    color: rgba(255, 255, 255, 0.87);
 }
 
-.cax-toggleswitch:checked ~ .cax-toggleswitch-track {
-    background-color: var(--primary-500);
-    border: 1px solid var(--primary-500);
+.cax-steps .cax-steps-item.cax-highlight .cax-steps-title {
+    font-weight: 500;
+    color: var(--white-100);
+}
+.cax-steps .cax-steps-item:before {
+    content: ' ';
+    border-top: 1px solid var(--neutral-400);
+    width: 100%;
+    top: 50%;
+    left: -50%;
+    right: 50%;
+    display: block;
+    position: absolute;
+    margin-top: -1rem;
 }
 
-.cax-toggleswitch-track:hover {
-    background-color: var(--neutral-100);
-    border-color: var(--neutral-300);
+.cax-steps-item.cax-highlight::before {
+    border-top: 1px solid var(--primary-500) !important;
 }
 
-.cax-toggleswitch:checked ~ .cax-toggleswitch-track:hover {
-    background-color: var(--primary-500);
-    border-color: var(--primary-500);
+.cax-steps-item:first-child::before {
+    display: none;
 }
 
-.cax-toggle-thumb {
-    position: absolute;
-    display: flex;
-    cursor: pointer;
-    align-items: center;
-    justify-content: center;
-    height: 16px;
-    width: 16px;
-    top: 50%;
-    left: 3px;
-    transform: translateY(-50%);
+.cax-steps .cax-steps-item .cax-menuitem-link .cax-steps-number {
+    border-width: 2px;
+    transition:
+        background-color 0.2s,
+        color 0.2s,
+        border-color 0.2s,
+        box-shadow 0.2s,
+        outline-color 0.2s;
+}
+.cax-steps .cax-steps-item .cax-menuitem-link .cax-steps-title {
+    font-weight: 500;
+    transition:
+        background-color 0.2s,
+        color 0.2s,
+        border-color 0.2s,
+        box-shadow 0.2s,
+        outline-color 0.2s;
+}
+.cax-steps .cax-steps-item .cax-steps-number {
+    position: relative;
+    font-weight: 500;
+}
+.cax-steps .cax-steps-item .cax-steps-number::after {
+    content: ' ';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    box-shadow:
+        0px 0.5px 0px 0px rgba(0, 0, 0, 0.06),
+        0px 1px 1px 0px rgba(0, 0, 0, 0.12);
+}
+.cax-steps .cax-steps-item.cax-highlight .cax-steps-number {
+    background: #f0f4fe;
+    color: var(--primary-500);
+    font-weight: 500;
+    border: var(--primary-500);
+}
+.cax-steps .cax-steps-item.cax-highlight .cax-steps-title {
+    color: var(--primary-500);
+}
+.cax-steps .cax-steps-item.cax-disabled {
+    opacity: 1;
+}
+.cax-steps .cax-steps-item:before {
+    border-top-width: 1px;
+    margin-top: calc(-1rem + 1px);
+}
+
+.cax-toggleswitch-track {
+    display: block;
+    height: 24px;
+    width: 40px;
+    border-radius: 9999px;
+    cursor: pointer;
+    transition:
+        background-color 0.2s,
+        border-color 0.2s;
+    position: relative;
+    background-color: var(--neutral-50);
+    border: 1px solid var(--neutral-100);
+}
+
+.cax-toggleswitch:checked ~ .cax-toggleswitch-track {
+    background-color: var(--primary-500);
+    border: 1px solid var(--primary-500);
+}
+
+/* Update hover styles for unchecked state */
+.cax-toggleswitchmaindiv:hover .cax-toggleswitch-track:not(:has(~ .cax-toggleswitch:checked)),
+.cax-toggle-thumb:hover ~ .cax-toggleswitch-track:not(:has(~ .cax-toggleswitch:checked)) {
+    background-color: var(--neutral-100);
+    border-color: var(--neutral-300);
+}
+
+/* Consolidate hover styles for checked state */
+.cax-toggleswitch:checked ~ .cax-toggleswitch-track,
+.cax-toggleswitch:checked ~ .cax-toggleswitchmaindiv:hover .cax-toggleswitch-track,
+.cax-toggleswitch:checked ~ .cax-toggle-thumb:hover ~ .cax-toggleswitch-track {
+    background-color: var(--primary-600) !important;
+    border-color: var(--primary-600) !important;
+}
+
+.cax-toggle-thumb {
+    position: absolute;
+    display: flex;
+    cursor: pointer;
+    align-items: center;
+    justify-content: center;
+    height: 16px;
+    width: 16px;
+    top: 50%;
+    left: 3px;
+    transform: translateY(-50%);
     border-radius: 50%;
     background-color: var(--white-100);
     transition:
@@ -10618,10 +10208,6 @@ cax-inputmask.cax-inputmask-clearable .cax-inputmask-clear-icon {
     background-color: var(--white-100);
 }
 
-.cax-toggleswitch:checked ~ .cax-toggle-thumb:hover {
-    box-shadow: 0 0 6px var(--primary-600);
-}
-
 .cax-toggleswitch-size-sm {
     .cax-toggleswitch-track {
         height: 15px;
@@ -11447,3 +11033,851 @@ cax-dropdown.ng-dirty.ng-invalid > .cax-dropdown {
 .cax-toast .cax-toast-message.cax-toast-message-contrast .cax-toast-icon-close:hover {
     background: #f4f4f5;
 }
+.cax-skeleton {
+    background-color: var(--neutral-100);
+    border-radius: 6px;
+    animation: cax-skeleton-fade 1.2s ease-in-out infinite;
+}
+
+@keyframes cax-skeleton-fade {
+    0% {
+        background-color: var(--neutral-100);
+    }
+    50% {
+        background-color: var(--grey-400);
+    }
+    100% {
+        background-color: var(--neutral-100);
+    }
+}
+
+.cax-overlaypanel {
+    background: var(--white-100);
+    color: var(--neutral-900);
+    border: 1px solid var(--neutral-300);
+    border-radius: 8px;
+}
+.cax-overlaypanel .cax-overlaypanel-content {
+    padding: 0 1.125rem 1.125rem 1.125rem;
+}
+.cax-overlaypanel .cax-overlaypanel-close {
+    background: transparent;
+    color: var(--neutral-300);
+    width: 1.75rem;
+    height: 1.75rem;
+    font-size: 20px;
+    transition:
+        background-color 0.2s,
+        color 0.2s,
+        border-color 0.2s,
+        box-shadow 0.2s,
+        outline-color 0.2s;
+    border-radius: 50%;
+    position: absolute;
+    top: -0.875rem;
+    right: -0.875rem;
+}
+.cax-overlaypanel:after {
+    border: solid transparent;
+    border-color: rgba(24, 24, 27, 0);
+    border-bottom-color: #18181b;
+}
+.cax-overlaypanel:before {
+    border: solid transparent;
+    border-color: rgba(63, 63, 70, 0);
+    border-bottom-color: #3c3c43;
+}
+.cax-overlaypanel.cax-overlaypanel-flipped:after {
+    border-top-color: #18181b;
+}
+.cax-overlaypanel.cax-overlaypanel-flipped:before {
+    border-top-color: #3f3f46;
+}
+
+.cax-overlaypanel {
+    box-shadow: none;
+}
+.cax-overlaypanel .cax-overlaypanel-content {
+    padding: 12px;
+}
+.cax-overlaypanel .cax-overlaypanel-close {
+    width: 1.75rem;
+    height: 1.75rem;
+    border: 0 none;
+    border-radius: 50%;
+    transition:
+        background-color 0.2s,
+        color 0.2s,
+        border-color 0.2s,
+        box-shadow 0.2s,
+        outline-color 0.2s;
+    position: absolute;
+    top: 0.25rem;
+    right: 0.25rem;
+}
+
+.cax-overlaypanel .cax-overlaypanel-close:focus-visible {
+    outline: 1px solid var(--cax-focus-ring-color);
+    outline-offset: 2px;
+    box-shadow: none;
+}
+
+
+.cax-accordion .cax-accordion-header .cax-accordion-header-link {
+    padding: var(--space-200) 17.5px var(--space-200) 17.5px;
+    border: 1px solid var(--neutral-200);
+    color: var(--neutral-900);
+    background: var(--neutral-75);
+    font-weight: 600;
+    border-radius: 6px;
+    font-size: 20px;
+    border-bottom: 1px solid var(--neutral-200);
+    transition:
+        background-color 0.2s,
+        color 0.2s,
+        border-color 0.2s,
+        box-shadow 0.2s,
+        outline-color 0.2s;
+}
+.cax-accordion .cax-accordion-header .cax-accordion-header-link .cax-accordion-toggle-icon {
+    margin-right: 0.5rem;
+}
+
+.cax-accordion .cax-accordion-header:not(.cax-disabled).cax-highlight .cax-accordion-header-link {
+    background: var(--neutral-75);
+    border: 1px solid var(--neutral-200);
+    color: var(--neutral-900);
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+.cax-accordion .cax-accordion-content {
+    padding: 0 1.125rem 1.125rem 1.125rem;
+    border: 1px solid #e0e5eb;
+    background: var(--white-100);
+    color: var(--neutral-900);
+    font-size: 20px;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+}
+.cax-accordion cax-accordiontab .cax-accordion-tab {
+    margin-bottom: 0;
+}
+.cax-accordion cax-accordiontab .cax-accordion-header .cax-accordion-header-link {
+    border-radius: 0;
+}
+.cax-accordion cax-accordiontab .cax-accordion-content {
+    border-radius: 0;
+}
+.cax-accordion cax-accordiontab:not(:first-child) .cax-accordion-header .cax-accordion-header-link {
+    border-top: 0 none;
+}
+.cax-accordion cax-accordiontab:not(:first-child) .cax-accordion-header:not(.cax-highlight):not(.cax-disabled):hover .cax-accordion-header-link,
+.cax-accordion cax-accordiontab:not(:first-child) .cax-accordion-header:not(.cax-disabled).cax-highlight:hover .cax-accordion-header-link {
+    border-top: 0 none;
+}
+.cax-accordion cax-accordiontab:first-child .cax-accordion-header .cax-accordion-header-link {
+    border-top-right-radius: var(--radius-150);
+    border-top-left-radius: var(--radius-150);
+}
+.cax-accordion cax-accordiontab:last-child .cax-accordion-header:not(.cax-highlight) .cax-accordion-header-link {
+    border-bottom-right-radius: var(--radius-150);
+    border-bottom-left-radius: var(--radius-150);
+}
+.cax-accordion cax-accordiontab:last-child .cax-accordion-content {
+    border-bottom-right-radius: var(--radius-150);
+    border-bottom-left-radius: var(--radius-150);
+}
+
+.cax-accordion .cax-accordion-header .cax-accordion-header-link {
+    // border-radius: 6px !important;
+    flex-direction: row-reverse;
+    justify-content: space-between;
+}
+.cax-accordion .cax-accordion-header .cax-accordion-header-link .cax-accordion-toggle-icon {
+    transform: rotate(90deg);
+}
+.cax-accordion .cax-accordion-header.cax-highlight .cax-accordion-toggle-icon {
+    transform: rotate(-180deg);
+}
+.cax-accordion .cax-accordion-header:not(.cax-disabled) .cax-accordion-header-link:focus-visible {
+    outline-offset: -2px;
+}
+.cax-accordion cax-accordiontab:last-of-type .cax-accordion-tab {
+    border-bottom: 0 none;
+}
+
+.cax-timeline .cax-timeline-event-marker {
+    border: 1px solid var(--primary-500);
+    border-radius: 50%;
+    width: 1.125rem;
+    height: 1.125rem;
+    background-color: var(--primary-25);
+}
+.cax-timeline .cax-timeline-event-connector {
+    background-color: var(--primary-500);
+}
+.cax-timeline.cax-timeline-vertical .cax-timeline-event-opposite,
+.cax-timeline.cax-timeline-vertical .cax-timeline-event-content {
+    padding-bottom: 1rem;
+}
+
+.cax-timeline-event-content:hover {
+    background: var(--neutral-75);
+}
+
+.cax-timeline.cax-timeline-vertical .cax-timeline-event-connector {
+    width: 1px;
+}
+.cax-timeline.cax-timeline-horizontal .cax-timeline-event-opposite,
+.cax-timeline.cax-timeline-horizontal .cax-timeline-event-content {
+    padding: 1rem 0;
+}
+.cax-timeline.cax-timeline-horizontal .cax-timeline-event-connector {
+    height: 2px;
+}
+.cax-timeline .cax-timeline-event-marker {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    color: var(--primary-500);
+    font-size: 10px;
+    font-weight: 600;
+}
+.cax-timeline .cax-timeline-event-marker::after {
+    content: ' ';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    box-shadow:
+        0px 0.5px 0px 0px rgba(0, 0, 0, 0.06),
+        0px 1px 1px 0px rgba(0, 0, 0, 0.12);
+}
+
+.cax-inputnumber {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    .cax-inputnumber-button {
+        width: 37px;
+        border: 1px solid var(--neutral-150);
+    }
+    // Modify button layouts
+    &.cax-inputnumber-buttons-stacked {
+        .cax-inputnumber-button-group {
+            position: relative;
+            display: flex;
+            flex-direction: column;
+            border: 1px solid var(--neutral-150);
+            border-radius: 0px 8px 8px 0px;
+            height: 32px;
+            .cax-button {
+                min-width: 37px;
+                height: 15.5px;
+                border: none;
+                i,
+                .cax-icon {
+                    display: inline-flex;
+                    font-size: 1rem;
+                }
+                &:active,
+                &:focus {
+                    position: relative;
+                    z-index: 1;
+
+                    &::after {
+                        content: '';
+                        position: absolute;
+                        left: -1px;
+                        right: -1px;
+                        height: 100%;
+                        border: 1px solid var(--blue-500);
+                    }
+                }
+
+                &:first-child:active::after,
+                &:first-child:focus::after {
+                    top: -1px;
+                    border-radius: 0 8px 0 0;
+                }
+
+                &:last-child:active::after,
+                &:last-child:focus::after {
+                    bottom: -1px;
+                    border-radius: 0 0 8px 0;
+                }
+            }
+
+            // Remove previous border color changes
+            &:has(.cax-button:active),
+            &:has(.cax-button:focus) {
+                border-color: var(--neutral-150);
+            }
+        }
+    }
+
+    &.cax-inputnumber-buttons-horizontal {
+        .cax-button.cax-inputnumber-button {
+            min-width: 32px;
+            height: 32px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            i,
+            .cax-icon {
+                display: inline-flex;
+                font-size: 1.5rem;
+            }
+        }
+        .cax-inputnumber-input {
+            padding: 7px 10.5px;
+        }
+
+        .cax-input-prefix,
+        .cax-input-prefix-icon {
+            display: none;
+        }
+    }
+
+    &.cax-inputnumber-buttons-vertical {
+        .cax-input-prefix,
+        .cax-input-prefix-icon {
+            display: none;
+        }
+    }
+
+    // Input styles
+    .cax-inputnumber-input {
+        width: 100%;
+        height: 32px;
+        padding: 7px 10.5px;
+        border: 1px solid var(--neutral-200);
+        transition: all 0.2s;
+        &:hover {
+            border-color: var(--neutral-300);
+        }
+        &:focus {
+            outline: none;
+            border-color: var(--blue-500);
+        }
+        &:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+
+            & + .cax-input-prefix,
+            & + .cax-input-prefix-icon,
+            & ~ .cax-input-suffix,
+            & ~ i,
+            & ~ .cax-icon {
+                opacity: 0.6;
+                cursor: not-allowed;
+                color: var(--neutral-400);
+            }
+        }
+    }
+
+    &.cax-input-icon-left {
+        .cax-inputnumber-input {
+            padding-left: 2.5rem;
+        }
+    }
+
+    &.cax-disabled {
+        .cax-input-prefix,
+        .cax-input-prefix-icon,
+        .cax-input-suffix,
+        i,
+        .cax-icon {
+            opacity: 0.6;
+            cursor: not-allowed;
+            color: var(--neutral-400);
+        }
+    }
+
+    input.cax-inputnumber-input {
+        font-weight: 500;
+        box-shadow: none;
+        &[inputmode='symbol'] {
+            letter-spacing: 0px;
+        }
+        &[inputmode='decimal'] {
+            letter-spacing: 0px;
+        }
+    }
+
+    .cax-input-prefix,
+    .cax-input-prefix-icon {
+        position: absolute;
+        top: 50%;
+        left: 0.75rem;
+        transform: translateY(-50%);
+        color: var(--neutral-750);
+        z-index: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        i {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 16px;
+            height: 16px;
+            margin-right: 4px;
+        }
+        & + .cax-inputnumber-input {
+            letter-spacing: 0px;
+            padding-left: 2.75rem;
+            text-indent: 20px;
+            &[inputmode='symbol'] {
+                text-indent: 24px;
+            }
+        }
+    }
+
+    &.cax-input-icon-left {
+        .cax-inputnumber-input {
+            padding-left: 2.5rem;
+        }
+    }
+    .cax-inputnumber-input {
+        &:not(.cax-filled) {
+            &::placeholder {
+                opacity: 1;
+            }
+        }
+    }
+
+    .cax-input-prefix,
+    .cax-input-prefix-icon {
+        position: absolute;
+        left: 0.75rem;
+        transform: translateY(-50%);
+        color: var(--neutral-750);
+        z-index: 1;
+        display: flex;
+        font-size: large;
+        align-items: center;
+        & + .cax-inputnumber-input {
+            padding-left: 0.7rem;
+            &::before {
+                content: '\00a0';
+                display: inline;
+            }
+        }
+    }
+
+    &.cax-inputnumber-buttons-stacked,
+    &.cax-inputnumber-buttons-horizontal,
+    &.cax-inputnumber-buttons-vertical {
+        .cax-inputnumber-input {
+            padding: 7px 10.5px;
+        }
+
+        &.cax-input-icon-left .cax-inputnumber-input {
+            padding-left: 0.7rem;
+        }
+    }
+
+    &.cax-inputnumber-buttons-horizontal {
+        .cax-inputnumber-input {
+            padding: 7px 10.5px;
+        }
+
+        .cax-input-prefix,
+        .cax-input-prefix-icon {
+            display: none;
+        }
+    }
+
+    &.cax-inputnumber-buttons-vertical {
+        .cax-inputnumber-input {
+            padding: 7px 10.5px;
+        }
+
+        .cax-input-prefix,
+        .cax-input-prefix-icon {
+            display: none;
+        }
+    }
+
+    &.cax-inputnumber-buttons-stacked {
+        .cax-inputnumber-input {
+            padding: 7px 10.5px;
+        }
+
+        &.cax-input-icon-left {
+            .cax-input-prefix,
+            .cax-input-prefix-icon {
+                display: flex;
+            }
+
+            .cax-inputnumber-input {
+                padding-left: 0.7rem;
+            }
+        }
+    }
+
+    input.cax-inputnumber-input {
+        font-weight: 500;
+        &[inputmode='symbol'] {
+            padding-left: 2.25rem;
+            word-spacing: 0.25rem;
+        }
+    }
+
+    &.cax-inputnumber-buttons-stacked {
+        .cax-inputnumber-button-group {
+            .cax-button {
+                position: relative;
+                min-width: 37px;
+                height: 15.5px;
+                border: none;
+
+                &:first-child {
+                    border-radius: 0 8px 0 0;
+                    border-bottom: 1px solid var(--neutral-150);
+
+                    &:active,
+                    &:focus {
+                        border-color: var(--neutral-150);
+                        border-radius: 0 8px 0 0;
+                    }
+                }
+
+                &:last-child {
+                    border-radius: 0 0 8px 0;
+
+                    &:active,
+                    &:focus {
+                        border-color: var(--neutral-150);
+                        border-radius: 0 0 8px 0;
+                    }
+                }
+
+                &:active,
+                &:focus {
+                    border: 1px solid var(--neutral-150);
+                    z-index: 1;
+                }
+
+                i,
+                .cax-icon {
+                    display: inline-flex;
+                    font-size: 1.5rem;
+                }
+            }
+        }
+    }
+
+    &.cax-inputnumber-buttons-stacked {
+        .cax-inputnumber-input {
+            border-right: 0;
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+
+        .cax-inputnumber-button-group {
+            border: 1px solid var(--neutral-150);
+            border-left: 0;
+            border-radius: 0 8px 8px 0;
+
+            .cax-button {
+                border: none;
+                border-radius: 0 !important;
+
+                &:first-child {
+                    border-radius: 0 8px 0 0 !important;
+                    border-bottom: 1px solid var(--neutral-150);
+                }
+
+                &:last-child {
+                    border-radius: 0 0 8px 0 !important;
+                }
+            }
+        }
+    }
+
+    &.cax-inputnumber-buttons-horizontal {
+        .cax-inputnumber-input {
+            border-radius: 0;
+        }
+
+        .cax-button.cax-inputnumber-button {
+            &.cax-inputnumber-button-up {
+                border-radius: 0 8px 8px 0 !important;
+            }
+
+            &.cax-inputnumber-button-down {
+                border-radius: 8px 0 0 8px !important;
+            }
+        }
+    }
+
+    &.cax-inputnumber-buttons-vertical {
+        .cax-inputnumber-input {
+            border-radius: 0;
+        }
+
+        .cax-button.cax-inputnumber-button {
+            &.cax-inputnumber-button-up {
+                border-radius: 8px 8px 0 0 !important;
+            }
+
+            &.cax-inputnumber-button-down {
+                border-radius: 0 0 8px 8px !important;
+            }
+        }
+    }
+}
+
+.cax-input-prefix,
+.cax-input-prefix-icon {
+    &:not(:first-child) {
+        margin-left: 0;
+    }
+}
+
+.cax-input-icon-left > i,
+.cax-input-icon-left > .cax-icon-wrapper,
+.cax-input-icon-right > i,
+.cax-input-icon-right > .cax-icon-wrapper {
+    margin-top: -1px;
+    transform: translateY(-50%);
+    position: absolute;
+    top: 50%;
+}
+
+.cax-inputnumber-input {
+    border: 1px solid var(--neutral-200);
+    color: var(--neutral-900);
+}
+
+.cax-inputnumber.cax-inputnumber-buttons-stacked {
+    position: relative;
+}
+.cax-inputnumber.cax-inputnumber-buttons-stacked .cax-inputnumber-button {
+    height: calc(100% - 2px);
+    background-color: var(--neutral-75);
+    color: var(--neutral-900);
+}
+.cax-inputnumber.cax-inputnumber-buttons-stacked .cax-inputnumber-button:hover {
+    background-color: var(--neutral-150);
+    color: var(--neutral-900);
+}
+.cax-inputnumber.cax-inputnumber-buttons-stacked .cax-inputnumber-button:active {
+    background-color: var(--neutral-150);
+    color: var(--neutral-900);
+}
+
+.cax-inputnumber.cax-inputnumber-buttons-horizontal .cax-inputnumber-button {
+    background-color: var(--neutral-75);
+    border: 1px solid var(--neutral-150);
+    color: var(--neutral-900);
+}
+.cax-inputnumber.cax-inputnumber-buttons-horizontal .cax-inputnumber-button:hover {
+    background-color: var(--neutral-150);
+    color: var(--neutral-900);
+}
+.cax-inputnumber.cax-inputnumber-buttons-horizontal .cax-inputnumber-button:active {
+    background-color: var(--neutral-150);
+    color: var(--neutral-900);
+}
+.cax-inputnumber.cax-inputnumber-buttons-horizontal .cax-inputnumber-button.cax-inputnumber-button-up {
+    border-left: 0 none;
+}
+.cax-inputnumber.cax-inputnumber-buttons-horizontal .cax-inputnumber-button.cax-inputnumber-button-down {
+    border-right: 0 none;
+}
+.cax-inputnumber.cax-inputnumber-buttons-vertical .cax-inputnumber-button {
+    background-color: var(--neutral-75);
+    border: 1px solid var(--neutral-150);
+    color: var(--neutral-900);
+}
+.cax-inputnumber.cax-inputnumber-buttons-vertical .cax-inputnumber-button:hover {
+    background-color: var(--neutral-150);
+    color: var(--neutral-900);
+}
+.cax-inputnumber.cax-inputnumber-buttons-vertical .cax-inputnumber-button:active {
+    background-color: var(--neutral-150);
+    color: var(--neutral-900);
+}
+.cax-inputnumber.cax-inputnumber-buttons-vertical .cax-inputnumber-button.cax-inputnumber-button-up {
+    border-bottom: 0 none;
+}
+.cax-inputnumber.cax-inputnumber-buttons-vertical .cax-inputnumber-button.cax-inputnumber-button-down {
+    border-top: 0 none;
+}
+
+cax-inputnumber.ng-dirty.ng-invalid > .cax-inputnumber > .cax-inputtext {
+    border-color: var(--error-600);
+}
+
+cax-inputnumber.cax-inputnumber-clearable .cax-inputnumber-input {
+    padding-right: 2.5rem;
+}
+cax-inputnumber.cax-inputnumber-clearable .cax-inputnumber-clear-icon {
+    color: var(--neutral-400);
+    right: 0.75rem;
+}
+
+cax-inputnumber.cax-inputnumber-clearable .cax-inputnumber-buttons-stacked .cax-inputnumber-clear-icon {
+    right: 3.25rem;
+}
+cax-inputnumber.cax-inputnumber-clearable .cax-inputnumber-buttons-horizontal .cax-inputnumber-clear-icon {
+    right: 3.25rem;
+}
+
+cax-inputnumber.cax-inputnumber.cax-variant-filled > .cax-inputnumber-input {
+    background-color: #27272a;
+}
+cax-inputnumber.cax-inputnumber.cax-variant-filled > .cax-inputnumber-input:enabled:hover {
+    background-color: var(--neutral-500);
+}
+cax-inputnumber.cax-inputnumber.cax-variant-filled > .cax-inputnumber-input:enabled:focus {
+    background-color: #27272a;
+}
+.cax-autocomplete .cax-autocomplete-loader {
+}
+.cax-autocomplete.cax-autocomplete-dd .cax-autocomplete-loader {
+    right: 3.25rem;
+}
+.cax-autocomplete:not(.cax-disabled):hover .cax-autocomplete-multiple-container {
+    border-color: #52525b;
+}
+.cax-autocomplete:not(.cax-disabled).cax-focus .cax-autocomplete-multiple-container {
+    outline: 1px solid var(--cax-focus-ring-color);
+    outline-offset: -1px;
+    box-shadow: none;
+    border-color: #52525b;
+}
+.cax-autocomplete .cax-autocomplete-multiple-container {
+    padding: 0.25rem 0.75rem;
+    gap: 0.5rem;
+}
+.cax-autocomplete .cax-autocomplete-multiple-container .cax-autocomplete-input-token {
+    padding: 0.25rem 0;
+}
+.cax-autocomplete .cax-autocomplete-multiple-container .cax-autocomplete-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: var(--white-100);
+    padding: 0;
+    margin: 0;
+}
+.cax-autocomplete .cax-autocomplete-multiple-container .cax-autocomplete-token {
+    padding: 0.25rem 0.75rem;
+    background: #3f3f46;
+    color: var(--white-100);
+    border-radius: 16px;
+}
+.cax-autocomplete .cax-autocomplete-multiple-container .cax-autocomplete-token .cax-autocomplete-token-icon {
+    margin-left: 0.5rem;
+}
+.cax-autocomplete .cax-autocomplete-multiple-container .cax-autocomplete-token.cax-focus {
+    background: #3f3f46;
+    color: var(--black-100);
+}
+.cax-autocomplete.cax-invalid.cax-component > .cax-inputtext {
+    border-color: var(--error-600);
+}
+
+.cax-autocomplete-panel {
+    background: var(--white-100);
+    color: var(--black-100);
+    border: 1px solid var(--grey-200);
+    border-radius: 7px;
+    box-shadow:
+        0 4px 6px -1px rgba(0, 0, 0, 0.1),
+        0 2px 4px -2px rgba(0, 0, 0, 0.1);
+}
+.cax-autocomplete-panel .cax-autocomplete-items {
+    padding: 0.25rem 0.25rem;
+}
+.cax-autocomplete-panel .cax-autocomplete-items .cax-autocomplete-item {
+    margin: 2px 0;
+    padding: 0.5rem 0.75rem;
+    border: 0 none;
+    color: var(--grey-900);
+    background: var(--white-100);
+    transition:
+        background-color 0.2s,
+        color 0.2s,
+        border-color 0.2s,
+        box-shadow 0.2s,
+        outline-color 0.2s;
+    border-radius: 4px;
+}
+.cax-autocomplete-panel .cax-autocomplete-items .cax-autocomplete-item:first-child {
+    margin-top: 0;
+}
+.cax-autocomplete-panel .cax-autocomplete-items .cax-autocomplete-item.cax-highlight {
+    color: var(--grey-900);
+    background: var(--grey-100);
+}
+.cax-autocomplete-panel .cax-autocomplete-items .cax-autocomplete-item.cax-highlight.cax-focus {
+    background: rgba(34, 211, 238, 0.24);
+}
+.cax-autocomplete-panel .cax-autocomplete-items .cax-autocomplete-item:not(.cax-highlight):not(.cax-disabled).cax-focus {
+    color: var(--white-100);
+    background: rgba(255, 255, 255, 0.08);
+}
+.cax-autocomplete-panel .cax-autocomplete-items .cax-autocomplete-item:not(.cax-highlight):not(.cax-disabled):hover {
+    color: var(--black-100);
+    background: var(--grey-100);
+}
+.cax-autocomplete-panel .cax-autocomplete-items .cax-autocomplete-item-group {
+    margin: 0;
+    padding: 0.5rem 0.75rem;
+    color: #71717a;
+    background: #18181b;
+    font-weight: 600;
+}
+.cax-autocomplete-panel .cax-autocomplete-items .cax-autocomplete-empty-message {
+    padding: 0.5rem 0.75rem;
+    color: var(--grey-900);
+    background: var(--white-100);
+}
+
+cax-autocomplete.ng-dirty.ng-invalid > .cax-autocomplete > .cax-inputtext {
+    border-color: var(--error-600);
+}
+
+cax-autocomplete.cax-autocomplete-clearable .cax-inputtext {
+    padding-left: 1.9rem;
+    padding-right: 1.9rem;
+}
+cax-autocomplete.cax-autocomplete-clearable .cax-autocomplete-clear-icon {
+    color: var(--neutral-300);
+}
+
+cax-autocomplete.cax-autocomplete-clearable .cax-autocomplete-dd .cax-autocomplete-clear-icon {
+    color: var(--neutral-300);
+    right: 3.25rem;
+}
+.cax-autocomplete .cax-autocomplete-multiple-container {
+    padding: 0.25rem 0.25rem;
+    gap: 0.25rem;
+}
+.cax-autocomplete .cax-autocomplete-multiple-container .cax-autocomplete-token {
+    border-radius: 4px;
+    margin: 0;
+}
+.cax-autocomplete .cax-autocomplete-multiple-container .cax-autocomplete-token .cax-autocomplete-token-icon {
+    margin-left: 0.375rem;
+}
+.cax-autocomplete .cax-autocomplete-multiple-container .cax-autocomplete-input-token {
+    margin-left: 0.5rem;
+}
+.cax-autocomplete .cax-autocomplete-multiple-container:has(.cax-autocomplete-token) .cax-autocomplete-input-token {
+    margin-left: 0.5rem;
+}
+.cax-autocomplete.cax-disabled {
+    opacity: 1;
+}