@nova-design-system/nova-base 3.0.0-beta.37 → 3.0.0-beta.39

package/dist/css/spark.css

@@ -73,6 +73,8 @@
   --components-popover-background: var(--color-gray-spark-900);
   --components-menu-contextual-item-background-hover: var(--color-interaction-container-neutral-background-hover);
   --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
+  --components-field-time-background-hover: var(--color-interaction-container-neutral-background-hover);
+  --components-field-time-background-default: var(--color-interaction-container-neutral-background);
   --components-overlay-background: var(--color-gray-spark-650);
   --components-button-destructive-high-icon-hover: var(--color-base-black);
   --components-button-destructive-high-icon: var(--color-base-black);
@@ -95,10 +97,10 @@
   --components-loader-brand-foreground: var(--color-orange-500);
   --components-loader-brand-background: var(--color-orange-900);
   --components-loader-white-foreground: var(--color-base-white);
-  --components-list-custom-item-background-title: var(--color-interaction-container-neutral-background);
-  --components-list-custom-item-background-disabled: var(--color-interaction-container-neutral-background);
-  --components-list-custom-item-background-hover: var(--color-interaction-container-neutral-background-hover);
-  --components-list-custom-item-background-default: var(--color-interaction-container-neutral-background);
+  --components-list-dropdown-group-title-background: var(--color-transparent);
+  --components-list-dropdown-item-background-disabled: var(--color-interaction-container-neutral-background);
+  --components-list-dropdown-item-background-hover: var(--color-interaction-container-neutral-background-hover);
+  --components-list-dropdown-item-background-default: var(--color-interaction-container-neutral-background);
   --components-list-native-item-content-hover: var(--color-base-white);
   --components-list-native-item-content-default: var(--color-base-white);
   --components-form-shape-foreground-default: var(--color-base-white);
@@ -226,7 +228,7 @@
   --color-content-inverted-medium-text: var(--color-gray-spark-550);
   --color-content-inverted-high-icon: var(--color-gray-spark-800);
   --color-content-inverted-high-text: var(--color-gray-spark-800);
-  --color-content-lower-text: var(--color-gray-spark-500);
+  --color-content-lower-text: var(--color-gray-spark-400);
   --color-content-low-icon: var(--color-gray-spark-350);
   --color-content-low-text: var(--color-gray-spark-350);
   --color-content-low-border: var(--color-gray-spark-500);
@@ -260,6 +262,7 @@
   --color-interaction-link-high-text: var(--color-orange-500);
   --color-interaction-container-neutral-text-active: var(--color-orange-400);
   --color-interaction-container-neutral-icon-active: var(--color-orange-400);
+  --color-interaction-container-neutral-border-active: var(--color-orange-400);
   --color-interaction-container-neutral-background-active: var(--color-orange-900);
   --color-interaction-container-branded-high-text-hover: var(--color-base-black);
   --color-interaction-container-branded-high-text-active: var(--color-base-black);
@@ -313,6 +316,9 @@
   --components-breadcrumb-text-hover: var(--color-interaction-link-low-text-hover);
   --components-breadcrumb-text-active: var(--color-content-medium-text);
   --components-breadcrumb-text: var(--color-content-low-text);
+  --components-field-time-border-active: var(--color-interaction-container-neutral-icon-active);
+  --components-field-time-text-active: var(--color-interaction-container-neutral-text-active);
+  --components-field-time-background-active: var(--color-interaction-container-neutral-background-active);
   --components-avatar-content-10: var(--color-rainbow-10-icon);
   --components-avatar-content-9: var(--color-rainbow-9-text);
   --components-avatar-content-8: var(--color-rainbow-8-text);
@@ -368,11 +374,20 @@
   --components-button-destructive-lower-text: var(--color-dont-use-content);
   --components-button-destructive-lower-background-hover: var(--color-dont-use-background);
   --components-button-destructive-lower-background: var(--color-dont-use-background);
-  --components-list-custom-border: var(--color-content-low-border);
-  --components-list-custom-separator: var(--color-content-low-border);
-  --components-list-custom-item-title-content: var(--color-content-low-text);
-  --components-list-custom-item-content-disabled: var(--color-content-low-text);
-  --components-list-custom-background: var(--color-level-00-background);
+  --components-list-dropdown-border: var(--color-content-low-border);
+  --components-list-dropdown-separator: var(--color-content-low-border);
+  --components-list-dropdown-group-title-content: var(--color-content-medium-text);
+  --components-list-dropdown-item-background-active: var(--color-interaction-container-neutral-background-active);
+  --components-list-dropdown-item-description-disabled: var(--color-content-lower-text);
+  --components-list-dropdown-item-description-hover: var(--color-content-medium-text);
+  --components-list-dropdown-item-description-default: var(--color-content-low-text);
+  --components-list-dropdown-item-label-active: var(--color-content-low-text);
+  --components-list-dropdown-item-label-disabled: var(--color-content-low-text);
+  --components-list-dropdown-item-label-hover: var(--color-content-high-text);
+  --components-list-dropdown-item-label-default: var(--color-content-medium-text);
+  --components-list-dropdown-item-border-active: var(--color-interaction-container-neutral-border-active);
+  --components-list-dropdown-header-background: var(--color-level-10-background);
+  --components-list-dropdown-background: var(--color-level-00-background);
   --components-form-shape-foreground-disabled-error: var(--color-feedback-error-high-background);
   --components-form-shape-foreground-switch-dot: var(--color-content-medium-border);
   --components-form-shape-border-success: var(--color-feedback-success-low-border);
