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

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

@@ -39,11 +39,16 @@ exports.NOVA_TAILWIND_COMPONENTS = {
         'border': '1px solid var(--components-button-medium-border)',
         'color': 'var(--components-button-medium-text-hover)'
     },
+    '.nv-button:active': {
+        'background': 'var(--components-button-medium-background-active)',
+        'border': '1px solid var(--components-button-medium-border-active)',
+        'color': 'var(--components-button-medium-text-active)'
+    },
     '.nv-button:focus, .nv-button:focus-within': {
         'outline': 'none'
     },
     '.nv-button:focus-visible, .nv-button:has(:focus-visible)': {
-        'outline': 'var(--focus-outline-stroke) solid var(--color-focus-brand)',
+        'outline': 'calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand)',
         'outlineOffset': 'calc(var(--focus-outline-offset) * 1)'
     },
     '.nv-button:disabled:not([disabled=false])': {
@@ -51,21 +56,26 @@ exports.NOVA_TAILWIND_COMPONENTS = {
         'cursor': 'not-allowed',
         'boxShadow': 'none'
     },
+    '.nv-button.active': {
+        'background': 'var(--components-button-medium-background-active)',
+        'border': '1px solid var(--components-button-medium-border-active)',
+        'color': 'var(--components-button-medium-text-active)'
+    },
     '.nv-button.danger': {
         'background': 'var(--components-button-destructive-high-background)',
-        'border': '1px solid unset',
+        'border': '1px solid transparent',
         'color': 'var(--components-button-destructive-high-text)'
     },
     '.nv-button.danger:hover': {
         'background': 'var(--components-button-destructive-high-background-hover)',
-        'border': '1px solid unset',
+        'border': '1px solid transparent',
         'color': 'var(--components-button-destructive-high-text-hover)'
     },
     '.nv-button.danger:focus, .nv-button.danger:focus-within': {
         'outline': 'none'
     },
     '.nv-button.danger:focus-visible, .nv-button.danger:has(:focus-visible)': {
-        'outline': 'var(--focus-outline-stroke) solid var(--color-focus-destructive)',
+        'outline': 'calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive)',
         'outlineOffset': 'calc(var(--focus-outline-offset) * 1)'
     },
     '.nv-button.size-xs': {
@@ -126,11 +136,16 @@ exports.NOVA_TAILWIND_COMPONENTS = {
         'border': '1px solid var(--components-button-high-border)',
         'color': 'var(--components-button-high-text-hover)'
     },
+    '.nv-button.emphasis-high:active': {
+        'background': 'var(--components-button-high-background-active)',
+        'border': '1px solid var(--components-button-high-border-active)',
+        'color': 'var(--components-button-high-text-active)'
+    },
     '.nv-button.emphasis-high:focus, .nv-button.emphasis-high:focus-within': {
         'outline': 'none'
     },
     '.nv-button.emphasis-high:focus-visible, .nv-button.emphasis-high:has(:focus-visible)': {
-        'outline': 'var(--focus-outline-stroke) solid var(--color-focus-brand)',
+        'outline': 'calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand)',
         'outlineOffset': 'calc(var(--focus-outline-offset) * 1)'
     },
     '.nv-button.emphasis-high:disabled:not([disabled=false])': {
@@ -138,21 +153,26 @@ exports.NOVA_TAILWIND_COMPONENTS = {
         'cursor': 'not-allowed',
         'boxShadow': 'none'
     },
+    '.nv-button.emphasis-high.active': {
+        'background': 'var(--components-button-high-background-active)',
+        'border': '1px solid var(--components-button-high-border-active)',
+        'color': 'var(--components-button-high-text-active)'
+    },
     '.nv-button.emphasis-high.danger': {
         'background': 'var(--components-button-destructive-high-background)',
-        'border': '1px solid unset',
+        'border': '1px solid transparent',
         'color': 'var(--components-button-destructive-high-text)'
     },
     '.nv-button.emphasis-high.danger:hover': {
         'background': 'var(--components-button-destructive-high-background-hover)',
-        'border': '1px solid unset',
+        'border': '1px solid transparent',
         'color': 'var(--components-button-destructive-high-text-hover)'
     },
     '.nv-button.emphasis-high.danger:focus, .nv-button.emphasis-high.danger:focus-within': {
         'outline': 'none'
     },
     '.nv-button.emphasis-high.danger:focus-visible, .nv-button.emphasis-high.danger:has(:focus-visible)': {
-        'outline': 'var(--focus-outline-stroke) solid var(--color-focus-destructive)',
+        'outline': 'calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive)',
         'outlineOffset': 'calc(var(--focus-outline-offset) * 1)'
     },
     '.nv-button.emphasis-medium': {
@@ -165,11 +185,16 @@ exports.NOVA_TAILWIND_COMPONENTS = {
         'border': '1px solid var(--components-button-medium-border)',
         'color': 'var(--components-button-medium-text-hover)'
     },
+    '.nv-button.emphasis-medium:active': {
+        'background': 'var(--components-button-medium-background-active)',
+        'border': '1px solid var(--components-button-medium-border-active)',
+        'color': 'var(--components-button-medium-text-active)'
+    },
     '.nv-button.emphasis-medium:focus, .nv-button.emphasis-medium:focus-within': {
         'outline': 'none'
     },
     '.nv-button.emphasis-medium:focus-visible, .nv-button.emphasis-medium:has(:focus-visible)': {
-        'outline': 'var(--focus-outline-stroke) solid var(--color-focus-brand)',
+        'outline': 'calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand)',
         'outlineOffset': 'calc(var(--focus-outline-offset) * 1)'
     },
     '.nv-button.emphasis-medium:disabled:not([disabled=false])': {
@@ -177,6 +202,11 @@ exports.NOVA_TAILWIND_COMPONENTS = {
         'cursor': 'not-allowed',
         'boxShadow': 'none'
     },
+    '.nv-button.emphasis-medium.active': {
+        'background': 'var(--components-button-medium-background-active)',
+        'border': '1px solid var(--components-button-medium-border-active)',
+        'color': 'var(--components-button-medium-text-active)'
+    },
     '.nv-button.emphasis-medium.danger': {
         'background': 'var(--components-button-destructive-medium-background)',
         'border': '1px solid var(--components-button-destructive-medium-border)',
@@ -191,7 +221,7 @@ exports.NOVA_TAILWIND_COMPONENTS = {
         'outline': 'none'
     },
     '.nv-button.emphasis-medium.danger:focus-visible, .nv-button.emphasis-medium.danger:has(:focus-visible)': {
-        'outline': 'var(--focus-outline-stroke) solid var(--color-focus-destructive)',
+        'outline': 'calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive)',
         'outlineOffset': 'calc(var(--focus-outline-offset) * 1)'
     },
     '.nv-button.emphasis-low': {
@@ -204,11 +234,16 @@ exports.NOVA_TAILWIND_COMPONENTS = {
         'border': '1px solid var(--components-button-low-border)',
         'color': 'var(--components-button-low-text-hover)'
     },
+    '.nv-button.emphasis-low:active': {
+        'background': 'var(--components-button-low-background-active)',
+        'border': '1px solid var(--components-button-low-border-active)',
+        'color': 'var(--components-button-low-text-active)'
+    },
     '.nv-button.emphasis-low:focus, .nv-button.emphasis-low:focus-within': {
         'outline': 'none'
     },
     '.nv-button.emphasis-low:focus-visible, .nv-button.emphasis-low:has(:focus-visible)': {
-        'outline': 'var(--focus-outline-stroke) solid var(--color-focus-brand)',
+        'outline': 'calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand)',
         'outlineOffset': 'calc(var(--focus-outline-offset) * 1)'
     },
     '.nv-button.emphasis-low:disabled:not([disabled=false])': {
@@ -216,6 +251,11 @@ exports.NOVA_TAILWIND_COMPONENTS = {
         'cursor': 'not-allowed',
         'boxShadow': 'none'
     },
+    '.nv-button.emphasis-low.active': {
+        'background': 'var(--components-button-low-background-active)',
+        'border': '1px solid var(--components-button-low-border-active)',
+        'color': 'var(--components-button-low-text-active)'
+    },
     '.nv-button.emphasis-low.danger': {
         'background': 'var(--components-button-destructive-low-background)',
         'border': '1px solid var(--components-button-destructive-low-border)',
@@ -230,7 +270,7 @@ exports.NOVA_TAILWIND_COMPONENTS = {
         'outline': 'none'
     },
     '.nv-button.emphasis-low.danger:focus-visible, .nv-button.emphasis-low.danger:has(:focus-visible)': {
-        'outline': 'var(--focus-outline-stroke) solid var(--color-focus-destructive)',
+        'outline': 'calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive)',
         'outlineOffset': 'calc(var(--focus-outline-offset) * 1)'
     },
     '.nv-button.emphasis-lower': {
@@ -243,11 +283,16 @@ exports.NOVA_TAILWIND_COMPONENTS = {
         'border': '1px solid var(--components-button-lower-border)',
         'color': 'var(--components-button-lower-text-hover)'
     },
+    '.nv-button.emphasis-lower:active': {
+        'background': 'var(--components-button-lower-background-active)',
+        'border': '1px solid var(--components-button-lower-border-active)',
+        'color': 'var(--components-button-lower-text-active)'
+    },
     '.nv-button.emphasis-lower:focus, .nv-button.emphasis-lower:focus-within': {
         'outline': 'none'
     },
     '.nv-button.emphasis-lower:focus-visible, .nv-button.emphasis-lower:has(:focus-visible)': {
-        'outline': 'var(--focus-outline-stroke) solid var(--color-focus-brand)',
+        'outline': 'calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand)',
         'outlineOffset': 'calc(var(--focus-outline-offset) * 1)'
     },
     '.nv-button.emphasis-lower:disabled:not([disabled=false])': {
@@ -255,6 +300,11 @@ exports.NOVA_TAILWIND_COMPONENTS = {
         'cursor': 'not-allowed',
         'boxShadow': 'none'
     },
+    '.nv-button.emphasis-lower.active': {
+        'background': 'var(--components-button-lower-background-active)',
+        'border': '1px solid var(--components-button-lower-border-active)',
+        'color': 'var(--components-button-lower-text-active)'
+    },
     '.nv-button.emphasis-lower.danger': {
         'background': 'var(--components-button-destructive-lower-background)',
         'border': '1px solid var(--components-button-destructive-lower-border)',
@@ -269,7 +319,7 @@ exports.NOVA_TAILWIND_COMPONENTS = {
         'outline': 'none'
     },
     '.nv-button.emphasis-lower.danger:focus-visible, .nv-button.emphasis-lower.danger:has(:focus-visible)': {
-        'outline': 'var(--focus-outline-stroke) solid var(--color-focus-destructive)',
+        'outline': 'calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive)',
         'outlineOffset': 'calc(var(--focus-outline-offset) * 1)'
     },
     '.nv-button.fluid': {
@@ -283,10 +333,71 @@ exports.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': {
+        'display': 'flex',
+        'alignItems': 'center',
+        'color': 'var(--color-interaction-container-neutral-text)',
+        'backgroundColor': 'var(--color-interaction-container-neutral-background)',
+        'textDecoration': 'none',
+        'fontWeight': '500',
+        'padding': 'var(--spacing-2) var(--spacing-3)',
+        'columnGap': 'var(--spacing-2)'
+    },
+    '.nv-tabs': {
+        'display': 'flex',
+        'flex': '1 1 0%',
+        'alignItems': 'center',
+        'borderBottom': '1px solid var(--color-content-low-border)',
+        'columnGap': 'var(--spacing-0-5)'
+    },
     '.nv-tabs .nv-link': {
-        'borderColor': 'transparent'
+        'borderStyle': 'solid',
+        'borderColor': 'transparent',
+        'borderWidth': '0 0 2px 0'
+    },
+    '.nv-tabs .nv-link:hover': {
+        'color': 'var(--color-interaction-container-branded-low-text-hover)',
+        'borderColor': 'transparent',
+        'backgroundColor': 'transparent'
+    },
+    '.nv-tabs .nv-link.active': {
+        'color': 'var(--color-interaction-container-branded-low-text-active)',
+        'borderColor': 'var(--color-interaction-container-branded-low-border-active)',
+        'backgroundColor': 'transparent'
+    },
+    '.nv-navbar .nv-link, .nv-sidenav .nv-link': {
+        'border': 'solid 0 transparent',
+        'borderRadius': 'var(--radius-rounded-md)'
+    },
+    '.nv-navbar .nv-link:hover, .nv-sidenav .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': {
+        'color': 'var(--color-interaction-container-neutral-text-active)',
+        'borderColor': 'var(--color-interaction-container-neutral-text-active)',
+        'backgroundColor': 'var(--color-interaction-container-neutral-background-active)'
+    },
+    '.nv-sidenav .collapsible .nv-link': {
+        'justifyContent': 'space-between'
+    },
+    '.nv-sidenav .collapsible .nv-link .nv-iconbutton': {
+        'width': '20px !important',
+        'height': '20px !important'
+    },
+    '.nv-link .nv-badge': {
+        'borderRadius': 'var(--radius-rounded-full)',
+        'width': 'var(--spacing-5)',
+        'display': 'flex',
+        'alignItems': 'center',
+        'justifyContent': 'center',
+        'fontSize': 'var(--font-size-xs)',
+        'color': 'var(--color-feedback-neutral-high-icon)',
+        'backgroundColor': 'var(--color-feedback-neutral-high-background)'
     },
-    '.nv-tabs .nv-link:hover,\n.nv-tabs .selected': {
-        'borderColor': 'var(--color-interaction-container-branded-high-border)'
+    '.nv-link.disabled': {
+        'opacity': '0.5',
+        'cursor': 'not-allowed'
     }
 };

package/dist/cjs/plugin/nova-plugin.js

@@ -47,6 +47,9 @@ exports.novaTailwindPlugin = (0, plugin_js_1.default)(function (_a) {
         'a:hover': {
             color: 'var(--color-interaction-link-high-text-hover)',
         },
+        'no-underline': {
+            'text-decoration': 'none',
+        },
         h1: {
             fontSize: 'var(--global-typography-h1-font-size)',
             lineHeight: 'var(--global-typography-h1-line-height)',
@@ -109,3 +112,4 @@ exports.novaTailwindPlugin = (0, plugin_js_1.default)(function (_a) {
             width: 'unset',
         } }));
 });
+exports.default = exports.novaTailwindPlugin;

package/dist/cjs/plugin/nova-theme.js

@@ -246,3 +246,4 @@ exports.novaTailwindTheme = {
         lineHeight: exports.lineHeight,
     },
 };
+exports.default = exports.novaTailwindTheme;

package/dist/css/mccs.css

@@ -3,7 +3,7 @@
  */
 
 .dark:root {
-  --components-overlay-opacity: 75px;
+  --components-overlay-opacity: 75%;
   --components-button-destructive-low-border-hover: rgba(255, 255, 255, 0);
   --components-button-destructive-low-border: rgba(255, 255, 255, 0);
   --components-button-destructive-low-background-hover: rgba(255, 255, 255, 0.12);
@@ -20,8 +20,8 @@
   --components-list-native-separator: #838086;
   --components-list-native-item-title-content: rgba(255, 255, 255, 0.5);
   --components-list-native-background: #565558;
-  --components-form-opacity-disabled: 50px;
-  --components-form-opacity-default: 100px;
+  --components-form-opacity-disabled: 50%;
+  --components-form-opacity-default: 100%;
   --components-button-gr-as-complementary-border-hover: rgba(255, 255, 255, 0);
   --components-button-gr-as-complementary-border: rgba(255, 255, 255, 0);
   --components-button-lower-border-hover-2: rgba(255, 255, 255, 0);
@@ -33,7 +33,6 @@
   --components-button-high-border-active: rgba(255, 255, 255, 0);
   --components-button-high-border-hover: rgba(255, 255, 255, 0);
   --components-button-high-border: rgba(255, 255, 255, 0);
-  --components-wpf-components-2: #ffffff;
   --shadow-y-axis-2xl: 25px;
   --shadow-y-axis-xl-2: 20px;
   --shadow-y-axis-xl-1: 10px;
@@ -60,6 +59,10 @@
   --shadow-color-opacity-2: rgba(11, 15, 17, 0.14);
   --shadow-color-opacity-1: rgba(11, 15, 17, 0.09);
   --shadow-color-opacity-0: rgba(11, 15, 17, 0.09);
+  --opacity-disabled-2: 0%;
+  --opacity-disabled: 50%;
+  --color-transparent: rgba(255, 255, 255, 0);
+  --color-white: #ffffff;
   --color-black: #000000;
   --color-interaction-container-neutral-background-active: rgba(255, 255, 255, 0.1);
   --color-interaction-container-neutral-background-hover: rgba(255, 255, 255, 0.1);
@@ -67,11 +70,11 @@
   --color-interaction-container-branded-low-background-hover: rgba(255, 255, 255, 0.12);
   --color-interaction-container-branded-low-background-active: rgba(255, 255, 255, 0.12);
   --color-interaction-container-branded-low-background: rgba(255, 255, 255, 0);
-  --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-tooltip-border: var(--color-gray-ocean-50);
   --components-tooltip-background: var(--color-gray-ocean-50);
   --components-popover-background: var(--color-gray-ocean-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-overlay-background: var(--color-gray-ocean-650);
   --components-button-destructive-high-icon-hover: var(--color-base-black);
   --components-button-destructive-high-icon: var(--color-base-black);
@@ -283,15 +286,15 @@
   --color-interaction-container-branded-low-border-hover: var(--color-petrol-300);
   --color-interaction-container-branded-low-border-active: var(--color-petrol-300);
   --color-interaction-container-branded-low-border: var(--color-petrol-400);
-  --components-menu-contextual-item-content-disabled: var(--color-content-lower-text);
-  --components-menu-contextual-item-shortcut: var(--color-content-lower-text);
-  --components-menu-contextual-border: var(--color-content-low-border);
-  --components-menu-contextual-background: var(--color-level-00-background);
   --components-tooltip-supporting-text: var(--color-content-inverted-medium-text);
   --components-tooltip-text: var(--color-content-inverted-high-text);
   --components-popover-supporting-text: var(--color-content-low-text);
   --components-popover-text: var(--color-content-inverted-medium-text);
   --components-popover-border: var(--color-content-low-border);
+  --components-menu-contextual-item-content-disabled: var(--color-content-lower-text);
+  --components-menu-contextual-item-shortcut: var(--color-content-lower-text);
+  --components-menu-contextual-border: var(--color-content-low-border);
+  --components-menu-contextual-background: var(--color-level-00-background);
   --components-notification-neutral-icon: var(--color-feedback-neutral-low-icon);
   --components-notification-neutral-border: var(--color-feedback-neutral-low-border);
   --components-notification-neutral-background: var(--color-level-20-background);
@@ -309,6 +312,9 @@
   --components-notification-information-border: var(--color-feedback-information-low-border);
   --components-notification-information-icon: var(--color-feedback-information-low-icon);
   --components-notification-information-background: var(--color-level-20-background);
+  --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-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);
@@ -467,7 +473,7 @@
  */
 
 :root {
-  --components-overlay-opacity: 55px;
+  --components-overlay-opacity: 55%;
   --components-button-destructive-low-border-hover: rgba(255, 255, 255, 0);
   --components-button-destructive-low-border: rgba(255, 255, 255, 0);
   --components-button-destructive-low-background-hover: rgba(11, 15, 17, 0.08);
@@ -484,8 +490,8 @@
   --components-list-native-separator: #838086;
   --components-list-native-item-title-content: rgba(255, 255, 255, 0.5);
   --components-list-native-background: #565558;
-  --components-form-opacity-disabled: 50px;
-  --components-form-opacity-default: 100px;
+  --components-form-opacity-disabled: 50%;
+  --components-form-opacity-default: 100%;
   --components-button-gr-as-complementary-border-hover: rgba(255, 255, 255, 0);
   --components-button-gr-as-complementary-border: rgba(255, 255, 255, 0);
   --components-button-lower-border-hover-2: rgba(255, 255, 255, 0);
@@ -497,7 +503,6 @@
   --components-button-high-border-active: rgba(255, 255, 255, 0);
   --components-button-high-border-hover: rgba(255, 255, 255, 0);
   --components-button-high-border: rgba(255, 255, 255, 0);
-  --components-wpf-components-2: #ffffff;
   --shadow-y-axis-2xl: 25px;
   --shadow-y-axis-xl-2: 20px;
   --shadow-y-axis-xl-1: 10px;
@@ -524,6 +529,10 @@
   --shadow-color-opacity-2: rgba(11, 15, 17, 0.1);
   --shadow-color-opacity-1: rgba(11, 15, 17, 0.06);
   --shadow-color-opacity-0: rgba(255, 255, 255, 0.06);
+  --opacity-disabled-2: 0%;
+  --opacity-disabled: 50%;
+  --color-transparent: rgba(255, 255, 255, 0);
+  --color-white: #ffffff;
   --color-black: #000000;
   --color-interaction-container-neutral-background-active: rgba(165, 166, 167, 0.12);
   --color-interaction-container-neutral-background-hover: rgba(165, 166, 167, 0.12);
@@ -531,11 +540,11 @@
   --color-interaction-container-branded-low-background-hover: rgba(11, 15, 17, 0.08);
   --color-interaction-container-branded-low-background-active: rgba(11, 15, 17, 0.08);
   --color-interaction-container-branded-low-background: rgba(255, 255, 255, 0);
-  --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-tooltip-border: var(--color-gray-ocean-900);
   --components-tooltip-background: var(--color-gray-ocean-900);
-  --components-popover-background: var(--color-gray-ocean-50);
+  --components-popover-background: var(--color-gray-ocean-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-overlay-background: var(--color-gray-ocean-850);
   --components-button-destructive-high-icon-hover: var(--color-base-black);
   --components-button-destructive-high-icon: var(--color-base-black);
@@ -747,15 +756,15 @@
   --color-interaction-container-branded-low-border-hover: var(--color-petrol-700);
   --color-interaction-container-branded-low-border-active: var(--color-petrol-700);
   --color-interaction-container-branded-low-border: var(--color-petrol-600);
-  --components-menu-contextual-item-content-disabled: var(--color-content-lower-text);
-  --components-menu-contextual-item-shortcut: var(--color-content-lower-text);
-  --components-menu-contextual-border: var(--color-content-low-border);
-  --components-menu-contextual-background: var(--color-level-00-background);
   --components-tooltip-supporting-text: var(--color-content-inverted-medium-text);
   --components-tooltip-text: var(--color-content-inverted-high-text);
   --components-popover-supporting-text: var(--color-content-low-text);
   --components-popover-text: var(--color-content-medium-text);
   --components-popover-border: var(--color-content-low-border);
+  --components-menu-contextual-item-content-disabled: var(--color-content-lower-text);
+  --components-menu-contextual-item-shortcut: var(--color-content-lower-text);
+  --components-menu-contextual-border: var(--color-content-low-border);
+  --components-menu-contextual-background: var(--color-level-00-background);
   --components-notification-neutral-icon: var(--color-feedback-neutral-low-icon);
   --components-notification-neutral-border: var(--color-feedback-neutral-low-border);
   --components-notification-neutral-background: var(--color-level-00-background);
@@ -773,6 +782,9 @@
   --components-notification-information-border: var(--color-feedback-information-low-border);
   --components-notification-information-icon: var(--color-feedback-information-low-icon);
   --components-notification-information-background: var(--color-level-00-background);
+  --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-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);
@@ -1248,6 +1260,14 @@
   --notification-gap-x-title: var(--spacing-2);
   --notification-gap-x: var(--spacing-3);
   --notification-icon-size: var(--spacing-5);
+  --navigation-primary-item-bullet-size: var(--spacing-5);
+  --navigation-primary-item-bullet-font-size: var(--font-size-xs);
+  --navigation-primary-item-radius: var(--radius-rounded-md);
+  --navigation-primary-item-icon-size: var(--spacing-5);
+  --navigation-primary-item-font-size: var(--font-size-md);
+  --navigation-primary-item-padding-y: var(--spacing-2);
+  --navigation-primary-item-padding-x: var(--spacing-3);
+  --navigation-primary-item-gap-x: var(--spacing-2);
   --icon-xl: var(--spacing-7);
   --icon-lg: var(--spacing-6);
   --icon-md: var(--spacing-5);
@@ -1320,6 +1340,7 @@
   --dialog-header-gap-y: var(--spacing-0);
   --dialog-dismissible-position-right: var(--spacing-3);
   --dialog-dismissible-position-top: var(--spacing-5);
+  --breadcrumb-padding-y: var(--spacing-1);
   --badge-radius: var(--radius-rounded-full);
   --badge-padding-y: var(--spacing-1);
   --badge-padding-x: var(--spacing-2);
@@ -1388,8 +1409,8 @@
   --tooltip-padding-x: var(--spacing-3);
   --tooltip-font-size: var(--font-size-sm);
   --popover-radius: var(--radius-rounded-md);
-  --popover-padding-y: var(--spacing-3);
-  --popover-padding-x: var(--spacing-3);
+  --popover-padding-y: var(--spacing-2);
+  --popover-padding-x: var(--spacing-2);
   --popover-gap-y: var(--spacing-1);
   --popover-font-size: var(--font-size-sm);
   --popover-shadow-2-opacity: var(--shadow-color-opacity-2);