diff --git a/src/theme/stepper.ts b/src/theme/stepper.ts
index b503893588..aebcc6f804 100644
--- a/src/theme/stepper.ts
+++ b/src/theme/stepper.ts
@@ -26,8 +26,8 @@ export default (options: Required<ModuleOptions>) => ({
       },
       vertical: {
         header: 'flex-col gap-4',
-        item: 'flex text-left',
-        separator: 'left-[calc(50%-1px)] -bottom-[10px] w-0.5'
+        item: 'flex text-start',
+        separator: 'start-[calc(50%-1px)] -bottom-[10px] w-0.5'
       }
     },
 
@@ -84,23 +84,23 @@ export default (options: Required<ModuleOptions>) => ({
   compoundVariants: [{
     orientation: 'horizontal',
     size: 'xs',
-    class: { separator: 'left-[calc(50%+16px)] right-[calc(-50%+16px)]' }
+    class: { separator: 'start-[calc(50%+16px)] end-[calc(-50%+16px)]' }
   }, {
     orientation: 'horizontal',
     size: 'sm',
-    class: { separator: 'left-[calc(50%+20px)] right-[calc(-50%+20px)]' }
+    class: { separator: 'start-[calc(50%+20px)] end-[calc(-50%+20px)]' }
   }, {
     orientation: 'horizontal',
     size: 'md',
-    class: { separator: 'left-[calc(50%+28px)] right-[calc(-50%+28px)]' }
+    class: { separator: 'start-[calc(50%+28px)] end-[calc(-50%+28px)]' }
   }, {
     orientation: 'horizontal',
     size: 'lg',
-    class: { separator: 'left-[calc(50%+32px)] right-[calc(-50%+32px)]' }
+    class: { separator: 'start-[calc(50%+32px)] end-[calc(-50%+32px)]' }
   }, {
     orientation: 'horizontal',
     size: 'xl',
-    class: { separator: 'left-[calc(50%+36px)] right-[calc(-50%+36px)]' }
+    class: { separator: 'start-[calc(50%+36px)] end-[calc(-50%+36px)]' }
   }, {
     orientation: 'vertical',
     size: 'xs',
diff --git a/test/components/__snapshots__/Stepper-vue.spec.ts.snap b/test/components/__snapshots__/Stepper-vue.spec.ts.snap
index 2cbe2a65b3..2921f99b61 100644
--- a/test/components/__snapshots__/Stepper-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Stepper-vue.spec.ts.snap
@@ -7,7 +7,7 @@ exports[`Stepper > renders with as correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
       <div class="mt-2.5">
         <h4 id="reka-stepper-item-title-v-0" class="font-medium text-[var(--ui-text)] text-sm">Address</h4>
@@ -18,7 +18,7 @@ exports[`Stepper > renders with as correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
       <div class="mt-2.5">
         <h4 id="reka-stepper-item-title-v-2" class="font-medium text-[var(--ui-text)] text-sm">Shipping</h4>
@@ -49,7 +49,7 @@ exports[`Stepper > renders with class correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
       <div class="mt-2.5">
         <h4 id="reka-stepper-item-title-v-0" class="font-medium text-[var(--ui-text)] text-sm">Address</h4>
@@ -60,7 +60,7 @@ exports[`Stepper > renders with class correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
       <div class="mt-2.5">
         <h4 id="reka-stepper-item-title-v-2" class="font-medium text-[var(--ui-text)] text-sm">Shipping</h4>
@@ -91,7 +91,7 @@ exports[`Stepper > renders with content slot correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
       <div class="mt-2.5">
         <h4 id="reka-stepper-item-title-v-0" class="font-medium text-[var(--ui-text)] text-sm">Address</h4>
@@ -102,7 +102,7 @@ exports[`Stepper > renders with content slot correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
       <div class="mt-2.5">
         <h4 id="reka-stepper-item-title-v-2" class="font-medium text-[var(--ui-text)] text-sm">Shipping</h4>
@@ -133,7 +133,7 @@ exports[`Stepper > renders with custom slot correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
       <div class="mt-2.5">
         <h4 id="reka-stepper-item-title-v-0" class="font-medium text-[var(--ui-text)] text-sm">Address</h4>
@@ -144,7 +144,7 @@ exports[`Stepper > renders with custom slot correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
       <div class="mt-2.5">
         <h4 id="reka-stepper-item-title-v-2" class="font-medium text-[var(--ui-text)] text-sm">Shipping</h4>
@@ -175,7 +175,7 @@ exports[`Stepper > renders with default slot correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
       <div class="mt-2.5">
         <h4 id="reka-stepper-item-title-v-0" class="font-medium text-[var(--ui-text)] text-sm">Address</h4>
@@ -186,7 +186,7 @@ exports[`Stepper > renders with default slot correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
       <div class="mt-2.5">
         <h4 id="reka-stepper-item-title-v-2" class="font-medium text-[var(--ui-text)] text-sm">Shipping</h4>
@@ -217,7 +217,7 @@ exports[`Stepper > renders with defaultValue correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="completed" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="completed" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="completed" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
       <div class="mt-2.5">
         <h4 id="reka-stepper-item-title-v-0" class="font-medium text-[var(--ui-text)] text-sm">Address</h4>
@@ -228,7 +228,7 @@ exports[`Stepper > renders with defaultValue correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
       <div class="mt-2.5">
         <h4 id="reka-stepper-item-title-v-2" class="font-medium text-[var(--ui-text)] text-sm">Shipping</h4>
@@ -259,7 +259,7 @@ exports[`Stepper > renders with description slot correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
       <div class="mt-2.5">
         <h4 id="reka-stepper-item-title-v-0" class="font-medium text-[var(--ui-text)] text-sm">Address</h4>
@@ -270,7 +270,7 @@ exports[`Stepper > renders with description slot correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
       <div class="mt-2.5">
         <h4 id="reka-stepper-item-title-v-2" class="font-medium text-[var(--ui-text)] text-sm">Shipping</h4>
@@ -301,7 +301,7 @@ exports[`Stepper > renders with indicator slot correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full">Indicator slot</div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
       <div class="mt-2.5">
         <h4 id="reka-stepper-item-title-v-0" class="font-medium text-[var(--ui-text)] text-sm">Address</h4>
@@ -312,7 +312,7 @@ exports[`Stepper > renders with indicator slot correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full">Indicator slot</div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
       <div class="mt-2.5">
         <h4 id="reka-stepper-item-title-v-2" class="font-medium text-[var(--ui-text)] text-sm">Shipping</h4>
@@ -343,7 +343,7 @@ exports[`Stepper > renders with items correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
       <div class="mt-2.5">
         <h4 id="reka-stepper-item-title-v-0" class="font-medium text-[var(--ui-text)] text-sm">Address</h4>
@@ -354,7 +354,7 @@ exports[`Stepper > renders with items correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
       <div class="mt-2.5">
         <h4 id="reka-stepper-item-title-v-2" class="font-medium text-[var(--ui-text)] text-sm">Shipping</h4>
@@ -385,7 +385,7 @@ exports[`Stepper > renders with modelValue correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="completed" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="completed" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="completed" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
       <div class="mt-2.5">
         <h4 id="reka-stepper-item-title-v-0" class="font-medium text-[var(--ui-text)] text-sm">Address</h4>
@@ -396,7 +396,7 @@ exports[`Stepper > renders with modelValue correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
       <div class="mt-2.5">
         <h4 id="reka-stepper-item-title-v-2" class="font-medium text-[var(--ui-text)] text-sm">Shipping</h4>
@@ -427,7 +427,7 @@ exports[`Stepper > renders with neutral color correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-bg-inverted)] group-data-[state=active]:bg-[var(--ui-bg-inverted)] focus-visible:outline-[var(--ui-border-inverted)]">
           <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-bg-inverted)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-bg-inverted)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
       <div class="mt-2.5">
         <h4 id="reka-stepper-item-title-v-0" class="font-medium text-[var(--ui-text)] text-sm">Address</h4>
@@ -438,7 +438,7 @@ exports[`Stepper > renders with neutral color correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-bg-inverted)] group-data-[state=active]:bg-[var(--ui-bg-inverted)] focus-visible:outline-[var(--ui-border-inverted)]">
           <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-bg-inverted)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-bg-inverted)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
       <div class="mt-2.5">
         <h4 id="reka-stepper-item-title-v-2" class="font-medium text-[var(--ui-text)] text-sm">Shipping</h4>
@@ -469,7 +469,7 @@ exports[`Stepper > renders with size lg horizontal correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-12 text-lg group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+32px)] right-[calc(-50%+32px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+32px)] end-[calc(-50%+32px)]"></div>
       </div>
       <div class="mt-3">
         <h4 id="reka-stepper-item-title-v-0" class="font-medium text-[var(--ui-text)] text-base">Address</h4>
@@ -480,7 +480,7 @@ exports[`Stepper > renders with size lg horizontal correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-12 text-lg group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+32px)] right-[calc(-50%+32px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+32px)] end-[calc(-50%+32px)]"></div>
       </div>
       <div class="mt-3">
         <h4 id="reka-stepper-item-title-v-2" class="font-medium text-[var(--ui-text)] text-base">Shipping</h4>
@@ -507,29 +507,29 @@ exports[`Stepper > renders with size lg horizontal correctly 1`] = `
 exports[`Stepper > renders with size lg vertical correctly 1`] = `
 "<div role="group" aria-label="progress" data-linear="" data-orientation="vertical" class="flex gap-4">
   <div class="flex flex-col gap-4">
-    <div aria-current="true" data-state="active" data-orientation="vertical" class="group relative w-full flex text-left gap-3">
+    <div aria-current="true" data-state="active" data-orientation="vertical" class="group relative w-full flex text-start gap-3">
       <div class="relative"><button type="button" data-state="active" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-12 text-lg group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
         </button>
-        <div data-orientation="vertical" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] left-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[54px]"></div>
+        <div data-orientation="vertical" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[54px]"></div>
       </div>
       <div class="mt-3">
         <h4 id="reka-stepper-item-title-v-0" class="font-medium text-[var(--ui-text)] text-base">Address</h4>
         <p id="reka-stepper-item-description-v-1" class="text-[var(--ui-text-muted)] text-wrap text-base">Add your address here</p>
       </div>
     </div>
-    <div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-left gap-3">
+    <div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-start gap-3">
       <div class="relative"><button type="button" data-state="inactive" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-12 text-lg group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
         </button>
-        <div data-orientation="vertical" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] left-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[54px]"></div>
+        <div data-orientation="vertical" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[54px]"></div>
       </div>
       <div class="mt-3">
         <h4 id="reka-stepper-item-title-v-2" class="font-medium text-[var(--ui-text)] text-base">Shipping</h4>
         <p id="reka-stepper-item-description-v-3" class="text-[var(--ui-text-muted)] text-wrap text-base">Set your preferred shipping method</p>
       </div>
     </div>
-    <div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-left gap-3">
+    <div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-start gap-3">
       <div class="relative"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" tabindex="-1" aria-describedby="reka-stepper-item-description-v-5" aria-labelledby="reka-stepper-item-title-v-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-12 text-lg group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full">3</div>
         </button>
@@ -553,7 +553,7 @@ exports[`Stepper > renders with size md horizontal correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
       <div class="mt-2.5">
         <h4 id="reka-stepper-item-title-v-0" class="font-medium text-[var(--ui-text)] text-sm">Address</h4>
@@ -564,7 +564,7 @@ exports[`Stepper > renders with size md horizontal correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
       <div class="mt-2.5">
         <h4 id="reka-stepper-item-title-v-2" class="font-medium text-[var(--ui-text)] text-sm">Shipping</h4>
@@ -591,29 +591,29 @@ exports[`Stepper > renders with size md horizontal correctly 1`] = `
 exports[`Stepper > renders with size md vertical correctly 1`] = `
 "<div role="group" aria-label="progress" data-linear="" data-orientation="vertical" class="flex gap-4">
   <div class="flex flex-col gap-4">
-    <div aria-current="true" data-state="active" data-orientation="vertical" class="group relative w-full flex text-left gap-2.5">
+    <div aria-current="true" data-state="active" data-orientation="vertical" class="group relative w-full flex text-start gap-2.5">
       <div class="relative"><button type="button" data-state="active" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
         </button>
-        <div data-orientation="vertical" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] left-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[46px]"></div>
+        <div data-orientation="vertical" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[46px]"></div>
       </div>
       <div class="mt-2.5">
         <h4 id="reka-stepper-item-title-v-0" class="font-medium text-[var(--ui-text)] text-sm">Address</h4>
         <p id="reka-stepper-item-description-v-1" class="text-[var(--ui-text-muted)] text-wrap text-sm">Add your address here</p>
       </div>
     </div>
-    <div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-left gap-2.5">
+    <div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-start gap-2.5">
       <div class="relative"><button type="button" data-state="inactive" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
         </button>
-        <div data-orientation="vertical" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] left-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[46px]"></div>
+        <div data-orientation="vertical" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[46px]"></div>
       </div>
       <div class="mt-2.5">
         <h4 id="reka-stepper-item-title-v-2" class="font-medium text-[var(--ui-text)] text-sm">Shipping</h4>
         <p id="reka-stepper-item-description-v-3" class="text-[var(--ui-text-muted)] text-wrap text-sm">Set your preferred shipping method</p>
       </div>
     </div>
-    <div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-left gap-2.5">
+    <div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-start gap-2.5">
       <div class="relative"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" tabindex="-1" aria-describedby="reka-stepper-item-description-v-5" aria-labelledby="reka-stepper-item-title-v-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full">3</div>
         </button>
@@ -637,7 +637,7 @@ exports[`Stepper > renders with size sm horizontal correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-8 text-sm group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+20px)] right-[calc(-50%+20px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+20px)] end-[calc(-50%+20px)]"></div>
       </div>
       <div class="mt-2">
         <h4 id="reka-stepper-item-title-v-0" class="font-medium text-[var(--ui-text)] text-xs">Address</h4>
@@ -648,7 +648,7 @@ exports[`Stepper > renders with size sm horizontal correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-8 text-sm group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+20px)] right-[calc(-50%+20px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+20px)] end-[calc(-50%+20px)]"></div>
       </div>
       <div class="mt-2">
         <h4 id="reka-stepper-item-title-v-2" class="font-medium text-[var(--ui-text)] text-xs">Shipping</h4>
@@ -675,29 +675,29 @@ exports[`Stepper > renders with size sm horizontal correctly 1`] = `
 exports[`Stepper > renders with size sm vertical correctly 1`] = `
 "<div role="group" aria-label="progress" data-linear="" data-orientation="vertical" class="flex gap-4">
   <div class="flex flex-col gap-4">
-    <div aria-current="true" data-state="active" data-orientation="vertical" class="group relative w-full flex text-left gap-2">
+    <div aria-current="true" data-state="active" data-orientation="vertical" class="group relative w-full flex text-start gap-2">
       <div class="relative"><button type="button" data-state="active" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-8 text-sm group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
         </button>
-        <div data-orientation="vertical" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] left-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[38px]"></div>
+        <div data-orientation="vertical" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[38px]"></div>
       </div>
       <div class="mt-2">
         <h4 id="reka-stepper-item-title-v-0" class="font-medium text-[var(--ui-text)] text-xs">Address</h4>
         <p id="reka-stepper-item-description-v-1" class="text-[var(--ui-text-muted)] text-wrap text-xs">Add your address here</p>
       </div>
     </div>
-    <div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-left gap-2">
+    <div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-start gap-2">
       <div class="relative"><button type="button" data-state="inactive" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-8 text-sm group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
         </button>
-        <div data-orientation="vertical" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] left-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[38px]"></div>
+        <div data-orientation="vertical" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[38px]"></div>
       </div>
       <div class="mt-2">
         <h4 id="reka-stepper-item-title-v-2" class="font-medium text-[var(--ui-text)] text-xs">Shipping</h4>
         <p id="reka-stepper-item-description-v-3" class="text-[var(--ui-text-muted)] text-wrap text-xs">Set your preferred shipping method</p>
       </div>
     </div>
-    <div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-left gap-2">
+    <div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-start gap-2">
       <div class="relative"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" tabindex="-1" aria-describedby="reka-stepper-item-description-v-5" aria-labelledby="reka-stepper-item-title-v-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-8 text-sm group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full">3</div>
         </button>
@@ -721,7 +721,7 @@ exports[`Stepper > renders with size xl horizontal correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-14 text-xl group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-7" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+36px)] right-[calc(-50%+36px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+36px)] end-[calc(-50%+36px)]"></div>
       </div>
       <div class="mt-3.5">
         <h4 id="reka-stepper-item-title-v-0" class="font-medium text-[var(--ui-text)] text-lg">Address</h4>
@@ -732,7 +732,7 @@ exports[`Stepper > renders with size xl horizontal correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-14 text-xl group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-7" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+36px)] right-[calc(-50%+36px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+36px)] end-[calc(-50%+36px)]"></div>
       </div>
       <div class="mt-3.5">
         <h4 id="reka-stepper-item-title-v-2" class="font-medium text-[var(--ui-text)] text-lg">Shipping</h4>
@@ -759,29 +759,29 @@ exports[`Stepper > renders with size xl horizontal correctly 1`] = `
 exports[`Stepper > renders with size xl vertical correctly 1`] = `
 "<div role="group" aria-label="progress" data-linear="" data-orientation="vertical" class="flex gap-4">
   <div class="flex flex-col gap-4">
-    <div aria-current="true" data-state="active" data-orientation="vertical" class="group relative w-full flex text-left gap-3.5">
+    <div aria-current="true" data-state="active" data-orientation="vertical" class="group relative w-full flex text-start gap-3.5">
       <div class="relative"><button type="button" data-state="active" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-14 text-xl group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-7" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
         </button>
-        <div data-orientation="vertical" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] left-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[62px]"></div>
+        <div data-orientation="vertical" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[62px]"></div>
       </div>
       <div class="mt-3.5">
         <h4 id="reka-stepper-item-title-v-0" class="font-medium text-[var(--ui-text)] text-lg">Address</h4>
         <p id="reka-stepper-item-description-v-1" class="text-[var(--ui-text-muted)] text-wrap text-lg">Add your address here</p>
       </div>
     </div>
-    <div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-left gap-3.5">
+    <div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-start gap-3.5">
       <div class="relative"><button type="button" data-state="inactive" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-14 text-xl group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-7" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
         </button>
-        <div data-orientation="vertical" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] left-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[62px]"></div>
+        <div data-orientation="vertical" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[62px]"></div>
       </div>
       <div class="mt-3.5">
         <h4 id="reka-stepper-item-title-v-2" class="font-medium text-[var(--ui-text)] text-lg">Shipping</h4>
         <p id="reka-stepper-item-description-v-3" class="text-[var(--ui-text-muted)] text-wrap text-lg">Set your preferred shipping method</p>
       </div>
     </div>
-    <div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-left gap-3.5">
+    <div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-start gap-3.5">
       <div class="relative"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" tabindex="-1" aria-describedby="reka-stepper-item-description-v-5" aria-labelledby="reka-stepper-item-title-v-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-14 text-xl group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full">3</div>
         </button>
@@ -805,7 +805,7 @@ exports[`Stepper > renders with size xs horizontal correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-6 text-xs group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-3" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+16px)] right-[calc(-50%+16px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+16px)] end-[calc(-50%+16px)]"></div>
       </div>
       <div class="mt-1.5">
         <h4 id="reka-stepper-item-title-v-0" class="font-medium text-[var(--ui-text)] text-xs">Address</h4>
@@ -816,7 +816,7 @@ exports[`Stepper > renders with size xs horizontal correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-6 text-xs group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-3" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+16px)] right-[calc(-50%+16px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+16px)] end-[calc(-50%+16px)]"></div>
       </div>
       <div class="mt-1.5">
         <h4 id="reka-stepper-item-title-v-2" class="font-medium text-[var(--ui-text)] text-xs">Shipping</h4>
@@ -843,29 +843,29 @@ exports[`Stepper > renders with size xs horizontal correctly 1`] = `
 exports[`Stepper > renders with size xs vertical correctly 1`] = `
 "<div role="group" aria-label="progress" data-linear="" data-orientation="vertical" class="flex gap-4">
   <div class="flex flex-col gap-4">
-    <div aria-current="true" data-state="active" data-orientation="vertical" class="group relative w-full flex text-left gap-1.5">
+    <div aria-current="true" data-state="active" data-orientation="vertical" class="group relative w-full flex text-start gap-1.5">
       <div class="relative"><button type="button" data-state="active" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-6 text-xs group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-3" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
         </button>
-        <div data-orientation="vertical" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] left-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[30px]"></div>
+        <div data-orientation="vertical" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[30px]"></div>
       </div>
       <div class="mt-1.5">
         <h4 id="reka-stepper-item-title-v-0" class="font-medium text-[var(--ui-text)] text-xs">Address</h4>
         <p id="reka-stepper-item-description-v-1" class="text-[var(--ui-text-muted)] text-wrap text-xs">Add your address here</p>
       </div>
     </div>
-    <div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-left gap-1.5">
+    <div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-start gap-1.5">
       <div class="relative"><button type="button" data-state="inactive" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-6 text-xs group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-3" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
         </button>
-        <div data-orientation="vertical" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] left-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[30px]"></div>
+        <div data-orientation="vertical" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[30px]"></div>
       </div>
       <div class="mt-1.5">
         <h4 id="reka-stepper-item-title-v-2" class="font-medium text-[var(--ui-text)] text-xs">Shipping</h4>
         <p id="reka-stepper-item-description-v-3" class="text-[var(--ui-text-muted)] text-wrap text-xs">Set your preferred shipping method</p>
       </div>
     </div>
-    <div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-left gap-1.5">
+    <div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-start gap-1.5">
       <div class="relative"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" tabindex="-1" aria-describedby="reka-stepper-item-description-v-5" aria-labelledby="reka-stepper-item-title-v-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-6 text-xs group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full">3</div>
         </button>
@@ -889,7 +889,7 @@ exports[`Stepper > renders with title slot correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
       <div class="mt-2.5">
         <h4 id="reka-stepper-item-title-v-0" class="font-medium text-[var(--ui-text)] text-sm">Title slot</h4>
@@ -900,7 +900,7 @@ exports[`Stepper > renders with title slot correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
       <div class="mt-2.5">
         <h4 id="reka-stepper-item-title-v-2" class="font-medium text-[var(--ui-text)] text-sm">Title slot</h4>
@@ -931,7 +931,7 @@ exports[`Stepper > renders with ui correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
       <div class="mt-2.5">
         <h4 id="reka-stepper-item-title-v-0" class="text-[var(--ui-text)] text-sm font-bold">Address</h4>
@@ -942,7 +942,7 @@ exports[`Stepper > renders with ui correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
       <div class="mt-2.5">
         <h4 id="reka-stepper-item-title-v-2" class="text-[var(--ui-text)] text-sm font-bold">Shipping</h4>
@@ -973,7 +973,7 @@ exports[`Stepper > renders without linear correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
       <div class="mt-2.5">
         <h4 id="reka-stepper-item-title-v-0" class="font-medium text-[var(--ui-text)] text-sm">Address</h4>
@@ -984,7 +984,7 @@ exports[`Stepper > renders without linear correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
       <div class="mt-2.5">
         <h4 id="reka-stepper-item-title-v-2" class="font-medium text-[var(--ui-text)] text-sm">Shipping</h4>
diff --git a/test/components/__snapshots__/Stepper.spec.ts.snap b/test/components/__snapshots__/Stepper.spec.ts.snap
index a1ef1d490d..3472863b12 100644
--- a/test/components/__snapshots__/Stepper.spec.ts.snap
+++ b/test/components/__snapshots__/Stepper.spec.ts.snap
@@ -7,7 +7,7 @@ exports[`Stepper > renders with as correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true"></span></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
       <div class="mt-2.5">
         <h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-[var(--ui-text)] text-sm">Address</h4>
@@ -18,7 +18,7 @@ exports[`Stepper > renders with as correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-5" aria-hidden="true"></span></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
       <div class="mt-2.5">
         <h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-[var(--ui-text)] text-sm">Shipping</h4>
@@ -49,7 +49,7 @@ exports[`Stepper > renders with class correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true"></span></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
       <div class="mt-2.5">
         <h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-[var(--ui-text)] text-sm">Address</h4>
@@ -60,7 +60,7 @@ exports[`Stepper > renders with class correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-5" aria-hidden="true"></span></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
       <div class="mt-2.5">
         <h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-[var(--ui-text)] text-sm">Shipping</h4>
@@ -91,7 +91,7 @@ exports[`Stepper > renders with content slot correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true"></span></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
       <div class="mt-2.5">
         <h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-[var(--ui-text)] text-sm">Address</h4>
@@ -102,7 +102,7 @@ exports[`Stepper > renders with content slot correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-5" aria-hidden="true"></span></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
       <div class="mt-2.5">
         <h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-[var(--ui-text)] text-sm">Shipping</h4>
@@ -133,7 +133,7 @@ exports[`Stepper > renders with custom slot correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true"></span></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
       <div class="mt-2.5">
         <h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-[var(--ui-text)] text-sm">Address</h4>
@@ -144,7 +144,7 @@ exports[`Stepper > renders with custom slot correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-5" aria-hidden="true"></span></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
       <div class="mt-2.5">
         <h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-[var(--ui-text)] text-sm">Shipping</h4>
@@ -175,7 +175,7 @@ exports[`Stepper > renders with default slot correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true"></span></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
       <div class="mt-2.5">
         <h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-[var(--ui-text)] text-sm">Address</h4>
@@ -186,7 +186,7 @@ exports[`Stepper > renders with default slot correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-5" aria-hidden="true"></span></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
       <div class="mt-2.5">
         <h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-[var(--ui-text)] text-sm">Shipping</h4>
@@ -217,7 +217,7 @@ exports[`Stepper > renders with defaultValue correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="completed" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true"></span></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="completed" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="completed" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
       <div class="mt-2.5">
         <h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-[var(--ui-text)] text-sm">Address</h4>
@@ -228,7 +228,7 @@ exports[`Stepper > renders with defaultValue correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-5" aria-hidden="true"></span></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
       <div class="mt-2.5">
         <h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-[var(--ui-text)] text-sm">Shipping</h4>
@@ -259,7 +259,7 @@ exports[`Stepper > renders with description slot correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true"></span></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
       <div class="mt-2.5">
         <h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-[var(--ui-text)] text-sm">Address</h4>
@@ -270,7 +270,7 @@ exports[`Stepper > renders with description slot correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-5" aria-hidden="true"></span></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
       <div class="mt-2.5">
         <h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-[var(--ui-text)] text-sm">Shipping</h4>
@@ -301,7 +301,7 @@ exports[`Stepper > renders with indicator slot correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full">Indicator slot</div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
       <div class="mt-2.5">
         <h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-[var(--ui-text)] text-sm">Address</h4>
@@ -312,7 +312,7 @@ exports[`Stepper > renders with indicator slot correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full">Indicator slot</div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
       <div class="mt-2.5">
         <h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-[var(--ui-text)] text-sm">Shipping</h4>
@@ -343,7 +343,7 @@ exports[`Stepper > renders with items correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true"></span></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
       <div class="mt-2.5">
         <h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-[var(--ui-text)] text-sm">Address</h4>
@@ -354,7 +354,7 @@ exports[`Stepper > renders with items correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-5" aria-hidden="true"></span></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
       <div class="mt-2.5">
         <h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-[var(--ui-text)] text-sm">Shipping</h4>
@@ -385,7 +385,7 @@ exports[`Stepper > renders with modelValue correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="completed" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true"></span></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="completed" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="completed" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
       <div class="mt-2.5">
         <h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-[var(--ui-text)] text-sm">Address</h4>
@@ -396,7 +396,7 @@ exports[`Stepper > renders with modelValue correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-5" aria-hidden="true"></span></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
       <div class="mt-2.5">
         <h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-[var(--ui-text)] text-sm">Shipping</h4>
@@ -427,7 +427,7 @@ exports[`Stepper > renders with neutral color correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-bg-inverted)] group-data-[state=active]:bg-[var(--ui-bg-inverted)] focus-visible:outline-[var(--ui-border-inverted)]">
           <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true"></span></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-bg-inverted)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-bg-inverted)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
       <div class="mt-2.5">
         <h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-[var(--ui-text)] text-sm">Address</h4>
@@ -438,7 +438,7 @@ exports[`Stepper > renders with neutral color correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-bg-inverted)] group-data-[state=active]:bg-[var(--ui-bg-inverted)] focus-visible:outline-[var(--ui-border-inverted)]">
           <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-5" aria-hidden="true"></span></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-bg-inverted)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-bg-inverted)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
       <div class="mt-2.5">
         <h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-[var(--ui-text)] text-sm">Shipping</h4>
@@ -469,7 +469,7 @@ exports[`Stepper > renders with size lg horizontal correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-12 text-lg group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-6" aria-hidden="true"></span></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+32px)] right-[calc(-50%+32px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+32px)] end-[calc(-50%+32px)]"></div>
       </div>
       <div class="mt-3">
         <h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-[var(--ui-text)] text-base">Address</h4>
@@ -480,7 +480,7 @@ exports[`Stepper > renders with size lg horizontal correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-12 text-lg group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-6" aria-hidden="true"></span></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+32px)] right-[calc(-50%+32px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+32px)] end-[calc(-50%+32px)]"></div>
       </div>
       <div class="mt-3">
         <h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-[var(--ui-text)] text-base">Shipping</h4>
@@ -507,29 +507,29 @@ exports[`Stepper > renders with size lg horizontal correctly 1`] = `
 exports[`Stepper > renders with size lg vertical correctly 1`] = `
 "<div role="group" aria-label="progress" data-linear="" data-orientation="vertical" class="flex gap-4">
   <div class="flex flex-col gap-4">
-    <div aria-current="true" data-state="active" data-orientation="vertical" class="group relative w-full flex text-left gap-3">
+    <div aria-current="true" data-state="active" data-orientation="vertical" class="group relative w-full flex text-start gap-3">
       <div class="relative"><button type="button" data-state="active" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-12 text-lg group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-6" aria-hidden="true"></span></div>
         </button>
-        <div data-orientation="vertical" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] left-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[54px]"></div>
+        <div data-orientation="vertical" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[54px]"></div>
       </div>
       <div class="mt-3">
         <h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-[var(--ui-text)] text-base">Address</h4>
         <p id="reka-stepper-item-description-v-0-0-1" class="text-[var(--ui-text-muted)] text-wrap text-base">Add your address here</p>
       </div>
     </div>
-    <div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-left gap-3">
+    <div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-start gap-3">
       <div class="relative"><button type="button" data-state="inactive" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-12 text-lg group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-6" aria-hidden="true"></span></div>
         </button>
-        <div data-orientation="vertical" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] left-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[54px]"></div>
+        <div data-orientation="vertical" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[54px]"></div>
       </div>
       <div class="mt-3">
         <h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-[var(--ui-text)] text-base">Shipping</h4>
         <p id="reka-stepper-item-description-v-0-0-3" class="text-[var(--ui-text-muted)] text-wrap text-base">Set your preferred shipping method</p>
       </div>
     </div>
-    <div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-left gap-3">
+    <div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-start gap-3">
       <div class="relative"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" tabindex="-1" aria-describedby="reka-stepper-item-description-v-0-0-5" aria-labelledby="reka-stepper-item-title-v-0-0-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-12 text-lg group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full">3</div>
         </button>
@@ -553,7 +553,7 @@ exports[`Stepper > renders with size md horizontal correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true"></span></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
       <div class="mt-2.5">
         <h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-[var(--ui-text)] text-sm">Address</h4>
@@ -564,7 +564,7 @@ exports[`Stepper > renders with size md horizontal correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-5" aria-hidden="true"></span></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
       <div class="mt-2.5">
         <h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-[var(--ui-text)] text-sm">Shipping</h4>
@@ -591,29 +591,29 @@ exports[`Stepper > renders with size md horizontal correctly 1`] = `
 exports[`Stepper > renders with size md vertical correctly 1`] = `
 "<div role="group" aria-label="progress" data-linear="" data-orientation="vertical" class="flex gap-4">
   <div class="flex flex-col gap-4">
-    <div aria-current="true" data-state="active" data-orientation="vertical" class="group relative w-full flex text-left gap-2.5">
+    <div aria-current="true" data-state="active" data-orientation="vertical" class="group relative w-full flex text-start gap-2.5">
       <div class="relative"><button type="button" data-state="active" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true"></span></div>
         </button>
-        <div data-orientation="vertical" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] left-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[46px]"></div>
+        <div data-orientation="vertical" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[46px]"></div>
       </div>
       <div class="mt-2.5">
         <h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-[var(--ui-text)] text-sm">Address</h4>
         <p id="reka-stepper-item-description-v-0-0-1" class="text-[var(--ui-text-muted)] text-wrap text-sm">Add your address here</p>
       </div>
     </div>
-    <div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-left gap-2.5">
+    <div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-start gap-2.5">
       <div class="relative"><button type="button" data-state="inactive" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-5" aria-hidden="true"></span></div>
         </button>
-        <div data-orientation="vertical" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] left-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[46px]"></div>
+        <div data-orientation="vertical" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[46px]"></div>
       </div>
       <div class="mt-2.5">
         <h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-[var(--ui-text)] text-sm">Shipping</h4>
         <p id="reka-stepper-item-description-v-0-0-3" class="text-[var(--ui-text-muted)] text-wrap text-sm">Set your preferred shipping method</p>
       </div>
     </div>
-    <div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-left gap-2.5">
+    <div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-start gap-2.5">
       <div class="relative"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" tabindex="-1" aria-describedby="reka-stepper-item-description-v-0-0-5" aria-labelledby="reka-stepper-item-title-v-0-0-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full">3</div>
         </button>
@@ -637,7 +637,7 @@ exports[`Stepper > renders with size sm horizontal correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-8 text-sm group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-4" aria-hidden="true"></span></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+20px)] right-[calc(-50%+20px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+20px)] end-[calc(-50%+20px)]"></div>
       </div>
       <div class="mt-2">
         <h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-[var(--ui-text)] text-xs">Address</h4>
@@ -648,7 +648,7 @@ exports[`Stepper > renders with size sm horizontal correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-8 text-sm group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-4" aria-hidden="true"></span></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+20px)] right-[calc(-50%+20px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+20px)] end-[calc(-50%+20px)]"></div>
       </div>
       <div class="mt-2">
         <h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-[var(--ui-text)] text-xs">Shipping</h4>
@@ -675,29 +675,29 @@ exports[`Stepper > renders with size sm horizontal correctly 1`] = `
 exports[`Stepper > renders with size sm vertical correctly 1`] = `
 "<div role="group" aria-label="progress" data-linear="" data-orientation="vertical" class="flex gap-4">
   <div class="flex flex-col gap-4">
-    <div aria-current="true" data-state="active" data-orientation="vertical" class="group relative w-full flex text-left gap-2">
+    <div aria-current="true" data-state="active" data-orientation="vertical" class="group relative w-full flex text-start gap-2">
       <div class="relative"><button type="button" data-state="active" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-8 text-sm group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-4" aria-hidden="true"></span></div>
         </button>
-        <div data-orientation="vertical" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] left-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[38px]"></div>
+        <div data-orientation="vertical" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[38px]"></div>
       </div>
       <div class="mt-2">
         <h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-[var(--ui-text)] text-xs">Address</h4>
         <p id="reka-stepper-item-description-v-0-0-1" class="text-[var(--ui-text-muted)] text-wrap text-xs">Add your address here</p>
       </div>
     </div>
-    <div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-left gap-2">
+    <div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-start gap-2">
       <div class="relative"><button type="button" data-state="inactive" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-8 text-sm group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-4" aria-hidden="true"></span></div>
         </button>
-        <div data-orientation="vertical" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] left-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[38px]"></div>
+        <div data-orientation="vertical" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[38px]"></div>
       </div>
       <div class="mt-2">
         <h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-[var(--ui-text)] text-xs">Shipping</h4>
         <p id="reka-stepper-item-description-v-0-0-3" class="text-[var(--ui-text-muted)] text-wrap text-xs">Set your preferred shipping method</p>
       </div>
     </div>
-    <div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-left gap-2">
+    <div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-start gap-2">
       <div class="relative"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" tabindex="-1" aria-describedby="reka-stepper-item-description-v-0-0-5" aria-labelledby="reka-stepper-item-title-v-0-0-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-8 text-sm group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full">3</div>
         </button>
@@ -721,7 +721,7 @@ exports[`Stepper > renders with size xl horizontal correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-14 text-xl group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-7" aria-hidden="true"></span></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+36px)] right-[calc(-50%+36px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+36px)] end-[calc(-50%+36px)]"></div>
       </div>
       <div class="mt-3.5">
         <h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-[var(--ui-text)] text-lg">Address</h4>
@@ -732,7 +732,7 @@ exports[`Stepper > renders with size xl horizontal correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-14 text-xl group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-7" aria-hidden="true"></span></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+36px)] right-[calc(-50%+36px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+36px)] end-[calc(-50%+36px)]"></div>
       </div>
       <div class="mt-3.5">
         <h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-[var(--ui-text)] text-lg">Shipping</h4>
@@ -759,29 +759,29 @@ exports[`Stepper > renders with size xl horizontal correctly 1`] = `
 exports[`Stepper > renders with size xl vertical correctly 1`] = `
 "<div role="group" aria-label="progress" data-linear="" data-orientation="vertical" class="flex gap-4">
   <div class="flex flex-col gap-4">
-    <div aria-current="true" data-state="active" data-orientation="vertical" class="group relative w-full flex text-left gap-3.5">
+    <div aria-current="true" data-state="active" data-orientation="vertical" class="group relative w-full flex text-start gap-3.5">
       <div class="relative"><button type="button" data-state="active" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-14 text-xl group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-7" aria-hidden="true"></span></div>
         </button>
-        <div data-orientation="vertical" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] left-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[62px]"></div>
+        <div data-orientation="vertical" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[62px]"></div>
       </div>
       <div class="mt-3.5">
         <h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-[var(--ui-text)] text-lg">Address</h4>
         <p id="reka-stepper-item-description-v-0-0-1" class="text-[var(--ui-text-muted)] text-wrap text-lg">Add your address here</p>
       </div>
     </div>
-    <div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-left gap-3.5">
+    <div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-start gap-3.5">
       <div class="relative"><button type="button" data-state="inactive" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-14 text-xl group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-7" aria-hidden="true"></span></div>
         </button>
-        <div data-orientation="vertical" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] left-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[62px]"></div>
+        <div data-orientation="vertical" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[62px]"></div>
       </div>
       <div class="mt-3.5">
         <h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-[var(--ui-text)] text-lg">Shipping</h4>
         <p id="reka-stepper-item-description-v-0-0-3" class="text-[var(--ui-text-muted)] text-wrap text-lg">Set your preferred shipping method</p>
       </div>
     </div>
-    <div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-left gap-3.5">
+    <div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-start gap-3.5">
       <div class="relative"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" tabindex="-1" aria-describedby="reka-stepper-item-description-v-0-0-5" aria-labelledby="reka-stepper-item-title-v-0-0-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-14 text-xl group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full">3</div>
         </button>
@@ -805,7 +805,7 @@ exports[`Stepper > renders with size xs horizontal correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-6 text-xs group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-3" aria-hidden="true"></span></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+16px)] right-[calc(-50%+16px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+16px)] end-[calc(-50%+16px)]"></div>
       </div>
       <div class="mt-1.5">
         <h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-[var(--ui-text)] text-xs">Address</h4>
@@ -816,7 +816,7 @@ exports[`Stepper > renders with size xs horizontal correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-6 text-xs group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-3" aria-hidden="true"></span></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+16px)] right-[calc(-50%+16px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+16px)] end-[calc(-50%+16px)]"></div>
       </div>
       <div class="mt-1.5">
         <h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-[var(--ui-text)] text-xs">Shipping</h4>
@@ -843,29 +843,29 @@ exports[`Stepper > renders with size xs horizontal correctly 1`] = `
 exports[`Stepper > renders with size xs vertical correctly 1`] = `
 "<div role="group" aria-label="progress" data-linear="" data-orientation="vertical" class="flex gap-4">
   <div class="flex flex-col gap-4">
-    <div aria-current="true" data-state="active" data-orientation="vertical" class="group relative w-full flex text-left gap-1.5">
+    <div aria-current="true" data-state="active" data-orientation="vertical" class="group relative w-full flex text-start gap-1.5">
       <div class="relative"><button type="button" data-state="active" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-6 text-xs group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-3" aria-hidden="true"></span></div>
         </button>
-        <div data-orientation="vertical" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] left-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[30px]"></div>
+        <div data-orientation="vertical" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[30px]"></div>
       </div>
       <div class="mt-1.5">
         <h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-[var(--ui-text)] text-xs">Address</h4>
         <p id="reka-stepper-item-description-v-0-0-1" class="text-[var(--ui-text-muted)] text-wrap text-xs">Add your address here</p>
       </div>
     </div>
-    <div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-left gap-1.5">
+    <div data-state="inactive" data-orientation="vertical" class="group relative w-full flex text-start gap-1.5">
       <div class="relative"><button type="button" data-state="inactive" data-orientation="vertical" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-6 text-xs group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-3" aria-hidden="true"></span></div>
         </button>
-        <div data-orientation="vertical" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] left-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[30px]"></div>
+        <div data-orientation="vertical" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] start-[calc(50%-1px)] -bottom-[10px] w-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] top-[30px]"></div>
       </div>
       <div class="mt-1.5">
         <h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-[var(--ui-text)] text-xs">Shipping</h4>
         <p id="reka-stepper-item-description-v-0-0-3" class="text-[var(--ui-text-muted)] text-wrap text-xs">Set your preferred shipping method</p>
       </div>
     </div>
-    <div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-left gap-1.5">
+    <div data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" class="group relative w-full flex text-start gap-1.5">
       <div class="relative"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="vertical" tabindex="-1" aria-describedby="reka-stepper-item-description-v-0-0-5" aria-labelledby="reka-stepper-item-title-v-0-0-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-6 text-xs group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full">3</div>
         </button>
@@ -889,7 +889,7 @@ exports[`Stepper > renders with title slot correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true"></span></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
       <div class="mt-2.5">
         <h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-[var(--ui-text)] text-sm">Title slot</h4>
@@ -900,7 +900,7 @@ exports[`Stepper > renders with title slot correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-5" aria-hidden="true"></span></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
       <div class="mt-2.5">
         <h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-[var(--ui-text)] text-sm">Title slot</h4>
@@ -931,7 +931,7 @@ exports[`Stepper > renders with ui correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true"></span></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
       <div class="mt-2.5">
         <h4 id="reka-stepper-item-title-v-0-0-0" class="text-[var(--ui-text)] text-sm font-bold">Address</h4>
@@ -942,7 +942,7 @@ exports[`Stepper > renders with ui correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-5" aria-hidden="true"></span></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
       <div class="mt-2.5">
         <h4 id="reka-stepper-item-title-v-0-0-2" class="text-[var(--ui-text)] text-sm font-bold">Shipping</h4>
@@ -973,7 +973,7 @@ exports[`Stepper > renders without linear correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true"></span></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
       <div class="mt-2.5">
         <h4 id="reka-stepper-item-title-v-0-0-0" class="font-medium text-[var(--ui-text)] text-sm">Address</h4>
@@ -984,7 +984,7 @@ exports[`Stepper > renders without linear correctly 1`] = `
       <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-[var(--ui-bg)] group-data-[state=active]:text-[var(--ui-bg)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-elevated)] focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-[var(--ui-primary)] group-data-[state=active]:bg-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]">
           <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-5" aria-hidden="true"></span></div>
         </button>
-        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] left-[calc(50%+28px)] right-[calc(-50%+28px)]"></div>
+        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-[var(--ui-border-accented)] top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-[var(--ui-primary)] start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
       </div>
       <div class="mt-2.5">
         <h4 id="reka-stepper-item-title-v-0-0-2" class="font-medium text-[var(--ui-text)] text-sm">Shipping</h4>