cax-design-system 2.1.0 → 2.2.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 {
@@ -2315,22 +2348,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 +2842,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);
@@ -3921,52 +3912,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,57 +4990,6 @@
         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 {
         background: #18181b;
         border: 1px solid #3f3f46;
@@ -5176,15 +5070,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 +5096,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,
@@ -6341,40 +6238,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 +6424,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 +6461,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 +8121,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,
@@ -8990,7 +8773,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 +8960,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);
@@ -9270,14 +9069,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),
@@ -9285,6 +9077,10 @@ cax-inputmask.cax-inputmask-clearable .cax-inputmask-clear-icon {
         0 1px 5px 0 rgba(0, 0, 0, 0.12);
 }
 .cax-button.cax-button-icon-only {
+    border-top-left-radius: 0;
+    border-top-right-radius: var(--radius-100);
+    border-bottom-right-radius: var(--radius-100);
+    border-bottom-left-radius: 0;
     min-width: 2.5rem;
     padding: var(--space-100) 0;
 }
@@ -10566,17 +10362,122 @@ cax-inputmask.cax-inputmask-clearable .cax-inputmask-clear-icon {
     }
 }
 
+.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-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-steps-item.cax-highlight::before {
+    border-top: 1px solid var(--primary-500) !important;
+}
+
+.cax-steps-item:first-child::before {
+    display: none;
+}
+
+.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);
-    position: relative;
 }
 
 .cax-toggleswitch:checked ~ .cax-toggleswitch-track {
@@ -10584,14 +10485,19 @@ cax-inputmask.cax-inputmask-clearable .cax-inputmask-clear-icon {
     border: 1px solid var(--primary-500);
 }
 
-.cax-toggleswitch-track:hover {
+/* 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);
 }
 
-.cax-toggleswitch:checked ~ .cax-toggleswitch-track:hover {
-    background-color: var(--primary-500);
-    border-color: var(--primary-500);
+/* 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 {
@@ -10618,10 +10524,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 +11349,141 @@ 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-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);
+}