@@ -451,8 +466,8 @@
   --color-interaction-container-neutral-border: var(--color-content-low-text);
   --components-menu-contextual-item-content-hover: var(--color-interaction-container-neutral-text-hover);
   --components-menu-contextual-item-content: var(--color-interaction-container-neutral-text);
-  --components-list-custom-item-content-hover: var(--color-interaction-container-neutral-text-hover);
-  --components-list-custom-item-content-default: var(--color-interaction-container-neutral-text);
+  --components-field-time-text-hover: var(--color-interaction-container-neutral-icon-hover);
+  --components-field-time-text-default: var(--color-interaction-container-neutral-text);
   --components-form-shape-foreground-disabled: var(--components-form-shape-border-default);
   --components-button-lower-text-hover: var(--color-interaction-container-neutral-text-hover);
   --components-button-lower-text: var(--color-interaction-container-neutral-text);
@@ -556,6 +571,8 @@
   --components-popover-background: var(--color-gray-spark-00);
   --components-menu-contextual-item-background-hover: var(--color-interaction-container-neutral-background-hover);
   --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
+  --components-field-time-background-hover: var(--color-interaction-container-neutral-background-hover);
+  --components-field-time-background-default: var(--color-interaction-container-neutral-background);
   --components-overlay-background: var(--color-gray-spark-850);
   --components-button-destructive-high-icon-hover: var(--color-base-white);
   --components-button-destructive-high-icon: var(--color-base-white);
@@ -578,10 +595,10 @@
   --components-loader-brand-foreground: var(--color-orange-500);
   --components-loader-brand-background: var(--color-orange-50);
   --components-loader-white-foreground: var(--color-base-white);
-  --components-list-custom-item-background-title: var(--color-interaction-container-neutral-background);
-  --components-list-custom-item-background-disabled: var(--color-interaction-container-neutral-background);
-  --components-list-custom-item-background-hover: var(--color-interaction-container-neutral-background-hover);
-  --components-list-custom-item-background-default: var(--color-interaction-container-neutral-background);
+  --components-list-dropdown-group-title-background: var(--color-transparent);
+  --components-list-dropdown-item-background-disabled: var(--color-interaction-container-neutral-background);
+  --components-list-dropdown-item-background-hover: var(--color-interaction-container-neutral-background-hover);
+  --components-list-dropdown-item-background-default: var(--color-interaction-container-neutral-background);
   --components-list-native-item-content-hover: var(--color-base-white);
   --components-list-native-item-content-default: var(--color-base-white);
   --components-form-shape-foreground-default: var(--color-base-white);
@@ -743,6 +760,7 @@
   --color-interaction-link-high-text: var(--color-orange-500);
   --color-interaction-container-neutral-text-active: var(--color-orange-600);
   --color-interaction-container-neutral-icon-active: var(--color-orange-600);
+  --color-interaction-container-neutral-border-active: var(--color-orange-600);
   --color-interaction-container-neutral-background-active: var(--color-orange-50);
   --color-interaction-container-branded-high-text-hover: var(--color-base-white);
   --color-interaction-container-branded-high-text-active: var(--color-base-white);
@@ -796,6 +814,9 @@
   --components-breadcrumb-text-hover: var(--color-interaction-link-low-text-hover);
   --components-breadcrumb-text-active: var(--color-content-medium-text);
   --components-breadcrumb-text: var(--color-content-low-text);
+  --components-field-time-border-active: var(--color-interaction-container-neutral-icon-active);
+  --components-field-time-text-active: var(--color-interaction-container-neutral-text-active);
+  --components-field-time-background-active: var(--color-interaction-container-neutral-background-active);
   --components-avatar-content-10: var(--color-rainbow-10-icon);
   --components-avatar-content-9: var(--color-rainbow-9-text);
   --components-avatar-content-8: var(--color-rainbow-8-text);
@@ -851,11 +872,20 @@
   --components-button-destructive-lower-text: var(--color-dont-use-content);
   --components-button-destructive-lower-background-hover: var(--color-dont-use-background);
   --components-button-destructive-lower-background: var(--color-dont-use-background);
-  --components-list-custom-border: var(--color-content-low-border);
-  --components-list-custom-separator: var(--color-content-low-border);
-  --components-list-custom-item-title-content: var(--color-content-low-text);
-  --components-list-custom-item-content-disabled: var(--color-content-low-text);
-  --components-list-custom-background: var(--color-level-00-background);
+  --components-list-dropdown-border: var(--color-content-low-border);
+  --components-list-dropdown-separator: var(--color-content-low-border);
+  --components-list-dropdown-group-title-content: var(--color-content-medium-text);
+  --components-list-dropdown-item-background-active: var(--color-interaction-container-neutral-background-active);
+  --components-list-dropdown-item-description-disabled: var(--color-content-low-text);
+  --components-list-dropdown-item-description-hover: var(--color-content-low-text);
+  --components-list-dropdown-item-description-default: var(--color-content-low-text);
+  --components-list-dropdown-item-label-active: var(--color-interaction-container-neutral-text-active);
+  --components-list-dropdown-item-label-disabled: var(--color-content-medium-text);
+  --components-list-dropdown-item-label-hover: var(--color-content-high-text);
+  --components-list-dropdown-item-label-default: var(--color-content-medium-text);
+  --components-list-dropdown-item-border-active: var(--color-interaction-container-neutral-border-active);
+  --components-list-dropdown-header-background: var(--color-level-10-background);
+  --components-list-dropdown-background: var(--color-level-00-background);
   --components-form-shape-foreground-disabled-error: var(--color-feedback-error-high-background);
   --components-form-shape-foreground-switch-dot: var(--color-content-medium-border);
   --components-form-shape-border-success: var(--color-feedback-success-low-border);
@@ -936,8 +966,8 @@
   --color-interaction-container-neutral-border: var(--color-content-low-text);
   --components-menu-contextual-item-content-hover: var(--color-interaction-container-neutral-text-hover);
   --components-menu-contextual-item-content: var(--color-interaction-container-neutral-text);
-  --components-list-custom-item-content-hover: var(--color-interaction-container-neutral-text-hover);
-  --components-list-custom-item-content-default: var(--color-interaction-container-neutral-text);
+  --components-field-time-text-hover: var(--color-interaction-container-neutral-text-hover);
+  --components-field-time-text-default: var(--color-interaction-container-neutral-text);
   --components-form-shape-foreground-disabled: var(--components-form-shape-border-default);
   --components-button-lower-text-hover: var(--color-interaction-container-neutral-text-hover);
   --components-button-lower-text: var(--color-interaction-container-neutral-text);
@@ -1064,12 +1094,6 @@
   --color-turquoise-200: #b8d6d2;
   --color-turquoise-100: #d2e5e3;
   --color-turquoise-50: #ecf4f3;
-  --color-red-mccs-00: #ff6161;
-  --color-red-mccs-500: #450000;
-  --color-red-mccs-400: #7d0000;
-  --color-red-mccs-300: #ae0303;
-  --color-red-mccs-200: #d00202;
-  --color-red-mccs-100: #ff3838;
   --color-red-900: #3d0909;
   --color-red-800: #610e0e;
   --color-red-700: #851313;
@@ -1252,6 +1276,7 @@
   --popover-font-weight: 500;
   --menu-contextual-item-font-weight: 500;
   --menu-contextual-divider-padding-bottom: 3px;
+  --form-field-badge-gap: 0px;
   --list-native-separator-padding-y: 3px;
   --list-native-separator-padding-x: 9px;
   --button-lg-ring-radius: 9px;
@@ -1293,53 +1318,6 @@
   --loader-size-md: var(--spacing-6);
   --loader-size-sm: var(--spacing-5);
   --loader-size-xs: var(--spacing-4);
-  --form-toggle-width: var(--spacing-9);
-  --form-toggle-switch-dot-selected: var(--spacing-3-5);
-  --form-toggle-switch-dot-default: var(--spacing-3);
-  --form-toggle-padding-selected: var(--spacing-0-5);
-  --form-toggle-padding-default: var(--spacing-1);
-  --form-toggle-radius: var(--radius-rounded-full);
-  --form-toggle-padding-top: var(--spacing-0);
-  --form-toggle-height: var(--spacing-5);
-  --form-toggle-border-width: var(--spacing-0-5);
-  --form-radio-ring-radius: var(--radius-rounded-full);
-  --form-radio-size: var(--spacing-5);
-  --form-radio-padding-top: var(--spacing-0);
-  --form-radio-inner-circle-size: var(--spacing-2);
-  --form-radio-inner-circle-padding: var(--spacing-1-5);
-  --form-radio-border-width: var(--spacing-0-5);
-  --form-checkbox-icon-stroke: var(--spacing-0-5);
-  --form-checkbox-ring-radius: var(--radius-rounded-lg);
-  --form-checkbox-size: var(--spacing-5);
-  --form-checkbox-radius: var(--radius-rounded-md);
-  --form-checkbox-padding-top: var(--spacing-0);
-  --form-checkbox-icon-size: var(--spacing-3-5);
-  --form-checkbox-border-width: var(--spacing-0-5);
-  --form-field-inner-button-padding-y: var(--spacing-2-5);
-  --form-field-inner-button-padding-x-int: var(--spacing-1-5);
-  --form-field-inner-button-padding-x-ext: var(--spacing-2-5);
-  --form-field-leading-trailing-line-height: var(--line-height-base);
-  --form-field-leading-trailing-icon-size: var(--spacing-5);
-  --form-field-leading-trailing-font-size: var(--font-size-sm);
-  --form-field-radius: var(--radius-rounded-md);
-  --form-field-padding-y: var(--spacing-2);
-  --form-field-padding-x-icon-button: var(--spacing-10);
-  --form-field-padding-x: var(--spacing-2);
-  --form-field-line-height: var(--line-height-base);
-  --form-field-gap-inner: var(--spacing-2);
-  --form-field-gap: var(--spacing-2);
-  --form-field-icon-size: var(--spacing-5);
-  --form-field-font-weight: var(--font-weight-medium-emphasis);
-  --form-field-font-size: var(--font-size-md);
-  --form-label-font-weight: var(--font-weight-medium-emphasis);
-  --form-label-line-height: var(--line-height-sm);
-  --form-label-gap: var(--spacing-1);
-  --form-label-font-size: var(--font-size-sm);
-  --form-description-font-weight: var(--font-weight-low-emphasis);
-  --form-description-line-height: var(--line-height-sm);
-  --form-description-font-size: var(--font-size-sm);
-  --form-gap-y: var(--spacing-1);
-  --form-gap-x: var(--spacing-3);
   --focus-outline-stroke: var(--spacing-0-5);
   --focus-outline-offset: var(--spacing-0-5);
   --focus-field-stroke: var(--spacing-px);
@@ -1446,21 +1424,71 @@
   --menu-contextual-item-font-size: var(--font-size-sm);
   --menu-contextual-divider-padding-x: var(--spacing-2-5);
   --menu-contextual-divider-padding-top: var(--spacing-1);
-  --list-custom-sub-item-padding-left: var(--spacing-10);
-  --list-custom-separator-padding-y: var(--spacing-0-5);
-  --list-custom-separator-padding-x: var(--spacing-0);
-  --list-custom-padding: var(--spacing-2);
-  --list-custom-radius: var(--radius-rounded-md);
-  --list-custom-gap-y: var(--spacing-0-5);
-  --list-custom-item-radius: var(--radius-rounded-md);
-  --list-custom-item-gap-x: var(--spacing-3);
-  --list-custom-item-padding-y: var(--spacing-2);
-  --list-custom-item-padding-x: var(--spacing-2);
-  --list-custom-item-padding-right: var(--spacing-2);
-  --list-custom-item-padding-left: var(--spacing-8);
-  --list-custom-line-height: var(--line-height-base);
-  --list-custom-font-size: var(--font-size-md);
-  --list-custom-icon-size: var(--spacing-5);
+  --form-toggle-width: var(--spacing-9);
+  --form-toggle-switch-dot-selected: var(--spacing-3-5);
+  --form-toggle-switch-dot-default: var(--spacing-3);
+  --form-toggle-padding-selected: var(--spacing-0-5);
+  --form-toggle-padding-default: var(--spacing-1);
+  --form-toggle-radius: var(--radius-rounded-full);
+  --form-toggle-padding-top: var(--spacing-0);
+  --form-toggle-height: var(--spacing-5);
+  --form-toggle-border-width: var(--spacing-0-5);
+  --form-radio-ring-radius: var(--radius-rounded-full);
+  --form-radio-size: var(--spacing-5);
+  --form-radio-padding-top: var(--spacing-0);
+  --form-radio-inner-circle-size: var(--spacing-2);
+  --form-radio-inner-circle-padding: var(--spacing-1-5);
+  --form-radio-border-width: var(--spacing-0-5);
+  --form-checkbox-icon-stroke: var(--spacing-0-5);
+  --form-checkbox-ring-radius: var(--radius-rounded-lg);
+  --form-checkbox-size: var(--spacing-5);
+  --form-checkbox-radius: var(--radius-rounded-md);
+  --form-checkbox-padding-top: var(--spacing-0);
+  --form-checkbox-icon-size: var(--spacing-3-5);
+  --form-checkbox-border-width: var(--spacing-0-5);
+  --form-label-font-weight: var(--font-weight-medium-emphasis);
+  --form-label-line-height: var(--line-height-sm);
+  --form-label-gap: var(--spacing-1);
+  --form-label-font-size: var(--font-size-sm);
+  --form-description-font-weight: var(--font-weight-low-emphasis);
+  --form-description-line-height: var(--line-height-sm);
+  --form-description-font-size: var(--font-size-sm);
+  --form-gap-y: var(--spacing-1);
+  --form-gap-x: var(--spacing-3);
+  --form-field-inner-button-padding-y: var(--spacing-2-5);
+  --form-field-inner-button-padding-x-int: var(--spacing-1-5);
+  --form-field-inner-button-padding-x-ext: var(--spacing-2-5);
+  --form-field-leading-trailing-line-height: var(--line-height-base);
+  --form-field-leading-trailing-icon-size: var(--spacing-5);
+  --form-field-leading-trailing-font-size: var(--font-size-sm);
+  --form-field-radius: var(--radius-rounded-md);
+  --form-field-padding-y: var(--spacing-2);
+  --form-field-padding-x-icon-button: var(--spacing-10);
+  --form-field-padding-x: var(--spacing-2);
+  --form-field-line-height: var(--line-height-base);
+  --form-field-gap-inner: var(--spacing-2);
+  --form-field-gap: var(--spacing-2);
+  --form-field-icon-size: var(--spacing-5);
+  --form-field-font-weight: var(--font-weight-medium-emphasis);
+  --form-field-font-size: var(--font-size-md);
+  --form-field-badge-padding-y: var(--spacing-0-5);
+  --form-field-badge-padding-x: var(--spacing-1);
+  --list-multiselect-padding: var(--spacing-3);
+  --list-dropdown-sub-item-padding-left: var(--spacing-10);
+  --list-dropdown-separator-padding-y: var(--spacing-0-5);
+  --list-dropdown-separator-padding-x: var(--spacing-0);
+  --list-dropdown-padding: var(--spacing-2);
+  --list-dropdown-radius: var(--radius-rounded-md);
+  --list-dropdown-gap-y: var(--spacing-0-5);
+  --list-dropdown-item-radius: var(--radius-rounded-md);
+  --list-dropdown-item-gap-x: var(--spacing-3);
+  --list-dropdown-item-padding-y: var(--spacing-2);
+  --list-dropdown-item-padding-x: var(--spacing-2);
+  --list-dropdown-item-padding-right: var(--spacing-2);
+  --list-dropdown-item-padding-left: var(--spacing-8);
+  --list-dropdown-line-height: var(--line-height-base);
+  --list-dropdown-font-size: var(--font-size-md);
+  --list-dropdown-icon-size: var(--spacing-5);
   --list-native-sub-item-padding-left: var(--spacing-8);
   --list-native-padding: var(--spacing-2);
   --list-native-radius: var(--radius-rounded-md);

