fix(components): style fix for nav item when active

[owilliams320]

Description

Adjustment to expand/collapse nav item when its sub nav is active. Consumer will have to apply this styling and use hasActivatedChild property on the nav item when it's subnav item is activated.

 [hasActivatedChild] {
      --cv-list-item-background-color: var(--cv-theme-primary-24);
      --cv-theme-on-surface: var(--cv-theme-primary);
    }

    cv-app-shell[open] cv-nav-list-item[hasActivatedChild]:not([subNav]) {
      --cv-list-item-background-color:var(--cv-theme-on-surface-variant-8);
      --cv-theme-on-surface: var(--cv-theme-on-surface-variant);
      --cv-list-item-text-color: var(--cv-theme-on-surface-variant);
    }

What's included?

• added properties --cv-list-item-background-color and --cv-list-item-text-color to nav list item component

Test Steps

• [ ] npm run storybook
• [ ] then open the app shell story
• [ ] finally overwrite the local styles with the snippet given to see it work

General Tests for Every PR

• [ ] npm run start still works.
• [ ] npm run lint passes.
• [ ] npm run stylelint passes.
• [ ] npm test passes and code coverage is not lower.
• [ ] npm run build still works.

Screenshots or link to StackBlitz/Plunker

![Uploading Screenshot 2024-07-29 at 9.21.21 AM.png…]()

[owilliams320]

:tada: This PR is included in version 8.16.1 :tada:

The release is available on:

• v8.16.1
• GitHub release

Your semantic-release bot :package::rocket: