semrush · slizhevskyv-semrush · Aug 14, 2026 · Aug 17, 2026 · Aug 17, 2026 · Aug 17, 2026
diff --git a/...-and-buttons-states-Steps-on-hover-and-focus---small-state-1-chromium-linux.png b/...-and-buttons-states-Steps-on-hover-and-focus---small-state-1-chromium-linux.png
diff --git a/...s-and-buttons-states-Steps-on-hover-and-focus---small-state-1-firefox-linux.png b/...s-and-buttons-states-Steps-on-hover-and-focus---small-state-1-firefox-linux.png
diff --git a/...ps-and-buttons-states-Steps-on-hover-and-focus---small-state-1-webkit-linux.png b/...ps-and-buttons-states-Steps-on-hover-and-focus---small-state-1-webkit-linux.png
diff --git a/...-and-buttons-states-Steps-on-hover-and-focus---small-state-2-chromium-linux.png b/...-and-buttons-states-Steps-on-hover-and-focus---small-state-2-chromium-linux.png
diff --git a/...s-and-buttons-states-Steps-on-hover-and-focus---small-state-2-firefox-linux.png b/...s-and-buttons-states-Steps-on-hover-and-focus---small-state-2-firefox-linux.png
diff --git a/...ps-and-buttons-states-Steps-on-hover-and-focus---small-state-2-webkit-linux.png b/...ps-and-buttons-states-Steps-on-hover-and-focus---small-state-2-webkit-linux.png
diff --git a/...-and-buttons-states-Steps-on-hover-and-focus---small-state-3-chromium-linux.png b/...-and-buttons-states-Steps-on-hover-and-focus---small-state-3-chromium-linux.png
diff --git a/...s-and-buttons-states-Steps-on-hover-and-focus---small-state-3-firefox-linux.png b/...s-and-buttons-states-Steps-on-hover-and-focus---small-state-3-firefox-linux.png
diff --git a/...ps-and-buttons-states-Steps-on-hover-and-focus---small-state-3-webkit-linux.png b/...ps-and-buttons-states-Steps-on-hover-and-focus---small-state-3-webkit-linux.png
diff --git a/...-and-buttons-states-Steps-on-hover-and-focus---small-state-4-chromium-linux.png b/...-and-buttons-states-Steps-on-hover-and-focus---small-state-4-chromium-linux.png
diff --git a/...s-and-buttons-states-Steps-on-hover-and-focus---small-state-4-firefox-linux.png b/...s-and-buttons-states-Steps-on-hover-and-focus---small-state-4-firefox-linux.png
diff --git a/...ps-and-buttons-states-Steps-on-hover-and-focus---small-state-4-webkit-linux.png b/...ps-and-buttons-states-Steps-on-hover-and-focus---small-state-4-webkit-linux.png
diff --git a/...-and-buttons-states-Steps-on-hover-and-focus---small-state-5-chromium-linux.png b/...-and-buttons-states-Steps-on-hover-and-focus---small-state-5-chromium-linux.png
diff --git a/...s-and-buttons-states-Steps-on-hover-and-focus---small-state-5-firefox-linux.png b/...s-and-buttons-states-Steps-on-hover-and-focus---small-state-5-firefox-linux.png
diff --git a/...ps-and-buttons-states-Steps-on-hover-and-focus---small-state-5-webkit-linux.png b/...ps-and-buttons-states-Steps-on-hover-and-focus---small-state-5-webkit-linux.png
diff --git a/...-and-buttons-states-Steps-on-hover-and-focus---small-state-6-chromium-linux.png b/...-and-buttons-states-Steps-on-hover-and-focus---small-state-6-chromium-linux.png
diff --git a/...s-and-buttons-states-Steps-on-hover-and-focus---small-state-6-firefox-linux.png b/...s-and-buttons-states-Steps-on-hover-and-focus---small-state-6-firefox-linux.png
diff --git a/...ps-and-buttons-states-Steps-on-hover-and-focus---small-state-6-webkit-linux.png b/...ps-and-buttons-states-Steps-on-hover-and-focus---small-state-6-webkit-linux.png
diff --git a/...-and-buttons-states-Steps-on-hover-and-focus---small-state-7-chromium-linux.png b/...-and-buttons-states-Steps-on-hover-and-focus---small-state-7-chromium-linux.png
diff --git a/...s-and-buttons-states-Steps-on-hover-and-focus---small-state-7-firefox-linux.png b/...s-and-buttons-states-Steps-on-hover-and-focus---small-state-7-firefox-linux.png
diff --git a/...ps-and-buttons-states-Steps-on-hover-and-focus---small-state-7-webkit-linux.png b/...ps-and-buttons-states-Steps-on-hover-and-focus---small-state-7-webkit-linux.png
diff --git a/...-and-buttons-states-Steps-on-hover-and-focus---small-state-8-chromium-linux.png b/...-and-buttons-states-Steps-on-hover-and-focus---small-state-8-chromium-linux.png
diff --git a/...s-and-buttons-states-Steps-on-hover-and-focus---small-state-8-firefox-linux.png b/...s-and-buttons-states-Steps-on-hover-and-focus---small-state-8-firefox-linux.png
diff --git a/...ps-and-buttons-states-Steps-on-hover-and-focus---small-state-8-webkit-linux.png b/...ps-and-buttons-states-Steps-on-hover-and-focus---small-state-8-webkit-linux.png
diff --git a/...ns-states-Verify-Steps-on-hover-and-focus---expanded-state-1-chromium-linux.png b/...ns-states-Verify-Steps-on-hover-and-focus---expanded-state-1-chromium-linux.png
diff --git a/...ons-states-Verify-Steps-on-hover-and-focus---expanded-state-1-firefox-linux.png b/...ons-states-Verify-Steps-on-hover-and-focus---expanded-state-1-firefox-linux.png
diff --git a/...tons-states-Verify-Steps-on-hover-and-focus---expanded-state-1-webkit-linux.png b/...tons-states-Verify-Steps-on-hover-and-focus---expanded-state-1-webkit-linux.png
diff --git a/...ns-states-Verify-Steps-on-hover-and-focus---expanded-state-2-chromium-linux.png b/...ns-states-Verify-Steps-on-hover-and-focus---expanded-state-2-chromium-linux.png
diff --git a/...ons-states-Verify-Steps-on-hover-and-focus---expanded-state-2-firefox-linux.png b/...ons-states-Verify-Steps-on-hover-and-focus---expanded-state-2-firefox-linux.png
diff --git a/...tons-states-Verify-Steps-on-hover-and-focus---expanded-state-2-webkit-linux.png b/...tons-states-Verify-Steps-on-hover-and-focus---expanded-state-2-webkit-linux.png
diff --git a/...ns-states-Verify-Steps-on-hover-and-focus---expanded-state-3-chromium-linux.png b/...ns-states-Verify-Steps-on-hover-and-focus---expanded-state-3-chromium-linux.png
diff --git a/...ons-states-Verify-Steps-on-hover-and-focus---expanded-state-3-firefox-linux.png b/...ons-states-Verify-Steps-on-hover-and-focus---expanded-state-3-firefox-linux.png
diff --git a/...tons-states-Verify-Steps-on-hover-and-focus---expanded-state-3-webkit-linux.png b/...tons-states-Verify-Steps-on-hover-and-focus---expanded-state-3-webkit-linux.png
diff --git a/...ns-states-Verify-Steps-on-hover-and-focus---expanded-state-4-chromium-linux.png b/...ns-states-Verify-Steps-on-hover-and-focus---expanded-state-4-chromium-linux.png
diff --git a/...ons-states-Verify-Steps-on-hover-and-focus---expanded-state-4-firefox-linux.png b/...ons-states-Verify-Steps-on-hover-and-focus---expanded-state-4-firefox-linux.png
diff --git a/...tons-states-Verify-Steps-on-hover-and-focus---expanded-state-4-webkit-linux.png b/...tons-states-Verify-Steps-on-hover-and-focus---expanded-state-4-webkit-linux.png
diff --git a/...ns-states-Verify-Steps-on-hover-and-focus---expanded-state-5-chromium-linux.png b/...ns-states-Verify-Steps-on-hover-and-focus---expanded-state-5-chromium-linux.png
diff --git a/...ons-states-Verify-Steps-on-hover-and-focus---expanded-state-5-firefox-linux.png b/...ons-states-Verify-Steps-on-hover-and-focus---expanded-state-5-firefox-linux.png
diff --git a/...tons-states-Verify-Steps-on-hover-and-focus---expanded-state-5-webkit-linux.png b/...tons-states-Verify-Steps-on-hover-and-focus---expanded-state-5-webkit-linux.png
diff --git a/...ns-states-Verify-Steps-on-hover-and-focus---expanded-state-6-chromium-linux.png b/...ns-states-Verify-Steps-on-hover-and-focus---expanded-state-6-chromium-linux.png
diff --git a/...ons-states-Verify-Steps-on-hover-and-focus---expanded-state-6-firefox-linux.png b/...ons-states-Verify-Steps-on-hover-and-focus---expanded-state-6-firefox-linux.png
diff --git a/...tons-states-Verify-Steps-on-hover-and-focus---expanded-state-6-webkit-linux.png b/...tons-states-Verify-Steps-on-hover-and-focus---expanded-state-6-webkit-linux.png
diff --git a/...ns-states-Verify-Steps-on-hover-and-focus---expanded-state-7-chromium-linux.png b/...ns-states-Verify-Steps-on-hover-and-focus---expanded-state-7-chromium-linux.png
diff --git a/...ons-states-Verify-Steps-on-hover-and-focus---expanded-state-7-firefox-linux.png b/...ons-states-Verify-Steps-on-hover-and-focus---expanded-state-7-firefox-linux.png
diff --git a/...tons-states-Verify-Steps-on-hover-and-focus---expanded-state-7-webkit-linux.png b/...tons-states-Verify-Steps-on-hover-and-focus---expanded-state-7-webkit-linux.png
diff --git a/...wser-test.tsx-snapshots/-visual-Verify-Custom-step-example-1-chromium-linux.png b/...wser-test.tsx-snapshots/-visual-Verify-Custom-step-example-1-chromium-linux.png
diff --git a/...owser-test.tsx-snapshots/-visual-Verify-Custom-step-example-1-firefox-linux.png b/...owser-test.tsx-snapshots/-visual-Verify-Custom-step-example-1-firefox-linux.png
diff --git a/...rowser-test.tsx-snapshots/-visual-Verify-Custom-step-example-1-webkit-linux.png b/...rowser-test.tsx-snapshots/-visual-Verify-Custom-step-example-1-webkit-linux.png
diff --git a/...owser-test.tsx-snapshots/-visual-Verify-z-index-in-content-1-chromium-linux.png b/...owser-test.tsx-snapshots/-visual-Verify-z-index-in-content-1-chromium-linux.png
diff --git a/...browser-test.tsx-snapshots/-visual-Verify-z-index-in-content-1-webkit-linux.png b/...browser-test.tsx-snapshots/-visual-Verify-z-index-in-content-1-webkit-linux.png
diff --git a/semcore/wizard/src/Wizard.tsx b/semcore/wizard/src/Wizard.tsx
@@ -1,4 +1,4 @@
-import { ScreenReaderOnly, Box } from '@semcore/base-components';
+import { ScreenReaderOnly, Box, Flex } from '@semcore/base-components';
 import Button from '@semcore/button';
 import { createComponent, Component, Root, sstyled } from '@semcore/core';
 import type { Intergalactic } from '@semcore/core';
@@ -247,8 +247,8 @@ function Stepper(
   } = props;
   const SStepper = Root;
   const SStepNumber = 'span';
-  const SStepDescription = 'span';
-  const SCompleted = CheckM;
+  const SStepDescription = Flex;
+  const SCompleteIcon = CheckM;
 
   const handlerClick = React.useCallback(
     (e: React.SyntheticEvent<HTMLElement>) => {
@@ -277,15 +277,15 @@ function Stepper(
 
   return sstyled(styles)(
     <SStepper
-      render={Box}
+      render={Flex}
       role='tab'
       tabIndex={disabled ? undefined : 0}
       onClick={handlerClick}
       onKeyDown={handlerKeyDown}
     >
       {completed && <ScreenReaderOnly>{getI18nText('completedStep')}</ScreenReaderOnly>}
       <ScreenReaderOnly><Children /></ScreenReaderOnly>
-      <SStepNumber aria-hidden='true'>{completed ? <SCompleted /> : number}</SStepNumber>
+      <SStepNumber aria-hidden='true'>{completed ? <SCompleteIcon /> : number}</SStepNumber>
       <SStepDescription aria-hidden='true'>
         <Children />
       </SStepDescription>
@@ -318,6 +318,7 @@ function StepBack(
     <SStepBack
       render={Button}
       use='tertiary'
+      theme='muted'
       size='l'
       onClick={handleClick}
       aria-label={getI18nText('backButton', { buttonName: stepName })}
@@ -341,6 +342,7 @@ function StepNext(
     <SStepNext
       render={Button}
       use='tertiary'
+      theme='muted'
       size='l'
       onClick={handleClick}
       aria-label={getI18nText('nextButton', { buttonName: stepName })}

diff --git a/semcore/wizard/src/style/wizard.shadow.css b/semcore/wizard/src/style/wizard.shadow.css
@@ -7,53 +7,55 @@ SWizard {
 }
 
 SSidebar {
-  background: var(--intergalactic-control-primary-advertising, oklch(0.23 0.01 140)); /* TODO: --intergalactic-wizard-sidebar-bg */
-  color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-wizard-sidebar-text-primary */
-  font-weight: var(--intergalactic-bold, 700);
-  font-size: var(--intergalactic-fs-300, 16px);
-  line-height: var(--intergalactic-lh-300, 150%);
-  padding: var(--intergalactic-spacing-10x, 40px) var(--intergalactic-spacing-2x, 8px);
+  background: var(--intergalactic-wizard-sidebar-bg, oklch(0.23 0.01 140));
+  color: var(--intergalactic-wizard-sidebar-text-primary, oklch(0.999 0.001 180 / 0.949));
+  padding: var(--intergalactic-spacing-content-padding-xxlarge, 40px) var(--intergalactic-spacing-content-padding-small, 8px);
   max-width: 220px;
   flex-shrink: 0;
   box-sizing: border-box;
-  border-radius: var(--intergalactic-modal-rounded, 14px) 0 0
-    var(--intergalactic-modal-rounded, 14px);
+  border-radius: var(--intergalactic-modal-rounded, 14px) 0 0 var(--intergalactic-modal-rounded, 14px);
   @media (max-width: 1060px) {
-    width: 56px;
+    width: 44px;
   }
 
   SStepper {
-    display: flex;
-    gap: var(--intergalactic-spacing-1x, 4px);
-    font-size: var(--intergalactic-fs-200, 14px);
+    box-sizing: border-box;
+    min-height: 36px;
+    gap: var(--intergalactic-spacing-content-gap-small, 4px);
     border-radius: var(--intergalactic-control-rounded, 6px);
-    padding: var(--intergalactic-spacing-2x, 8px) var(--intergalactic-spacing-3x, 12px);
+    padding: var(--intergalactic-spacing-content-padding-small, 8px) var(--intergalactic-spacing-content-padding-medium, 12px);
     cursor: pointer;
     position: relative;
     overflow: auto;
+
+    font-size: var(--intergalactic-fs-200, 14px); 
+    font-weight: var(--intergalactic-bold, 700);
     line-height: var(--intergalactic-lh-200, 142%);
 
     &:focus-visible {
       outline-color: var(--intergalactic-keyboard-focus-invert-outline, oklch(1 0 0 / 0.7));
     }
 
     &:hover {
-      background: var(--intergalactic-control-primary-advertising-hover, oklch(0.36 0.005 140)); /* TODO: --intergalactic-wizard-sidebar-control-hover */
+      background: var(--intergalactic-wizard-sidebar-control-hover, oklch(0.36 0.005 140));
       z-index: 2;
     }
     &[active] {
-      background: var(--intergalactic-control-primary-advertising-active, oklch(0.4 0.004 140)); /* TODO: --intergalactic-wizard-sidebar-control-active */
+      background: var(--intergalactic-wizard-sidebar-control-active, oklch(0.4 0.004 140));
     }
     &:disabled,
     &[disabled] {
       opacity: var(--intergalactic-disabled-opacity, 0.4);
       cursor: default;
-      pointer-events: none; /* Disable interactions */
+      pointer-events: none;
     }
 
     @media (max-width: 1060px) {
-      padding: var(--intergalactic-spacing-2x, 8px);
+      padding: var(--intergalactic-spacing-content-padding-small, 8px) var(--intergalactic-spacing-content-padding-xsmall, 4px);
+
       &:hover {
+        display: flex;
+        padding: var(--intergalactic-spacing-content-padding-small, 8px) var(--intergalactic-spacing-content-padding-medium, 12px) var(--intergalactic-spacing-content-padding-small, 8px) var(--intergalactic-spacing-content-padding-xsmall, 4px);
         width: max-content;
         max-width: 220px;
       }
@@ -63,15 +65,16 @@ SSidebar {
         overflow: auto;
       }
       &[active]:hover SStepDescription {
-        background: var(--intergalactic-control-primary-advertising-active, oklch(0.4 0.004 140)); /* TODO: --intergalactic-wizard-sidebar-control-active */
+        background: var(--intergalactic-wizard-sidebar-control-active, oklch(0.4 0.004 140));
       }
     }
   }
 }
 
 SSidebarHeader {
   font-size: var(--intergalactic-fs-300, 16px);
-  margin: 0 var(--intergalactic-spacing-5x, 20px) var(--intergalactic-spacing-4x, 16px);
+  margin: 0;
+  padding: 0 var(--intergalactic-spacing-content-padding-xlarge, 20px) var(--intergalactic-spacing-content-padding-large, 16px) var(--intergalactic-spacing-content-padding-xlarge, 20px);
   @media (max-width: 1060px) {
     display: none;
   }
@@ -81,33 +84,35 @@ SStepNumber {
   display: inline-block;
   min-width: 20px;
   text-align: center;
-}
 
-SCompleted {
-  /* disable-tokens-validator */
-  margin-top: 1px;
+  SCompleteIcon {
+    vertical-align: text-bottom;
+    transform: translateY(-1px);
+  }
 }
 
 SStepDescription {
+  flex-direction: column;
+  gap: var(--intergalactic-spacing-content-gap-small, 4px);
+
   overflow-wrap: anywhere;
   @media (max-width: 1060px) {
     display: none;
   }
 }
 
 SContent {
-  padding: var(--intergalactic-spacing-10x, 40px);
+  padding: var(--intergalactic-spacing-content-padding-xxlarge, 40px);
   overflow: hidden;
   flex: 1;
-  border-radius: 0 var(--intergalactic-modal-rounded, 14px) var(--intergalactic-modal-rounded, 14px)
-    0;
-  background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* TODO: --intergalactic-wizard-bg */
+  border-radius: 0 var(--intergalactic-modal-rounded, 14px) var(--intergalactic-modal-rounded, 14px) 0;
+  background: var(--intergalactic-wizard-bg, oklch(1 0 0));
 
   SWizardStepTitle {
     display: block;
     word-break: break-word;
     font-weight: var(--intergalactic-semi-bold, 600);
-    margin-bottom: var(--intergalactic-spacing-5x, 20px);
+    margin-bottom: var(--intergalactic-spacing-content-gap-xxlarge-extended, 20px);
   }
 }
 SContent[noSidebar] {

diff --git a/stories/components/wizard/docs/examples/custom_step.tsx b/stories/components/wizard/docs/examples/custom_step.tsx
@@ -47,7 +47,7 @@ const Demo = () => {
           </Wizard.Stepper>
           <Wizard.Stepper step={3} onActive={handleStepChange(3)}>
             {steps[2].title}
-            <Text color='text-secondary-invert' fontWeight={400} mt={1} tag='div'>
+            <Text color='wizard-sidebar-text-secondary' fontWeight='regular' tag='div'>
               optional
             </Text>
           </Wizard.Stepper>

diff --git a/stories/components/wizard/tests/examples/steps_and_buttons_states.tsx b/stories/components/wizard/tests/examples/steps_and_buttons_states.tsx
@@ -55,20 +55,20 @@ const Demo = ({ firstStepTitle, ellipsis }: StepsAndButtonsStatesProps) => {
           </Wizard.Stepper>
           <Wizard.Stepper step={2} onActive={handleStepChange(2)} number={1.1}>
             {configurableSteps[1].title}
-            <Text color='text-secondary-invert' fontWeight={400} tag='div'>
+            <Text color='wizard-sidebar-text-secondary' fontWeight={400} tag='div'>
               {value === '' ? 'Not selected' : value}
             </Text>
           </Wizard.Stepper>
           <Wizard.Stepper step={3} onActive={handleStepChange(3)} number={1.2}>
-            <Text color='text-secondary-invert' fontWeight={400}>
+            <Text color='wizard-sidebar-text-secondary' fontWeight={400}>
               {configurableSteps[2].title}
             </Text>
-            <Text color='text-secondary-invert' fontWeight={400} tag='div'>
+            <Text color='wizard-sidebar-text-secondary' fontWeight={400} tag='div'>
               Optional step
             </Text>
           </Wizard.Stepper>
           <Wizard.Stepper step={4} onActive={handleStepChange(4)} number={1.3}>
-            <Text color='text-secondary-invert' fontWeight={400}>
+            <Text color='wizard-sidebar-text-secondary' fontWeight={400}>
               {configurableSteps[3].title}
             </Text>
           </Wizard.Stepper>
@@ -80,7 +80,7 @@ const Demo = ({ firstStepTitle, ellipsis }: StepsAndButtonsStatesProps) => {
           </Wizard.Stepper>
           <Wizard.Stepper step={7} onActive={handleStepChange(7)}>
             {configurableSteps[6].title}
-            <Text color='text-secondary-invert' fontWeight={400} tag='div'>
+            <Text color='wizard-sidebar-text-secondary' fontWeight={400} tag='div'>
               optional
             </Text>
           </Wizard.Stepper>

diff --git a/website/docs/components/wizard/wizard.md b/website/docs/components/wizard/wizard.md
@@ -49,20 +49,25 @@ max-height: 700px;
 
 Table: Stepper states
 
-| State    | Appearance example       | Styles                                                                                         |
-| -------- | ------------------------ | ---------------------------------------------------------------------------------------------- |
-| Normal   | ![](static/normal.png)   | `background-color: var(--control-primary-advertising)`, `border-radius: var(--rounded-medium)` |
-| Hover    | ![](static/hover.png)    | `background-color: var(--control-primary-advertising-hover)`, `cursor: pointer`                |
-| Active   | ![](static/active.png)   | `background-color: var(--control-primary-advertising-active)`                                  |
-| Disabled | ![](static/disabled.png) | Use `--disabled-opacity` token.                                                                |
-| Checked  | ![](static/checked.png)  | The number changes to a `Check` icon with M size.
+| State    | Appearance example       |
+| -------- | ------------------------ |
+| Normal   | ![](static/normal.png)   |
+| Hover    | ![](static/hover.png)    |
+| Active   | ![](static/active.png)   |
+| Disabled | ![](static/disabled.png) |
+| Checked  | ![](static/checked.png)  |
 
 ### Optional stepper
 
 If a step is optional, you can add an **"optional"** label to it using the following styles:
 
 ```CSS
-<Text color='text-secondary-invert' fontWeight={400} mt={1} tag='div'>
+<Text
+  color='wizard-sidebar-text-secondary'
+  fontWeight={400}
+  mt={1}
+  tag='div'
+>
     optional
 </Text>
 ```
@@ -74,9 +79,9 @@ Refer to the [example with custom step](/components/wizard/wizard-code#custom-st
 We recommend:
 
 - Using the `L` size for basic controls
-- Using the following margins
+- Using the `spacing-content-gap-xlarge` gap within the footer and the `spacing-content-gap-xxlarge-extended` gap between the footer and the content.
 
-![margin-bottom: 20px; color: var(--gray-800); font-size: var(--fs-500); line-height: var(--lh-500);](static/footer.png)
+![](static/footer.png)
 
 ### Collapsing panel with steps on screen less than 1060px