package/dist/generated/nova-tailwind-components.d.ts

@@ -329,7 +329,7 @@ export declare const NOVA_TAILWIND_COMPONENTS: {
     '.nv-link:hover': {
         color: string;
     };
-    '.nv-sidenav .nv-link, .nv-navbar .nv-link, .nv-tabs .nv-link': {
+    '.nv-sidenav .nv-link, .nv-navbar .nv-link, .nv-tabs .nv-link, .nv-buttongroup .nv-link': {
         display: string;
         alignItems: string;
         color: string;
@@ -361,16 +361,16 @@ export declare const NOVA_TAILWIND_COMPONENTS: {
         borderColor: string;
         backgroundColor: string;
     };
-    '.nv-navbar .nv-link, .nv-sidenav .nv-link': {
+    '.nv-navbar .nv-link, .nv-sidenav .nv-link, .nv-buttongroup .nv-link': {
         border: string;
         borderRadius: string;
     };
-    '.nv-navbar .nv-link:hover, .nv-sidenav .nv-link:hover': {
+    '.nv-navbar .nv-link:hover, .nv-sidenav .nv-link:hover, .nv-buttongroup .nv-link:hover': {
         color: string;
         borderColor: string;
         backgroundColor: string;
     };
-    '.nv-navbar .nv-link.active, .nv-navbar .nv-link.router-link-active, .nv-sidenav .nv-link.active, .nv-sidenav .nv-link.router-link-active': {
+    '.nv-navbar .nv-link.active, .nv-navbar .nv-link.router-link-active, .nv-sidenav .nv-link.active, .nv-sidenav .nv-link.router-link-active, .nv-buttongroup .nv-link.active, .nv-buttongroup .nv-link.router-link-active': {
         color: string;
         borderColor: string;
         backgroundColor: string;
@@ -382,6 +382,27 @@ export declare const NOVA_TAILWIND_COMPONENTS: {
         width: string;
         height: string;
     };
+    '.nv-buttongroup': {
+        display: string;
+        borderRadius: string;
+        border: string;
+        overflow: string;
+    };
+    '.nv-buttongroup .nv-link': {
+        borderColor: string;
+        borderWidth: string;
+        borderStyle: string;
+        borderRadius: string;
+    };
+    '.nv-buttongroup .nv-link:hover': {
+        borderColor: string;
+    };
+    '.nv-buttongroup .nv-link.active, .nv-buttongroup .nv-link.router-link-active': {
+        borderColor: string;
+    };
+    '.nv-buttongroup li:last-child .nv-link': {
+        borderRightWidth: string;
+    };
     '.nv-link .nv-badge': {
         borderRadius: string;
         width: string;
@@ -396,4 +417,8 @@ export declare const NOVA_TAILWIND_COMPONENTS: {
         opacity: string;
         cursor: string;
     };
+    '.nv-link.disabled:hover': {
+        color: string;
+        backgroundColor: string;
+    };
 };

package/dist/generated/nova-tailwind-components.js

@@ -330,7 +330,7 @@ export const NOVA_TAILWIND_COMPONENTS = {
     '.nv-link:hover': {
         'color': 'var(--color-interaction-link-high-text-hover)'
     },
-    '.nv-sidenav .nv-link, .nv-navbar .nv-link, .nv-tabs .nv-link': {
+    '.nv-sidenav .nv-link, .nv-navbar .nv-link, .nv-tabs .nv-link, .nv-buttongroup .nv-link': {
         'display': 'flex',
         'alignItems': 'center',
         'color': 'var(--color-interaction-container-neutral-text)',
@@ -362,16 +362,16 @@ export const NOVA_TAILWIND_COMPONENTS = {
         'borderColor': 'var(--color-interaction-container-branded-low-border-active)',
         'backgroundColor': 'transparent'
     },
-    '.nv-navbar .nv-link, .nv-sidenav .nv-link': {
+    '.nv-navbar .nv-link, .nv-sidenav .nv-link, .nv-buttongroup .nv-link': {
         'border': 'solid 0 transparent',
         'borderRadius': 'var(--radius-rounded-md)'
     },
-    '.nv-navbar .nv-link:hover, .nv-sidenav .nv-link:hover': {
+    '.nv-navbar .nv-link:hover, .nv-sidenav .nv-link:hover, .nv-buttongroup .nv-link:hover': {
         'color': 'var(--color-interaction-container-neutral-text-hover)',
         'borderColor': 'var(--color-interaction-container-neutral-border-hover)',
         'backgroundColor': 'var(--color-interaction-container-neutral-background-hover)'
     },
-    '.nv-navbar .nv-link.active, .nv-navbar .nv-link.router-link-active, .nv-sidenav .nv-link.active, .nv-sidenav .nv-link.router-link-active': {
+    '.nv-navbar .nv-link.active, .nv-navbar .nv-link.router-link-active, .nv-sidenav .nv-link.active, .nv-sidenav .nv-link.router-link-active, .nv-buttongroup .nv-link.active, .nv-buttongroup .nv-link.router-link-active': {
         'color': 'var(--color-interaction-container-neutral-text-active)',
         'borderColor': 'var(--color-interaction-container-neutral-text-active)',
         'backgroundColor': 'var(--color-interaction-container-neutral-background-active)'
@@ -383,6 +383,27 @@ export const NOVA_TAILWIND_COMPONENTS = {
         'width': '20px !important',
         'height': '20px !important'
     },
+    '.nv-buttongroup': {
+        'display': 'inline-flex',
+        'borderRadius': 'var(--radius-rounded-md)',
+        'border': '1px solid var(--color-content-medium-border)',
+        'overflow': 'hidden'
+    },
+    '.nv-buttongroup .nv-link': {
+        'borderColor': 'var(--color-content-medium-border)',
+        'borderWidth': '0 1px 0 0',
+        'borderStyle': 'solid',
+        'borderRadius': '0'
+    },
+    '.nv-buttongroup .nv-link:hover': {
+        'borderColor': 'var(--color-content-medium-border)'
+    },
+    '.nv-buttongroup .nv-link.active, .nv-buttongroup .nv-link.router-link-active': {
+        'borderColor': 'var(--color-content-medium-border)'
+    },
+    '.nv-buttongroup li:last-child .nv-link': {
+        'borderRightWidth': '0'
+    },
     '.nv-link .nv-badge': {
         'borderRadius': 'var(--radius-rounded-full)',
         'width': 'var(--spacing-5)',
@@ -396,5 +417,9 @@ export const NOVA_TAILWIND_COMPONENTS = {
     '.nv-link.disabled': {
         'opacity': '0.5',
         'cursor': 'not-allowed'
+    },
+    '.nv-link.disabled:hover': {
+        'color': 'var(--color-interaction-container-neutral-text)',
+        'backgroundColor': 'transparent'
     }
 };

package/dist/generated/nova-tailwind-tokens.d.ts

@@ -261,6 +261,9 @@ export declare const NOVA_TAILWIND_TOKENS: {
     '.border-interaction-container-neutral': {
         'border-color': string;
     };
+    '.border-interaction-container-neutral-active': {
+        'border-color': string;
+    };
     '.border-interaction-container-neutral-hover': {
         'border-color': string;
     };

package/dist/generated/nova-tailwind-tokens.js

@@ -262,6 +262,9 @@ export const NOVA_TAILWIND_TOKENS = {
     '.border-interaction-container-neutral': {
         'border-color': 'var(--color-interaction-container-neutral-border)'
     },
+    '.border-interaction-container-neutral-active': {
+        'border-color': 'var(--color-interaction-container-neutral-border-active)'
+    },
     '.border-interaction-container-neutral-hover': {
         'border-color': 'var(--color-interaction-container-neutral-border-hover)'
     },

package/dist/js/mccs_dark.d.ts

@@ -30,6 +30,7 @@ export const ColorInteractionContainerNeutralBackground : string;
 export const ColorInteractionContainerNeutralBackgroundHover : string;
 export const ColorInteractionContainerNeutralBackgroundActive : string;
 export const ColorInteractionContainerNeutralBorder : string;
+export const ColorInteractionContainerNeutralBorderActive : string;
 export const ColorInteractionContainerNeutralBorderHover : string;
 export const ColorInteractionContainerNeutralIcon : string;
 export const ColorInteractionContainerNeutralIconActive : string;
@@ -327,17 +328,24 @@ export const ComponentsListNativeItemBackgroundDefault : string;
 export const ComponentsListNativeItemBackgroundHover : string;
 export const ComponentsListNativeItemBackgroundDisabled : string;
 export const ComponentsListNativeItemBackgroundTitle : string;
-export const ComponentsListCustomBackground : string;
-export const ComponentsListCustomItemContentDefault : string;
-export const ComponentsListCustomItemContentHover : string;
-export const ComponentsListCustomItemContentDisabled : string;
-export const ComponentsListCustomItemBackgroundDefault : string;
-export const ComponentsListCustomItemBackgroundHover : string;
-export const ComponentsListCustomItemBackgroundDisabled : string;
-export const ComponentsListCustomItemBackgroundTitle : string;
-export const ComponentsListCustomItemTitleContent : string;
-export const ComponentsListCustomSeparator : string;
-export const ComponentsListCustomBorder : string;
+export const ComponentsListDropdownBackground : string;
+export const ComponentsListDropdownHeaderBackground : string;
+export const ComponentsListDropdownItemBorderActive : string;
+export const ComponentsListDropdownItemLabelDefault : string;
+export const ComponentsListDropdownItemLabelHover : string;
+export const ComponentsListDropdownItemLabelDisabled : string;
+export const ComponentsListDropdownItemLabelActive : string;
+export const ComponentsListDropdownItemDescriptionDefault : string;
+export const ComponentsListDropdownItemDescriptionHover : string;
+export const ComponentsListDropdownItemDescriptionDisabled : string;
+export const ComponentsListDropdownItemBackgroundDefault : string;
+export const ComponentsListDropdownItemBackgroundHover : string;
+export const ComponentsListDropdownItemBackgroundDisabled : string;
+export const ComponentsListDropdownItemBackgroundActive : string;
+export const ComponentsListDropdownGroupTitleContent : string;
+export const ComponentsListDropdownGroupTitleBackground : string;
+export const ComponentsListDropdownSeparator : string;
+export const ComponentsListDropdownBorder : string;
 export const ComponentsLoaderWhiteBackground : string;
 export const ComponentsLoaderWhiteForeground : string;
 export const ComponentsLoaderBrandBackground : string;
@@ -421,6 +429,13 @@ export const ComponentsAvatarContent7 : string;
 export const ComponentsAvatarContent8 : string;
 export const ComponentsAvatarContent9 : string;
 export const ComponentsAvatarContent10 : string;
+export const ComponentsFieldTimeBackgroundDefault : string;
+export const ComponentsFieldTimeBackgroundHover : string;
+export const ComponentsFieldTimeBackgroundActive : string;
+export const ComponentsFieldTimeTextDefault : string;
+export const ComponentsFieldTimeTextHover : string;
+export const ComponentsFieldTimeTextActive : string;
+export const ComponentsFieldTimeBorderActive : string;
 export const ComponentsBreadcrumbText : string;
 export const ComponentsBreadcrumbTextActive : string;
 export const ComponentsBreadcrumbTextHover : string;

package/dist/js/mccs_dark.js

@@ -30,6 +30,7 @@ export const ColorInteractionContainerNeutralBackground = "#ffffff";
 export const ColorInteractionContainerNeutralBackgroundHover = "#ffffff";
 export const ColorInteractionContainerNeutralBackgroundActive = "#ffffff";
 export const ColorInteractionContainerNeutralBorder = "#889499";
+export const ColorInteractionContainerNeutralBorderActive = "#71b2bc";
 export const ColorInteractionContainerNeutralBorderHover = "#bac1c4";
 export const ColorInteractionContainerNeutralIcon = "#889499";
 export const ColorInteractionContainerNeutralIconActive = "#71b2bc";
@@ -75,7 +76,7 @@ export const ColorContentMediumIcon = "#bac1c4";
 export const ColorContentLowBorder = "#394d55";
 export const ColorContentLowText = "#889499";
 export const ColorContentLowIcon = "#889499";
-export const ColorContentLowerText = "#3f555e";
+export const ColorContentLowerText = "#617177";
 export const ColorContentInvertedHighText = "#0b0f11";
 export const ColorContentInvertedHighIcon = "#0b0f11";
 export const ColorContentInvertedMediumText = "#27353b";
@@ -327,17 +328,24 @@ export const ComponentsListNativeItemBackgroundDefault = "#ffffff";
 export const ComponentsListNativeItemBackgroundHover = "#4e7fdf";
 export const ComponentsListNativeItemBackgroundDisabled = "#ffffff";
 export const ComponentsListNativeItemBackgroundTitle = "#ffffff";
-export const ComponentsListCustomBackground = "#0b0f11";
-export const ComponentsListCustomItemContentDefault = "#889499";
-export const ComponentsListCustomItemContentHover = "#bac1c4";
-export const ComponentsListCustomItemContentDisabled = "#889499";
-export const ComponentsListCustomItemBackgroundDefault = "#ffffff";
-export const ComponentsListCustomItemBackgroundHover = "#ffffff";
-export const ComponentsListCustomItemBackgroundDisabled = "#ffffff";
-export const ComponentsListCustomItemBackgroundTitle = "#ffffff";
-export const ComponentsListCustomItemTitleContent = "#889499";
-export const ComponentsListCustomSeparator = "#394d55";
-export const ComponentsListCustomBorder = "#394d55";
+export const ComponentsListDropdownBackground = "#0b0f11";
+export const ComponentsListDropdownHeaderBackground = "#171f22";
+export const ComponentsListDropdownItemBorderActive = "#71b2bc";
+export const ComponentsListDropdownItemLabelDefault = "#bac1c4";
+export const ComponentsListDropdownItemLabelHover = "#f5f6f7";
+export const ComponentsListDropdownItemLabelDisabled = "#889499";
+export const ComponentsListDropdownItemLabelActive = "#889499";
+export const ComponentsListDropdownItemDescriptionDefault = "#889499";
+export const ComponentsListDropdownItemDescriptionHover = "#bac1c4";
+export const ComponentsListDropdownItemDescriptionDisabled = "#617177";
+export const ComponentsListDropdownItemBackgroundDefault = "#ffffff";
+export const ComponentsListDropdownItemBackgroundHover = "#ffffff";
+export const ComponentsListDropdownItemBackgroundDisabled = "#ffffff";
+export const ComponentsListDropdownItemBackgroundActive = "#ffffff";
+export const ComponentsListDropdownGroupTitleContent = "#bac1c4";
+export const ComponentsListDropdownGroupTitleBackground = "#ffffff";
+export const ComponentsListDropdownSeparator = "#394d55";
+export const ComponentsListDropdownBorder = "#394d55";
 export const ComponentsLoaderWhiteBackground = "#ffffff";
 export const ComponentsLoaderWhiteForeground = "#ffffff";
 export const ComponentsLoaderBrandBackground = "#0b292e";
@@ -421,6 +429,13 @@ export const ComponentsAvatarContent7 = "#66b16a";
 export const ComponentsAvatarContent8 = "#71b2bc";
 export const ComponentsAvatarContent9 = "#8da930";
 export const ComponentsAvatarContent10 = "#9fadb2";
+export const ComponentsFieldTimeBackgroundDefault = "#ffffff";
+export const ComponentsFieldTimeBackgroundHover = "#ffffff";
+export const ComponentsFieldTimeBackgroundActive = "#ffffff";
+export const ComponentsFieldTimeTextDefault = "#889499";
+export const ComponentsFieldTimeTextHover = "#bac1c4";
+export const ComponentsFieldTimeTextActive = "#71b2bc";
+export const ComponentsFieldTimeBorderActive = "#71b2bc";
 export const ComponentsBreadcrumbText = "#889499";
 export const ComponentsBreadcrumbTextActive = "#bac1c4";
 export const ComponentsBreadcrumbTextHover = "#4b9eaa";
@@ -445,9 +460,9 @@ export const ComponentsMenuContextualBackground = "#0b0f11";
 export const ComponentsMenuContextualBorder = "#394d55";
 export const ComponentsMenuContextualItemBackground = "#ffffff";
 export const ComponentsMenuContextualItemBackgroundHover = "#ffffff";
-export const ComponentsMenuContextualItemShortcut = "#3f555e";
+export const ComponentsMenuContextualItemShortcut = "#617177";
 export const ComponentsMenuContextualItemContent = "#889499";
-export const ComponentsMenuContextualItemContentDisabled = "#3f555e";
+export const ComponentsMenuContextualItemContentDisabled = "#617177";
 export const ComponentsMenuContextualItemContentHover = "#bac1c4";
 export const ComponentsPopoverBackground = "#0b0f11";
 export const ComponentsPopoverBorder = "#394d55";